Onboard new viewers to your design system

Brienne Wong
Brienne Wong
  • Updated

Design systems serve as the single source of truth for product teams. It could be an overwhelming experience for new viewers if they don't know where to look for things. A good onboarding experience enables new viewers (or consumers of your design system) to learn your design system confidently. When the consumers of your design system use it successfully, the company's products will improve, resulting in a better user experience and more revenue. Discover how you can help onboard viewers to your design system.

The value of a good onboarding experience

Like the onboarding for a new hire will help them learn the ropes of a new workplace, the onboarding experience will help a new viewer understand your design system. Here are some of the benefits of a good onboarding experience:

  • Helps the viewer become confident to contribute to product work 
  • Ensures viewers use components correctly and avoid rework
  • Provides foundational knowledge to ensure adoption and consistency
  • Gets the new hire comfortable with the team's workflow
  • Encourages collaboration when current teammates help new hires onboard with the system
  • Teaches new hires how to contribute to the design system in the future and where to go for help

With a good onboarding experience, new viewers will be enthusiastic about using your design system.

Onboarding employees to the design system

These are some best practices for onboarding teammates to the design system. 

1) Integrate the design system into the existing new hire onboarding

This would benefit anyone who joins a team that uses the design system (e.g., designers, developers, content writers, etc.). Because onboarding processes exist, you can use them to your advantage to teach new hires about team workflows. Learning the design system during new hires' onboarding can get them to use it early. If you need help figuring out where to start, check with a program manager or team manager of the discipline for guidance.

2) Include exploring the design system as a task in onboarding

You can give new hires time to explore the design system independently while the design system team focuses on project work. They can read the documentation at their own pace to understand everything. You can even make it a scavenger hunt to make the learning experience fun!

3) Match the new hire with a buddy from the design system team

Pair a new hire with someone from the design system team. The buddy can provide an overview of the design system and how teammates use it. They can be the new hire's resource for questions. We recommend pairing your new hire with someone from the same discipline (e.g., developer and developer or designer and designer). If there's no one available from the design system team, pair a new hire with someone versed in using the design system and advocating for it.

4) Highlight how they can communicate with the design system team

For example, if a new hire asks about contributing a component, point them to existing communication channels to ask questions or provide feedback for the team. Use Shortcut Tiles to link to your channels in your design system. We recommend regularly assessing your communication process to determine what's working and establish an efficient feedback loop. You can add a feedback footer and embed a Typeform survey to get feedback.

Leverage what to have in your design system to onboard new viewers

Good documentation not only helps existing teams but new members too. As a good practice, the team should write the documentation as if anyone is a new hire to ensure it's clear and understandable. To make this easier, use these elements in your documentation:

  • Status tags to communicate what components are ready to deploy or not (components should have descriptions of their purposes and their use cases)
  • Design principles to explain the foundational beliefs behind the design system
  • Examples of good and bad design (use Rules to show this)
  • Anatomy diagrams to illustrate component makeup
  • Callout blocks to highlight important information
  • Notes from your design uploads (e.g., Figma descriptions) to provide information about your components

Final thoughts

Your onboarding process will evolve as your design system evolves. What may work right now may not work in the future as your product teams grow or your design system becomes more complex. We recommend setting up regular retrospectives (e.g., monthly, quarterly, or annually) with your team and new hires to improve the onboarding process. Implementing a good onboarding experience ensures the design system will get adequately used from the start.

Was this article helpful?