Mature your design system
Brienne Wong
If you and your team have successfully used your design system, you may be ready to take your design system to the next level. Going from a basic design system to a mature design system entails expanding your basic setup so that it becomes not just a single source of truth for your or a few teams but for product teams across your company. Maturing your design system will enable you to quickly and efficiently improve the UX of your products. Discover the next steps you can take to grow your design system.
What is in a basic design system
If starting your initial design system, learn more about what a design system as a minimum viable product looks like. Your initial design system should have foundational elements such as fundamental components, brand elements, and usage guidelines. As you grow your basic design system, you will:
- Define the naming conventions of your components
- Add complex components and usage guidelines
- Expand on brand elements by adding voice and tone guidelines, content guidelines, audio language, and anything connected to brand standards like logo/watermark usage
- Develop a component library for designers
- Code UI components for developers
Once your team is ready to level up, we recommend increasing the design system’s adoption while you work on maturing your design system. Achieving wide-scale adoption of your design system puts your company in a better position to scale and pivot quickly. You can discover tips in our article on increasing adoption.
Create a mature design system
When you have gotten teams to adopt your design system, it is time to mature it.
Get started
As part of your refining process, we recommend auditing your existing design system and procedures to assess inconsistencies and inefficiencies. Have your team collaborate on what’s working and not to help your team get closer to a shared language and vocabulary. A shared language and vocabulary will enable easy decision-making for your team.
Your team may have created an informal process for governing, contributing, and measuring your design system–now is the time to solidify your process and document it. Governance, contribution, measurement, and a defined roadmap are critical for progressing toward a mature design system. A mature design system consists of the following:
- Design system principles that explain what is and what’s not in your system that everyone agrees on.
- A definition of an advanced design system so everyone is on the same page for accomplishing this goal.
- A governance process that articulates the rules and processes for managing your design system. You would collaborate with your team to determine what’s best for everyone.
- A contribution model that dictates how teammates can contribute to the design system and make updates. This enables the design system to stay relevant and be a single source of truth for the company.
- Measurement process that helps your team determine the value it’s providing for its users and how to iterate on it.
- A defined roadmap that outlines the components and features the design system users will need.
Figuring out principles and processes enables the system to serve its contributors in the long run better.
What to add to your design system documentation
As you mature your design system, improving your system’s scalability will help more people use it. Here’s what you can do to advance your design system:
- Use design tokens to standardize your foundational elements like color, typography, etc. (use Tokens 2.0 to start creating your design tokens or if you’re already using design tokens, sign up for our tokens 3.0 beta)
- Create a design system roadmap to monitor milestones and timelines (you can create one in Trello and embed it in zeroheight)
- Use releases to create snapshots of your progress
- Add code repos and sync markdown files to centralize your documentation in one place
- Use callout blocks and status tags to communicate information to subscribers and contributors
- Implement a tool to measure and gather feedback (use the feedback footer or zeroheight Analytics, Google Analytics, or Hotjar if you’re on our Enterprise plan)
- Creating page templates to replicate styleguide pages and add more content quickly
- Add styleguide pages that document your operational processes like governance, contribution, etc.
Collaborate with your team to determine what else you need in your design system as you move along.
What to implement in your team
The team processes that get you closer to a mature design system are just as important as the elements in your system. We recommend implementing procedures such as:
- A communication process to inform your team about updates (e.g., Slack announcements, Zoom meetings, Loom videos)
- Metrics to ensure the design system is providing value to teams (e.g., effectiveness or consistency of products built using the system)
You’ll refine your processes as you gather feedback based on the metrics you decide on.
Final thoughts
Your design system is a living product and continually evolves with your product teams’ needs. Creating a mature design system takes time. A design system roadmap will demonstrate to teammates and stakeholders your plan and why a mature design system doesn’t happen overnight. If you think everything is fine, take a closer look–there’s always something to improve and iterate on to ensure your design system helps your teams provide better customer experiences.