Design System 2: Conducting a UI Audit

Whether you're planning to build a design system for a completely new product, a rebuild, or an existing interface, and whether you're building that Design System independently or in tandem with the product UI development, it will help to have a good idea of what you're going to put in it.

Consider doing a UI audit.

A UI audit is the creation of a simple visual library (i.e. collection of screenshots) of all the separate parts of your UI that could be considered independent, reusable pieces. It should also show all the different variations and states of those components.

It serves as a reference for everyone involved in the project to have a clear, shared vision of what needs to be done, and also lets you decide what might not need to be part of the design system.

Conducting a UI audit

1. Be prepared to look at all the different areas of your UI and take screenshots of them, i.e. large screen, small screen, web, mobile - anywhere your Design System is or will be used - as well as any anything new that will also go into it, e.g. any new design collateral.
   ‍
2. Prepare a simple document to put your screenshots in (see an example below). It helps to have columns or placeholders for the different variations you're expecting to record, e.g. default, hover, pressed, disabled, primary, secondary, on, off etc. I recommend having this before you start screenshotting, as categorising them later can be difficult as you may forget which variation is which.
   ‍
3. Start snapping! This can be a little tedious depending on your UI, but it's worth it in the end and you'll have a great asset to share with your team or to refer to yourself.
   ‍
4. Show your team/stakeholders. If you have some good evidence about the scope of a project like this, it's always a good idea to share it early on; you'll thank yourself later.

↑