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 maturity, size, and complexity, presenting key data and insights can help convince management of their necessity. 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.
đĄWeâve worked with thousands of companies like Adobe and Uber to help them make the case for a design system. If you need help, request a demo and weâll show you zeroheight and help create a plan for winning leadership approval. đĄ
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 Sparkboxconducted anexperimentto 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 theCarbon Design System. A simple form page developed with a design system took47% less timethan 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 was2 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 between30% and 35%of tech-reduced costs thanks to their design systems.
đ Eventbrite conducted a study on the impact of their design system, hosted on zeroheight, and found that they saved 534 days of engineering effort after launch đ
We can then take all these different figures from these companies and estimate that, on average, development costs are37% faster thanks to implementing a design system. Implementing a design system can save a lot of time (and money) on your projects. Driving this point home could be a game-changer in convincing 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 a30% to 50%reduction in time spent on design work.
Similar to what Sparkbox did,Figma also conducted an experimentwhere designers were observed to be34%more efficient when using a design system. This translates to the equivalent of adding3.5 additional designersto 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 to212 design hoursper 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 mere30 seconds. They reported that their design system has resulted in a significant time-saving of6,480 hours annuallyacross 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 yearand27% 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 ofher 2019 talk, Anja KlĂŒverexplained that theyincreased 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 toBryn Rayâs calculations, by using the design systemâs efficiency, theyâve been able to deliver from 277 person-hours to190 person-hours, achieving a frequency improvement from 11 to16 deliveries, freeing up45% 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 to23%
A design system can also be useful in helping developers produce code that is more visually consistent with the design, whichSparkbox observed through their experimentationexplaining 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.â
Forbesreveals that one of the main benefits of having good consistency is that it can help increase revenue by up to23%. They explain that investing in a consistent brand presentation across all platforms creates a trustworthy user experience and thus more potential conversions. Something thatNielsen Normand Groupexplains 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 canimprove 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 Rayused 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 thatrevenue 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 Rayshares their quality rating going from 66% to 78% when comparing before and after using a design system, with a total of18%relative improvement in quality.
Increasing your productâs quality also means implementing power accessibility efforts. Design systems can assist organizations inachieving accessibility goalsby 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, andWestpacare just a few examples of accessible design systems.Sparkboxâs experimentnoted 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. AtAlibaba, they also estimated their design system helped with maintenance with a65% decrease in the codebase and up to 20% less ongoing maintenance.A similar observation made by Christiano Rastelliwho measured how dramatically they successfully reduced the amount and frequency of change.
Pooya Kamel from Alibabaalso noticed a55% increase in PageSpeedscore for web channels. A critical number to consider whenForbesexplains 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. AtAlibaba, they estimate a50% faster design-to-development handoff efficiency. Similarly,Twitchâs design systems teamsays that âthe system [addresses]80% of what design and development needso 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 theirDesign 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 toBryn 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 toForrester, 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 ofDesign 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 reasonto 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 thensave 16.74 monthsin the end result. This gives anROI of 120%and a saving of nearly$100,440per developer annually from a project perspective.
On his side,Hipmunkâs design system manager Ryan Lumestimates that the developerâs hourly rate is $85/hour and that they could save up to$11,050/yearjust 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 Lumclaims 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 yearper designer from doing those same tasks repeatedly. From a broader perspective,the Smashing Magazine maths calculationestimated theROI 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 save20.52 monthswith the design system resulting in$102,600saved per designer annually.
Smashing Magazine estimates an$871,400 net gainsthanks to a design system with a135% ROIfor both the design and development sides.
Team ROI
Regarding the numbers from our lastHow 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 andRyan Lumâs estimated time saved per component, it would then represent a saving of$91,000 annuallyjust to build new components from scratch. Back to the Smashing Magazine example, they estimate that a 5-designer team would then represent$513,000 annuallyin savings when looking at the design team alone.
But it becomes even more impressive when we add the engineering part. Based on ourHow 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 takeRyan Lumâs calculationsand consider they save 2.5 hours from creating components from scratch, it would save between$444,200 to $777,350per 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,400on a project perspective when looking at the development team alone!
Ultimately, Smashing Magazine estimates an$871,400 net gainsthanks to a design system with a135% ROIfor both the design and development sides.
Similarly,Lily Dart shared that Lloyds Banking Groupâs design system was able tosave up to $190,000 per projectand estimated that theyâd be able to save $3.5 million in a6-month periodeven 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 that65% 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 to37% 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 productquality 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 to23% in revenue.
Design systems can also bring impressive efficiency gains to teams. The collaborative aspect of a design system can lead to a50% faster design-to-development handoffefficiency and canaddress 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 wherezeroheight 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.
Join our community onzheroes, or hit us up onTwitter!
