A redesign that doubled trial-to-paid
A powerful B2B product was notoriously hard to use: confusing onboarding, buried features, a dated interface undercutting enterprise sales. We researched the friction, redesigned the core flows and onboarding, refreshed the UI to feel premium, and delivered a design system their team could build on.
- 2.2×
- Trial-to-paid
- 38%
- Fewer how-to tickets
- 1
- Design system
What they came with
Trials were arriving and stalling. People got through sign-up, landed in an empty product and left before doing the one thing the product is bought for, so the team spent its time walking new users by hand through steps the interface was meant to carry. Screens had been added one at a time, each with its own patterns, and the same question kept reaching support: where do I start.
What the engagement covered
- Research-led redesign of onboarding and core flows
- Premium, on-brand interface that lifted perception
- A scalable design system for consistent velocity
Technical detail
Tokens shared by Figma and code
Colour, spacing and type scales are held as tokens generated once and consumed by both the Figma library and the stylesheet layer. A value changes in one place rather than being reapplied by hand in design and then again in the build.
Component props typed at the boundary
Every component in the library declares TypeScript prop types instead of accepting loose objects, so a variant that does not exist fails at build time. That keeps one-off forks of a component from reaching production unnoticed.
Every state has a story
Components ship with Storybook stories for loading, empty and error as well as the populated case. The states a new user actually meets in the first session get designed up front instead of being discovered after release.
Routing follows the new hierarchy
The revised information architecture maps onto App Router segments, with the persistent shell in a layout and each segment owning its own loading and error boundary. A slow panel degrades on its own rather than blanking the page around it.
The stack
Design
Frontend
Delivery
- Practice
- Product Redesign
- Sector
- B2B SaaS
- Shape
- Client engagement
- Stack
- Figma, Design tokens, Next.js
Something like this to build?
Tell us what runs today and where it hurts. An engineer reads it and replies.