Powering up
HomeCase Studies

UI/UX Design

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 Management

Project 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.

01

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.

02

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.

03

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.

04

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

Weeks 1-2

UX Audit & Heatmaps

Evaluating Hotjar records, reviewing session recordings, and interviewing 14 users.

Weeks 3-4

Wireframes & Flows

Re-routing information hierarchy, simplifying navigation layout, and outlining user paths.

Weeks 5-7

Figma Design System

Creating high-fidelity layouts, building token systems, and designing dark mode components.

Weeks 8-10

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.