Supplier catalog CMS

Context

One of the main suppliers operates from India, with a time difference of nearly 12 hours. Every catalog update (prices, pack sizes, information validity, availability) arrived by email and someone entered it into the ERP by hand. Between the time difference and manual entry, a change could take days.

Meanwhile, sales reps were quoting with outdated information: products that were already available still showed as discontinued.

Who it's for

A team that knows its products better than anyone, works in English and depended on someone on the other side of the world to enter every change. And, indirectly, the sales reps who quote with whatever is in the ERP.

The proposal

Instead of speeding up the email back-and-forth, remove it. A portal where the supplier manages their own catalog and every change flows into the ERP automatically, with no middleman and no need for both teams to be online at the same time.

My role

I led UX/UI design on a two-person team over three months: research, user flow, data mapping, design system, interfaces, prototype and testing, through to release. The other designer built the screens across resolutions and kept the design system up to date; I reviewed everything before handoff.

Before any screens I mapped the supplier's flow and the catalog's product families, with a spec for every data field. Then I designed every screen in three resolutions, from 1366 to 2560 px, with its loading, error and empty-search states.

Validity as the core idea

In a catalog of reference standards, a product with expired information can't be sold. So each product's status organizes the whole portal: the catalog splits into expired, expiring soon, awaiting approval and discontinued, and the home screen opens with whatever needs attention.

Every change leaves a trail

Two parties edit the information, the supplier and the distributor. So that nobody has to email asking who changed what, every product keeps a history with author, date, time and time zone, and the old value next to the new one.

Product detail

Ciprofloxacin, primary standard

RS-1724-006 · CAS 85721-33-1

Current

Change history

AllSupplierDistributor

1. DI

   Distributorcatalog.mxAug 16, 2026, 20:08 (UTC−6)

   Description

   Ciprofloxacine standardCiprofloxacin, primary standard

   Catalog

   RS-1724-60RS-1724-006

2. PR

   Suppliersupplier.anaAug 16, 2026, 18:30 (UTC+5:30)

   Information valid until

   Jun 01, 2026Jun 30, 2027

3. PR

   Suppliersupplier.luisAug 15, 2026, 15:28 (UTC+5:30)

   Container

   BoxBlister

Adding a product without leaving the catalog

Adding a product opens a form over the catalog, with required fields marked and loading, error and incomplete-form states already designed. The supplier never loses their place.

Testing

Testing with the supplier wasn't possible, so we ran simulated sessions with two internal users playing their role. We watched where they got stuck uploading a catalog and where they got lost navigating.

The biggest finding was search. The first version searched within specific filters, but users expected something like Google: type anything and find it across the whole CMS. We redesigned it as a global search over the entire database. The rest were navigation, interaction, color and translation fixes.

A design system to add more suppliers

The portal was designed for one supplier, but meant to open up to any of them. So I built a dedicated design system, versioned and with a changelog, in a Figma library separate from the product.

It follows Atomic Design: foundations, 7 atom families, 15 molecule families and 15 organism families. That adds up to 117 components and 599 variants, because every component ships with its states, not just its happy path. Color lives in two layers: 104 primitive variables define the palette and 133 semantic tokens give each color a role, like color/background/button/primary-normal. When a color changes, it changes in one place.

variants across 117 components

599variants across 117 components

variables: 104 primitives and 133 tokens

237variables: 104 primitives and 133 tokens

custom icons

46custom icons

text styles

38text styles

Pick a chain

Primitive

color/ink/900

Semantic token

color/background/button/primary-normal

Component

Add

Building the system took time at the start of a three-month project. It's also what lets the portal add suppliers today without a redesign.

Outcome

Updates no longer depend on time zones: whatever the supplier changes shows up in the ERP right away. With the catalog current, sales reps quote with valid information and can recover sales, such as those of products moving from discontinued back to available.

The platform launched with one supplier and is now used by three. It's ready for any new supplier.

What I learned

What worked. The most valuable test was the simplest one: watching someone search for a product. That's where the global search came from, the biggest change in the project.

What I'd do differently. I'd look for a way to validate with the real supplier from the start, even asynchronously, with recordings or surveys. The translation issues showed up late and would have been caught earlier.