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.

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:

  1. Calculate the cost for the entire design system: This gives you a holistic view, ideal for budgeting and long-term planning.

  2. 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.

💥 Warning signs

See these metrics dip? Hit the brakes and reflect what is wrong.

  • Low Adoption 

  • Detached Components 

  • Bugs, more of them


Wrap-Up: Keep These in Mind

The number of components will rise over time; be careful how many you approve. The higher the number, the higher the cost.

Five-year forecast? Good luck, Sherlock. Start small and stay practical, but with the main goal in mind.

Once you're in, the system's a game-changer. You're not just ticking boxes; you're doing work that matters.


That's it, folks. You're not just surviving the design system game; you're set to own it. Have a productive week 🔥


Additional reads

Published on:

Published on:

Published on:

Sep 19, 2023

Sep 19, 2023

Sep 19, 2023

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

I'm Romina. I'm a Design Lead with an MBA. I advise, coach, and consult with companies on product design, design strategy & design systems. I can help you set up teams, processes, and culture.

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic

Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2024 The Design System Guide by Romina Kavcic