Increasing and Measuring Usage & Adoption of Design Systems – Panel Recap

Design systems are like products — driving adoption and measuring usage are two critical problems every leader needs to solve. This uphill battle highlights the importance of pulling the right levers and establishing the right OKRs to focus your team. This stage is a practice in patience, trust, and delayed gratification. 

“Right now, doing the hard work of a design system is definitely going to be something that pays off later.” — Andrew Clark, Head of Design at H&R Block 

What are the best practices for increasing adoption and practical frameworks for measuring success? Our panel “Navigating Adoption: Driving Design System Usage & Engagement” — which you can rewatch — featured three design system leaders to discuss these topics:

• Andrew Clark - Head of Design at H&R Block
• Cintia Romero - Senior Product Designer, Design System at Pinterest 
• Maya Hampton  - Senior Product Manager, Design System at REI Co-Op

Here are the top five takeaways from the panel.

Education 

“We say that education and adoption is a chain of events, but everything starts with education.” — Cintia Romero

Education is the key activity that drives adoption for your design system. This is so important that Andrew’s team at H&R Block incorporated it into their OKRs. When you start educating people about your design system, you’ll encounter two common questions — what is a design system and how can it help me? 

In order to answer these questions, you need to understand your stakeholders. As Maya explained, you want to tailor the benefits and values of your design system to who you’re speaking with. Do they care about efficiency, visual design consistency, shipping faster, or something else? One of the best ways to discover this language is to hold 1:1 discovery calls and speak directly with stakeholders to understand their pain points. 

As you start to hone your value propositions and focus on educating people, these are a few educational activities our panelists suggested:

• Conduct 1:1 onboarding sessions 
• Hold office hours to answer any design system questions
• Host group training sessions like lunch and learns 
• Write documentation for anyone to read  

Education is an ongoing activity and as Andrew pointed out in our talk, it’s important to orient yourself towards action. Start educating early and often; there’s no time like the present. The more time you spend on education, the more it means your system is gaining traction. 

Document for Scale 

“Create that central source of truth that people will start to look to and is just more scalable than having one one-on-one conversation.” — Maya Hampton

Documentation is the most scalable tool for education and driving adoption. Most design systems teams start small, so 1:1 onboarding, organizing training sessions, and holding office hours require you to clone yourself (and your team) to properly scale. This is why all our panelists emphasized the importance of documentation. 

Documentation provides you with a central source of truth that you can easily reference people to. When you’re sharing updates in Slack, in an email blast, or as a follow-up to a 1:1 conversion, point people back to your documentation. This allows people to learn more and onboard to your design system in a scalable manner (check out how Skyscanner and Mozilla use Supernova for documentation).

Starting documentation may seem like a daunting task, but Andrew provided great advice about setting realistic expectations to get you started. In the beginning, focus your documentation efforts on the features and functions early adopters use. As adoption grows, you can create and improve other parts of your documentation over time. 

Watch our expert panel “Design System Documentation is a Moving Target” with Romina Kavcic (Design System Guide), Alberto Calvo (Maze) and Luke Finch (ex-NewsKit) for practical strategies on how to improve your reference site.

Analytics

“Most of our team, especially in the system space, is very measured. We're very much about the data and what we want to do with it.” — Andrew Clark

While you start to drive adoption through education, how do you know which parts of your documentation and design system contribute the most to it? Analytics help you determine which areas of your documentation and design system to focus on improving. 

These are a few tools that our panelists use to measure adoption across their design systems: 

• Figma Analytics for measuring adoption of tokens and components 
• Google Analytics for understanding what people are reading in documentation 
• Qualitative surveys for additional insights into the data gathered by other tools 

In addition to these tools, Cintia’s team uses a custom analytics dashboard built through Figma’s Rest API (they even wrote a blog post about it!) and a custom Figma plugin that pulls up documentation directly in Figma for designers. Andrew’s team also uses a net promoter score (NPS) to understand adoption at a high level at H&R Block. 

Measuring Adoption 

“Instead of just looking at the numbers, because numbers are important, but how do we get quality out of those numbers?” — Cintia Romero

How do you define success and key results for your design system while you gather all this data about adoption? While this answer depends on the stage and size of your design system, our panel provides some helpful frameworks. 

If you’re just starting out with a design system and leveraging analytics isn’t possible, Maya provided a system for breaking down levels of adoption. 

• Level 0: People who have never heard of a design system 
• Level 1: People who know a little about a design system and may be investigating technical feasibility 
• Level 2: People who know about the design system and are using core components and the design system library
• Level 3: People who love the design system and advocate and contribute to it

You can flesh out these levels based on key signals that represent progression to full adoption of your design system. This system provides you with some structure for understanding usage without a lot of data. 

For more established design systems, Andrew provided a great framework for measuring adoption based on leading and lagging indicators. Leading indicators like high-quality component adoption and shifts to new libraries show that adoption will increase over longer time frames. Lagging indicators like ease of use and communication take a while to understand and what it means for your design system. 

Be Opportunistic 

“It’s really finding that opportunity where you see a window to take advantage of.” — Maya Hampton

One of the best ways to drive adoption outside of education and documentation is by being opportunistic. There may be opportunities where you can integrate your design system to increase adoption through other major company-wide initiatives. While these may be rare, it’s important to be opportunistic and take advantage of these parallel initiatives. 

Maya provided two examples to illustrate how she was opportunistic and increased adoption of the design system at REI. On one occasion, her team learned that there were plans to create a new microsite framework for REI’s front end with a bunch of new templates. Her team prioritized integrating those templates so that when people migrated, they also adopted the design system. 

The other example Maya shared was during a rebrand which she used to showcase the value her design system provided. The rebrand allowed her to give a clear value proposition of getting the new brand updates along with any future ones. These high-profile opportunities demonstrated value to leadership and enabled her to get on other teams’ roadmaps. 

Increasing adoption and measuring usage centers around two core activities–education and documentation. Our panel shared a wealth of knowledge and experience on how these activities set your design system up to scale adoption across your organization.