Completely unrelated image because I love this photo.

Reduce friction and improve productivity by implementing a Design Language System

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 Style Guide that we use at Zuto, 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 (and because it’s a great article).

I wanted to outline some things from the article that will hopefully help those who might not understand why a tech company have this “thing” called a style guide. I also want to help you understand how we use ours at Zuto, what it’s value is for us as developers and how I hope it can help us to prototype more.

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.”
- Airbnb

While we do have a Style Guide in place at Zuto and we have used the components that it is made up of to produce many of our products; we are trying to improve on the “shared understanding of our visual style” — side of things. However, our design team are hard at work on figuring out the best way to display and visualise what Zuto is as a brand. 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

As I said above, if we already have a DLS in place, prototyping is easy and quick. Using the style guide, 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 and continue designing the prototype in the browser with the help of designers. 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 logic.

If we really got this process down, our lives as developers would be much easier. The design team 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 of those things faster and more often. It will hopefully move us away from trying to build completely perfect products first time around and instead work on the MVP, test its value and iterate. If we are using elements from our style guide, then there should be no need to make small pixel perfect adjustments.

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.
- Airbnb

So development was quicker, 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 your tech department as a whole being committed to maintaining a style guide/DLS and following it’s guidelines. If you are able to get all engineers/designers/product owners, invested in the value that a DLS will bring, then hopefully the passion to maintain it and use it will come too!