How To Measure the Success of Your Design System

You know that you should probably create a design system for your digital project. But it’s not enough to throw together guidelines, styles, patterns and components. Only by building and maintaining your design system the right way will you reap the benefits.

It’s always a good idea to build a design system for any app or website that will require ongoing maintenance and updates. But how exactly do you know if the design system is making things better?

Simply putting one in place isn’t enough to streamline or improve your design process. Considering how long it can take to create it, you don’t want all that time and effort to go to waste. You should measure the success of your design system to ensure that it’s doing what it’s supposed to.

In the following post, we’re going to look at seven quantitative and qualitative metrics you can use to make sure your design system is effective.

Use These Metrics to Measure the Success of Your Design System

A design system isn’t just documentation that makes designing and redesigning go smoothly. The quality of your design system can have far-reaching effects on both the internal working of your business as well as the external success of it.

Whether you work on your own or within a larger agency, here are the metrics to keep an eye on:

1. Team Adoption

Understanding the Metric
Anyone involved in the creation of the app or website should have access to and reference the design system whenever they work on it. This goes just as much for web designers and developers as it does for full-time employees and contractors.

This is a common roadblock to success in many businesses—when only some of the team adopts the designated system (be it software or documentation). There are a number of reasons why it happens, too. For instance:

• Some people aren’t aware of the system.
• Some find it too difficult to use.
• Some don’t want to give up the old way of doing things.

Once you understand the underlying resistance to adoption, you’ll be able to fix your design system as well as the way you integrate it into your team’s workflow.

Questions To Ask

• Do you use the design system?
• What percentage of the time do you use it?
• Is the design system helpful?
• What’s most helpful about it?
• What’s least helpful?
• Is there anything you’d suggest changing that would make you use it?

Data-Gathering Method
There are a couple of ways you can gather this data.

One way is to conduct interviews or send out surveys to the team with the list of questions above. This will help you get insights into their subjective experiences with the design system and to identify trends among your team members.

Another way to gather data on this is to get everyone on the same time-tracking software. But Toggl won’t do. You’ll have to use an app like ActivTrack, RescueTime or TimeCamp that collects data on all the apps and sites people visit over the course of the workday. This will allow you to see how much time they actually spend inside of the design system as well as when it comes into play.

2. Task Completion

Understanding the Metric
You don’t just build a design system in order to document your design choices. You build it so that everyone can work faster and more confidently.

If there’s no discernible difference between how long it used to take to complete certain tasks and how long it’s taking now, then the design system isn’t being used the way it’s supposed to or it’s not being used at all.

The goal here is to assess what sort of impact the design system has had on your workflow and then to adjust the system so that it does actually speed things up.

Questions To Ask

• During which tasks should the design system be used?
• How long, on average, does each take to complete without a design system in place?
• How long, on average, do they each take to complete with a design system?
• Is there a difference in the overall project completion time with a design system vs. without one?
• Is there a difference in how long updates or redesigns take with a design system vs. without one?

Data-Gathering Method
This metric may be a difficult one to assess if the “before” data was never measured. If you had a time tracker in place, then you should have it.

Another way to quantitatively measure how a design system affects productivity is by looking at the profit margins on your projects. If you’re consistently making a larger profit margin with a design system in place as opposed to before, that’s a pretty good sign it’s helping.

You can also use subjective data from your team to see if they’ve noticed a difference in how long it takes them to get their work done. You may find that the design system helps speed up some areas while slowing down others, so it’s always a good idea to get this qualitative data to see the full picture.

3. Design-to-Development Handoff

Understanding the Metric
While we refer to it as a “design” system, it’s meant to help everyone who contributes to the UI of the app or website. As such, we care just as much about the developer’s experience with the design system as we do the designer’s.

There are a couple of angles to examine this metric from.

The first is to look at where the design system lives and how it eases the transition of your app or website from design to development. The developer should not have to throw time away on interpreting a designer’s redlines. There should be a system in place that streamlines the handoff process.

The second is to look at how the design system affects the productivity of the developer. The design system shouldn’t just include reusable components and styles—it should also have ready-to-use code so the developer’s time is spent on building new and advanced features.

Questions To Ask

• Does the design system integrate with a design-to-development platform like Unite UX?
• Does the developer spend more or less time, on average, building an app with a design system?
• Does the developer have to code existing elements with each update or redesign?
• Does the developer have Edit access to the design system and are they empowered to update it?

Data-Gathering Method
Again, if you had previously tracked task completion time, you’ll be able to quantitatively measure the differences in development with the design system.

That said, you’re probably going to get most of your insights about this metric straight from the developer.

4. Design System Updates

Understanding the Metric
Design systems should save you time in building an app while also improving the outcomes in terms of quality and consistency. However, if the design system isn’t properly created or updated, it could end up creating issues down the line.

There are a number of factors that can cause issues here. Like not properly conveying ownership of the design system. Setting up the design system in an illogical format. Or not providing an easy way to get updates out to the team.

Your design system should be easy to find, easy to use and easy to maintain. If any of this isn’t clear to anyone on your team, future updates of the system could lead to implementation issues.

Questions To Ask

