A component system for a global chemistry manufacturer

The problem

Metrohm manufactures chemistry equipment and sells it globally. A company that size generates pages faster than any agency can design them, so the design could not be a set of fixed layouts. It had to be a system that non-designers could build with, without the result falling apart.

What we did

We worked on the user experience, designed every layout and interaction, and treated each piece of the design as a reusable component to be built on Adobe AEM, so Metrohm’s own content managers could mix and match components to create new pages that still looked like Metrohm.

Given the size of the company, solving the design and business challenges together was the hard part. Every component had to be general enough to reuse and specific enough to look deliberate.

Why this was hard

The site isn’t one thing. On a single page it has to carry a product catalog, application notes for laboratory work, a commerce path with quotes and ordering, a customer account area, careers and editorial content about the company. Each of those wants a different layout, and all of them have to look like the same company.

It also runs across markets and languages, with a country selector and localized content, so nothing could be designed around a fixed amount of text. A German heading isn’t the length of an English one, and a component that only works at one text length is a component that breaks in production.

Each of those markets had its own stakeholders, and the main ones discussed every design together. That sometimes meant more than ten people, each with their own needs and wishes for the website, who had to come to one agreement. Getting them there was a design challenge in its own right.

The hardest constraint was the one that is easy to state and hard to satisfy: a content manager with no design training has to be able to assemble a new page from these parts and get a result that still looks deliberate. That rules out clever one-off layouts. Every decision had to survive being used by someone who wasn’t in the room when it was made.

What the system does

Rather than a set of finished page designs, the deliverable was a kit: layout components with defined rules about what they can contain, how they behave at each breakpoint, how they stack and which ones can sit next to each other. Built on Adobe AEM, those became blocks the Metrohm team could combine themselves.

The practical effect is that page production stopped being an agency dependency. New pages are the client’s own work, and the design holds because the constraints are built into the components rather than written in a guideline nobody reads.