My Startup: Waxvine
In 2017, I began working full-time on what was up to that point a side project. Waxvine provides a content management platform specifically designed to support UX and UI experts and the content they create.
The idea for creating a hosted solution for design systems was based on my work creating and managing the design standards at Expeditors. It took a dedicated team to manage the standards which applied across multiple teams. I wanted to create a solution that would reduce the cost of implementation and maintenance.
Before diving into development, I spent time talking with fellow designers to determine viability and requirements. Along the way, I learned that my original concepts were too ambitious and what was really needed was a simple way to quickly document design standards that are shareable with teammates. Once I was able to partner with the right developer, work began on determining the technical underpinnings from data storage to the front-end solution. We built a first version that was fantastically horrible but it's what led to the current, fantastically great version.
Documentation like style guides have content requirements that go beyond what a baseline CMS provides. Since the appliction was developed using Facebook's JavaScript library React, we also used Draft (their rich-text editor framework) as a foundation for our solution. This allowed us to give users the ability to add fancy things like color swatches.
Show More
Some initial sketches that would later form the foundation for the final UIs.
Dashboard wireframes illustrating device break-points and general layout.
Final UIs based on my initial concepts.
Although there was no explicit requirement for a mobile version of the app, I wanted to ensure that it displayed well on smaller devices.
Waxvine Branding
One of the most challenging aspects of building a startup is marketing. When we originally launched, the website was very simple. Too simple, really. It didn't say enough about what we offered, our message was too vague, and it had no personality.
To address some of these concerns, I set out to refine our product definition. I wanted a very simple, straightforward message. I came up with Simply, style guides.
At its most basic, our product allows users to create style and brand guides. In reality, our users could create all sorts of design-related documenation but I thought that focusing the pitch was an important part of the plan.
My strategy was really two parts: refine the message and show some personality. I wanted a metaphor that would make a positive first impression as well as support the updated marketing content. Using a construction metaphor allowed me to create several scenes that would speak to individual sections in a fun and lighthearted way.
Show More
A construction metaphor would serve to bridge a potentional gap in our messaging: who we are and what is our product. I also wanted imagery that was easy to create and maintain as I fleshed out our marketing content.
I wanted a name that was made up of real words, was easy to pronounce, and was memorable. Waxvine represents the effort that goes into distilling large amounts of information into something that is easily consumed.
I had similar goals for the logo: something recognizable, and timeless. With the use of negative space, the avatar represents both the "W" and the "V" and is a powerful representative of our brand.
Billing Analytics
The goal of Globys's flagship product is to allow large telecoms to better serve their business customers by enabling them to see their calling data in much greater detail. Its design worked well for the time (circa 2000), but needed a redesign to stay relevant in the eyes of its users.
The application hadn't seen any significant updates in several years. Starting in 2012, I set out to create a vision for how this product would look and behave moving forward. Not only should it meet the needs of the user, but I wanted to set a course for the product design that would be easy to maintain and evolve in the future.
Front-end Refresh
Although both a visual as well as a technical update would be necessary to ensure the product's future viability, a complete update could take years. It was necessary to address the aging look and feel more immediately. I worked concurrently on a visual-only refresh so that we could spend the time necessary to further explore a more complete update.
Forward Thinking: Conceptual Designs
Not only was the look and feel aging but the application's underpinnings were looking long in the tooth as well. I worked closely with product and engineering to research and ultimately propose a plan for updating both. Since we were already using Bootstrap for the visual-only refresh, it made sense for us to use this as our front-end solution.
Show More
I created navigation diagrams of the existing application to ensure that the team had an accurate reference to begin design efforts.
The use of Bootstrap made sense for several reasons. Many of our largest customers were already using it for their existing products. This in turn would decrease the time for Globys teams to re-brand the application per those customer's own brand requirements. My knowledge and experience with Bootstrap would allow me to better peer-program with engineering to speed development.
Before and after UIs
My goal with this logo was to create something professional looking that also felt real. It was used as a placeholder during design and development as well in presentation material. It would eventually be replaced with the customer's logo.
Globys' billing product normally integrates into an existing customer portal. Because of this, it's important that those customers know what and how they can change the look of Globys' solution to match their own internal branding guidelines. I created the following document to provide an overview of what can be done to support this need.
While the visual-only refresh was continuing, I concurrently began work on ideation of what the application's future might look like. Although the product owner had years of experience with the product, I wanted to start with a blank slate. The last thing I wanted was to enter the design phase with a whole bunch of assumptions. So, based on lots of analysis, conversations, and questions, I iterated through several design concepts.
I created a fresh look on top of a tried and true foundation for responsive design, Bootstrap. Although there weren't immediate needs for a mobile solution, utilizing responsive solutions would ensure that the team could accommodate such a requirement when it came up.
Client Management
While at Globys, I often worked with product managers to explore potential product ideas. In this case, I provided some high-fidelity designs for an application that was meant to provide commercial account managers insights into their customers.
My goal was to create some compelling visuals that would serve as inspiration for high-level discussions. I designed it with the same visual look and feel of the billing application above in order to provide visual consistency across the Globys product portfolio.
Although the appliction was only ever conceptual, I wanted to ensure that it felt as real as possible. Creating a logo went a long way to give the application a feeling of legitimacy, which for the purposes of fleshing out requirements with end-users, went a long way. The application, for its short life, had the unimaginative name of Account Insight, hence the "ai" of the logo design.
