From five navigation levels to three clicks — and four design systems to one

Context & problem

A global site that had grown one region at a time

The legacy knauf.com was hard to navigate, hard to read and impossible to keep consistent.

Knauf.com had accumulated content for two decades. Branding varied from page to page and still reflected an early-2000s visual style; the site was not mobile-friendly; images and videos were low quality; overlapping pop-ups caused accessibility problems; and every region had built its own variant with no shared framework.

The most expensive problem was structural. At a glance we were showing visitors five levels of navigation (six in some regions). Users lost their place, could not get back to the level they came from, and dropped out. It was a global issue across every regional site.

Research

Who visits, what they look for, and where they get lost

Before touching a screen, the design team ran discovery kick-offs to inventory every content type on the site and categorise it. Then we sat down with customer support to learn what each customer group — DIY, planner, distributor, applicator — actually comes to the website to do, and with the data team to see where traffic comes from and where it converts.

Two findings set the direction. Nearly half of all visitors arrive looking for a product to use, study or buy — yet it took five pages to reach a product landing page. And the four customer groups have almost nothing in common in what they need first. So the primary task for the first design sprint became: get each customer type to their focused part of the site faster.

We validated the hypotheses in a small round of interviews — six users, two per group — walking through the proposed journeys. They pushed us further than expected: make global search show results by content category, expose more content to logged-out users, and keep Knauf’s three sub-brands distinguishable instead of merging them into one giant sub-navigation.

Goals

What users needed, what the business needed

Chapter 1 · Navigation

Two concepts, twenty users, one clear winner

We clustered every page type by which customer groups need it, voted on where each belongs — hierarchical, global or regional navigation — and benchmarked other industrial-materials companies. Their sites were just as complex, which made us more confident in separating customer journeys rather than flattening everything into one menu.

That produced two sitemaps — one for logged-out visitors and one that adapts by customer type after login — and two navigation concepts to test:

Option A
Three pillars and a mega-menu, prototyped across Home, Acoustics, Brands and About.

Option B
One dedicated space per topic, tested on the same pages.

The MVP navigation shipped with the March 2024 relaunch. The breadcrumb turned out to matter most on mobile, where it cut the misleading routes that used to strand people two or three levels deep.

Before
Before — five to six levels between the homepage and a product.

After
After — one catalogue level with filters, a breadcrumb, and products within three clicks.

What changed

The first month after relaunch

We watched knauf.de closely from the end of March into April 2024. Product-page views were up sharply against the previous period, and the weekly return cohorts stayed healthy — visitors were coming back rather than bouncing off a menu.

Chapter 2 · Design system

Four systems, fifty files, one owner

When I joined, Knauf was juggling more than 50 design files and four separate design systems — mobile, web, icons and shared components — similar enough to confuse, different enough to hurt. Nobody owned the whole. I volunteered to be Product Owner for the consolidation and framed the problem from both sides:

Six actions, two sprints

1 · Audit. We catalogued every component in use across all files, found the one-offs that had never made it into any system, and cleaned up inconsistent variants.

2 · Pick a foundation. Design and front-end chose MUI 5.11 as the base: pre-built, themeable, accessible, and React-native for the developers — which meant our Figma decisions could land in code without a translation layer.

3 · Global first. We evaluated every use case and shaped the components so that 90% live in a global theme with variants for mobile, tablet, desktop and large screens; the special cases went into an organisms file and an icon file.

4 · Make Storybook look like the design file. Design debt and development debt had both come from the same gap — nobody could tell what was implemented, or why it looked different. With MUI underneath, developers could update code straight from our files, and both teams could make low-risk changes to the Storybook together.

5 · Swap and test. We replaced old components with new ones on a few screens per application first, ran two rounds of internal user testing on the new grid, shades and spacing, then finished the swap across every application in two sprints.

6 · QA together. Design and front-end held a 30-minute daily on one project’s changes and a two-hour weekly refinement on bugs until knauf.com went live.

Outcome

One site, one system, one team

The new knauf.com launched in March 2024 on the consolidated design system. In the first 30 days product-page views on knauf.de rose 78%; weekly retention stayed healthy; and the usability improvements were rolled out across 12 regions and 3 products.

The less measurable outcome mattered as much: the five of us started working like one design team, several front-end developers became Figma converts, and the Storybook update landed on time under real delivery pressure from senior management.

Reflection

What I took with me