B2B Ecosystem Redesign for Technical Manufacturing
2025
Technical Solutions
██████
E-catalog
Overview
We delivered an end-to-end product redesign for a leading lighting systems manufacturer. Our objective was to transform a complex, technically layered environment into a structured, scalable platform that supports data-heavy catalogs and specification-driven decision-making.
Implementation Framework
Technical Environment: Agile, React component-based;
Design Synchronization: Cross-platform tokens & docs;
Hand-off Integrity: Direct dev-production pipeline integration.
Challenge
The client operates a regulated eCommerce · 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 ████████ loosely related codebases, each with their own idea of what a primary button should look like.
Input
A mature ecosystem with massive technical attribute layers and a UI that no longer matched the engineering.
Reasoning
Treat the redesign as infrastructure, not decoration. Unify the foundation across teams and simplify the discovery flow.
Outcomes
A token-driven design system, a flow-by-flow migration with zero-rollback events, and a documented foundation engineering owns.
Note: "The brief was not visual" refers to the fact that the core issue was architectural—fixing the structural logic was more critical than superficial aesthetics.
Principles
Four non-negotiables agreed in the first week. Every design and engineering decision after that traced back to one of them.
01
Hierarchy is the UI.
Every component must respect the technical layering of the products, from high-level systems to specific technical components.
02
Guided Discovery.
Search is not a field; it is a powerful discovery layer. It must turn raw technical data into a guided exploration flow.
03
Design for Scalability.
Every component is part of a global library that maps directly to the engineering variables, ensuring design integrity.
04
Decision-making Hubs.
Product pages must function as technical comparison tools, not just marketing descriptions.
Benchmark
Measured against the surface it replaced. Each row was a metric the team agreed mattered before the redesign began. Numbers below are pulled from production telemetry.
CRITERION
Product
Legacy
Guided discovery
Attribute filtering
Mobile-first technical view
Decision-making hubs
Time-to-spec-sheet
18 sec
72 sec
Process
Twenty-four weeks, five phases. Each phase had a single exit criterion — measurable, documented, and signed off in writing.
Week 0-2
Discovery
Sat with ████████ support agents and rebuilt top user journeys from session recordings.
Week 2-8
Design
Developed a modular component system and filtering logic, built in lockstep with the engineering team to ensure feasibility.
Week 8-13
Development
Iterative deployment, starting with catalog foundations through to the technical hubs, moving target metrics with every release.
RESULTS
Metrics recorded 90 days post-launch. Data verified by internal product analytics.
4x
Faster Discovery
2x
Time-to-Value
40%
Increased Doc Downloads
NDA
Anonymized insight
We value your privacy.
We work on category-defining products. We rarely show them. The most we can share without breaking trust is the shape of the work — the industry, the constraints, the measurable result. Specifics stay where they belong.
Industry
eCommerce · Retail
A storefront that loads, ranks, and converts. Search that means it. Checkout that takes 1 thumb.
Explore Industry
Two people can be looking for the same product, but one of them is looking for color, trims… and the other one is looking for electrical needs, electrical specifications.
— ██████ , VP OF PRODUCT
system v1.2
Type
Color
Design system
Built from scratch — 142 components, 6 brand colors, and 38 semantic tokens powering every surface.
Preview
Code
Engineered
Production-grade React
TypeScript, tree-shakeable, ESM + CJS bundles — semantic versioning, changelogs, and CI green on every PR.
