Use data wisely, talk to your users repeatedly, and think of the design system as an in-company product serving other, paid products.
When it comes to developing communities and advocacy around design systems, Jan Toman has the experience and insights to ensure you have the best chance of success. Having worked in some of CEE’s biggest tech startups, including Kiwi.com and Productboard, he shares his data-informed approach and critical phases to help streamline business operations.
Building design systems is all about creating a consistent experience across different products
As Jan Toman explains, think of design systems as a “collection of reusable components and patterns guided by clear standards that product teams use to create consistent experiences across a range of products”. Further to this, it includes usage guidelines and design language which powers to hold it all together.
Approaching the design system as a product of its own, serving other products will help to increase the adoption of the design system. More importantly, it prolongs its life cycle.
Four-stage life cycle of a design system
With the product mindset applied to the design system, traditional and established product life cycle stages/phases also apply to the design system:
- Introduction phase
- Growing phase
- Maturity phase
- Decline, or (hopefully) extension phase.
Here’s how you build a design system that will serve your company long-term, without slipping into the decline stage:
1. Introduction phase
Do your research
Essential before creating any design system is expectation management in terms of function and scope. “Is there only one product that we want to support, or is it five?” Toman asks. Also, take stock of what is already available in the company (do reusable components already exist?) and what is the current state of your design language.
Stakeholder and user interviews to understand expectations for a new system are mandatory. Holding these also helps sell the design system internally. Some critical questions include:
- What do the designers and front-end engineers need?
- Are there claims from quality engineers, writers, design managers, product managers, or brand designers?
If you are wondering what to ask during interviews, here’s a guide Toman created for Kiwi.com, a search engine for plane tickets. He recommends taking detailed notes of the answers – you can always synthesize later.
Interface inventory shows the current state of your application and UI. You can follow this step-by-step approach by Brad Frost.
Unifying components like typography, iconography, fonts, or spacing is the last part of the introduction stage. Great free resources to use are ProjectWallace.com and CSSstats.com.
2. The growth stage
Double down on what works
Add missing components and other resources to the system. “In tech, we tend to launch with the basics only to realize that crucial features are missing,” Toman believes.
Set up governance to observe user behavior. Track metrics such as component status (what component is used the most?), see how users interact with the system and ask them for details with open-ended questions. What do they like? “Gather positive feedback for your team,” Toman suggests.
Getting many early adopters to use the system proves its value to the stakeholders. You can track your user base’s size in Codebase. Figma comes with analytics features too.
Visualizing these numbers “keeps stakeholders, users, and management informed about the impact of the design system,” Toman adds. This article written by his former colleague explains how they measured the adoption at the tech company Productboard.