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.

Interface inventory

---

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.