For many features implemented in digital products, a simple competitive benchmark is enough to convince management, particularly in e-commerce. “If everyone else is doing it, we can just copy with pride,” is an often-heard statement. But the same standard seems not to apply to design systems.
This is most probably due to the fact that, at least at first, design systems are perceived as a very abstract investment — the value they’ll ultimately produce is not immediately visible and noticeable. On top, the upfront investment can seem huge to management compared to smaller, more concrete features design and development teams could be working on that produce more graspable value (and technical/design debt) more quickly.
In the following, we will first give a very brief introduction to design systems. Subsequently, we’ll introduce our formula, elaborate on the assumptions we made, and explain the different parameters you can tweak. We’ll conclude with a specific example of how to apply it.
It allows for creating and replicating design work quickly and at scale, alleviating strain on design and development resources. It leads to less repetitive work, which enables a focus on larger, more complex problems, more creativity, more innovation, and therefore has a wide range of advantages:
We believe that if Henry Ford lived today and worked on a digital Model T, he’d use a design system.
Second, in a centralized model, a design system often evolves into a product of its own, complete with product managers, customer support, and so on. However, for the sake of keeping our formula as feasible as possible, we’re focusing only on designers and developers in the following. Design system‒induced productivity gains for such teams are easy to benchmark, and you’ll see that just this limited scope already makes for a very compelling case.
Our design system ROI formula has two components:
$$ cost = max(frac{240}{X},6) times X% + min(60 – frac{240}{X}, 54) times Y% $$ $$ gain = max(frac{120}{X},3) times frac{Z%}{2} + min(60 – frac{240}{X}, 54) times Z% $$ $$ ROI = frac{gain – cost}{cost} times 100 $$
Having calculated these two components, it’s straightforward to use them in the standard formula to calculate ROI. In the following, we’ll explain all of the different parts in more detail.
Our formula orients at the “Design System Efficiency Curve”, i.e., at first, you’ll see a drop in productivity due to the necessary upfront investment. Still, after a break-even point where the design system has grown enough to compensate for that, productivity gains are significant.
For a specific formula, however, it’s necessary to make some (conservative but adjustable) assumptions. In our case, we have agreed on the general assumptions below in discussions within a design system task force comprising representatives from our design and engineering teams at BestSecret Group.
$$ cost = max(frac{{color{red}240}}{X},{color{LimeGreen}6}) times X% + min({color{Cerulean}60} – frac{{color{red}240}}{X}, {color{BlueGreen}54}) times Y% $$ $$ gain = max(frac{{color{magenta}120}}{X},{color{green}3}) times frac{Z%}{2} + min({color{Cerulean}60} – frac{{color{red}240}}{X}, {color{BlueGreen}54}) times Z% $$
With these assumptions in place, we can now have a look at what the parameters X, Y, and Z mean.
$$ cost = max(frac{240}{{color{Fuchsia}X}},6) times {color{Fuchsia}X}% + min(60 – frac{240}{{color{Fuchsia}X}}, 54) times {color{orange}Y}% $$ $$ gain = max(frac{120}{{color{Fuchsia}X}},3) times frac{{color{Bittersweet}Z}%}{2} + min(60 – frac{240}{{color{Fuchsia}X}}, 54) times {color{Bittersweet}Z}% $$
X denotes the percentage of time invested in building the design system. If X=20, the formula gives us 240/20=12 months of ramp-up phase.
Note: For X<4.62, the formula “breaks down” since the ramp-up phase would be ≥5 years.
Y denotes the percentage of time invested in ongoing maintenance after the ramp-up phase. In our specific case, we assumed 0.5X, but essentially, Y could be anything.
Z denotes the amount of time saved by using the design system in percent. This is equal to productivity or efficiency gains.
X and Y are relatively straightforward to specify: you ‘just’ have to agree on how much time you want to / can spend taking care of the design system. However, Z is a different story. Since it’s the productivity gain yielded by the design system, it’s impossible to know the parameter precisely beforehand. So, how can we estimate Z in a meaningful way? Essentially, this is a predictive judgment, so we followed the advice by Kahneman et al. (2021) — considering the base rate of design system productivity gains by doing a literature review and averaging the numbers reported.
Klüver (2019), Ray (2018), and Slack (2019) report 50%, 31%, and 34% better efficiency for design teams, which means an average of Z=38.
Klüver (2019), Loomer (2016), and Sparkbox (n.d.) report 25%, 20%, and 47% better efficiency for development teams, which means an average of Z=31.
Hence, in our case, we calculated ROI separately for design and development teams with the two different values for Z, and then aggregated it afterwards. In the next section, we’ll guide you through how exactly that works.
Acme, Inc. has a team of 5 designers and a team of 10 developers who want to kick off building a design system together. They want to prove that the gains yielded by a design system in the mid- to long-term far exceed the necessary investment. Therefore, they grab the design system ROI formula and get going.
They estimate that everyone would probably be able to invest 30% (X=30) of their time during the ramp-up phase and afterwards 10% (Y=10) for maintenance. They moreover rely on the above base rates for productivity gains (Z=38 for design, Z=31 for development). They start with the ROI for the design team over the next five years.
On the cost side, 30% time investment means the ramp-up phase would be 240/30=8 months long. That is, 8*30%=2.4 months would be effectively spent on building the design system. Afterwards, 60-8=52 months remain for the 5-year period, and of those, 52*10%=5.2 months would be effectively spent on maintenance. Overall, there would be 7.6 months (out of five years) of work put into the design system.
$$ cost = max(frac{240}{30},6) times 30% + min(60 – frac{240}{30}, 54) times 10% Leftrightarrow $$ $$ cost = 8 times 30% + 52 times 10% = 2.4 + 5.2 = 7.6 $$
On the gain side, a ramp-up phase of 8 months would mean four months of half the productivity gains. That is 4*(38%/2)=0.76 months. Afterwards, for the remaining 52 months, we would see full productivity gains, i.e., 52*38%=19.76 months. Overall, the design system would therefore save the design team 20.52 months of needless work.
$$ gain = max(frac{120}{30},3) times frac{38%}{2} + min(60 – frac{240}{30}, 54) times 38% Leftrightarrow $$ $$ gain = 4 times 19% + 52 times 38% = 0.76 + 19.76 = 20.52 $$
Together with the 7.6 months of work spent on building and maintaining the design system, this yields an ROI of (20.52-7.6)/7.6=170%. In other words, you get $2.70 back for every dollar invested in the design system.
If one designer costs $5,000 a month, that means the design system would cost Acme, Inc. 7.6*$5,000*5=$190,000 while it would save them 20.52*$5,000*5=$513,000 when looking at the design team alone.
Doing the same thing for development is relatively straightforward based on the above. Since the designers and developers at Acme, Inc. agreed on everyone investing 30% for ramp-up and 10% for maintenance, the cost side stays exactly the same. Like the designers, the developers will be busy with the design system for effectively 7.6 months over five years.
On the gain side, however, we have to exchange the value for Z, from 38 to 31. Luckily, that’s the only thing, and the rest remains as above.
$$ gain = max(frac{120}{30},3) times frac{31%}{2} + min(60 – frac{240}{30}, 54) times 31% Leftrightarrow $$ $$ gain = 4 times 15.5% + 52 times 31% = 0.62 + 16.12 = 16.74 $$
So, in the case of development, we’d invest 7.6 months and save 16.74 months of unnecessary work. This gives us an ROI of (16.74-7.6)/7.6=120%.
If one developer costs $6,000 a month, that means the design system would cost Acme, Inc. 7.6*$6,000*10=$456,000 while it would save them a whooping 16.74*$6,000*10=$1,004,400 when looking at the development team alone.
Combining the calculations for design and development, therefore, yields the following:
To top things off and make them look more like an approximation, you can round the final numbers and indicate the error. We’ve played around with some variance in the parameters (please feel free to do so on your own) and for the final result, ±25% seems to be reasonable. For instance, “we estimate 135% ROI and $900,000 (±225,000) net gains from the design system over five years.”
Also, we have not considered productivity gains for product, QA, and user research teams and so on (who as well benefit from a design system) in our formula. One reason for this is simplicity — we wanted to provide a formula that is feasible and easily understandable. Another is that efficiency gains in design and development teams are at the core of a design system, and benchmarks are widely available for determining the parameter Z. (All this, however, also means that the true ROI of a design system is probably much higher than what our formula yields, which makes the case even stronger rather than weaker.)
Despite all these limitations in our approach, the value of a design system is undeniable. We’re confident that our formula can reliably prove this and help build a compelling case, at the very least, for cases similar to ours. Otherwise, the underlying assumptions can be easily fine-tuned. And if in doubt, it’s always possible to implement a design system MVP and prove its value through a controlled experiment. We just hope we can help you get that MVP approved.
We want to thank Ben Callahan and Martin Schmitz for taking the time to read earlier drafts of this article and providing invaluable feedback. And, of course, a big shout-out to all members of the BestSecret Design System Task Force.
