Creating a Design System — What is it, what’s included and what is its ROI?

“Work gets more complex over time, to make our lives easier.”

Design systems. For people in the creative branch of product development and branding, this should be a familiar term. But what is it exactly? What is included in a design system? Who are the users of a design system? And what do we get in return? Let’s figure it out!

This article is based on my own experience building a design system with my team, and additional research. There isn’t a one-way method to design systems. Even on the internet, there isn’t a unified definition of a design system. Only tons of similarities across those definitions.

What is a design system?

A design system is a combined set of standardized guidelines and components that can be used as the building blocks for products, brands, services and organizations (these terms are used interchangeably). It’s common for the digital side of products – which work with user interfaces, to utilize a design system. While the offline side of products is becoming an integral part too.

Don’t limit your team and yourself. As every project has their own needs, types of people and requirements, every design system will be unique.

On a high level design systems should be specific enough to implement a consistent product or brand experience, while it being a tool for creative exploration of innovative ideas.

It assists in providing a consistent look and feel across products – and the organization. Finally, it can be used to help ensure that the user experience is intuitive across all touchpoints.

What are the core parts of a design system?

Typically the guidelines and building blocks that make up the system. Any of these subjects are well documented and ready to use instantaneously. This includes subjects like:

Design Language

Defining the overall look and feel of the products the design system is utilized for. Like the color palette, typography, icons, grids, and other visual elements. Also known as the smallest building blocks for the product or brand. The design language can also be known as ‘Fundamentals’.

Design Tokens

These tokens are like the smallest building blocks. These tokens make it easier for designers and developers to work together, as they will speak a common language by addressing the design tokens. When utilizing design tokens, the building blocks of the system can be equally implemented cross-platform.

Principles

These are established to guide the overarching direction and decision-making of the design language, individual components, flows and the overall (digital) brand experience. These principles serve as a set of guiding values that can be used to ensure the user interface is intuitive and user-friendly at a high level. Some common examples of design principles are:

  • Consistency – Ensuring that the user experience is consistent across different parts of products, and that elements within products are used similarly.
  • Clarity – Making sure that the user interface is easy to understand and navigate, and that information is presented in a clear and concise way.
  • Flexible – Allowing the user to customize and adapt the interface to their individual needs and preferences.
  • Usable – Ensuring that the user interface is easy to use and intuitive, and that it follows established design best practices.
  • Accessible – Ensuring that the products can be used by all people, equally intuitive.
  • Scalable – Since we live in an ever changing digital focused world, and design systems are there to evoke creative exploration, they should be easily scalable.

Guidelines

General guidelines for overarching topics like accessibility, branding elements, assets, content, marketing.

During my research on other design system’s, I came to the conclusion that many design systems include these general guidelines at both a high level, and a detailed level.

Let’s take ‘accessibility guidelines’ as an example. On a high level, accessibility is included as a principle, and it has a general page on how the product or brand implements accessibility with help of the WCAG guidelines. However, it’s also crucial for a button. Accessibility on a button is at a very detailed level, as a button needs to have:

  • Adequate contrast on text and background-color of the button.
  • Descriptive aria-labels, to provide users with screen readers with the necessary context.
  • Both its label and its aria-label need to meet certain writing criteria.

Examples of such rules for design, development and content can be included on the component’s documentation page. While it’s less relevant to include these on the high level pages.

Components

A set of reusable – interactive – components to build user interfaces fast, consistently and with high quality. These are documented excessively, and they are typically designed to be reusable and modular. Some common component examples:

  • Button – A clickable element that can be used to initiate an action.
  • Input – Input elements that allow the user to enter information, such as text fields, segmented controls, and checkboxes.
  • Dropdown – A button that shows a list of options when a person interacts with it.
  • Modal window – A container that shows additional information which can’t be present on the interface directly. Or when a person needs to verify an action.

Patterns

Patterns are recurring solutions to common design problems. In the context of a design system, patterns are the ways in which the system’s components and principles are combined and applied to solve specific design challenges. They provide examples of how the system’s components can be used in different contexts. Consistently and intuitively. Some common examples of patterns are:

  • Navigation – How the product’s navigation elements are organized and used to move the user through the interface.
  • Forms – The design and layout of forms within the user interface.
  • Data visualization – The design of charts, graphs, and other visual elements used to represent data.
  • Error messages – The design and content of error messages that are displayed to the user.
  • Empty states – The design of the interface when there is no data to display, such as when a user’s inbox is empty.
  • Loading states – The design of the interface when there is no data to display, such as when a user submits a form and it is being transferred to the server.

