Table of contents
When a digital product reaches a certain level of maturity, the benefits of a design system really start to be obvious: Over time, the product has probably evolved, adding many different features, often by many different designers. Things get complicated.
This would probably be a good time to take the pivotal step in the growth of a digital product, and create a design system.
So, where to start?
The first step is to get a good sense of the current state of the product by evaluating all its different components and elements.
In other words, an audit.
The audit is the foundation that you can refer to throughout the process of creating your design system, which is why it’s crucial to execute it correctly. The more precise you are in this phase, the less time you will waste when you’re creating the design system.
How we do Design System Audits at Belka, in three simple steps — from the design team perspective
Step 1: The Visual Map!
Creating a visual map of the product means that we go through the whole product, page by page, and make screenshots of every part of every potential user flow.
We then dump the screenshots in a Figma file, linking the pages in a way a user would navigate them. The result is a big sitemap with lots of screenshots. Like this.
This initial phase is crucial for understanding the composition of the product and its components. The benefit becomes clear later on when you’re working on a particular screen or user flow, and you don’t have to navigate the product itself to find components.
The map also significantly speeds up the auditing process. You won’t need to worry about missing pages because you’ll have them all in front of you, ready for examination.
Step 2: The Components!
Once the visual map is completed, it’s time to go deeper, and look at individual components.
We begin by systematically going through each page, capturing screenshots of every component. (If it’s a complex interaction, having a screen recording can be helpful.)
Now, back to Figma.
We create a dedicated section for each component and all its instances. For example, a section for a sidebar (see below) should include its states, such as default, hover, selected and every other variant you can find.
You should apply this process to every single element of the product. While you don’t need to dive too deeply into this phase, it’s important to specify features that differentiate the variants and any information you consider important for when you start creating the actual design system.
To help us keep track and avoid overlooking any components, we maintain a list of common components that most products have, checking off each item on the list as we collect components. (Of course most products have at least a few custom components, so this list isn’t exhaustive.)
Step 3: User Flows!
Now that we’ve meticulously organized the components, we can move on to the next key part of the audit.
Typically, there are recurring user flows within a product, and often they’re the most common ones. Thanks to the visual map, you can quickly identify these primary flows and assess their coherence. Knowing the product well helps you give special attention to the primary user flows and lets you design components with a clear understanding of the context and the actions you want the user to take.
Example: Mapping the user flows for indigo.ai
The power of this approach was clear on a recent design system project for our friends at indigo.ai, creators of a sophisticated, AI-aided platform that lets companies support their customer care teams with a conversational chatbot.
Using a dashboard, indigo.ai’s clients quickly set up and train their AI to engage customers with personalised answers, standard functionalities and AI-assisted prompts. The dashboard consists of a variable form that each client can customize for inputs, layout and navigation.
Here was a perfect demonstration of the importance of identifying and focusing on significant user flows during the design phase.
The outcome was a unique form page, featuring a versatile sidebar and knowledge menu item component that can adapt to all possible conversation topics offered by indigo.ai, as well as any future additions.
This approach not only enhances the current user experience but also streamlines future product updates.
The big takeaway: auditing the main flows is a pivotal part of the overall audit process. It highlights the parts of the product that you need to pay specific attention to when you’re designing the components and flows for the best possible user experience.
Step 4?
Just kidding, there's no step 4! That’s it — you’ve completed your audit.
You should now have a comprehensive (and probably huge) Figma file containing all of the product’s pages, components, component variants, and user flows.
As you move on to creating the actual design system, you can relax in the knowledge that you have a solid foundation to work from, and that you’re less likely to have overlooked any components, pages and user flows that need redesign.
So. What are you waiting for? : )
∗ ∗ ∗
Chiara Marchesini is a product designer at Belka. You can follow her on LinkedIn, even if she doesn’t use it very much. And if you want to know more about design systems and audits, you can email her at chiara@belkadigital.com
Want more good advice from Belka?
- Sara wrote about the trouble with roadmaps.
- Is development on digital products slowing down? We explain why it happens and how to fix it.
- Giulio explained how to build a terrible product and make everyone miserable.
Want a safe pair of hand to help with your own design system?
Check Design System Audit, the latest service we launched for you. This article is a preview of one of the five pillars contained in the service.
