Back to blog

Metrics

A guide for calculating design system costs

Romina Kavcic

Dec 15, 2022

Hey there! Have you ever wondered if measuring a design system is a privilege for big companies or if it's about knowing the right stuff? I looked into it, and it turns out it's both. The company's size and the pockets' depth matter, but what tips the scale is who's in charge. You're golden if you've got someone who owns the process and vision. But it's a different ball game for smaller teams where one person does it all.

This guide aims to share helpful guidelines, formulas, spreadsheets, case studies, and tools to measure the pulse and costs of your design system. Plus, remember that survey I ran on design system costs? Stick around till the end of the blog post to see what the data says. Let's dive in!

How to calculate costs of the design system?

Step 1: Gather the data

Step 2: Create a spreadsheet

Step 3: Calculate and analyze

Step 4: Qualitative data

Step 5: Automated metrics, tools

Below, I'll explore each step in-depth.

Step 1: Gather the data

First things first, you need data. Though you may never feel you have "enough" or proper data, you must start somewhere.

↪ Are you already tracking?

Awesome, high five. 🙌 Dive into those numbers.

↪ Not tracking yet?

If you still need to start timing these tasks, you must make some projections and estimates. But don't let that stop you. Use industry averages or consult with team members to make educated guesses. Use Jira, Github, or billable hours for ballpark figures. It's not perfect, but you can refine these estimates as you start collecting actual data.

How long does it take designers to create new components?
How much time do engineers spend on asking designers for details?
How much time is spent on handoffs and change communications?
How long it takes to build a component and then a specific pattern (or user-flow).

The easiest way to make projects is to add number for components that you have a good overview.

Step 2: Create a spreadsheet

Ready to do the math for your setup? Create a spreadsheet, list components, and pull the numbers in.

↪ You can use my Airtable link, add numbers, and compare.

🖩 Also, an interactive calculator from Knapsack might give help you get an idea.

Step 3: Calculations

The aim is to get a clear picture of where your money's going. You can either:

Calculate the cost for the entire design system: This gives you a holistic view, ideal for budgeting and long-term planning.
Break it down per component: Sometimes is easier to estimate smaller pieces and then make estimations based on the number of components.

↪ Breakdown by component

Choose a component and add the average employee cost:

Developer (h)
Designer (h)
Design Technologist (h)
UX Designer (h)
User Testing (h)
UX writing / Copywriting (h)
Training (h)
Documentation (h)
QA / Review (h)
Maintenance (h)

↪ Breakdown by tasks

Example: Date picker

Research: $100 for approximately 1 hour of work

UI/UX Design: $400 for around 4 hours of work

Prototyping: $100 for about 1 hour of work

Front-end Development: $700 for about 7 hours of work

Testing: $100 for about 1 hour of work

Integration: $100 for about 1 hour of work

Technical Documentation: $150 for about 1.5 hours of work

Code Review: $100 for about 1 hour of work

Code Linting: $50 for 0.5 hours

Accessibility: $50 for about 0.5 hours of work

QA Test preparation: $50 for 0.5 hours

Functional Testing: $200 for 2 hours

Regression Testing: $100 for 1 hour

Total Time: 21.5 hours

Total Cost: $2,050

Design system platforms pricing

Remember to add the costs for managing Documentation. You can use third-party solutions like Supernova, Zeroheight, Specify, Backlight, Frontify, and Knapsack or build a custom one. I added all the prices for off-the-shelf solutions on the Airtable so you can compare them. Click here >

Now, to some math.

Formulas

Time Savings for Designers and Developers

Measures the cost-efficiency and time-saving aspects of the design system.

(Reported time savings / 100) x Total Hours x Number of Team Members × Average Hourly Salary

Costs

Get back to your list of billable hours and calculate totals.

Development cost
Q&A costs
Maintenance costs
Design costs (User Experience, User Interface Design)

Savings

Compare it to the time saved using a design system. It shows how many hours the company gets back.

Saved time in hours
Reduced bugs (h)
Reduced support tickets (h)
Onboarding savings (h)
QA Savings

ROI

Evaluates the financial viability of the design system.

(Total Savings / Total Costs) × 100

ROI can be low or negative in the first phases because of the initial investment. But be careful later on if it stays down - you are overengineering the process for your current setup.

Engagement Score

(Number of Active Users / Total Number of Users ) x 100

Frequency of Deliveries