As Shopify describes patterns: A pattern is a situation, plus a problem, plus a solution. Similar design challenges being solved in a unified way. Ensuring recognition with the user and building familiarity.

Tools and Processes

These are included for maintaining and evolving the system over time. These are important to streamline processes around the design system, as the system is a project on its own. Topics can include UI design kits, coded library repositories, process docs, research reports, roadmaps, and templates.

While these are parts which are present on a regular basis in design systems, these aren’t the only ones. Don’t limit your team and yourself, remember? 😄

Who are the users and contributors of a design system?

As with lots of things in design, this depends on the context. The users of a design system can vary. Building a design system is a team effort. Those users need to specify their needs and what information must be included. Generally speaking, the main users, and therefore contributors of a design system are:

  • Researchers – use the system to add relevant research findings to building blocks and  documentation. Include research reports in reference links.
  • Designers – use the system to create user interfaces within its creative constraints.
  • Developers – use the system to build those interfaces, by the use of its documentation and code repositories.
  • Content – use the system to implement a consistent tone and voice in all brand elements. This includes component microcopy, UX copy, and copywriting.
  • Marketing – in collaboration with content. Guaranteeing a cohesive implementation of SEO strategies, branding and content.
  • Product Managers & Owners – use it as a reference in communication with team members and stakeholders. Check the status of the building blocks.
  • Stakeholders – similar to the PO. Communicates the value and progression of the design system internally.
  • Other product team members – Like we said earlier, don’t limit yourself. What roles might find relevance in their needs being included in the system? How might you include their needs in the system?

Return on investment of a design system

The return on investment (ROI) of a design system can be difficult to quantify, as it depends on a number of factors, such as the size and complexity of products, the effectiveness of the system, and the team’s ability to effectively use the system.

There are a few key reasons why building a design system is a great effort:

Consistency

The term that’s mentioned a dozen times now! A design system can help to ensure that the user experience is consistent and intuitive across different parts of products, the brand, services, and organization. This can be particularly important for products with complex or multi-faceted user interfaces, where consistency is key to ensuring that the user can easily navigate the product and find what they are looking for.

One other important thing: consistency builds trust with the people, users and customers of the product or brand. This contributes to retention.

Optimizing the process

By providing a set of standardized components and guidelines, a design system can help designers and developers create effectively and efficiently. This can be especially helpful for teams working on large, complex products, where the ability to iterate quickly and make changes easily can be a significant advantage. Extra interesting in Agile and Lean environments.

Cross-functional collaboration

The design system ensures that different teams are working towards the same goals and using the same components and principles. Short and sweet: teamwork and collaboration goes even more skyrocketed!

Product evolution

It facilitates the evolution of the product over a long-term time. Providing a foundation for products to grow and evolve over time. By defining a set of core principles and guidelines, it can help to ensure that the product remains cohesive and consistent as it is updated and expanded.

Key Takeaways & Conclusions

  • Design systems are a project on their own. Remember the first quote of the article?
  • No design system is the same, as it serves different needs in different contexts.
  • They need to be specific for their context, while simultaneously evoke creative exploration and innovation.
  • Core parts being the design language, design tokens, components, patterns, principles, tools, and processes.
  • Main users and contributors being researchers, developers, designers, content, marketing, product management and owners, and stakeholders.
  • The number one asset in implementing a consistent and intuitive experience across products and brands.
  • Stimulating faster time to market with product iterations, since it speeds up processes.
  • Contributes to more efficient cross-functional collaborations.

Resources

Book: Design System — A practical guide to creating design languages for digital products — By Alla Kholmatova

Design Systems 101 – NNGroup

What are Design Systems? | IxDF

A comprehensive guide to design systems, by InvisionApp

Design System Maturity Model, By Sparkbox

Design Patterns – Shopify Polaris

Web Content Accessibility Guidelines 2.2

Researched Design Systems