How much is a design system? We counted and here's the price tag

We once wrote that estimating the cost of a design system is impossible. Although we still agree with this statement, we believe that understanding the costs of developing and maintaining a design system is crucial. In this article, we will show you what costs you need to consider when planning a design system – and what efficiency gains you can expect.

Before we dive in, we would like to highlight that we treat a design system as an investment. We assume that an organization chooses it to increase efficiency and quality of work, ease the onboarding process for new team members, and facilitate faster implementation of new solutions and features in the market.

To see how to measure those efficiency gains, look at recent text that can help you define your KPIs and clarify ambitions and objectives. Also, you can look at tthis article, which includes 10 questions worth asking at the first meeting of the product and design teams.

We assume that the reasoning behind implementing a design system involves determining how much less work you could deliver for the same cost, how much more work you could deliver for the same cost, how much you could improve the quality of the work delivered, and the value of that quality improvement. Additionally, we assume that a design system seeks to lower the threshold for new team members to enter the project and accelerate their adaptation to match the quality and speed of long-term team members.

Do you agree? If so, let’s look at the costs associated with such an investment.

The discovery phase moves the conversation about the design system from a narrow management group to the entire organization's forum. Workshops with stakeholders help promote the project idea and uncover hidden opinions, fears, risks, and hopes related to the planned execution. It’s all about finding the critical points—what works and does not work in a given organization.

From our experience, the discovery stage typically follows other business initiatives, such as redesigning a critical back-office application. These changes serve as the starting point for the design system and need to be understood, described, and integrated into the overall design system work. This stage bears the costs necessary for a realistic picture of the current situation.

Here, you will find a detailed description of our standards in the discovery stage. Below is a brief overview to give you an idea of what you can expect.

• The process starts with understanding the client's business objectives , project team composition, stakeholders, risks, constraints, and preferred timeline. In this step, we learn the organization's structure and get to know stakeholders to create design and development operations.

• Next, we analyze the existing materials and systems to understand their current status — the “as-is state.” This includes how the design and development teams work, their tools, current processes, rules, documents, files, and libraries.

• It is also important to analyze previous attempts to create a design system (if any). This helps us understand what was done, what did not work, why, and what lessons the organization learned.

• The following phase involves user research, including workshops, interviews with design and development teams, and discussions with other key stakeholders. The findings are then summarized in the documentation that defines target groups, problems, motivations, user concerns, and proposed solutions.

• The next step is the project inventory . This involves cataloguing all completed, ongoing, and planned digital products and projects. We consider them when planning the design system, looking for differences and similarities for a reference project on which the first version of the design system is based. For existing projects, we create a catalogue of components. For ongoing or planned projects, the process of creating the system design is integrated with the ongoing work, with rules and system design tools developed concurrently.

• Our goal is also to identify critical points, such as areas where UX needs improvement, particularly concerning accessibility, to allow us to reuse a single solution effectively. Sometimes, similar UX problems are solved in various ways within the system, leading to inconsistency. The design system addresses this by introducing a standard for solving specific problems, ensuring that all similar cases are unified.

These activities provide a comprehensive understanding of the current state and inform the next stage: Ideation.

The Ideation stage presents conclusions from the Discovery phase as actionable recommendations. Based on the specifics of the project, these can include:

• Recommendations for the functional pilot scope of the new system, i.e., which parts of the design system we will deliver first and test with all stakeholders and implementations?

• A roadmap of the design stage, considering business priorities and development team needs.

• Technology recommendations.

• A composition of the design system team.

• UX/UI design recommendations for the analyzed apps.

The culmination of this stage is creating a "helicopter view" encompassing all insights gathered. This comprehensive overview allows the agency and client to develop an approximate cost for the design system. While precise estimation may seem challenging, this initial approximation is essential for planning and resource allocation.

Based on the knowledge gathered during the Discovery phase and the recommendations formulated during the Ideation stage, we can prepare a comprehensive design system implementation scenario. This scenario is necessary because implementing a design system can be approached in multiple ways, and choosing the best method for the organization is crucial.

It can be a phased implementation, which allows for gradual adoption, minimizing disruption and allowing for adjustments along the way, or a comprehensive implementation, which allows companies to adopt a design system more rapidly. The implementation scenario is also crucial when updating the existing system.

Developing a design system involves several roles and tasks, each contributing to the overall cost.

The typical roles in the development process are outlined below, and the average time required for each component is estimated. The actual cost will obviously depend on the design system's complexity, the organization's specific requirements, and the components' characteristics. It should be borne in mind that the components vary in complexity, and some of them contain subcomponents.

For this example, let's consider the development of a button component, which is fundamental to a design system and represents the work involved well.

Developer: 24 hours

Coding the button component and ensuring it works across various browsers and devices.

Designer: 24 hours

Scalability of the button, architecture consistent with the entire system, visual aspects of the button, including different states (normal, hover, active, disabled) and variations (primary, secondary, etc.).

Design Technologist: 4 hours

Ensuring that the design is feasible and correctly implemented in code.

UX Designer/Tester Testing: 16 hours

