Down the design systems rabbit hole
Hey there! I’m Helen, and I lead the Design Systems team at Wise.
In this post, I’d like to introduce you to the wonderful world of design systems.
Setting up and using a design system for your product positively impacts quality and reduces the time and effort it takes to design and ship new features.
In this post, I’ll answer the following questions:
- What is a design system?
- Why would I use one?
- How does the design system work at Wise?
- How can I get started?
Before I start, I want to mention Yesenia Perez-Cruz’s excellent Expressive Design Systems — this book was a big inspiration to me.
Okay, let’s dive in.
What is a design system?
A design system is a collection of principles, guidelines and patterns that work together to enable the rapid development of high quality user experiences. Design systems enable quality and reduce inconsistencies in the product that make our product harder to use and degrade the trust of our users.
You can think of a design system as existing at three levels:
1. The component library
At the lowest level we have the pattern or component library. This is a library of components such as buttons, dropdowns or currency pickers. The components can exist in Figma (for use by designers), or in code (for use by developers).
The benefit of a component library is obvious: we reduce duplicated effort, enabling designers and developers to solve new problems — not problems that have already been solved. But a component library alone does not ensure high quality user experiences. Giving someone all the lego pieces they need to make something awesome doesn’t mean they’ll succeed without some helpful instructions. That’s where guidelines come in.
2. Guidelines
Guidelines sit on top of the component library, offering guidance on how to use the components to build quality interfaces and flows. At this layer we can expect usage information and best practices for the components, and how to piece them together to form complete user experiences.
3. Principles and values
In the final layer, we have our principles and values. We talk about building “quality” user experiences, but what does this mean? If one person works from an understanding that quality means “innovative and pushing boundaries”, but to their colleague it means “robust and stable” — your product may be pulled in different directions.
Through our principles and values, we define what we prioritise. They answer the question “what decisions would we make that another company in our position may not?”. Our principles are our north star — tools that help steer us to better decisions at every level of product development.
Why would I use one?
Hopefully you’re already convinced! I’ve already called out some of the benefits of having the individual layers of the system in place. To summarise: a robust design system reduces the time taken to ship new features and improves product quality and consistency.
A good design system doesn’t restrict, but empowers its users. And this, of course, is what we’re aiming for.
How does the design system work at Wise?
Our Wise design system is called Neptune. It is maintained by the Design Systems team, a small (but growing) team of designers, engineers, and a writer. This is us — well, some of us. Our team has grown since this was taken.
Unlike our product teams we are not trying to make one part of the product better, but rather support all product teams to build better experiences. We place a strong emphasis on the scalability of Neptune, and enabling contributions.
We understand that people in product teams are best placed to describe their requirements, and know their domains better than we do. We believe that incorporating a range of ideas from people with deep knowledge of different areas of the product enhances the quality of the system for everyone.
So far, much of our focus has been on building out the components. We have component libraries on Figma, iOS, Android and Web. We also have some small amount of documented usage guidelines, and we’re looking at starting to expand those and adding some content guidelines now that Steph (our writer) has joined us.
How can I get started?
If you think your company could benefit from a design system, here are a few recommendations for getting started:
- Don’t be afraid to start small. While a dedicated team, vision workshops and stakeholder interviews are great — it’s just as valid to start with one or two people contributing reusable components to a library.
- Find others in your company who share your enthusiasm. Educate others and find people willing to help. Contributions both help lift the quality of the design system and increase buy-in.
- Regularly reflect on where you can have the most impact. It’s easy to get caught in the weeds when building out a design system. It’s good practice to regularly zoom out and ask yourself — are we focussing on the right thing? Is this where we can have the most impact?
- Don’t let perfection be the enemy of the good. Try things out and get feedback. What works for one company may not be well suited to another. Listen to your users and adapt as you go.
If you’d like to learn more, try a book on the subject or browse through the thousands of articles online about how people are managing design systems at other companies. Have a look at design systems in action, and see what they have in common and how they differ.
Wrapping up
At Wise we work a little bit differently. With so many autonomous teams, we find our design system essential for ensuring consistency and minimising duplicated effort. By investing in our design system we do more with less — working smarter, not harder.
So the next time you’re creating a new component, designing a new pattern or thinking about aligning the vision for your product, consider whether a design system could help you.
We’ve got a lot of exciting things in the pipeline, so keep an eye on this blog for further updates, or check out our open positions if you’re a designer, engineer or product manager enthusiastic about design systems.
Thanks for reading!
Written by: Helen Durrant
