27
March 2024

How do you know if your design system is giving you a return on investment?

Most people emphasize the importance of measuring the value of their design system. Yet, hardly anyone is actually doing it. What’s going on?
Sara Fazzini
Design Manager, Belka

In late 2023, Belka’s Sara Fazzini and Maria Sole Biondi interviewed designers, developers and managers at 27 companies in Europe and N-America to learn how they approach design systems. This article is the fifth in a series about what they learned. (Click here for more information.)

At Belka, we love results. The best way to know we’re doing meaningful work is measuring the actual impact it has. So one of the things we asked about in our series of interviews was how design system teams measure the impact of their work. 

Turns out, they don’t. At least, most of them.

Not because they don’t want to, but because knowing where to start measuring in a meaningful way — a way that is linked to company goals — is not as straightforward as it may seem.

So, if you're out there Googling 'how to measure design system impact' and feeling lonely, worry no more — you're not the only one.

Easier said than done

“In practice, we see that the design system has a positive impact on how we work, but I wouldn't even know where to start to measure it. It seems to me a totally invisible but very important thing.”
– UX Designer at a SaaS company.

Ask any designer or developer working on a design system, and they'll swear by its magic. They see how quickly their mockups come to life with pre-built components, how consistent the user interfaces across the product have become, and how delivery time has shrunk since developers have gotten their own library ready for use. 

But getting concrete measures of these improvements? It seems too much of a challenge. 

It seems like we're all so busy crafting and maintaining design systems, that measuring often takes a backseat. Yet, despite the lack of hard numbers, the gut feeling of the design system’s positive impact can often be enough to get resources allocated to it.

So, what's the point of measuring a design system's value anyway?

Measuring what matters to you

“We don't measure anything, but the evidence shows that we’re delivering faster. We’re completing tasks twice as fast as before, but we only sense this intuitively. It's time for us to begin measuring it systematically.”
– Product Designer at a fast-growing scaleup

When it comes to digital products, measuring something means keeping track of the progress and the impact of specific initiatives that matter to you and your organization. It’s about evaluating against what’s significant, starting from your pain points and goals. 

This also applies to design systems. 

If you already have one and you never thought about measuring its impact, start here: how is the design system contributing to product goals? What problems is it solving? What problems would you expect it to solve, but it’s not? 

For example, if you are struggling with constant back-and-forth communication between design and development, you can measure the design system against it to see whether it’s contributing to this and to what extent it’s having the impact you’re aiming for. 

Measuring what matters to you gets you to the heart of the issue.

Justifying the investment

We believe that all product-related initiatives should demonstrate tangible value. Knowing the impact they’re having on the organization, the product itself, and the people involved is a must to understand whether it still makes sense to invest in them.

Besides, having clarity on the effectiveness of an initiative simplifies the process of advocating for additional energy and resources to be allocated to the project.

While it’s true that many investments aren’t strictly monitored — and sometimes that’s just fine — we all know that a design system is a major one. Allowing it to operate without clear goals and  missing the chance to fully harness its potential for creating value can be extremely risky: you might end up investing too much on minor issues and not enough on those that could make or break your business 

That said, let’s take a look at concrete examples of how measuring a design system’s value can bring about tangible impact for teams and organisations.

1. Reducing technical debt

“We started to measure the impact of the design system as soon as the dedicated team was formed. We put effort on that, even before releasing new components”
– Jérôme Benoit, Design System Lead, Doctolib


Amongst our interviewees, Doctolib’s team was the one of the few teams actively measuring the impact of their design system. 

Doctolib is a healthcare platform launched in 2013, aiming to ease the access to healthcare for patients and facilitate the life of healthcare professionals. The company counts about 60 designers, 350 software engineers. Its digital product is used by 80 millions patients and 900K healthcare professionals across France, Italy, Germany. 

Their design system is relatively young and it’s currently taken care of by a team of two designers, four developers and a project manager.

We talked with Jérôme Benoit, Design System Lead at Doctolib. “Technical debt is our main struggle concerning the product right now. It’s holding us back, we need to address it”. The team was determined to show that the design system was not generating debt — if anything, it could serve as a way to reduce it. 

To prove that, the team set clear goals:

  • encourage the adoption of design system components;
  • phase out the use of outdated legacy components — meaning those components who are old but lack updated alternatives;
  • put a stop to the use of deprecated components, which now have newer, better equivalents in the design system.

They started tracking the design system’s compliance on Figma, leveraging a custom plugin named Oxyscan. This tool allowed designers to scan their projects and assess their usage of the design system, including:

  • percentage of legacy and deprecated components in use 
  • percentage of design system components used
  • percentage of custom designs. 

Continuous improvements to the plugin let Doctolib to monitor the design system’s compliance on a monthly basis. “We’re not just measuring adoption,” Jérôme said. “We want to prove design system use is actively reducing technical debt.”

