Same library, different patterns

Why dashboards need more than components

Platform and enterprise products are the backbone of every organisation. I think of them as service design products because they usually power the backend of a product or service.

Think of a Shopify seller, or the admin of any company. A poorly designed dashboard can break the experience for the customer on the other end.

The key differences between platform products and regular products are:

1. They are built around data-heavy components. Tables, data displays, and KPI or metric cards make up 60–70% of the building blocks of these products. They might look different from product to product, but the fundamental principle behind each component stays the same. Take a table, for instance. Its core purpose is to display data in a structured way for users to consume, but it can be styled in many different ways. If you look at the tables below, each one is styled differently, yet the core principle of how to use a table applies to both.

2. Navigation works differently. Platform products usually come with two layers of navigation, a sidebar and a top bar, which users rely on to move between different parts of the product.

3. Interaction is different. One state that clearly distinguishes a dashboard from a mobile application is the hover state, because the primary way users interact with a dashboard is with a mouse

Patterns vs components

From the section above, we can see what makes dashboards and enterprise products unique. There are tons of design systems that provide these components, but what most of them are missing are patterns for how to use them.

Imagine you install a free library or design system for your team. Team A builds an orders page and Team B builds a fulfilment page. Same company, different patterns.

Below are the results after prompting AI with the same library.

Both teams used the same components and tried to convey almost the same message, but the patterns aren’t consistent, and AI built both of them.

Patterns are key to how people use a design system, and this matters even more in the era of AI. We need to guide AI on how to build these patterns so the results stay consistent.

Patterns are the key to unlocking a design system in this era

If I were building a house right now, I would know where to place my door and what purpose it serves. How a door is used and handled is the same in Germany or Uganda. It might look and feel different, but the function is the same in both countries.

A status should mean the same thing on every page, and an empty state should always tell the user what happens next. Those are a dashboard’s doors.

Same library, different patterns was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.