Are you struggling with a messy interface? Is your digital product full of inconsistencies? Are your designers and developers having a hard time aligning on how to evolve your UI?
If so, consider creating an interface inventory. It is a small but powerful step towards a homogenous, pattern-based digital design strategy.
An interface inventory is a categorized collection of every piece of design that makes up our digital product. They help us capture the status quo of every style (e.g. colors, typography, spacing, borders) and components of a user interface.
There are many benefits for creating one:
An interface inventory can be done at any phase of the product development process. Some teams start when kicking off a redesign or if they are struggling with confusion due to inconsistencies. However, there also may be no perfect time to start. If you and your team don't have a clear overview of your digital design, use that as a sign to get started with an interface inventory.
When planning an interface inventory, we can lean on Nielsen Norman Group's guidelines for content inventory and auditing. These ensure we are thinking of people, process, and tools:
Start off by identifying which part of your digital product you will be creating an inventory of first. You can decide on starting an inventory of the happy path, your core features, or your website's top-level navigation.
An interface inventory includes specific characteristics which are captured at several layers. For example, a component (a button) can be captured as such, as well as through the foundational styles that create it (colors, typography, icons, spacing).
Use the following as a guideline:
Foundations are the basic building blocks of your UI:
Components are reusable UI elements made with foundations:
When making an inventory of the foundations, CSS stats can be a good place to start. CSS Stats is a free and open-source tool to help visualize stylesheets. You can gain insights on existing layout and structure (display, float, width, height), spacing (padding & margin), skins (color, background color, border color, box-shadow), typography (font family, size, weight, alignment, line height, etc.. ), and border styles.
Although it might be tempting to run CSS Stats and call it a day, we recommend using it only as a first step and manually inspecting all elements in your chosen scope. This helps us gain an understanding of what is being used where, which is essential in step 5 (auditing our inventory).
In order to capture styles, use your browser's developer tools to inspect the page. Knowing how to use the developer tools is certainly a skill that I recommend all designers and product experts to add to their tool belt. On Chrome, right-click anywhere, and click "Inspect" from the bottom of the menu.
As an alternative, there are many browser extensions made to identify certain properties on the page, for example: WhatFont to identify fonts or ColorZilla to get the color of any pixel.
For icons, imagery, and components, simply take screenshots and organize them. You can use existing pattern libraries as a reference, take a look at this (curated list) for inspiration.
Keep in mind the different kinds of design patterns and use them as a guide for organizing your interface:
An audit examines and evaluates the quality of the interface in the inventory. The goal of an audit is to uncover:
This is an example of a typography inventory. In this case, the inventory criteria that were relevant are:
Notice that font family and weight were not inventoried, as they were irrelevant for my goal at the time: to understand what font sizes existed in the live website so that I could start working with them when I designed new patterns. I gathered this information for both of our breakpoints (mobile and desktop). The first step in my audit was to determine whether the color contrast passes or fails the WCAG AA accessibility guidelines. I used WebAIM's Color Contrast Checker. From here I am able to make informed decisions regarding which font styles should be deprecated, and which ones should be used in any new component I create.
As another example, an icon inventory. We can see the plethora of styles and colors used. In this case, breaking them down further into detailed criteria was not necessary as it was clear that we would use an icon library to replace most of them. The inventory helped us make an assessment of what should stay or go and create guidelines for the future.
Once the inventory has been created and audited, it's time to meet relevant stakeholders and come up with a game plan to remove unintentional inconsistencies and improve the existing interface. The goal should be to transition into a pattern-based approach, and in the long run, an interface inventory can serve as a blueprint for the creation of a pattern library. Since it is a visual side-by-side comparison of the existing interface, it helps us communicate the status quo in a tangible way, and it's very effective when sharing it with stakeholders that are further removed from the digital product design and development process (ahem...people that decide on budgets and resources).
Interface inventories are small but meaningful when transitioning to a design system approach. Making one can help get the ball rolling in your team as they help us align and bring in momentum. And know this: even if you do the inventory and audit on your own, you are never alone. Consider joining the design systems community on Slack (it's a great place to ask questions or get feedback regarding this process), or hire a facilitator to help make this project a success.