Challenge
The brief was not visual. It was structural.
An end-to-end product redesign for a leading lighting systems manufacturer* with a high-fidelity catalogue of products, families and technical resources.
The challenge was to transform a complex, technically layered environment into a structured, scalable and user-centred experience that supports both rapid browsing and specification-driven decision-making.
The client operates a regulated e-commerce and retail platform serving hundreds of thousands of B2B and institutional users. Their product had matured rapidly over 25 years, but the interface had not. Multiple independent teams owned three loosely related codebases, each with its own idea of what a primary button should look like.
The goal: a system that could carry the next five years of growth without the next redesign starting from scratch.
Principles
Four non-negotiables, agreed in week one
Every design and engineering decision after that traced back to one of them.
Every component must respect the technical layering of the products, from high-level systems to specific technical components.
Search is not a field; it is a powerful discovery layer. It must turn raw technical data into a guided exploration flow.
Whatever we shipped had to map directly to variables already used in three different codebases.
Product pages must function as technical comparison tools, not just marketing descriptions.
Real screens, the complete benchmark and the design system, walked through live by the team that built them.
Benchmark
Measured against the surface it replaced
Each row was a metric the team agreed mattered before the redesign began. Numbers are pulled from production telemetry.
Key flows
Three flows that turn a catalogue into a specification tool
Principle 04 in practice: product pages work as technical comparison tools, not marketing descriptions. Three flows from the catalogue show how.
A product opens inline with key specs, downloads and the spec sheet. Up to four products can be pinned to a compare tray and reviewed side by side.
The builder turns a long order code into plain choices: output, colour temperature, beam. The final code is copied together with its spec sheet.
An interactive control shows how each lens shapes the light, from a narrow spot to a wide flood.
Process
Twenty-four weeks, one exit criterion per phase
Each phase was measurable, documented and signed off in writing.
Sat with the client’s* support agents and rebuilt top user journeys from session recordings.
Buttons, inputs and complex filtering components rebuilt in lockstep with engineering.
Catalogue first, then search, then technical hubs. Each flow rolled out only after its target metric moved.
12 reusable templates.
An engineering-owned release workflow.
A token graph the team extends in code without calling design back in for every launch.
Results
Catalogue performance, 90 days after rollout
Each metric is owned and verified by an internal team. The headline numbers sit at the top of this page.
