B2B SaaS full product redesign
A logistics SaaS with 3 years of accumulated design debt needed a full product redesign without stopping feature development. We ran the system rebuild in parallel with the product team's sprint cycle.
- Client
- Logistics SaaS (NDA)
- Year
- 2025
- Duration
- 14 weeks
- Practice
- Designs
§ 01Brief
The product had grown from MVP to 12,000 users over 3 years. The original design had no system behind it — every screen was one-off. The engineering team was spending 30% of every sprint reconciling visual inconsistencies instead of building features.
We were brought in to deliver a design system, rebuild the component library, and redesign the 6 highest-traffic flows — all without blocking the existing product roadmap.
§ 02Approach
- 01Audit
Component audit + token extraction
We catalogued every UI pattern in the live product — 340 unique components, 12 shades of the same grey. From this we distilled 6 semantic colour tokens and a 4-level type scale.
- 02System
Design system in Figma + code
Tokens → Figma variables → React component props. We built the Figma library and the React component library in lockstep so they could never diverge.
- 03Redesign
6 flows, screen by screen
Dashboard, order detail, shipment tracking, invoicing, team settings, and API key management. Each was redesigned, prototyped, tested with 3 internal users, then handed to engineering.
- 04Handoff
Living documentation
Storybook for every component. Figma Code Connect for every token. A decision log in Notion for every design choice that wasn't obvious.
§ 03Outcomes
§ 04Gallery
“Sprint planning used to start with an hour of 'which version of this component should we use.' That conversation no longer exists.”