Indicates how the design system affects the speed of product deliveries. Stack this up against your time-to-market metrics. The comparison will give you a fuller picture of your design system's impact on speed and efficiency.

New Frequency − Old Frequency

Delivery Time

It is not connected to money but will give a pulse on how you are doing.

Old Delivery Time − New Delivery Time

Time to market

Shows how fast you can roll out new stuff. You should definitely be able to ship faster.

Time to market before the DS - Time to market with the DS

Time to prototype

Speeds up that crucial first step to get stakeholder buy-in. Faster prototypes can mean faster green lights.

Time to prototype before the DS - Time to prototype with the DS

The most important thing is to align the metrics with the organization's goals. Combination of Time-to-market, idea-to-prototype speed, and profit margins will tell you if you're actually moving faster and killing it. If cost-saving is a priority, focus on efficiency and financial metrics. If improving product quality is the goal, then quality metrics should be at the forefront.

Design system metrics

I already created the list of all the design system metrics as an inspiration what exists. Check them here.

___________

The design system saved us 320,000 hours.

Case study from REA Group

___________

Step 4: Qualitative data

Your design system isn't just numbers; it's about how it vibes with your team. We can measure everything possible, but if the design system is separate from building the product, we didn't do anything. One of the biggest recurring lessons from my conversations is to talk to your coworkers more and more. Tweak your approach. Watch the magic happen.

Assess the overall quality of design and development projects before and after the design system's implementation. Look for improvements in aesthetics, usability, and functionality.

User Satisfaction:

Conduct surveys and interviews. Check the pulse.

How easy is it to find the components or guidelines?
How easy is it to work with components and variants?
Do you know how to set up libraries in Figma?
Do you use prepared components, or do you still start with wireframes?
Do you still get questions like, "What are design tokens and variables 😅"?
How can we make our design system a seamless part of their day-to-day?
Are you aware of our tech stack?
Do you know the guidelines?
Do you feel everything needs to be simplified?
Do you need more guidance?

Consistency in Design:

Review a range of projects to see if the design elements are more consistent across the board after implementing the design system.

Ease of Collaboration:

Talk to team members about whether the design system has made it easier to work together.

How well are we collaborating?
Do we have cross-functional teams?
Are there fewer misunderstandings and smoother handoffs?
How easy is connecting with the design system team and getting feedback?

Code Reviews

Do we have fewer code reviews, bugs, QA tests, …?
Are we leveraging the power of automation? 🤖

Onboarding Experience:

Ask new hires about their experience learning the guidelines.

Is it easier to understand and apply because of the design system? You can also measure (and compare time) that it took you before and after.

___________

Cost Savings after implementing design system

190K per project
$3.5 million across the projects
(June - December 2018)

___________

Now let's check the results of the survey.

Results

Data: 52 survey responses plus six interviews.

Company size

60% Big Leagues (500+)
13% Mid-Size (100-500)
27% Small Crew (50-100)

Do you use an in-house design system or a third-party one?

60% Custom
40% Both (Custom + Off-the-shelf)

How many components does your design system have?

10% Bare Bones (1-10)
20% Mid-Range (50-100)
30% Loaded (100+)
40% Just Right (30-50)

How often are components updated?

50% Weekly
20% Monthly
20% Quarterly
10% Once per year, hopefully

Do you measure the ROI (Return on Investment) of your design system?

66,7% No
33,3% Yes

Small Biz Reality

Most small companies are clueless about design and dev costs. Often, it's a solo act juggling design tokens to branding.

Scale to Save

Multi-brand systems and multiple products are where the real savings kick in.

ROI and Performance Metrics after design system implementation

Organizations with 100-500 Employees:

Cash Savings: average of 46% drop in design and dev costs
Speed: 22-35% faster time to market
Design Efficiency: 31% higher on average
Dev Efficiency: 27% higher on average

Organizations with 10-50 Employees:

Cash Savings: average of 15-30% drop in design and dev costs
Speed: 17-25% faster time to market
Design Efficiency: 26% higher on average
Dev Efficiency: 21% higher on average

🖼️ Bigger image

Some smaller companies reported having less data, but they still increased conversion rates. Credit? More time to focus on better UX and design.

More reported benefits of having a design system

Savings

Faster design and dev
Faster time-to-market
Optimized design process
Streamlined handoffs
Cost savings for doing the wireframes
Onboarding savings

Improvements

Higher User engagement
Better UX
More prototypes
More launched projects/features per year
Less redundant tasks and busywork
Improved employee productivity

