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 several weeks meeting with fellow designers, developers, and product managers to determine viability and requirements. Based on what I heard, I began fleshing out a backlog of features. This in turn allowed me to develop user stories, articulate personas, and sketch out the begining stages of the app navigation. A cycle of design, prototyping and testing allowed us to develop what can now be seen at waxvine.com.
The application has depth but not much breadth. In other words, the user is not required to navigate far in order to create lots of data. From the dashboard, the user can navigate to a library (i.e. style guide), view its content, and then choose to edit that content. Updates to categories and library settings occur in context within dialogs. Because of this, we decided to use Facebook's ReactJS framework. This allowed us to logically break up our code while maintaining a high level of performance in what we generally treated as a single-page application.
Show More
I spent several weeks meeting with fellow designers, developers, and product managers to determine viability and requirements. Based on this information, I was able to create personas that I felt best represented our core users.
The user is not required to navigate much in order to create lots of data. From the dashboard, the user can navigate to a library (i.e. style guide), view its content, and then choose to edit that content. Updates to categories and library settings occur in context within dialogs.
These sketches are based on feeback heard during some early user testing. Mostly, the concepts are unchanged from my inital thinking, but I did simplify the dashboard modules, removing unnecessary content (e.g. Status). These sketches would later form the foundation for the final UIs.
Using the dashboard as my template, I created these wireframes illustrating device break-points and general layout. Since the page layouts are so consistent througout the application, I was able to use these to inform how the other UIs would behave.
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 sometimes produced conceptual designs for new product ideas. In this case, I created visuals that could be used to gather requirements and help determine viability of those ideas both with existing and new customers.
This applciation, known as Account Insight, was an attempt to enter the financial sector. More specifically, it was meant to provide banking account managers with data to surface evidence of lost revenue (e.g. "We're not charging enough in fees!").
Working with a 12 column layout, my goal was to create some guidance for all the UIs starting with what a dashboard might look like.
Some high-fidelity examples used for presentations with customers, and internal teams and leadership.
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.
