# 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.**

<figure><img src="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FYk4iFcuR48dGpjJlZEGw%2Fdiscovery1.jpg?alt=media&#x26;token=32cca002-19de-4b8d-b975-1c37a38834a0" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2FyAuKunFxkk77vOwH5o0k%2Fdiscovery2.jpg?alt=media&#x26;token=ee14f7eb-c18b-484d-a19e-20910e90cb58" alt=""><figcaption><p>Interface inventory </p></figcaption></figure>

***

## 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:&#x20;

<figure><img src="https://1713760500-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WvjZe1MeyuSKcswT743%2Fuploads%2F8IBOkH68T6qhKQPROE5W%2Fdiscovery%203.jpg?alt=media&#x26;token=d786edfd-3721-46fc-9709-5cc8284937d6" alt=""><figcaption></figcaption></figure>

***

## 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.
