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.
• Work Fast — You should capture things fairly quickly. Leave all judgements for the design audit.

Recommended Tool

• Miro will allow you to collect screenshots and thoughts the way you would on a giant whiteboard–and more!
• Airtable is another great place to store and organize your screenshots and thoughts. We’re big fans of this 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.
• Understand — Try to make sense of what you have so far. How do these components work? How should they work?
• Compare and Contrast — Look into best practices and link out to articles. Is there anything a component could do better? Are there any rules that have been broken?
• Take Note — More likely than not, you’re going to bump into redundancies. Make note of the components that can be consolidated. Show your work and explain your thinking.

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.
• Define Governance Model — A design system is much more than a UI library. The governance model covers the nuances and operations of an active design system.
• Define Storefront — The system storefront acts as the single source of truth for all system information: processes, guidelines, tools, etc. Define what tool to use for the storefront and how it will be contributed to.
• Align with Client Team — After defining all parts of the design system, align with the client team. Depending on the engagement, you may need to have a large multi-hour working session or a small, casual meeting on a recurring basis.

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.
• Bring it to the Team — Explore your findings with your team. Collectively, the team will have a larger pool of knowledge to draw from and that will help fine tune the design inventory.
• Keep it Digital — If your team is busy and time to meet is scarce, drop your inventory-along with any necessary explanation-into Slack, Teams, or an email. This will allow your team the time they need to review your findings and give feedback.

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.
• Write the Rules — How does your system implement large buttons vs small buttons? How will certain colors be used? Write it down and make it clear so that any designer picking up the system will be able to implement it without a lot of guesswork.
• Show, Don’t Tell — Whenever possible, illustrate how things work. Create diagrams to help everyone understand what the components in your system do.
• Refine — This is not a one and done process. Make sure to go back over existing rules to make sure that they’re still applicable. A design system is a living document that will change over time.
• Build — Bring the system to life by building new patterns and adjusting existing ones.

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.
• Celebrate — You’re on your way to a more perfect design system! Every designer and developer who comes after you will thank you for your time and effort.

Additional Links and Resources

• Brad Frost’s Interface Inventory is an in-depth look at the inventory/audit process.
• Keith Rich’s How to Use Kanban to Manage a Design System is an excellent look at how to use Trello to manage a process like the one outlined above.
• Shawn Hickman’s and Amanda Kalk’s webinar Why Your Design System isn’t Working is a deep dive into why your design system might not be working and what you can do about it.
• Shawn Hickman’s webinar Understanding Design Systems explains what design systems are and the value they bring to teams and organizations.

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