What is the value of a design system?
Jules Mahe, Design Advocate
April 27, 2023
If you are in the process of starting a design system, you will likely encounter familiar questions such as: what is the value of a design system? What benefits does it bring? Why should we invest in one?
Although design systems can vary in their maturity, size, and complexity, presenting key data and insights can be helpful in convincing management of the necessity of a design system. To assist with this, we gathered a range of resources to help you demonstrate the value and benefits of a design system for your company.
Illustration of a computer monitor with a sticker that says “Best Value”
Design and tech efficiency from the design system benefits the front line
Explaining how efficient your design system is for your teams and projects is probably one of the best and most used arguments to prove the value of a design system. By reducing the time and resources spent on design, teams can focus on delivering better products and experiences, leading to higher customer satisfaction and a stronger brand reputation.
Faster development for tech
Design systems have their biggest impact down the line and numbers about tech efficiency can be quickly impressive once everything has been framed upstream.
Our friends at Sparkbox conducted an experiment to observe the cost reduction a design system can bring from a development perspective. They compared the time it took to complete a task with and without using the Carbon Design System. A simple form page developed with a design system took 47% less time than coding it manually. For submissions built from scratch, the median time was 4.2 hours, while for Carbon submissions, which included developers familiarizing themselves with the design system, it was 2 hours. We are close to a reduction of 50% of the time spent on front-end development.
On the other hand, Crédit Agricole shared similar numbers between 30% and 35% of tech-reduced costs thanks to their design systems.
We can then take all these different figures from these companies and estimate that, on average, development costs are 37% faster thanks to implementing a design system. It’s a lot of time (and money) you can save on your projects and it can be a game changer to convince your tech and leadership teams.
More efficient design production
From a design perspective, several companies have conducted experiments and surveys to assess the impact of their design systems. The results indicate that these systems can yield significant benefits, ranging from a 30% to 50% reduction in time spent on design work.
Similar to what Sparkbox did, Figma also conducted an experiment where designers were observed to be 34% more efficient when using a design system. This translates to the equivalent of adding 3.5 additional designers to their team of 7 product designers each week. With a total of 140 design hours per week available for this team, Figma estimates that using a design system can increase their output to up to 212 design hours per week, i.e. 9,964 hours total per year.
design costs can be reduced to 8,222 hours per year and 27% of time saved on design work
Telus’calculations indicate that the time taken to retrieve a standard symbol from the design system has been reduced by a factor of 20. This previously repetitive task, which used to take 10 minutes, can now be completed in a mere 30 seconds. They reported that their design system has resulted in a significant time-saving of 6,480 hours annually, across their 40,000-strong organization and 36,000 web pages.
Balancing between Telus’ and Figma’s numbers, we could then estimate that, on average, design costs can be reduced to 8,222 hours per year and 27% of time saved on design work (with design production being between 20% and 34% increase) thanks to implementing a design system. That is so much time designers can get back to focus on what matters most: user experience, emotion, research, etc. As part of her 2019 talk, Anja Klüver explained that they increased the UX part from 30% to 50% after implementing a design system. Due to the cost reduction, they were able to transfer these savings to the user experience “because you need more investment for UX to make the product work better.”
Higher quality products
Produce faster to increase the number of deliveries
If designers and developers mainly save time through a design system, how much does it mean from a delivery perspective? According to Bryn Ray’s calculations, by using the design system’s efficiency, they’ve been able to deliver from 277 person hours to 190 person hours, achieving a frequency improvement from 11 to 16 deliveries, freeing up 45% of productive work time. In total, Bryn estimates that each team could deliver work in 31% fewer person hours.
Improve consistency to increase revenue
one of the main benefits of having good consistency is that it can help increase revenue by up to 23%
A design system can also be useful in helping developers produce code that is more visually consistent with the design, which Sparkbox observed through their experimentation explaining that “using a design system helped [their] developers produce code that was more visually consistent with the design.” They also noted that from their 8 developers conducting the experiment, “one developer went from 14th place out of 16 for their scratch submission to first place for their Carbon submission” and that “the top two submissions for visual consistency used the design system.”
Forbes reveals that one of the main benefits of having good consistency is that it can help increase revenue by up to 23%. They explain that investing in a consistent brand presentation across all platforms creates a trustworthy user experience and thus more potential conversions. Something that Nielsen Normand Group explains too when it comes to perceived value in user interfaces “if, at a glance, users do not believe that the site is worth their time and effort, then they have little reason to stay.”
Consistency is also about creating something that users will remember. Forbes explains that just with color consistency, you can improve your brand recognition by up to 80%. They mention, “designing a logo that informs a cohesive color palette across all marketing materials, digital platforms and store shelves creates an environment that is conducive to their memory.”
Additionally, Bryn Ray used analytics data, changes in conversion rates, and sales figures to evaluate what can be attributed to the improvement in product quality. In other words, increasing checkout conversion rates directly affects gross revenue. Despite considering that this relationship was asymptotic, which means the rate of change reduces with the increase, they estimated that revenue changed by 4% for every 1% increase in quality.
Raise quality to improve efficiency
Design systems are also an excellent way to improve your products’ quality drastically. Bryn Ray shares their quality rating going from 66% to 78% when comparing before and after using a design system, with a total of 18% relative improvement in quality.
Increasing your product’s quality also means implementing power accessibility efforts. Design systems can assist organizations in achieving accessibility goals by ensuring that all design elements and code in the system is accessible. This reduces the risk of accessibility issues creeping into the organization’s digital experiences. Adobe, Zendesk, Clarity, and Westpac are just a few examples of accessible design systems. Sparkbox’s experiment noted that “one developer went from last place to the middle of the pack for accessibility when they used the design system.”
But accessibility isn’t the only quality criteria you should consider. At Alibaba, they also estimated their design system helped with maintenance with a 65% decrease in the codebase and up to 20% less ongoing maintenance. A similar observation made by Christiano Rastelli who measured how dramatically they successfully reduced the amount and frequency of change.
Pooya Kamel from Alibaba also noticed a 55% increase in PageSpeed score for web channels. A critical number to consider when Forbes explains that “39% will stop engaging if the site itself takes too long to load.”
Design systems can also assist you in building localization from the very beginning, including internationalization best practices, so that a truly cross-cultural experience is achieved. Among other features are flexible design for varying language length and font size, right-to-left language support, and support for local currencies, units, dates, times and addresses.
Laying the foundations for a solid, quality design system is a future investment in the quality of your future products.
Human efficiency
Better collaboration to reduce waste time
The main collaboration impact with a design system is clearly about the designer-developer relationship. At Alibaba, they estimate a 50% faster design-to-development handoff efficiency. Similarly, Twitch’s design systems team says that “the system [addresses] 80% of what design and development need so they can focus on the other 20%.”
50% faster design-to-development handoff efficiency
Impressive numbers about how much efficiency a design system can bring to a team from a collaborative perspective that is reflected in the final efficiency of the products. As Invision mentions in their Design Better’s Design System Handbook, “using a design system will keep you on budget by keeping your design and code overhead low, while still allowing you to grow and evolve your application.”
It’s also worth noting that the onboarding process is easier and faster with a design system as it’s less time spent by current team members onboarding others according to Bryn Ray’s testimony. In other words, work smarter, not harder.
Better retention
But team efficiency isn’t the only human benefit a design system can bring. According to Forrester, design systems can have an indirect positive impact on talent retention. Oftentimes, designers seek out more stimulating and challenging jobs away from firms that seem to solve the same design problems constantly. Design systems enable designers to maintain control over their work by documenting previously made design decisions and enabling their application across multiple products.
As Alla Kholmatova, author of Design Systems, says, “Designers become frustrated always solving the same problems, or not being able to implement their designs properly. Developers are tired of custom styling every component and dealing with a messy codebase.” Having a design system is now more and more strategic for organizations as it can attract and retain talent in a company. Another reason to make your design system public, as it will help you get the visibility you need to find the right people for your team.
How much money does a design system really save?
In light of all the benefits a design system can offer regarding collaboration, design, technology, people, etc., what is its true financial value?
Tech return on investment (ROI)
Smashing Magazine has done an impressive maths calculation to measure the ROI of a design system. For the technical part, they consider that the average cost of a developer is $6,000 per month. They then estimate that by investing 7.6 months of a developer’s time in building a design system, they would then save 16.74 months in the end result. This gives an ROI of 120% and a saving of nearly $100,440 per developer annually from a project perspective.
On his side, Hipmunk’s design system manager Ryan Lum estimates that the developer’s hourly rate is $85/hour and that they could save up to $11,050/year just from creating new components from scratch. Repetitive tasks can cost a lot, right?
Design ROI
If we only focus on the repetitive tasks perspective, Ryan Lum claims they could save 2.5 hours for designers annually by eliminating the need to create new components from scratch. By estimating a $70 hourly rate for the company, he estimates the company could save $9,100 per year per designer from doing those same tasks repeatedly. From a broader perspective, the Smashing Magazine maths calculation estimated the ROI design part to be 170%. Similar to their technical part calculation above, they consider the average cost of a designer to be $5,000 per month and estimate they would save 20.52 months with the design system resulting in $102,600 saved per designer annually.
Smashing Magazine estimates an $871,400 net gains thanks to a design system with a 135% ROI for both the design and development sides.
Team ROI
Regarding the numbers from our last How We Document report, design teams under 10 people are the majority (54% of respondents say their design team is between 1-10 people). Based on this majority and Ryan Lum’s estimated time saved per component, it would then represent a saving of $91,000 annually just to build new components from scratch. Back to the Smashing Magazine example, they estimate that a 5-designer team would then represent $513,000 annually in savings when looking at the design team alone.
But it becomes even more impressive when we add the engineering part. Based on our How We Document report, most respondents worked at companies under 100 people (37%) and we have between 4 to 7 engineers for one designer at this organization size, which means it would then lead to an engineering team between 40 to 70 people with a 10-person design team. If we take Ryan Lum’s calculations and consider they save 2.5 hours from creating components from scratch, it would save between $444,200 to $777,350 per year just for building new tech components with a team of 10 designers. Smashing Magazine estimates that a 10-developer team would save up to $1,004,400 on a project perspective when looking at the development team alone!
Ultimately, Smashing Magazine estimates an $871,400 net gains thanks to a design system with a 135% ROI for both the design and development sides.
Similarly, Lily Dart shared that Lloyds Banking Group’s design system was able to save up to $190,000 per project and estimated that they’d be able to save $3.5 million in a 6-month period even though they don’t have a massive design system.
Regarding all those numbers and calculations, if building a design system can be perceived as an investment, the benefits you’ll get from it are worth the price.
Wrap up
It is estimated that 65% of companies were using a design system in 2020, a figure that continues to grow. It’s not really a surprise as there are numerous benefits to having a design system for an organization, and it can significantly impact efficiency and productivity.
From a tech perspective, design systems can save up to 37% of development time and 30-35% of tech-reduced costs. As a result of improved design efficiency, design production time can be reduced by 27%, resulting in savings of 8,222 hours per year, while product quality can be improved by 18%. Further, design systems can increase consistency, leading to a higher level of user trust, resulting in a potential increase of up to 23% in revenue.
Design systems can also bring impressive efficiency gains to teams. The collaborative aspect of a design system can lead to a 50% faster design-to-development handoff efficiency and can address up to 80% of what design and development teams need. Design systems also make onboarding easier, and can indirectly improve talent retention by enabling designers to maintain control over their work.
Overall, investing in a design system can lead to a strong ROI for a company, making it a wise investment for any organization looking to improve their design and development processes.
Don’t forget that numbers are only one way to demonstrate the worth and importance of investing in a design system. It is likely that you will still need to share how your company will benefit from your design system. And if those numbers aren’t enough, why not show them by example? That’s where zeroheight can assist you in developing a well-documented design system in a fast and efficient way, which you can use to showcase your leadership what it would look like 😉
We’d love to hear from you if those numbers helped you or if you have other figures to share with us to enrich this article. Let us know what’s been helpful for you and feel free to share this post with anyone who needs some help in convincing them about investing in design systems.