What’s the Value of a Design System?

This is perhaps the most frequently asked question among people who come into contact with “Design Systems.” It’s probably the most common, right after “What is a Design System?” ;)

If you prefer to read in Spanish, I originally posted this article en español aquí

It’s not uncommon for people to have heard of Design Systems, or even have worked in a company that uses one, without fully understanding its benefits. After all, the same thing happens with many of the internal solutions in any organisation.

While this should be an easy concept to explain, the truth is there no single answer. The benefits depend both on the quality and maturity of the Design System itself, as well as the size and focus of the team and type of product for which it is implemented.

Nevertheless, I have tried to compile a general list of the most significant benefits:

Agreement

A Design System as a whole is the only source of truth for the different disciplines collaborating in the creation of the same product.

• It acts as a repository for information on agreed decisions.
• It serves as an accessible and useful reference point in order to resolve discrepancies.

Agility

A Design System facilitates a product’s agility by preventing stagnation on topics already discussed, agreed upon, documented and implemented.

• It shares the design and coding workload evenly between all team members.
• It allows us to create prototypes, experiments and launch MVPs in less time. This makes sure elements like consistency and accessibility aren’t ignored in the initial product in order to meet launch times.

Alignment

A Design System ensures that the different parts of the product are well aligned.

• Its nature ensures that the result of the code is in line with the Design guides.
• It fosters nomenclature unification in the design, documentation and code files.
• It drives the standardisation of measurement units.
• It serves as a framework for the implementation of accessibility improvements.

Quality

A Design System provides a systematic approach to managing code quality and design decisions.

• It prevents errors which are inevitable when creating something from scratch.
• It prevents repeat errors.
• Being in constant evolution through iterations means the quality of each component continues to improve over time, particularly in comparison to new components.
• The fact it is a modular, closed and versioned system reduces the risk of losses to both code and design.
• It’s easily isolated in order to assess its quality and measure its external integration.
• It is subject to constant quality management, which also increases as adoption rises.

Communication

A Design System acts as both a channel and a common communication language for the different disciplines collaborating in the creation of the same product.

• It provides an ideal forum for sharing cross-sectoral knowledge.
• Unifying language facilitates understanding.
• It acts as a driver of interdisciplinary conversations.
• It prevents development tasks stagnating due to design changes.

Consistency

A Design System delivers the same quality results over time.

• It helps ensure that once they have been decided on, designed and documented, the implementation of both designs and code are the same every time they are reused.

Convergence

A Design System groups together the efforts of all profiles under the same umbrella.

• It encourages developers and designers to work together in the same direction to achieve common goals.

Efficiency

A Design System ensures maximum returns on time spent on code and design, with minimal wasted energy, in order to achieve the same results.

• It improves the approach, minimising time spent creating products from scratch so it can be better spent solving problems.
• It improves code through iteration, which is cheaper than writing quality code from scratch on demand.
• It eliminates the need to repeatedly communicate design decisions that are documented and implemented.
• It frees teams up from maintaining their own code, which is often duplicated.

Understanding

A Design System facilitates understanding by providing a series of tools and resources which help bridge the gap between different profiles.

• It document agreed-upon processes.
• It produces and refines a common vocabulary that facilitates the understanding of specifications.
• It standardises reporting and troubleshooting channels and processes.
• It helps develop a common conceptual model of the product being worked on.
• It minimises information deficits by reducing the opacity of different parts of the ecosystem.

Focus

A Design System clears the path of redundant tasks, making it easier to focus on what really matters.

Maturity

A Design System reflects the maturity of an interdisciplinary team.

• It allows teams to develop maturity more quickly.
• It requires important decisions to be made and processes to be improved, which are beneficial in other areas.
• By requiring collaborative work, it fosters the “pollination” of knowledge.

Decision-making longevity

A Design System increases the longevity of the decisions made.

• It pre-empts information volatility, making sure it is not subject to any individual’s position or their relationship with the product or company.
• It establishes a space which protects code and design from being lost in the event of a change of direction in any area of the company.

Common purpose

A Design System supports the common purpose of different disciplines collaborating in the creation of the same product.

• It stimulates growth in a single direction.
• It facilitates the production of high-quality MVPs in design, code and interaction terms.

Speed

A Design System enables faster decision making and value creation.

• Conception happens faster if the visual language is clear and there are brand documentation and style guides.
• Translating those ideas into design tools is faster if predefined symbols and styles already exist in UI Kits.
• Sharing specifications between designers and developers is faster if there is a common language, shared tools and a clear and agreed-upon process.
• Transforming those designs into code happens quicker if there are components and styles ready for production.
• Carrying out QA is faster on a product built with elements that have already been validated.
• It reduces the time new team members take to get up to speed.
• It reduces the time needed to learn how to work with a new system.

Cheers!

Turo
DesignOps at Adevinta Spain

About our team:

At Adevinta Spain we have Design Systems for all our brands which include style guides, collaboration manuals, Tokens, Components and UI Kits for both Web and Native Apps.

Check out SUI Components our React Open-Source project which we use to create all our websites.