Emex design system for multiple products

Emex is an international wholesale auto parts marketplace with a fulfilment centre in Dubai. It serves B2B and B2C customers across the Middle East, Europe and the Americas. The company also develops its own digital products and services.

Over time, the marketplace has grown into an ecosystem of services for customers, suppliers and warehouse teams. Each product has its own purpose, but they all need to work together.

Emex wanted to increase marketplace sales, help existing partners grow their profits, attract new partners and expand into more countries.

As the number of projects grew, so did the mix of technologies and design approaches. Maintaining existing services, building new ones and keeping their interfaces consistent was becoming increasingly difficult.

Many of these products used similar elements: buttons, forms, navigation and common interactions. Yet each service had its own design decisions to account for.

We needed to bring the shared elements together and create a design system that teams could use across Emex products. It also had to be flexible enough to support new services as the business grew.

We defined a consistent set of colours, typography and grid rules for Emex products.

These gave designers a starting point for new screens and updates. Instead of creating slightly different versions of the same elements for each service, teams could work with an agreed set of styles.

The challenge was to make this work across very different products. A retail marketplace, a supplier portal and a warehouse tool have different users and workflows, but they can still share the same visual language.

We created a reusable component library in Storybook, bringing together icons, buttons, input fields, tabs and checkboxes.

We also added custom scripts for registration, phone verification and selecting dates or date ranges in a calendar.

Developers now had one place to find the components they needed, rather than recreating familiar elements for each product.

We also covered interactions that involve several steps or states, such as registration and date selection. Having these patterns in the library makes it easier to reuse them and keep the experience consistent across services.

We continued developing the design system alongside Emex's other products. That gave us plenty of opportunities to apply the shared components to different tasks, from buying car parts to managing warehouse operations.