Rapid Prototyping With a Living Style Guide

Prototyping is one of the most important aspects of a designer’s role. Prototypes allow us to make quick decisions about our products without having to spend time or money on the expensive process of building real things. Higher fidelity prototypes allow us to have greater confidence in the design decisions we make, but typically require a larger time investment to create. As designers, we are forever performing a balancing act between the amount of time required to create a prototype and the level of confidence that prototype gives us in the decisions we are making.

HTML Prototypes

At the high-fidelity level of prototypes (the far right side of the graph above) lives native HTML and CSS. Working directly with HTML and CSS allows us to work in the final medium earlier in the design process, which ultimately gives us more confidence in our designs. The trade-off is the larger time investment required to develop such a prototype.

At EventMobi, we built a tool that allows us to create prototypes that provide us confidence in our decisions, while keeping the effort low. Powered by our style guide, we have a full-fidelity, feature complete, clickable HTML prototype. We have merged the concept of a style guide and a prototype into a single, unified product for all design exploration to take place. As the prototype evolves, so too does the style guide, because they rely on each other. Our prototype offers a huge number of advantages over other prototyping methods.

The Source of Truth for Our Product

First and foremost, our prototype acts as the source of truth for the future vision of our product. Designers, developers, product managers, other business units and key stakeholders reference it on a daily basis. It replaces the need for detailed specification documents or lengthy conversations about intentions. Plus, by working directly in the browser, we are able to present work in the final medium much sooner in the process (our SaaS product is web based).

Speed and Confidence

Perhaps one of the biggest advantages of our approach is the speed at which we can gain high levels of confidence in our decisions. The prototype allows us to quickly experiment with various combinations of components to see what works and what doesn’t. It’s like building a house out of Lego — if one brick doesn’t fit, you can easily replace it with another.

Traditional prototyping methods (think paper prototypes or InVision) often make even minor changes, like item ordering or copy edits, time consuming. In our living prototype, we can build entirely new interfaces and product flows — that look and feel real — in minutes. This allows us to iterate more often and gives us a very high level of confidence in the decisions we make.

Consistency

Working quickly often introduces inconsistencies with existing components and patterns in the style guide. When working in Sketch or Photoshop it’s easy to be lackadaisical about inconsistencies, which in turn, lowers the effectiveness of our tests.

We believe firmly in ensuring consistency across the product. By combining our style guide with our prototype, we are able to create both the parts and the whole of a UI design system concurrently. This results in greater consistency across the product and removes a lot of the interpretation of components and their intended usage. We have real examples of every component in use.

Designers can quickly and easily see the impact that a change to an existing component might have across the entire product. It allows us to be more diligent and critical of changes, especially those impacting many patterns.

Advantages for User Testing

By including every page of our real product in the HTML prototype, it allows our user testing participants to explore more deeply during tests, offering us greater insight into what they are thinking and how they are approaching the problem. Designers can see how users would interact within the context of the entire product. These types of insights would not be possible with a typical, more limited-scope prototype where only certain user flows are anticipated and designed for.

Things to Consider

A few things have allowed our prototype to be successful. First of all, we started with a new project. Every component and interface was first created in the prototype, then moved to production. You can read more about how we manage that process in my post about living style guides. If you are working on a mature project, there is probably little value in rebuilding every interface of your existing product in prototype form. That would be working backwards. However, if you are looking to implement something like this in your own product, net-new features might be a great place to start.

We also have a relatively small design team (three at the time of writing). The small number of people contributing makes it easier to manage. I assume the administrative role, but the entire team has ownership, equal opportunity to contribute, and responsibility to ensure consistency.

Faster Outcomes

Ultimately, as designers, the sooner we are able to see the work in the final medium, the more confident we can be about our product. By working directly in the browser, we bypass a number of steps and expedite our design process. This allows us to make confident decisions, faster.