• Who’s responsible for updating the design system?
• Does anyone else have the ability to update it?
• How long does it take, on average, to make a change to the design system?
• When the system gets updated, is everyone notified? Or do the changes automatically reflect on everyone’s ends?
• Are any team members saving and referencing a personal copy of the design system instead of the shared cloud-based one?

Data-Gathering Method
Talk to your team—and specifically anyone who’s responsible for managing the design system—to go over the questions above. While you can go directly to the source and see what exactly is configured, it’s just as important to find out what the perception and understanding of it is from your team.

Just as your design guidelines, styles and components are well-documented, so too should the rules for managing it. If you have yet to create a template for building your design systems and a process for maintaining them, now is the time to do it.

5. New-Hire Onboarding

Understanding the Metric
The onboarding process can take some time to get through. That’s not always the easiest pill to swallow, considering many companies don’t hire employees or contractors until they actually need them. And by that point, all they really want is someone who can hit the ground running.

But what if a designer or developer gets hired mid-project? Who’s going to have the time to stop and give them the lowdown on what’s going on and what they should work on?

This is just one of the reasons why a design system is so valuable to a design team—and a development team. Even if the new recruit has yet to review all of the company’s internal processes or get to know anyone, they have a solid resource they can use to chip in—even on Day 1.

Questions To Ask

• How long, on average, does it take for a new hire to contribute to a project?
• Are new hires able to complete onboarding more quickly with a design system than without one?
• Do projects interrupted by the onboarding process take much longer than projects that aren’t?
• Do designers and developers working with the new hire spend less time training or monitoring them when a design system is in place?

Data-Gathering Method
You might not have thought to track this kind of data, but it’s an important data point to consider. Because while it’s vital that your existing team benefit from the design system, it should also be a useful asset during the onboarding process.

To collect this qualitative data, you should talk to any new hire who’s been thrown into a project midway—with or without a design system. Also, talk to the designer or developer who directly worked with or supervised them to see if the design system lightened their load.

6. User Satisfaction

Understanding the Metric
Design systems aren’t just beneficial to design and development teams. End users also reap the benefits of a well-maintained design system.

When done right, users gain access to better quality products thanks to the careful and consistent execution guided by the design system. And a better user experience is rewarded with greater volumes of users, better retention rates and higher levels of engagement.

Like everything else here, a design system alone doesn’t guarantee a better user experience. It has to be well-built and properly managed in order for it to help the designers and developers who use it. If that doesn’t happen, then your user experience metrics will reflect it.

Questions To Ask

• What is the ratio of impressions to installs? Or visits to conversions?
• What percentage of users return after their first visit?
• What percentage of users do you retain, on average, after the first month?
• Which features do your users gravitate toward most?
• Which features do they ignore?

Data-Gathering Method
The data you’re going to look at here is general performance data, which can be problematic since there are many things that could lead to low installation or usage rates.

To find out if your design system is to blame, you’ll have to “talk” to your users to find out what’s going on if you detect usability issues. One way is to ask them directly for their feedback. Another way is to conduct user interviews or focus groups.

Something else you can do is passively observe your users with heatmaps, session recordings and other mobile app analysis tools. You can use a tool like VWO or UXCam to do this.

Again, there are a number of reasons why your users might get tripped up when using your product. However, if you notice that your most important features aren’t getting engagement and that user attention and visits drop off shortly thereafter, there might be something wrong in terms of consistency or usability. And you may be able to sort out the issue within your design system.

7. Company or Product Scalability

Understanding the Metric
In order to succeed in business, there’s no room for stagnation. The second you stop moving—or are unable to move—you’re in trouble. Because there’s always going to be someone waiting for you to slow down or to fall behind so they can jump ahead and steal away your loyal users.

That’s why you need to make room for growth. To enhance your current products. To build more products. To expand into new territories.

When it comes to the design and development team, in particular, growth may be paralyzed due to an inefficient process. And if you’re relying on a poorly maintained design system or one that just wasn’t built right in the first place, you probably find yourself dealing more with bug repair, support requests and putting out fires than on challenging and innovative tasks that move the needle ahead.

Questions To Ask

• How many website/app upgrades have you made, on average, over the last 12 months?
• Are you behind or ahead of schedule in terms of upgrades? By how much?
• Do you have new products, services or feature enhancements in the pipeline? How long have they been sitting there?

Data-Gathering Method
The more time that designers have to devote to maintenance of current systems and products, the more time that’s taken away from scaling and creating more profitable opportunities for the company.

In order to measure these metrics, all you need to do is look at your list of to-dos, past and present.

Note which ones you missed the mark on in terms of delivery and which ones you’ve had to postpone indefinitely. Then take a look at what it was that ultimately held you up. If it can be tracked back to your design system, then you know it needs to be fixed. The design system should be working for you, not the other way around.

Wrap-up

I’ve heard designers complain about how much they hate design systems, mostly because of how much time and how many resources it takes to build and maintain them. But perhaps it’s because these designers haven’t created design systems (or seen any in action) that promote greater productivity, user satisfaction and brand success.

If you’re in the same boat, then it’s probably time to evaluate whether or not the design system you’ve created was built correctly in the first place.

Looking for a leg-up with creating your design system? You can try using Figma Kits to kick-start your design system. They are completely free to use and give you a quick route to an MVP version of your design system!