7 Steps to a Better Design System | Think Company

Design systems align product teams and foster partnership between development and design. As the system evolves, it will need maintenance and governance to keep it operating at full capacity. There may come a time in your design career when you are asked to repair or rethink an existing design system. It’s going to be messy. It’s going to take a lot of time and a lot of energy. You’re going to have to unite teams across the organization. Designers, developers, product owners, and stakeholders will have to be involved and informed along the way. But if you put in the work and stick to it, you’re going to come out on the other side feeling like a champion.

The steps below break down the process we follow here at Think Company to establish, evolve, or develop processes to maintain Design Systems. It is a process that has worked well for our teams and clients on projects of all shapes and sizes.

1. Take a Design Inventory

To start, spend time identifying and categorizing patterns within the existing design system.

  • Hunt and Gather — Go through each screen of the application and take screenshots of unique instances of the elements that build up the interface: typography, color, input fields, iconography, navigation, images, buttons, etc. These screenshots will help you visually analyze everything later on.

Recommended Tool

2. Do a Design Audit

During the design inventory, you built the foundation for your design audit. Now it’s time to get critical about the styles, patterns, and components you’ve collected. If there are four different date pickers that do the same thing, you can consolidate those into one component.

  • Categorize — Take your screenshots and group them so that you can see all of the elements together. This will help you identify differences and commonalities.

Recommended Tool

  • Airtable is ideal for categorizing and analyzing your data.

3. Begin System Modeling

Before you start tearing down the old design system to build up the new one, you’ll need to have a plan. That plan will help you understand what should be in the system, and more importantly, what should be left out.

  • Define UI Library Objects — Based on the system inventory & audit, compile a list of objects to be included in the UI Library. You’ll want to factor in the client product roadmap, front-end capabilities, design and technical debt, and more.

Recommended Tool

  • Google Slides is a great way to document, present and share your plan with stakeholders.

4. Discuss with the Team

Design systems are not created-or reimagined-in a vacuum. It’s time to share your findings and get input. This is a chance to refine concepts and clearly outline the work ahead. These discussions should include stakeholders and developers as well as designers. The discussion can be handled in a few different ways:

  • One on One — Get together with a design lead, stakeholder, product owner, or another decision maker and dig through the inventory together. Keeping the number of opinions in the room small will keep you focussed as you refine the inventory.

5. Create the System

The design inventory gave you a bird’s-eye view of the existing design system. The design audit helped you understand what needed to change, and the system model gave you a plan. Now, it’s time to do the work and explain the new system to everyone else.

  • Design — Using all of the evidence gathered so far, start making meaningful changes to the existing system.

6. Review with the Team Again

Now that you have documented your components, it’s time to share out your work and get feedback. Make sure to include people outside of the design team.

7. Publish

You’re done (for now)! Push the finalized documentation to the storefront. But before you do:

  • Double Check Your Work — Have all requested changes been made? Did you catch all of the typos? Go through everything one more time to make sure it’s as clean as it can be.

Additional Links and Resources

Originally published at https://www.thinkcompany.com on August 13, 2020.

We’re a team of business-minded designers and developers who help create great products and services for your customers and employees.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store