11 Fantastic Benefits of Design Systems
By now everyone seems to know that design systems are great. They make your work easier, faster and cheaper, you don’t even need designers anymore — or do you?
In this article I will talk about the known and not so well known benefits of implementing a design system. And before you get the wrong idea: no, you can’t fire all designers. A design system is an ever-evolving, living system. It needs to grow and adapt and for this you need designers and developers.
A design system can have a positive impact on business goals, workflow & happiness and on shaping the brand experience for the customers and the employees. The benefits can be categorised into these four groups: scalability, speed & quality, documentation and brand & culture.
Knowing the benefits can be useful when you try to convince your management that a design system is not a waste of money. Or when you want to convince your designers that it will not replace the creative part of their job.
Most companies run into issues when scaling up their products. The main issue is a non-linear increase in effort. This often happens both during development and maintenance. The issue is that adding more features and products increases complexity exponentially. This means you need additional people to align the user experience across all products. Luckily a design system can help with that.
Scaling the team
A design system lets you build more products without exponentially increasing your team. This works by centralising design and UI decisions and alignment.
The issue when scaling to more or bigger products with multiple teams is not technological but human.
Scaling and adding new teams creates mostly organisational issues. In a growing team you can't stay in sync with every designer and developer. You lose track of what people are working on. Controlling and aligning all projects becomes a daunting task requiring ever more people. And even then it's hard to assure common patterns, styles and quality standards. You end up with a semi-aligned set of products where components are rebuilt in different ways — a mess.
A design system in its most basic form is a collection of design and code decisions that everybody uses. Like a style guide but with components (like buttons or cards) as design and code resources. It's a framework of building blocks, based around centralised design decisions.
Designers can focus on the flow and solving specific problems instead of how a button looks like. Decisions around colors, contrast, shapes and more are centralised in the design system. The design system should be owned and managed by one dedicated team. This approach allows for adding more teams while assuring high quality and consistency. The same goes for code and code quality, as components are provided in a ready to use way, e.g. react components.
Maintainability & Continuous improvement
The centralised nature of design systems makes maintaining products much easier. Fixes and improvements in the design system instantly propagate to all products.
Changes on the UI occur frequently. This happens for different reasons. You may want to improve accessibility or optimise conversion after an A/B test. Another reason could be an update to your brand or the OS.
While business logic changes are often restricted to a single product, component updates affect all products. This makes them especially time consuming. They also lead to inconsistencies when not immediately implemented by all teams.
Externalising the UI to a centralised design system can drastically reduce these issues. A combination of components and design tokens can make updating products very easy. In the best case updating a dependency brings all changes into the products automatically. Externalising basic UI decisions to a third party means the product team has one less thing to worry about.
Speed & quality
A design system will always improve speed, quality and consistency in the long run. Many teams I talked to see this as the main reason for implementing a design system. Probably because it has a huge impact on your business metrics. Consistency and quality have a strong impact on your products image and the user experience. A great first impression can make customers choose your product over a competitor. Increased development speed means less people can do more, or you can ship faster. This has a dramatic effect on your company's bottom line. Especially at scale.
Productivity — speed & costs improvements
Increased productivity means fewer people can build more in the same time. This reduces costs and allows you to quickly bring new features to market. Design systems are a huge cheat in improving your team's productivity.
The main productivity boost with design systems comes from standardising decisions across products. And from externalising the management of those decisions to a central team.
The product teams only work with the design tokens and components provided in the system. For designers, this means they can focus on the big problems instead of how a button has to look like. For developers, translating designs into code gets much easier. Most of the interface is built with existing components. Developers can now focus on the business logic and the rare cases where custom UI is necessary.
Building new features or different versions of a flow for A/B testing becomes quick and cheap. As a result many teams move to a test & data driven design mode. Designs are now not only the result of a designers intuition, but verified with quantitative data.
Code & design quality
Setup your design system like a product with a dedicated team. Designers and developers who work full time on a design system that everyone uses, will make sure it's of the highest quality.
The secret to getting a high quality design system, is to set it up like any other product. You need a full-time, dedicated team including designers, developers and a product owner.
If a component, like a slider, is your product and not only a means to an end, you have much more time to spend on the details. Designers will work out all edge cases and optimise it for the user experience. Developers will make sure a component is accessible, customisable and has extensive test coverage.
Additionally, a design system is used by all product teams. This means it is constantly tested by your peers, both designers and developers. Some designers may specialise in accessibility while others have experience in typography. With a design system, all those people use and evaluate decisions and components. If something is off, they will let you know, at least if you have the right culture in place.
Consistency improves the visual quality and makes using your products easier. This is because the same patterns are used throughout all your products. A design system defines and standardises patterns, enabling all product teams to stay consistent.
When a user opens one of your apps, she interacts with your company. To her it is not apparent that different apps, or features within an app, are built by different teams in your company. She expects them all to work the same. She may even expect them to work the same as other apps on her phone. Once she figured out how a button looks in your app, she will look for this pattern. Because of this, reusing the same components reduces mental load and friction. This in turn leads to better conversion and a better experience, making users choose your app over a competitors.
Consistency also influences the perceived quality. Just like a restaurant with a random mix of cutlery, an app with too many different buttons looks scrambled together. This primes users and they will expect the app to perform bad. They may even perceive something as bad, that they would have normally ignored.
In product teams, consistency makes it easier to work on somebody else's project. A developer will have an easier time filling in for her colleague when everybody has a common understanding of how to write code.
Documentation is one of the most important parts of a design system. Good documentation makes sure your policies are understood and implemented by your colleagues. It allows new people to learn the system and transports the companies values and culture.
A design system, as the name implies, is the system your company uses to design and build products. It includes tools, methods and mindsets to solve the right problems in the right way.
If you do it right, no other documentation is needed for somebody to onboard onto a project. And you should do it right — if the design system is the product, the documentation is the frontend. It's the first touch point anyone has with the system and sets the quality expectation.
What makes a design system's documentation special, is that targeting is build in. You know exactly who your audience is and why they come. This means you can easily direct users to specific sections depending on key needs. You could have a "getting started" section, "tokens and components", and a "roadmap and releases" page.
Your audience gets even more precise when dividing content into "design" and "implementation". This makes it easy to share specific knowledge and guidelines. Designers get informed about brand, visual accessibility and common ux practices. Developers learn about programmatic accessibility, coding style and the approach to testing. As you can see the documentation doesn't just explain what there is to work with. Documentation is a tool to share and shape the company culture and how you work.
Once you have a somewhat established design system, you can think even bigger. Add a blog sharing stories about colleagues working successfully with the system. Make the documentation a place to suggest features or participate in other ways.
Avoiding the bus factor
The bus factor is a somewhat macabre name for the risk of losing knowledge due to a missing team member. Your colleague mustn't be run over by a bus for the issue to arise. Maybe she is sick, on vacation or joins a different company. Are you prepared for this situation?
If you have a well set up design system, you should be at least somewhat prepared. Mainly because it forces you to standardise.
On the one side you standardise the where and what. All UI-related knowledge is shared in the design system. Anything from accessibility, colors and typography to UI testing. It is all defined here and only here. This is important, because it means that if it is not in the design system documentation, it does not exist.
On the other side you also standardise the how. Naming, component usage, methodologies, coding style, everything is defined here.
These two aspects together make it very easy for somebody else to jump into your project. There is a common where, what and how. All that is left to learn is the project specific domain knowledge. Having a key member of your team go on vacation doesn't seem so scary anymore.
Brand & culture
Closing the brand-product-gap
Product teams creating apps using only traditional style guides, often end up with inconsistent results. The brand personality gets "lost in translation". Having one team translate a brand into interface elements can solve this issue.
Creating a UI component library from a brand philosophy can be tricky. On the one hand you need to keep the expressive branding aspects in mind. On the other hand, accessibility and a very diverse set of devices must be considered. This is a tedious job, requiring much experimentation and tweaking. Luckily with a design system this gets done by one team. The rest of the organisation gets to enjoy the results — tokens and components ready to use. Product teams can rest assured, knowing their designs will always be on brand.
A separate design systems team has another advantage. Without being tied to a specific platform, they have a broader idea of all possible applications. In their experimentation they will look at how something plays out on the web, mobile and other platforms.
In short, a carefully crafted design system assures that the brand personality is present in all products.
Shared design philosophy & principles
A design system is much more than colors and components. It lets you share and explain the philosophy and principles behind your design. You could say it's a hands on guide book for how to design at your organisation.
A design system provides a lot of components and choices, but it can never cover every last case. Designers will run into situations where they have to come up with unique solutions. This could be a problem specific to a certain business aspect or a dashboard screen that needs to be unique and engaging. Even though their solution is custom, it still must fit into your company's design. This is where your design philosophy & principles come in.
The design philosophy describes the what and why. For example “design overcomes issues to engage a broader audience“. Another philosophy could be “design delights to make tasks enjoyable and rewarding“.
The design principles connect to those ideas and explain the how. For example “we focus on accessibility to deliver a great experience to everybody“. This could be one aspect of the first philosophy. “Playful motion is used to convey state changes“ could be one principle that fits the second philosophy.
After learning your design philosophy & principles it will be easier to understand the decisions that lead to the tokens and components in the design system. It will also allow designers to build custom elements that fit with the design system.
Especially when starting a design system you will only cover the most common use cases. This means you rely on product designers rolling their own components. In those instances clearly communicating the what, why and how behind the design system is very important.
A common issue with brand adoption within teams is the missing feeling of ownership. A design system can make it possible to give everyone the feeling of ownership.
Product teams often don't care much about the brand. Some agency probably decided the branding together with the top management years ago. They didn't even bother consulting the people who have to work with the brand design every day. Colors are not tested for accessibility on screens and the design language was mainly developed for print.
Involving the entire design team in a rebrand is really hard, especially in big companies. In contrast, encouraging everybody to contribute to the design system is pretty easy. You can and should do it in many ways:
mention that “contributions are welcome“ on the homepage of your design system
add CTAs like “send a PR“, “provide feedback“ or “suggest an idea“ to component, token and other content pages
send out surveys to ask for feedback
directly approach individuals e.g. when you feel they have something to contribute
support people who try to contribute
share success stories about contributions on your blog, newsletter, etc.
mention contributions in your release notes
organise internal “meetups“ to present upcoming changes, collect feedback and get people involved
Getting people involved in your design system has many benefits:
Most importantly it helps you get buy-in from the team. They (rightfully) feel like it is their design system and slowly turn from users to advocates.
Building up a design system is a lot of work. If you can get help from your design and development peers, that is a great thing. Often they build a component in any case, and it only takes a little extra effort to make them ready for the design system.
Peer contributions mean you can fix bugs or improve features before the customers notice anything.
All in all contributions are a win for the adoption, development speed and overall quality of your design system.
Doing what is right becomes more and more important for employees but also for companies. Equality & inclusion is one of those aspects where design systems can have a small impact.
One important aspect is of course accessibility. A standardised set of colors and components allows you to assure that designs meet accessibility standards.
Apart from technology, communication has great potential for inclusion. It's what we do and what we say / show. Adjust your copy guidelines to teach people about inclusive language and common pitfalls. Providing illustration libraries or images that promote inclusion. Show people of diverse age, gender, ethnicity, people in wheelchairs or people recovering from injuries. Try to stay away from stereotypes and avoid your own bubble.
Often people are unaware of how they exclude others. Providing examples and ideas in the design system can open new doors for many who never thought about those topics.
These are what I found to be the 11 most important benefits of implementing a design system:
Improved code & design quality
Better knowledge sharing
Avoiding siloed knowledge
Closing the brand-product-gap
Promoting the design philosophy & principles
Better brand & guideline adoption through shared ownership
If you experienced others important benefits or disagree, please let me know.