2️⃣How to audit a design system

👋 Introduction

Beginning a design system is pretty thrilling, but pause before diving headfirst into creating a ton of components, styles or frameworks.

In the first few weeks, take a good look around: audit, explore existing designs solutions, and dive into the teams’ use cases. This discovery work will help build a sense of how the design system should support the product.

1️⃣ Collect assets for audit

To facilitate a smooth audit, gather as many design and code assets associated with your design system as possible, including:

  • All design files of existing and upcoming features or products

  • Any existing style guides or design system files

This is also a good time to collect roadmaps from the product teams. This information will help determine potential pilot for the project in later steps.

2️⃣ Identify existing design approaches

1. Group similar components

After gathering the assets, comb through them to:

  • Group similar components visually and label their origin from specific features or products.

  • Identify commonalities among these components. This will help while abstracting the component.

This is purely an objective exercise; refrain from making any judgments or evaluations for now. The purpose is to understand existing design solutions and use cases.

2. Interface inventory

While grouping components, also take a note of the frequency of usage of these components creating an interface inventory. This will help a lot in selecting a pilot and prioritising design system components effectively later on.

3️⃣ Identify opportunities for improvement

This is a good time to understand what new patterns and paradigms can be introduced with the design system. Ask the team: what would we like to see more or less of in our product?

Some examples:

  • More or less of a particular motion

  • More or less use icons and illustration

  • More or less use of progressive disclosure

Screenshot existing examples and ask team to annotate what’s interesting or not working about them. Collect them in one place like this:

4️⃣ Outcome

After the discovery phase, you'll have a comprehensive understanding of the patterns and components across the product. There will also be a shared understanding on the potential direction the design system could take to support the product.

Last updated