Gathering feedback on the button component’s usability and effectiveness. Ensuring that the button is intuitive and meets user needs.

UX Writing / Copywriting: 4 hours

Writing clear and concise text for the button, such as labels, tooltips, and help with the documentation. This time can be shorter, as the way of content writing – the tone and voice – should result from the previously prepared documentation.

Design system development is an ongoing process, making it more like a product than a project. The following are the operational and maintenance costs required to keep the design system up-to-date and functioning smoothly (we are still limiting the estimates to one component).

Documentation: 16 hours

Creating comprehensive documentation for the button component, including guidelines on usage, code snippets, and best practices.

Maintenance

Maintenance work is often the most expensive because tools constantly evolve and their functions change. Due to the significant expense involved, it is crucial to approach maintenance wisely, avoiding the rush to update the system design at all costs.

These estimates show the time and cost of developing a single design system component.

To make more accurate estimates, we can assume that one component needs around 100-120 hours of work and that the first version of a design system has 40 components. When we multiply it by an average salary of 60 USD/hour, we arrive at 4800 manhours, which means around 288,000 USD for a basic version of a design system.

We might also count the cost in FTEs (Full Time Equivalents) – 4800 manhours means 3 people working full time for 10 months.

Training and onboarding facilitate a smooth transition and empower team members to contribute efficiently to the design system.

Training existing staff: 8 hours

Organizing workshops and training sessions covering the design system's fundamentals, including its components, guidelines, and best practices.

Onboarding team members: 8 hours

Providing resources, guidance, and hands-on support to reduce the learning curve.

Since we consider the design system an investment, it’s good to see what cost optimizations we can see after the implementation. In general, we can speak about efficiency gains thanks to:

• Enhanced consistency of all design elements
• Improved collaboration between designers, developers, and other stakeholders
• Enforced brand identity
• Improved usability of the final product
• Scaling design efforts
• Ensuring accessibility compliance
• Simplified onboarding of new team members

Investing in a design system yields long-term benefits and future savings. Organizations can save significant time and resources by reducing redundancy, minimizing errors, and streamlining processes. The initial investment pays off as teams become more efficient and effective. The reusability of design components further amplifies these cost-saving benefits.

According to Zeroheight estimates, sign systems can significantly enhance efficiency, leading to a 30% to 50% reduction in time spent on design work.

For instance, Figma’s experiment demonstrated a 34% increase in efficiency, equivalent to adding 3.5 designers to a team of 7. This improvement boosted weekly design hours from 140 to 212, totaling 9,964 hours annually. Figma also estimates that implementing a design system can reduce design costs to 8,222 hours per year, saving 27% of the time previously spent on design tasks.

Additionally, Telus reported saving 6,480 hours annually by reducing the time to retrieve standard symbols from 10 minutes to just 30 seconds. This time-saving benefit positively impacted their 40,000 employees and 36,000 web pages. In an example shared by Robin Cannon concerning ACME Corp, the potential efficiency gains were described in the following way:

• The average salary of designers and front-end developers is $75,000/year.
• The “load cost” of an employee at their company is 1.5 times their salary. Load cost is the cost to the company of employing someone. It includes salary, benefits, equipment, insurance, energy costs, etc.
• ACME Corp employs 1,000 designers and front-end developers.
• Estimates are that adopting a design system will bring a 30-50% improvement in the efficiency of a product team.
• Estimates are that 20% of the company will adopt the design system in the first year.

This hypothesis suggests a design system investment will bring $11.25 million in efficiency gains in its first year. And what about the costs? Cannon assumed 10 people working full time on the design system, earning an average salary of $75,000/year. The design system cost is a simple calculation of 10 people * $75,000 salary * 2 (load cost) = $1,500,000. So, the hypothesis suggests a 7.5-1 return on investment. However, the efficiency gains represent opportunity costs rather than additional income, enabling teams to tackle more backlog, redistribute resources, or potentially reduce headcount.

In 2022, Smashing Magazine presented a formula for calculating the ROI effect of design systems. This formula compares the costs associated with creating and maintaining products without a design system to the benefits and gains that result from implementing a system.

X = percentage of time invested in building the design system.

Y = percentage of time spent on ongoing maintenance after the start-up phase. The ramp-up phase refers to the initial effort required to bring a project to a point where it can smoothly transition into maintenance mode.

Z = time saved using the design system as a percentage – of productivity or efficiency gains.

Once you have calculated the “cost” and “profit" components, you can plug them into the ROI formula to calculate the ROI.

Existing studies on the productivity of design systems show that design teams increased their project efficiency by an average of 38%, while development teams saw an average increase of 31%.

We are not treating the above numbers as something set in stole – estimating the precise cost of a design system still remains challenging and depends on many factors. If you are interested in deepening your understanding of what it takes to build a DS, take a look at a case study we prepared after working with Wirtualna Polska – a design system tailored for for internal use and back-office applications.

Also, currently, we are conducting a this survey among companies about their design systems, with plans for a comprehensive publication later this year. The survey is in Polish and concerns design systems built in Poland – have a look if you’re a match!