Interface Inventory for improving digital products

Every designer has been there: The tough design work starts with increased product complexity.

Usually this happens when the product core has been established, rolled out, and tested. When we start to add new features and take additional requirements into account, it’s important to review any variants of interface elements and design decisions.

When the design gets messy, Interface inventory helps

Ideally, there should be enough time for the product team to iterate on any new feature design. Also, maintaining a product’s design pattern library from the start helps to prevent inconsistencies right at the source. I’ve worked on a couple of projects myself though, were we lacked the time and resources to properly set up a formal Design System. I firmly believe this happens all of the time.

Today, digital products are built to be continuously extended and changed throughout the product lifetime cycle. Gone are the days of complete relaunches every few years. We ought to see software as a continuum – with constant maintenance and upgrading in place.

“Code and designs created years ago still exist in many places, even after the landscape of a company and its product have shifted significantly. This requires constant maintenance and upgrading.”

“Building a Visual Language” @ Airbnb Design

This entails some challenges: Product teams change, key players leave the team, product strategies shift – and the product has to follow along.

High discipline is required from product teams regarding digital product strategy and maintenance. Luckily, there is a proven tool to deal with these situations and restore product consistency: the Interface Inventory.

Auditing a product’s building blocks

Similar to a Content Audit, where a site’s content types and elements are listed and analyzed, an Interface Audit helps teams to re-examine interface elements and detect overlaps, outdated designs and identify room for improvement.

Brad Frost defined the Interface Inventory as the comprehensive collection of the bits and pieces that make up your interface.

Identifying all of the Lego bricks (yes, I like Lego) a huge Lego set consists of is not done by throwing all bricks into one box. The quintessential learning comes from putting different blocks into different boxes and thus receiving a good overview of similar elements within each category of building blocks.

After we have assembled the Inventory, we can easily prioritize elements, identify gaps and remove overlapping or outdated elements.

Prepare for your Interface Inventory

To get started with your Interface Inventory, first gather your team. Ideally, that’s your cross-disciplinary product team with all essential roles (or at least selected representatives):

• Concept/UX designers
• Visual designers
• Developers
• Product owners
• Product/project managers

You’ll want to reserve some time for this. Based on my experiences, I’ll recommend at least a day for the team to conduct the Interface Inventory. Add another day to analyze and discuss findings and to plan for iterations and improvements.

This exercise is about learning and better understanding your product. It’s an exercise for the whole team.

Of course, team size and time for the Interface Inventory depend on your project’s size.

Collecting the pieces

Use the live site of latest version of the application to conduct the Inverface Inventory. Select a tool to take screenshots of the design.

I recommend using a Trello board to collect the interface artifacts and group them into corresponding categories. In Trello, you can create board columns for each interface item category.

The categories should reflect the nature of your product. Some general categories might include:

• Navigation elements
• Images & Illustrations
• Functional Icons
• Buttons
• Forms
• Interactive components
• Messages
• Modals/dialogs
• Headings
• Copy text
• Lists
• Tables
• …

Of course, these categories heavily depend on your product. The Interface Inventory for a touch kiosk project might be quite different from those for a marketing website project.

Every Interface Inventory is an excellent starting point for setting up a Pattern Library or formulating a Design System. You could also go for categories that reflect Atomic Design principles:

• Elements: the smallest individual pieces of the interface which act as building blocks for components
• Components: independent and repeatedly used interface pieces built out of elements (e.g. toolbar item, page loader, …)
• Modules: full functionalities built out of components (e.g. toolbar, search, …)
• Layout definitions: all of the above gathered in whole page layouts for certain functionalities

As I wrote earlier, the structure should be handy to use with your project and make sense to you.

In Trello, within each category column, you can use cards to document individual elements. On these cards, just add a name for the element, screenshots and description texts (if needed). Depending on the team size it might make sense to split the team for conducting the inventory. Afterwards, the team should get together to present the findings.

Learning from the Interface Inventory to improve the product

While conducting the inventory, inconsistencies and outdated patterns quickly become obvious. That’s the advantage of writing things down and discussing them as a team.

For my team it turned out useful to add tags to the documented elements in the inventory while discussing the findings. This helped us to directly mark elements that need improvements. For instance we marked inconsistent elements, patterns that need general UX improvements or frontend bugs.

“This was fun and delivered highly valuable insights. We quickly gained an overview of existing problems and could identify which elements and patterns need to be aligned more closely.”

A voice on my product team after the Interface Inventory.

The essential output of doing an Interface Inventory is the basis for the Pattern Library and/or Design System for the digital product. The Inventory is the starting point. It doesn’t stop here. Regular assessments of the Design Inventory should become a habit for product teams, especially when adding elements and features. Consistent interfaces and up-to-date, seamless Design language are the benefits.

Apart from this, we found the Interface Inventory to have a big impact on the product team’s well-being. This is an excellent exercise to strengthen your digital product’s quality and end up with a better understanding of the product for everyone in the team.