How to: measure a Design System’s impact
Getting buy-in for your design system can sometimes be challenging while also juggling feature work.
As designers, we know that the work we do has a substantial impact; however, it can sometimes be challenging at times to demonstrate to the relation to business growth. When we can show the value of our work, we can advocate for bigger design teams to help focus business goals around the needs of our users. We can also start driving value to focus on building on design systems so that designers can focus on higher value problems, moments of delight for our users and product quality.
Before we jump into ways we can start demonstrating the value of our work and the value of Design Systems, let’s first clarify what a Design System is.
What Is A Design System?
Before we get started, we should define what we mean by a design system as there are a couple of different interpretations of what it means. InVision outlined it well in their guide to Design Systems:
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
A design system isn’t a bunch of designed symbols or blocks of code. A design system consists of core building blocks that exist in design and development environments that create patterns that are defined by rules and principles.
How do you measure?
Measuring the impact of a Design System generally falls into two categories: subjective and objective.
Subjective Measurement
This might come in the form of surveying end-users or internal teams to get a pulse on how people’s opinion might change.
For end-users, this might come in the form of an NPS survey in hopes to see higher ratings, positive feedback, and increased trust of the product. End-users might see an improved experience from better accessibility or consistency in the experience.
For internal teams, this might be an internal survey that gauges improvements in workflow and adoption. You can ask questions like:
- How often do you find yourself using the Design System?
- What is one thing you would improve about the Design System?
- On a scale of 1 (strongly disagree) to 5 (strongly agree), does the Design System improve your workflow?
Objective Measurement
Sometimes the impact can be measured in a very objective way. You and your team can ask yourselves the following questions:
- Does the Design System have a component library?
- Does the Design System have robust documentation?
- Does the Design System have a process?
Measurement of the impact can also be tracked by certain metrics. For the end-user it might be looking at page load times, accessibility, etc. Ideally, when building out a design system, the team is working to unify code, address accessibility issues, etc. Perhaps you can also look at how many lines of code was removed or moved to use design tokens.
You can also measure impact to the product teams by measuring the adoption of your design system. Sean Rice and Jordan Reed at Keap wanted a way to understand which projects needed cleanup work, which projects may need new components and a general snapshot of design adoption. They created an internal tool to monitor design system usage in Sketch by building off ofnode-sketch.
Not only did this help understand adoption from a data point of view, but it also allowed the team to gain insights into areas of improvement and workflow issues.
Edited 1/29/2020 -The Keap team recently created an open-source tool, Sleuth for Sketch, to allow others to measure design system coverage across your design files.
What is the impact?
A design system can help solve pervasive business problems that occur when working at a small startup to a large corporation. Although a design system doesn’t make sense for every company, here are some of the major pain points that having a design system in place can help solve:
- The consistency and predictability in our products
- Design and engineering time and debt
- Product quality and bugs
In this article, you will learn how a design system will help improve three metrics in three key areas: user impact, business impact, and team impact. You will also understand new ways of measuring the impact.
User Impact
When thinking about the impact a design system has, we should always consider how it will impact the end-user experience. There are several ways a Design System helps improve the experience in terms of providing better quality and consistency.
Builds trust and consistency
The end-user expects a polished and consistent experience when using your product. A Design System can help refine the quality of your product by making the experience more consistent, predictable and accessible. This happens when design and development teams work on building a single source of truth.
Sample Objective
- Improve consistency and predictability of flights booking product.
Sample Key Results
- Increase NPS of the mobile flights product from 40% to 60%.
- Increase Design System coverage for flights product from 3% to 40%.
Bugs and errors
Often times components are built as one-off solutions due to sprints being fragmented approaches to building product. Without a design system, features are built from scratch rather than utilizing global components. This leads to multiple variations of the same component living parts of the codebase and more opportunities to become broken or inconsistent.
Every new hire and every new project increases variability in the process, development, and design. Unfortunately, this also leads to more room for error and potential bugs to be introduced.
Sample Objective
- Allow every traveler to book a flight without errors.
Sample Key Results:
- 100% of all booking buttons are WCAG compliant.
Business Impact
Having a team dedicated to building out a design system can be a smart business decision that can help some companies save time and money.
Saves company money
As a product matures, there becomes more knowledge and on-boarding needed to understand the complexities of the system. It takes more time and money to ship products to market without a system in place.
With a design system in place, product teams can build products more efficiently at scale, allowing us to focus on fine-tuning and creating more moments of delight for our customers.
We can get a rough number of cost savings with a simple formula:
Hours per week x 52 weeks x Hourly Rate x Team Number = Year Savings
For example, if a designer spends roughly 2.5 hours creating new components from scratch for 52 weeks (work weeks in a year) with an hourly rate of $70/hour, the company would save $9,100/year.
2.5 hours x 52 weeks x $70 x 1 designer = $9,100/year saved
2.5 hours x 52 weeks x $85 x 1 developer = $11,050/year saved.What might this look like for a small team of 2 designers and 7 developers?
2.5 hours x 52 weeks x $70 x 2 designers = $18,200
2.5 hours x 52 weeks x $85 x 7 developers = $77,350Annual savings = $95,550/year saved
Of course, the formula will need to be adjusted based for your company, but it gives you a way to measure cost savings to the company.
Reduces tech and design debt
When teams come together to build out a design system, it’s a fantastic opportunity to both unify the codebase and create shared styles and components. Designers will have a set of building blocks that can help develop new products that will continue to deliver a consistent experience. Developers will have a unified codebase that contains all the similar building blocks and a single place to modify components should they change.
Team Impact
Not only does a design system affect the business and user, but it also helps improve many aspects of how we work as a team.
Communication and knowledge sharing
Building a design system is a group effort that benefits from a diverse team and requires collaboration amongst many key stakeholders. By including individuals across different teams, you help bridge communication and create shared product knowledge. Typically a design system team might involve people from design, development, mobile, marketing, product, and management. You can measure this by looking at team adoption.
Sample Objective:
- Create a shared language between cross-functional teams.
Sample Key Results
- Increase usage of Design System from 3% to 10%.
- Create an MVP living design system language website.
- Increase internal feedback response rate to 80%.
Speed and efficiency
Christiano Rastelli wrote up an amazing article documenting how his team measured the impact of the Cosmos Design System at Badoo. Looking into the git log, he was able to visually show a clear and evident correlation of the impact of the Design System.
In the above visualization pulled from the article, it’s clear that since the Cosmos Design System was introduced, the amount and frequency of change reduced dramatically.
“The reason for introducing a design system in a company is not because so people can work less, but because so people can work better.”
Reduces the time needed for quality assurance
When building out a design system, each building block is crafted with consideration of how it will scale across the entire product. Each block is then used to create components that are built outside the needs of a specific feature. Since each component that is created becomes a single source of truth, the need for site-wide QA is reduced since components are usually built to stand alone. Teams tend to see a huge reduction in the amount of QA needed before launching new features and products.
You can use a tool such as Storybook to be a single source of truth for components and have a single place to do QA.
What now?
It’s important to measure the success of the Design System from multiple standpoints to help guide business decisions and find areas of improvement. Hopefully, this article helped provide some ideas of how you might start to measure the impact of your Design System.
What are some of the ways you measure Design System impact at your company? Let me know by commenting below!
Further Reading
- Measuring the Impact of a Design System: Using data to visualize the positive impact of Design Systems.
- Getting Executive Buy-in for Your Design System: Steps and initiatives to help gain buy-in.
- A Design System’s Impact: A case study of getting buy-in for a design system at Lyft.
- Can Design Systems Fix the Relationship Between Designers & Developers?: How Design Systems can bridge communication gaps between cross-functional teams.
- How Much is A Design System Worth?: Understanding the value and impact of design systems.
