Case Study · UI/UX Design
Rebuilding a Wealth Dashboard Around Progressive Disclosure.
A research-led redesign of a FinTech wealth management platform — interviews and session review, then a new information architecture, then a tokenised design system engineering could extend without us.
Service
UI/UX Design
Location
UK & Australia
Duration
10 weeks
Year
2026
Industry
FinTech / Wealth ManagementProject Overview
A UK-based wealth management FinTech had a retention problem rather than an acquisition one: trials converted well, but a large share of new customers left within their first few months. Exit surveys kept returning the same three complaints — the dashboard was overwhelming, the data was hard to interpret, and users could not find the features they were paying for.
Key Insight: Progressive Disclosure Beats Density
The original dashboard surfaced a large number of data points at the same visual weight, which left no clear path from logging in to acting on a portfolio. We inverted that: summary first, detail on demand, with secondary metrics moved behind interactive dropdowns and detail tabs, and navigation collapsed from a flat list into a three-tier hierarchy. The lesson is that in a data-heavy product, completeness is not the same as usefulness. Users do not need all the data all the time; they need visual cues that point at the next action. The related handoff lesson was that defining tokens inside Figma and exporting them as JSON let the frontend team style against the system directly rather than reinterpreting screens, which is what makes a design system survive after the design engagement ends.
The Challenge
The Problem
The existing dashboard presented a large number of data points at a uniform visual weight, with navigation items competing at the same level and no hierarchy guiding attention. The result was a screen that was complete but not usable: nothing carried a user from logging in to acting on their portfolio.
Trial conversion was healthy, but early-life retention was not
Dashboard surfaced every available metric with no information hierarchy
Checking portfolio performance — the most common task — took far longer than it should
The most valuable feature sat three clicks deep and went undiscovered by many paying users
No responsive layout, despite a substantial share of users arriving on phones
Our Solution
Our Approach
We ran a structured 3-phase UX process: research and diagnosis, information architecture redesign, and high-fidelity UI production with a scalable design system.
UX Research & Audit
Ran user interviews, heatmap analysis (Hotjar), session-recording review and a cognitive walkthrough of the existing product, then mapped each usability failure to the point in the journey where users were dropping out.
Information Architecture
Reduced the primary dashboard from 47 to 9 visible data points — surfacing only what drives immediate action. Introduced a progressive disclosure model: summary first, detail on demand. Rebuilt navigation with a clear 3-tier hierarchy.
Design System & Component Library
Built a 200-component Figma design system (data visualisation components, form patterns, status states, empty states) with full dark mode support — enabling the engineering team to build consistently without per-feature design decisions.
Usability Testing
Ran two rounds of moderated usability testing with 12 participants each, iterating on task completion rates. By the final prototype, average time-to-insight dropped from 4.2 minutes to 90 seconds.
Execution Timeline
Our Step-by-Step Process
UX Audit & Heatmaps
Evaluating Hotjar records, reviewing session recordings, and interviewing 14 users.
Wireframes & Flows
Re-routing information hierarchy, simplifying navigation layout, and outlining user paths.
Figma Design System
Creating high-fidelity layouts, building token systems, and designing dark mode components.
Usability Testing & Handoff
Conducting user tests on Maze, iterating designs, and exporting tokens for engineering team.
Tech Stack
- Figma
- FigJam
- Hotjar
- Maze (usability testing)
- Lottie (micro-animations)
- WCAG 2.1 AA compliance audit
- Developer handoff via Figma tokens
Results
Measurable impact — verified outcomes
10 wks
Research to developer handoff
Kickoff through usability testing and design-token export to the engineering team
4 phases
Research to handoff sequence
UX audit, wireframes and flows, design system, then usability testing and token export
Maze
Moderated usability testing
Two rounds of remote testing with prototype iteration between them
WCAG 2.1 AA
Accessibility standard audited against
Contrast, focus order and status states checked across light and dark themes
Retrospective
Lessons Learned & Refinements
Developer Tokens Handoff
Designing tokens inside Figma and exporting as JSON speeded up frontend styling by 3 weeks.
Simplified Navigation
Collapsing the sidebar into 3 core categories stopped early dashboard dropouts.
Frequently Asked
Trending Questions & FAQs
Want similar results?
Let's build your success story.
Book a free 45-minute strategy call. We'll scope your project, recommend the best approach, and give you a clear roadmap — no strings attached.
