Style Guide, Airbnb and Prototyping continued

To continue from my last post where I introduced the new Simple Prototyping Kit that I have been working on, I wanted to write about an article that I read by Design at Airbnb. It talks about some really important practices and discusses how they moved over to a Design Language System (DLS) - not too dissimilar to our own Zuto Style Guide, and how that helped them to quickly prototype, speed up their design process and release products much faster. I recommend reading the article before reading this post, just for some context.

I wanted to outline some things from the article that will hopefully help those who might not understand why we have a style guide, how we use it or how it can help us to prototype more, to get to grips with it and understand it's value.

One quote from the article stood out for me:

The DLS provides us with a shared understanding of our visual style, and streamlines contributions to a single system. This system also enables all of us to prototype and experiment with ideas in high fidelity faster and at a lower cost.

While we do have a Style Guide in place and we have used the components that it is made up of to produce many of our products; I think at Zuto we sometimes struggle with the "shared understanding of our visual style" - side of things. However, I believe design are hard at work on figuring out the best way to display and visualise what Zuto is as a brand (you might have seen some of the posters in the corridor of some "new" logo designs). Discovering the best way to use that brand across our Style Guide is hopefully what will help more of us at Zuto to gain a "shared understanding of our visual style".

Once we have created a DLS with a so called "visual style", prototyping becomes much easier because we no longer have to worry about fonts and colours (the finer details), we can focus more on the functionality of products that we want to build/prototype.

It enables product reviews to focus on the actual concepts and experiences of a design, rather than padding, colors and type choices.

-Airbnb, Building a Visual Language

Back to prototyping...
As I said above, if we already have a DLS in place, prototyping is easy and quick. Using the Simple Prototyping Kit, we can knock up really quick and simple high fidelity wireframes, using only elements from our Style Guide. We can then use those prototypes to present our ideas to product owners or our peers. Moving on from there, we can start to mock up a more established React prototype using the create-react-prototype tool. Then when it comes to actually implementing your prototype, you will have already done a lot of the groundwork, allowing you to focus on the functionality.

If we really got this process down, our lives as developers would be much easier. Design would carry a lot less weight on their shoulders too, because they would no longer have to create fully fledged designs anymore. Also, product owners would benefit from the fact we would be building much more MVPs, rather than all singing all dancing pixel perfect products.

I believe that prototyping will enable us to design and build better products, and do both those things faster and more often. It will prevent pixel pushing as we are using elements from the Style Guide, it will reduce the load that Design carry, and it will encourage engineers to learn more about and take more interest in the Style Guide.

When talking about the effect the DLS had on their process, Airbnb wrote:

Development is generally faster, since product engineers can focus more on writing the feature logic rather than the view code. Additionally, engineers and designers now share a common language.

So development is quicker as I said before, but not only that, design and engineers are on the same page, which massively boosts productivity and reduces push backs!

However, all of the above is dependent on the department as a whole being committed to maintaining the Style Guide and following it's guidelines.

Calum Flanagan

Read more posts by this author.

Subscribe to Zuto Tech Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!