Case study

AstuteWheel

Overview

296Screens

AstuteWheel turns a financial adviser's discovery conversation into a picture. A client answers a guided questionnaire, the answers become a wheel of seven plans, and the adviser works that same wheel back into a strategy.

This case study covers a UI/UX pass across three products in one file (practice onboarding, the client's guided journey and the adviser portal) at five breakpoints, with dark mode on the adviser portal. We audited the file, replaced every placeholder string with real copy, cleaned up type left over from scaling, built a token layer from the palette that already shipped, and drew the six modules the sidebar had been promising since the first screen.

Role: UI/UX Design
Year: 2026
Platform: Web · 5 breakpoints

Client

An Australian financial-advice platform, built under NDA.

The client's name and internal figures are confidential. Everything shown here is the design work itself: a UX audit of the three products, the design system that binds every paint to a token, and the SaaS product design for the six modules the rail had promised.

Client: Confidential financial-advice client, name under NDA
Industry: Financial advice and financial-planning software
Market: Australia: superannuation, SMSF, TPD cover and SOA / ROA advice documents run through the UI
Scope: UI/UX pass across three products: practice onboarding, the client journey and the adviser portal
Deliverables: 296 screens at five breakpoints, light throughout and dark on the adviser portal, six new modules and a token layer
Timeline: 2026

Process

The wheel waits until every color has a token behind it.

The adviser portal alone used eighty-four font sizes, 1,646 of them fractional, and thirty-one paint styles with nothing behind them. Drawing the six missing modules first would have added more hard-coded values, so we built the system first.

Audit 3 products, 5 breakpoints
Fix names, replace 471 lorem strings
Clean up scaled type
Bind every paint to tokens
Draw the six missing modules

Problem

Lorem ipsum, dead links and scaled type kept AstuteWheel from a build.

Six navigation destinations led nowhere.
Advice, Manage, Entities, Estate, Contacts and Administration sat in the rail of every screen. Estate was the sharpest: the wheel has an Estate Plan segment and the client journey has an Estate Plan screen, but the adviser had nowhere to work on it.
471 lorem ipsum strings were still shipping.
Two hundred and fifty-three on the client journey alone, across sixty screens: every About You, every plan, every values exercise. Even the onboarding sidebar’s three step descriptions were placeholder.
The breakpoints were scaled, not re-laid-out.
Eighty-four distinct font sizes on the adviser portal, 1,646 of them fractional: the leftovers of scaling a 1920 frame down instead of laying it out again.
Dark mode was a copy of the file, not a theme.
Thirty-one paint styles were already split into Light Mode and Dark Mode, but with no variables behind them every dark screen was a duplicate that had to be maintained by hand.

User persona

An adviser who needs depth, and a client who needs plain English.

Rachel Nguyen

Goals

Open a client and know within seconds which plan needs work.
Move between wellbeing, position, cashflow and insurance without losing the client.
Have the compliance trail (advice documents, entities, estate) in the same place as the numbers.

Frustrations

Ran the practice on the wheel but tracked estate and entities in spreadsheets.
Reads the portal on a laptop at a client’s kitchen table, not a 1920 monitor.
She runs this review with every client, so one wasted step costs her an hour a week.

Jackson Hall

Goals

Answer the questions once, in plain English, before the first meeting.
See the same picture the adviser sees: no jargon, no spreadsheet.
Know what is still waiting on him between meetings.

Frustrations

Does not know what an SMSF, an APL or a TPD definition is.
Fills the questionnaire on a phone in the evening, not at a desk.
Loses confidence when a screen says lorem ipsum where the explanation should be.

Goals

Four rules decided every adviser and client screen.

The navigation must be true
If the rail lists a module, the module exists. Six of them did not, and one of those, Estate, was already promised twice elsewhere in the product.
Tokens before anything new
Twenty text styles and thirty-one paint styles are a vocabulary, not a system. The six missing modules waited until every fill resolved through a variable.
A breakpoint is a layout, not a percentage
Scaling a 1920 frame to 402 produces fractional type and a design nobody can maintain. The fix here was to remove the artifacts; the next pass has to re-lay the small breakpoints properly.
The client never reads jargon
Every string a client sees was rewritten in plain English. If a sentence needed a financial-services glossary, it was the wrong sentence.

Research

We counted every font size before we changed one.

We opened all three products at each of the five widths and logged what an adviser and a client would actually meet on screen. That turned a vague sense that the portal felt uneven into eighty-four font sizes to bring down to one ramp.

296screens across five breakpoints
84distinct font sizes on the portal
1,646fractional sizes from scaling
471placeholder strings a client could see
253of them on the client journey
6nav destinations with no screen

Primary flow

An invite becomes a wheel, and the wheel becomes advice.

Everything in AstuteWheel is a step from an adviser's invite to an advice document the client can actually read. The client discovers and prioritizes in plain English, the wheel assembles from their answers, and the adviser models and delivers from that same picture. The modules the rail promised but never drew, Entities and Estate among them, are marked.

Inviteadviser sends the link

Adviser invitesemail with a private link
Introductionwho your adviser is
Your detailsname, contact, household
Security checkcode to email or mobile

Discoverthe client rates themselves

Financial Healthseven areas, plain English
Investment · Debtconfidence, not knowledge
Risk · Retirementsame four-point scale
Estatethe one advisers skip

Prioritizewhat matters, in order

Life areaswhere life actually is
Your valuespick what matters
Narrow the focusdown to a handful
Risk profilecapacity and tolerance

The Wheelone picture, seven plans

Wellbeingthe wheel assembles
About youhousehold and dependents
Making · Growingincome and assets
Preserving · Protectingestate and insurance

Modelthe adviser’s work

Positionassets, liabilities, net worth
CashflowMyFlow projections
Projection datayear by year
Retirement outlookthe quick answer

Deliverand it closes

Advice documentSOA or ROA
Entities · Estatethe compliance trail
Client portalshared back to them
Reviewnext wheel, next year

Entry point
Existing screen
Was unreachable
New screen

Grid system

Five widths, one rail, and a grid that has to survive a kitchen table.

Advisers do not sit at 1920. They open the portal on a laptop next to a client, so 1440 and 1280 are the real working widths and 834 is a tablet in a meeting. From tablet width up, the rail owns 72px collapsed and 280px open; it never becomes an overlay. On phones the rail gives way to a top bar with the logo, a dark-mode toggle and a menu button, and each screen stacks into a single column.

1920 · Wide12 columns
1440 · Desktop12 columns
1280 · Laptop12 columns
834 · Tablet8 columns
402 · Mobile4 columns

Components

Two hundred and fourteen components already existed. None were bound.

The adviser portal now draws every color from one shared set of tokens, so light and dark stay in step and a brand change is a single edit. The twelve type combinations the screens already relied on now have styles, and every shadow comes from four elevation styles.

214 components
32 text styles
4 elevation styles
all bound to tokens

Feature 01

A practice signs itself up before it ever sees a client.

Login, sign-up, verification, role, invited users, practice and licensee details, payment, done. It is the least glamorous flow in the product and the one that decides whether a firm ever reaches the wheel, so every step is a screen with a single job, and the licensee details are pre-filled from the ASIC register rather than typed.

Feature 02

The client journey is written for someone who does not speak finance.

An invite becomes an introduction, a few details, a security code, and then a questionnaire that asks how confident you feel rather than what you own. Four options, plain English, no jargon, because the answers only matter if they are honest, and 253 of these screens were still showing lorem ipsum where the explanation should have been.

Feature 03

Seven plans, one picture, and the whole product hangs off it.

Personal, Income, Invest, Debt, Retire, Risk, Estate and the ring that binds them: Making it, Growing it, Preserving it, Protecting it, Enjoying it, Leveraging it, Living it. The labels curve around the wheel letter by letter.

Click map

Where advisers are designed to click.

A design-intent click map of the Wellbeing summary: heat sits only on interactive targets (buttons, tabs, links, menus), weighted by how central each action is to an adviser's day. It maps layout decisions, not recorded sessions.

Add Comment is the only filled button
It is the one primary CTA on the screen, so it carries the hottest spot. The comment field beside it is warm because every note starts there.
Summary, Financial Health, Life Areas, Values, Risk Profile
The sub-tabs are how an adviser moves through one client without leaving the page. Summary and Financial Health run warmest because they open every meeting.
File Note, Documents, Workflow, Messages
The dark pill at the top is the compliance trail. It stays warm on every screen because a file note follows nearly every client conversation.
Plan headers: Making It, Growing It, Leveraging It, Protecting It
Each table header opens its plan. Making It and Growing It sit at the top of the page and run warmer; the lower headers cool off with scroll depth.
Rail, back arrow, bell and avatar
Cool by design: the rail is for switching clients and modules, not for working one. The back arrow returns the adviser to the client list in a single click.

Design-intent map, not recorded data.

Feature 04

Financial health is a conversation starter, not a score.

The client rates seven areas on a four-point scale and the adviser sees exactly the same picture. Where the client rates themselves lowest is where the meeting begins. The history view keeps every previous wheel, so the second year's conversation starts by comparing two pictures rather than re-asking the same questions.

Feature 05

Behind the wheel sits the modeling the client never sees.

Position, allocation, liquidity, net wealth to age. Cashflow with MyFlow projections, year-by-year projection data and a quick retirement outlook. This is the adviser's half of the product: dense, table-heavy, and the only part of the file that ships in dark mode as well as light.

Feature 06

The rail promised six modules that had never been drawn.

Advice, Manage, Entities, Estate, Contacts and Administration appeared on every screen and led nowhere. Estate was the worst of them: the wheel has an Estate Plan segment and the client journey has an Estate Plan screen, so the product asked the client about their will and then gave the adviser nowhere to record the answer. All six now exist on desktop and mobile, built from the same shell, rail and table components as the screens that shipped.

Feature 07

Documents, messages and the compliance trail.

Client files, chat with subjects, questionnaires, the help desk and the training library. In an advice practice these are not secondary screens: a Statement of Advice that cannot be found is a compliance problem, so the advice register now sits beside the documents rather than inside them.

Responsive

Five widths, and the two in the middle are the real ones.

1920 is where the file was drawn; 1440 and 1280 are where advisers actually work. 834 is a tablet in a meeting and 402 is the client answering the questionnaire on a phone in the evening. Every screen exists at all five, which is exactly why scaling them instead of laying them out produced 1,646 fractional type sizes.

Visual language

Stone, ink, seven plan colors and one ring accent.

The palette is warm stone and ink, with seven plan colors and one accent for the ring, all of which only ever appear on the wheel and the things it maps to. Type is Urbanist in five weights across thirty-two styles, twelve of which this pass added, because the screens were already using combinations that had no style behind them.

#A19E95
#1C1C1C
#555555
#F6F6F6
#494949
#E8E8E8
#D9D8D5
#E5E5E3
#92C8C9
#8992B3
#B8B2A4
#CF5F47
#D8AF65
#A2CF73
#53BD88
#8D1900

Typography

Before / After

How the rail, the client copy and dark mode changed.

Navigation

Before

Rail: Estate
Click
No screen

Six rail destinations (Advice, Manage, Entities, Estate, Contacts, Administration) led nowhere, while the client was already asked about their estate.

After

Rail: Estate
Estate module
Adviser records it

All six modules now exist on desktop and mobile, built from the same shell, rail and table components.

Client copy

Before

About You
Lorem ipsum
Guess

471 lorem strings were shipping, 253 of them on the client journey across sixty screens.

After

About You
Plain-English question
Answer once

Every string a client sees was rewritten in plain English, without financial-services jargon.

Theming

Before

Light screen
Duplicate dark screen
Edit both by hand

Light and Dark paint styles existed, but nothing linked them, so every dark screen was a hand-kept copy.

After

Token
Light / Dark mode
One screen

Every fill and stroke is bound to a token, so a theme is a mode switch.

Results & Impact

The navigation tells the truth, and the file finally has a system.

Every paint across three products now resolves through a named token, the navigation is true at last, and a second theme is a mode switch rather than a parallel set of screens to maintain by hand.

6 → 0rail destinations with no screen
471 → 0lorem strings on client-facing screens
2 themeslight and dark from one token set
1,646 → 0fractional font sizes left by scaling

Design-level outcomes measured against the source files. Live product data will follow launch.

Learnings

Four lessons from untangling the wheel.

Verify before you call it a bug
Hundreds of one-letter text layers with a zero line-height looked broken. They are the curved labels around the wheel, and text on a circular path is one layer per letter. Reporting that as a defect would have cost a day and our credibility; checking it cost one screenshot.
Scaling a frame is not a breakpoint
Five widths looked like a mature responsive system until the type told the truth: eighty-four sizes, most of them fractional. Removing the fractions was a one-hour fix; re-laying 402 and 834 properly is the real work and it is still outstanding.
A styled file can still have no system
The file had text styles, paint styles, a full component set and a Light Mode / Dark Mode naming convention, but nothing connected them. The convention described an intention nobody could act on, which is why dark mode had become a second copy of the file.
Placeholder copy is a trust problem, not a content problem
471 lorem strings sat on the screens a client sees while being asked about their will and their income. In financial advice, the moment a screen says lorem ipsum where the explanation belongs, the client stops believing the rest of it.

Let's work together

Building an advice or wealth platform? We can help you ship it.

Team up with us

[email protected]See more case studies

Thanks for reading.

Have a product like this? Let's talk. Book a call

Or see more case studies, including WorkHub, an HR platform designed on the same template.

Overview

An Australian financial-advice platform, built under NDA.

The wheel waits until every color has a token behind it.

Lorem ipsum, dead links and scaled type kept AstuteWheel from a build.

Six navigation destinations led nowhere.

471 lorem ipsum strings were still shipping.

The breakpoints were scaled, not re-laid-out.

Dark mode was a copy of the file, not a theme.

An adviser who needs depth, and a client who needs plain English.

Goals

Frustrations

Goals

Frustrations

Four rules decided every adviser and client screen.

The navigation must be true

Tokens before anything new

A breakpoint is a layout, not a percentage

The client never reads jargon

We counted every font size before we changed one.

An invite becomes a wheel, and the wheel becomes advice.

01Inviteadviser sends the link

02Discoverthe client rates themselves

03Prioritizewhat matters, in order

04The Wheelone picture, seven plans

05Modelthe adviser’s work

06Deliverand it closes

Five widths, one rail, and a grid that has to survive a kitchen table.

Two hundred and fourteen components already existed. None were bound.

A practice signs itself up before it ever sees a client.

The client journey is written for someone who does not speak finance.

Seven plans, one picture, and the whole product hangs off it.

Where advisers are designed to click.

01Add Comment is the only filled button

02Summary, Financial Health, Life Areas, Values, Risk Profile

03File Note, Documents, Workflow, Messages

04Plan headers: Making It, Growing It, Leveraging It, Protecting It

05Rail, back arrow, bell and avatar

Financial health is a conversation starter, not a score.

Behind the wheel sits the modeling the client never sees.

The rail promised six modules that had never been drawn.

Documents, messages and the compliance trail.

Five widths, and the two in the middle are the real ones.

Stone, ink, seven plan colors and one ring accent.

How the rail, the client copy and dark mode changed.

01Navigation

02Client copy

03Theming

The navigation tells the truth, and the file finally has a system.

Four lessons from untangling the wheel.

Verify before you call it a bug

Scaling a frame is not a breakpoint

A styled file can still have no system

Placeholder copy is a trust problem, not a content problem

Building an advice or wealth platform? We can help you ship it.

Thanks for reading.

Inviteadviser sends the link

Discoverthe client rates themselves

Prioritizewhat matters, in order

The Wheelone picture, seven plans

Modelthe adviser’s work

Deliverand it closes

Add Comment is the only filled button

Summary, Financial Health, Life Areas, Values, Risk Profile

File Note, Documents, Workflow, Messages

Plan headers: Making It, Growing It, Leveraging It, Protecting It

Rail, back arrow, bell and avatar

Navigation

Client copy

Theming