What is a Design System?

My favorite definition of a design system comes from Dan Mall: A design system is a package-managed, version-controlled software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently, and happily. 

In other words, a design system is a single source of truth for user interface elements, styles, and usage guidelines that allow product teams to create consistent experiences across multiple products in an organization.

What are the benefits of design systems?

The primary purpose of design systems is to help teams build consistent experiences but they can also make developer’s workflows more efficient and prevent double work.

Imagine your application has multiple pages that allow users to add new data. You might have two developers working on different pages that need to implement this pattern. A design system may have an existing component and usage guidelines that both developers could use to implement the feature.

In this example, our developers don’t have to write custom code, we eliminate the risk that they will be implemented differently, and our users know how to add new data wherever they are in our application.

How do you know if you need a Design System?

Some questions to consider:

1. Have users or other stakeholders noticed your product’s experience feels disjointed?
2. Have you noticed differences in the overall look and feel of your product?
3. Do user interface elements work the same way everywhere they’re implemented?
4. Is your team building the same thing over and over?
5. Are you building more than one product?
6. Do you have more than one team working on products?
7. Do you have a plan to maintain and evolve a design system?

If you answered yes to some of these questions, it might be time to consider investing in a design system.

How to Get Started

Before you build:

1. Interview your users. Hopefully, you’re already speaking with them regularly. If not, now is a great time to start! Ask them about their experience using your site or using your application. Ask clarifying follow-up questions and document their insights. This can help identify UI elements to prioritize in a design system and help improve the overall experience.
2. Interview your development team. Developers are the design system’s users. What will make a design system easy for them to use? What are their concerns? What excites them about some of the benefits a design system will offer? Developers can be your biggest advocates—talk to them before deciding to build.
3. Identify some basic principles. What is important for your organization? For example, you might include consistency, reusability, and accessibility in your stated principles. 
4. Take an inventory of each element in your product’s UI. For example, how many styles of buttons are you using? Are you using consistent type sizes for headings and paragraphs? Are you using color consistently?
5. Identify a page on your site or application that uses the most elements in your inventory. Start small by building, documenting, and implementing those elements in the first version of your design system.

Implementing a design system is good for your users’ experience, your employees’ experience, and your business.

If you need help getting started, our team is ready to lend a hand, schedule time to chat with us.