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.
What Is a Design System?
A design system can have a positive impact on business goals, workflow, team and user happiness, and on shaping the brand experience for the customers and the employees. 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.
11 Benefits of Design Systems for Every Member of the Team
- Scalability
- Maintainability
- Productivity
- Consistency
- Improved code and design quality
- Better knowledge sharing
- Avoiding siloed knowledge
- Closing the brand-product gap
- Promoting the company’s design philosophy and principles
- Better brand and guideline adoption through shared ownership
- Promoting equality
1. Scalability
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.
A design system lets you build more products without exponentially increasing your team. This works by centralizing 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 organizational 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 — in other words, 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 centralized design decisions.
Designers can focus on the flow and solving specific problems instead of how a button looks. Decisions around colors, contrast, shapes, and more are centralized 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.
2. Maintainability and Continuous Improvement
The centralized nature of design systems makes maintaining products much easier. Fixes and improvements in the design system instantly propagate to all products.
Changes in the UI occur frequently. This happens for different reasons. You may want to improve accessibility or optimize 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.
Externalizing the UI to a centralized 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. Externalizing basic UI decisions to a third party means the product team has one less thing to worry about.
3. Productivity, Speed, and Cost Improvements
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 product's image and the user experience. A great first impression can make customers choose your product over a competitor. Increased development speed means fewer people can do more, or you can ship faster. This has a dramatic effect on your company’s bottom line. Especially at scale.
The main productivity boost with design systems comes from standardizing decisions across products and from externalizing the management of those decisions to a central team.
Increased productivity means fewer people can build more in the same amount of time. This reduces costs and allows you to quickly bring new features to market. Design systems are a huge cheat code in improving your team’s productivity.
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. 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- and data-driven design mode. Designs are now not only the result of a designer’s intuition, but verified with quantitative data.
4. Code and Design Quality
Set up your design system like a product with a dedicated team.
Designers and developers who work together 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 optimize it for the user experience. Developers will make sure a component is accessible, customizable, 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 specialize 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.
5. Consistency
Consistency improves 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 standardizes 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 figures 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 competitor’s.
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 badly. 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.
6. Knowledge Sharing
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.
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 company’s values and culture across teams.
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 touchpoint anyone has with the system and sets the expectation for quality.
What makes a design system’s documentation special is that targeting is built in. You know exactly who your audience is and why they came. 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 are 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.
7. 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 standardize.
On the one side you standardize the where and what. All UI-related knowledge is shared in the design system. Anything from accessibility, colors, 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 standardize 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.
8. 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 organization 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.
9. Shared Design Philosophy and 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 for how to design at your organization.
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 and 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 and 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.
10. Share Ownership
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, or other content pages
- Send out surveys to ask for feedback
- Directly approach individuals 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
- Organize 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.
11. Promote Equality
Doing what is right becomes more and more important for employees but also for companies. Equality and inclusion is one of those aspects where design systems can have a small impact.
One important aspect is of course accessibility. A standardized 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 and 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.