Business

Increased LTV
Increased Gross Income
Increased ROI
Increased Sales
Increased Conversion Rates

___________

"It was easy to convince our stakeholders with the concrete documentation."

Laurent Thiebault, a Tech Lead at Decathlon on
Scaling Decathlon’s design system with zeroheight

___________

Step 5: Tools and apps for tracking design systems

Before we dive into the tool talk, let's get one thing straight: what works for one team might not work for yours. Your tech stack depends on a bunch of stuff:

Platform Count: Web, mobile, or both?
Code Speak: What languages do you use?
Documentation: Custom-made or off-the-shelf?
What you're measuring: Are you tracking design, code, or both? The focus shapes the tools you'll need.

Unfortunately, we can track where the money goes, but we want to monitor the design system to understand where our ship is sailing.

Tracking components in design

Figma

You can measure adoption using Figma Analytics (Figma API). Track how your team's vibing with your published libraries and components.

Image from Figma.com

What you can do with Figma analytics:

Spot MVP components and variants.
Catch detached components.
Uncover the underdogs— under-used components.
Know which teams are library regulars.
Pit two libraries against each other—see who wins.
Find real-world component examples to beef up your docs.

Library metrics:

Team Count: How many teams are diving into your library.
Components: Total main components you've got.
Style Inventory: Count of styles in the library.
This Week's Buzz: Inserts in the last 7 days. Yep, how many times folks pulled components into their files.

Heads up—library analytics have some blind spots. Styles aren't on the radar, and neither is component usage in other people's draft files. Nested components? They don't count as insertions. If you duplicate a file, the initial insertions get a pass.

Tracking adoption in code

Does 100% adoption mean you are the winner? No, things can still be chaotic. However, positive feedback (from qualitative research) and a higher adoption rate are good signs.

Primary metrics for adoption:

Instances of components over time
Instances of deprecated components
Usage of props on React components
Total number of components used in products
Total number of components
Progress of migration (components and custom typography)
Warnings (ESLint, stylelint)

___________

There is clear evidence of how design system helped us.

Cristiano Rastelli

___________

Image from Measuring the impact of a design system

Cristiano made an experiment where he scanned the git. He got the dates, the files changed, and the lines added or removed. He was combining LESS -> Python -> JavaScript -> the list of changes in JSON format. He used this data to make a chart. As you see, there is clear evidence of how design system helped us.

Storybook

Open-source and framework-friendly. It's the sandbox where devs can build and test UI components, minus the headache of the full app. Whether you're into React, Vue, Angular, or something else, Storybook's got your back. Expect hot-reloading, interactive docs, and a flexible API to supercharge your workflow.

Explore ->

omlet.dev

Omlet scans, you see. It scans for components and shows you how they're used. Think of it as an X-ray vision for your codebase with custom charts. Oh, and it's open-source.

Explore demo workspace >

React Scanner

npm install --save-dev react-scanner

React scanner statically analyzes the given code (TypeScript supported) and extracts React components and props usage.

First, it crawls the given directory and compiles a list of files to be scanned. Then, it scans every file and extracts rendered components and their props into a JSON report.

Explore the official repository >

Stylebit (in alpha)

Get a 360-view of your entire design system infrastructure. Track, measure, and decode the real impact. Know what's working, what's not, and where to steer next. It's not just about components; it's about making a meaningful difference.

More info >

CSS Analyzer Wallace

Initially built to analyze and track CSS over time, it is a versatile tool for monitoring your design system's real-world use and effectiveness.

Example metrics:

Color Check: Count those unique colors.
Font Metrics: Monitor the variety and usage of fonts
Media Queries: Have an overview of the breakpoints
Historical Data: Track changes over time
File Size: Keep an eye on that CSS file size

Explore ->

Looker

(Formerly Google Data Studio)

Dashboards. Credit: G2 Crowd

You can then use Looker as data analytics tool to process and share the metrics across the company. It's free.

Start exploring

Visual regression testing

Visual regression testing is your safety net for design consistency. Snap before-and-after shots of your UI components when you make changes. Spot the differences. Make sure your code tweaks don't mess up how things look across platforms and devices. For this, you've got solid options like Percy, BackstopJS, and Applitools.

Snapshot tests

Snapshot tests go beyond the visuals. They capture the rendered UI but focus on the data structure and content. Think of them as your guard against sneaky changes in component behavior or state. Jest is a go-to for snapshot tests, especially if you're in the React world.