The Waxvine Application

Overview

Waxvine is a cloud-based content management solution designed specifically for creating design-related guidance such as styleguides, brand guides, and design systems. A functional MVP can be seen at waxvine.com.

The Challenge

Hosting a design system can have considerable overhead if both the content and the system hosting that content need to be managed. Based on my work creating and managing the design standards at Expeditors, I wanted to explore if this was a universal problem and if there was a practical solution to decrease the effort involved.

Initial Research & Ideation

Before diving into development, I met 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 beginning 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 main takeaways that got the ball rolling:

• It needs to be accessible for people inside and outside an organization
• It needs to support the display of images, typography, color swatches, attachments
• It needs to accommodate multiple users working on the same content
• It needs to accommodate categorization of the content

• Nice to have: the ability to display functional examples
• Nice to have: the ability to export (e.g. PDF)
• Nice to have: a read-only version for sharing with those stakeholders who don’t need editing privileges

Understanding our Users

After spending time talking with designers, developers, and product managers, I was able to create personas that I felt best represented our core users. Like with all personas, they helped to better articulate the motivations, goals, and pain points that these users might experience.

Technology

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. styleguide), 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 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.

The User's Journey

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. styleguide), view its content, and then choose to edit that content. Updates to categories and library settings occur in context within dialogs.

Sketching the Experience

Initial Concepts

Refined Sketches

Testing the Experience

Balancing formal usability testing with expert reviews allowed me to keep feature development on schedule while ensuring that those features were well vetted. I typically tested with at least 6 users, starting out with paper prototypes (seen here). As I moved the product along, I quickly increased the fidelity as well as the complexity––in some cases using development environments which I feel tends to increase the quality of the feedback.

Some examples from an early paper prototyping test:

Responsive Behavior

Using the dashboard as my template, I created these wireframes illustrating device break-points and general layout. Since the page layouts are so consistent throughout the application, I was able to use these to inform how the other UIs would behave.

Implemented UIs

Final UIs based on my initial concepts. Showcased here are adding color swatches, images, fonts, and tables as well as managing categories.

Mobile Display

Although there was no explicit requirement for a mobile version of the app, I wanted to ensure that it displayed well on smaller devices.

Conclusion

There are many reasons that startups fail to be million dollar ideas. In this case, I think it was a combination of timing, market saturation, and the incredible challenge of reaching users with the right message. Besides this, without capital, self-funding any product is a hurdle that proved too much to overcome in the time I allocated.

While it would have been great to have thousands of paying users using Waxvine, I am satisfied with my work on the project. The experience has made me a better designer and leader. My goal now is to take what I've learned into my next opportunity and help that organization create their million dollar idea.