Marketing site and product dashboard for a finance tool, designed as one continuous thing so the product never feels like a different company than the page that sold it.
The problem
Two teams, two visual languages. The marketing site promised simplicity and the dashboard delivered a wall of numbers.
How it went
- 01
One system, two surfaces
Shared type scale, spacing and colour across both, with density as the only variable that changes between them.
- 02
Hierarchy over decoration
Data tables got weight, alignment and whitespace instead of borders and fills. Nothing was added that a reader would have to look past.
- 03
Motion as explanation
Transitions only where something moves from one state to another, so animation carries meaning rather than personality.
- 04
React build
Implemented in React with the design system as the source of truth, so the dashboard and the site can never drift again.
Along the way
What shipped
- UI design for site and dashboard
- Shared design system
- React front-end build
- Motion specification
- Handover documentation
After
The product and the page finally read as one thing. Any adoption or retention numbers belong to the client and are not claimed here.
No invented numbers. Ever.Next project