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

  • 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

2. Do a Design Audit

  • 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

  • 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

  • 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

  • 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

7. Publish

  • 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

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.