Design Systems

What is a Design System?

A design system is a collection of reusable components, along with usage documentation that make up the building blocks used to assemble a UI and can be used across multiple applications, devices, screen sizes, and mediums. Furthermore, there are three parts that make up a design system:

Component Library

A design component library is made up of the design assets used to rapidly design wireframes and prototypes. Components are the reusable building blocks used to assemble a User Interface (UI).

Documentation

The component documentation explains how components should be used, their defined behaviors and interactions.

Tools for Scalability

A code component library allows developers to develop a component once in a shared library and reuse throughout code as needs arise.

Why do they matter?

Design systems simply create a unified experience across digital platforms and applications. They create a strong, extensible base through a modular approach using consistent components and defined behavior. The design system creates consistency and standards which matters for both usability and brand standards.

Design systems ensure consistent design patterns become recognizable when used repeatedly by a user. By reusing the same components consistently in the UI, the UI then becomes easier to understand and use which also decreases user training for applications. In contrast, without a design system in place; there is a possibility that unique UI elements with unique interactions, in which the prompted actions are the same can potentially be introduced. This increases cognitive load which forces the user to interact in new ways to the same action. It also makes the user interpret UI elements rather than focus on the task they are trying to complete.

Defining the visual language and documentation around component behavior, interactions, and guiding principles of usage is what sets a design system apart from a style guide or UI pattern library. These are defined as such:

Style Guide

A document that includes guidelines for the way a brand should be presented within context to both graphic and language.

Pattern Library

A collection of design assets and components for use across a company.

Design systems help maintain, govern and preserve brand standards. Colors, typography, horizontal & vertical spacing and rhythm, as well as numerous other design aspects that can be mutated over time through various iterations of design. If design aspects are changed consistently, there is a possibility of causing negative impact to a brand’s image, website or application and can appear disheveled. Additionally, the brand can lose credibility with these types of inconsistencies.

Why is it valuable?

Design systems create an optimized environment for product development. They allow for quicker prototyping by using existing components and faster deployment time by developing the components and their respective behaviors once and then reuse them. In turn, this fosters faster product iterations when combining these factors while also reducing design and development debt.

Rapid Design Prototyping

Rapid prototyping while still maintaining consistency is possible when using a design system. Once a base system has been created, the components can feed a global symbol library in a design tool and be shared.

Scalability

The reusable principle of design systems makes it easily scalable. Since a design system is a collection of reusable components, these components can be extended to any team or application. Scalability occurs in design and development efforts through the reuse of components. However, the scalability is not limited to the visual design or development efforts; there are standards and documentation in a design system around usage and behavior which will guide the intended user experience and remain intact when scaled. In addition, design systems are a powerful tool to help businesses scale with a solid foundation to reduce future design and development costs as well as support a consistent and positive user experience within the usage of their products.

Reduce Development Debt

Design systems also reduce design and development debt. Instead of designing for a specific feature or an immediate use case, a design system creates a language meant to be reused across applications. Once the system is built and coded, its elements can be reused and in return reduce technical overhead.

Provide a Better Customer Experience

Consistent components as well as consistent component behavior creates a positive user experience with recognizable patterns. The component behavior is an important factor to note since the design system also designates component interaction behavior. An example of consistent component behavior is the “next” button at the bottom of a table, which usually takes the user to the next page of data. It is expected that this action will be the same across all applications. With this consistency, the user interface becomes easier to understand and use; which in turn reduces cognitive load & improves usability for the user.

Building a Design System

Getting Started with Design Systems

Before building a design system, the user and product workflows must be taken into consideration. Conducting interviews with the end users and mapping out workflows allows designer to gather the requirements necessary to build a design system best suited for the organization. Additionally, this information will provide insight into what system is a good fit for the organization (i.e. strict vs loose, centralized vs distributed, etc.)

Prioritizing Components

Most of the common components that make up a design system are organized into hierarchical tiers, examples listed below:

Tier 1: Typography & color styles, spacing rules
Tier 2: Atom level components using styling from Tier 1 which may include buttons, dropdowns and input fields
Tier 3: Combining elements of tier 2 components to create more complex patterns.

Design System Testing

After a component has been prioritized and designed, it should go through testing to ensure it follows best practices, sub elements that make up the pattern align with the existing design system as well as test its usability. During the evaluation, the following four key elements should be considered:

  • Accessible: Components meet best practices in terms of web accessibility standards.
  • Scalability: The component can be scaled easily by those who are utilizing them.
  • Consistent: Foundations of the components such as style and color are consistent.
  • Function: Functionality must be easy to use, and interactions are easily understood.

After the testing process, the component is added to the design system and it should be easily understood by those who did not build the patterns, such as other developers or product managers. Essentially, there should be no confusion about how the component should be used in a product as well as the guidelines that accompany the component for others who use the design system.

Other Design System Factors to Note

Buy in: The designers’ and developers’ workflow should always be considered when implementing processes, components and guidelines to the design system. The more the design system end users are understood and considered, the more likely the design system process will be adopted and used.

Flexibility: A design system should have a certain amount of consistency documentation and guidelines while also leaving a certain amount of flexibility for iterative improvement, and extensibility when considering future use cases.

Format: Since design systems can be robust as they mature, it’s important to consider the taxonomy of content as well as the structure of component information. All components and patterns should be easy to find, and their corresponding guidelines should be easy to understand.