Building a UI design system to let your product grow

One of the problems we regularly encounter when working on large-scale sites or apps is that the user interface (UI) is no longer fit for purpose. Often, this is because although the initial design worked at launch, it’s become clunky as the business has scaled.

Some issues are to do with the UX, but others are to do with the UI. A classic example is navigation menus. While your main menu might have started out clear and simple when you first launched, more items inevitably get added to it over time and it eventually becomes cluttered and difficult to use. The problem isn’t just the information architecture; it’s that the UI itself needs work. For instance, tabs might have been a perfectly good choice at launch, but they’re hard to scale.

Another example might be the number of clicks needed to complete an action on your website. If your users are having to go through many pages to achieve something, it may be because your UI has become insufficient as your business has grown.

These problems can be solved by creating a UI design system.

The essentials of UI design

A solid UI design system has a number of hallmarks, and these are:

• Scalable — as the product develops, the UI needs to be able to accommodate future iterations without becoming unusable.
• Modular — it’s easy to remove or add new components, and it works well with current technical Javascript frameworks.
• Consistent — designers and developers can put together a page without needing to design it, using just the building blocks.

To create a design system that’s built for scale, we follow a three-step process.

1. Audit

We start by creating an inventory of all the elements in the UI: the colour palette, button styles, fonts, form elements, and so on. To document these, we take a screenshot of each element and their variations and categorise them into groups.

We’ll review this with the product owner and front-end developers to ensure we haven’t missed anything, and then we’ll make a prioritised plan for us to work from.

2. Key pages

We’ll then create the design for a few key pages so we can assess how the components work together.

3. Create the pattern library

Finally, we create the variations of each component. We’ll decide on every aspect, including the layout, typography, colour palette, buttons and links, lists and form elements.

From this, you’ll end up with a basic style guide to act as a reference point for future new areas of the app, and this can be added to as you build new elements. This checklist outlines what we’ll put into this guide.

For further insight into UI design systems, some interesting reading includes:

• Style Guide resources — real-life examples of UI design style guides and pattern libraries.
• Airbnb — Building a Visual Language — an interesting behind-the-scenes look at Airbnb’s design systems, including the necessity of creating them due to massive growth.
• Government website — an introduction to the Gov.uk design system.
• Mikhail Gündoğdu’s post — eight things you need to know about design systems, from what they are to how to scale them.

Get in touch if you’d like to talk with us about how we can help build a UI design system to grow with your business.