Better decisions, more resources

The data collected from all the Figma files fed into a dashboard accessible to all the product teams, which made designers aware of their adherence to the design system and willing to strive for improvement. 

Moreover, the data revealed some significant insights that guided the team in their decision making. 

For example, they noticed that legacy component usage was mostly related to the use of two specific components. Therefore, they made the refactoring of these components a priority.

“We can now see trends, set the right priorities and make better decisions”, Jérôme says, “we are also targeting specific teams which have a low adoption of the design system compared to other teams”.  

Proving the impact of the design system initiative helped their team asking for fundings when needed. “A team without data has no chances of being heard in Doctolib. Having data for our design system was crucial when asking for more resources. We started as two people in the design system team, now we are seven”.

Looking ahead, Doctolib’s team is focused on improving the tracking of component accessibility. Right now, they have an accessibility score for each component. However, their goal is to reach a specific accessibility standard for the entire product by June 2025.

2. Enabling key product initiatives

Jérôme offered another example of how the value of design systems can be proved: by assessing their impact on core product initiatives. This is particularly relevant for initiatives requiring extensive interface changes — such as rebuilding part of a product or implementing a rebrand. In these scenarios, the value of a design system can be measured by the time saved in making those changes happen.

So, how did it play out for Doctolib?

In 2022, Doctolib decided to make the product whitelabel to let customers personalize the interface. By employing design tokens consistently throughout the design system, updating the product to fit this new requirement would have been a piece of cake.

In fact, design tokens are a method for managing design properties across a design system. Each token stores a piece of information — such as color, sizing, spacing, etc — that applies to the product interfaces. Using tokens makes interface changes a lot easier and quicker.

That is, when your codebase is solid and clean. 

Unfortunately, when this initiative took place, Doctolib’s design system wasn’t up for the challenge. The codebase needed some rework, prompting the design system team — both designers and developers — to demonstrate to management how such rework would improve the situation and benefit the design system. 

They created two prototypes of the same product section. One prototype used the existing codebase without any tokens. The other used well-crafted tokens and a clean codebase. They then compared their performance in a personalization task. 

The result? 

The second prototype outshone the first by large, with significantly shorter development times, and the team received the resources they needed to refactor part of the product and ensure product customisation could happen smoothly.

Better structure, quicker changes

Product-wide interface changes surely spotlight how a design system can bring value. 

Here are some other situations where this happens:

  • You are rebranding: you’ll need to adapt the interface to a new typeface or color palette, or logo. Design systems enable you to do that at scale, in a short time, without big refactoring.  
  • You are building sub-brands or sub-products that have a relation with another product. A design system helps you in maintaining consistency where you need and scale the changes. 
  • You are merging products, and you need to change some portions of the interfaces

All these are cases where having a connected system really makes a difference in ensuring changes across the product propagate themself coherently and quickly. 

Beyond fast delivery

A design system is the best way to build interfaces at scale. Use it right, and your team can deliver feature and product updates in no time, all while ensuring UI consistency. But let’s dig deeper.

What does this quick delivery really mean?

Well, for the success of digital products, speed is absolutely vital. Digital products need to change to get feedback from the market. That feedback, in turn, is the only way to assess your impact. The sooner you get it, the sooner you can iterate. And when it comes to iterating, every tiny efficiency gain will have a direct impact on your company’s growth.

Start from what matters most

If you feel it’s time to measure the impact of the design system, but you’re not sure where to start, try and ask yourself these questions:

  • Which product initiatives can benefit from the design system? 
  • Which areas of the organization are gaining advantage from having a design system? How? 
  • Which problems can we avoid in the future, with a design system? 
  • How are we measuring the success of the product and how fast we're making progress before and after the adoption of a design system?

When it comes to measuring the value of your design system, remember, it's not just about ticking off quantitative KPIs. Instead, it's about articulating its worth and aligning it with the priorities of your product and company. This way, your efforts will yield tangible results, beyond mere numbers.

∗ ∗ ∗

This article is part of a series of articles about design systems practices in the real world, based on interviews with design and developers at 27 tech companies in Europe and N-America, conducted in late 2023.

Belka would like to thank all the great people we talked to at the following companies for their help with this project: Balsamiq, Buddyfit, Coverzen, DaVinci Salute, Docebo, Docsity, Doctolib, Fatture in Cloud (TeamSystem Group), Fiscozen, Generali, Immobiliare.it, indigo.ai, isendu, Jet HR, Klarna, Musixmatch, NeN, Nibol, 1Password, Scalapay, Serenis, ShippyPro, Subito, Switcho, Telepass, Tot, and TrueLayer.

Read more about the project here, and for even more, subscribe to Belka’s newsletter.

∗ ∗ ∗

Want more insights from our independent research?

Want a safe pair of hands to help with your own design system?

Check Design System Audit, our service to make sure your design system brings you results.