What is a Design System?
A design system is composed of a UI library, storefront, and operations.
- The UI library includes styles, patterns, and documentation for both designers and developers.
- The storefront is a location where any person can access design system information.
- Operations provides the guidance and tooling required for managing the creation and ongoing evolution of the design system.
Design systems align product teams and foster partnership between development and design. As the system evolves, it will need maintenance and design system governance to operate 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. Designers, developers, product owners, and stakeholders will have to be involved and informed. But if you put in the work and stick to it, you will 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 strategies to maintain Design Systems and Governance. It is a process that has worked well for our teams and clients on projects of all shapes and sizes.
What is Design System Governance?
When we create a design system governance model specifically tailored for your team and culture, we’re creating a design system hierarchy. This includes details about:
- Decision-making: Who has final authority
- Contribution: Who can add and make changes to the design system
- Enhancements and workflows: Who implements the design system and how they do it
Design systems are more than just a UI library—they are the infrastructure your team needs to scale. Having centrally-located and well-defined processes, documentation, and tooling enables your team to ship with more confidence and higher quality.
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 reasonably quickly. Leave all judgments for the design audit.
- Miro will allow you to collect screenshots and thoughts the way you would on a giant whiteboard–and more!
- Airtable is another excellent place to store and organize your screenshots and opinions. We’re big fans of this tool.
2. Audit Existing Design System Components
You built the foundation for your design audit during the design inventory. Now it’s time to get critical about the styles, patterns, and components you’ve collected. If four different date pickers do the same thing, you can consolidate those into one component.
- Categorize – Take your screenshots and group them to 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 will bump into redundancies. Make a note of the components that can be consolidated. Show your work and explain your thinking.
- Airtable is ideal for categorizing and analyzing your data. Here are helpful tips for getting started with Airtable.
3. Begin Design System Modeling
Before you begin 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, etc.
- Define a Design System Governance Model – A design system is much more than a UI library. The system 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.
- Google Slides is a great way to document, present and share your plan with stakeholders.
4. Collaborate to Improve the Design Systems
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 ways:
- One-on-One – Get together with a design lead, stakeholder, product owner, or another decision-maker and dig through the inventory. Keeping the number of opinions in the room small will keep you focussed as you refine.
- Bring it to the Team – Explore your findings with your team. Collectively, the team will have a larger pool of knowledge to draw from, which 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 Design 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 specific colors be used? Write it down and make it straightforward 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 ensure 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.
- Gain a Consensus – Review the documentation and get approval or feedback from your team. If there are changes, take them back to the documentation phase and make the necessary adjustments.
7. Publish Your New Design System
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 possible.
- 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.
Design System Resources
- Brad Frost’s Interface Inventory takes 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 using 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 design systems and their value to teams and organizations.
Maintaining Your Design System
With a well-defined design system, your developers and product owners to make better design decisions—even without the presence of a designer. The right tools will allow your team to make better decisions about things like:
- When to use a modal
- What type of button to use
- Which chart to use for specific types of data
Having a well-maintained design system makes it easier than ever to create content that meets your design standards and moves you closer to your business goals.
Send us a postcard, drop us a line
Interested in working with us?
We scope projects and build teams to meet your organization's unique design and development needs. Tell us about your project today to start the conversation.