Financial planning, made simple and fun

Built for families who are not financially savvy: a plan you read as a road rather than a spreadsheet, and certified advisors reachable without leaving the app.

Type

Shipped

Industry

Financial services

Year

2020

Role

Sole UI/UX designer · developer

Scope

Onboarding, Customer Fact-Find, Life Journey Simulation, In-app Communications, Cross-App Integration, Advisor Finder

Impact

Families plan for themselves, and reach certified advisors

Customer Fact-Find

Dashboard: empty state

• The first screen after sign-in is a picture of your family, not a form. A financial product opens on the reason anyone bought it.
• The six sections are a rail along the foot with their own progress marks, so the size of the job is visible before it starts rather than discovered halfway through.
• Nothing is filled in and the screen says so plainly, with one button. An empty state that pretends to have content is worse than one that admits it.

Family: my dependants

• The avatar changes with the gender and age entered, so the section shows a family rather than a table of rows.
• Age and years-to-support are derived from the date of birth. Asking for all three is asking somebody to do arithmetic they have already given you the inputs for.

Cash flow: show me the money

• Sliders rather than boxes. Typing 100,000 into a field tells you nothing about whether it is a lot; dragging to it against a scale does.
• The typed field stays for anyone who wants it. A slider is faster to feel and worse to be precise with, and neither preference is wrong.
• The surplus updates in the corner as the handles move, so the consequence of an answer is visible while the answer is being given.

Net worth: my assets and liabilities

• The same pattern as cash flow, deliberately. Two sections that ask the same shape of question should not teach two interfaces.
• Cash flow is what comes in and out; net worth is what has been built. The pair is what says whether the two are consistent with each other.

Coverage: everyone needs protection

• A policy is entered as a sentence with the choices inside it, not as a grid of labelled boxes. It reads back as something a person would say.
• It asks what you already hold so the app can find the gap. Existing cover is the one input that changes what the answer should be.

Budget: can I afford to live?

• Annual and lump sum are separate answers, because a monthly commitment and a one-off are different promises to make.
• It challenges a budget that exceeds half the cash flow surplus and asks where the money is coming from. A plan built on a number nobody questioned is a plan that fails quietly.

Dashboard: completed

• Every section collapses to one figure on one screen, each with a pencil on it. A summary you cannot edit from is a report; this is still the form.
• The rail along the foot is all green. The reward for finishing is seeing that you finished.

Net worth analytics

• It states the ratio, the healthy range, and which side of it you are on. A number without its benchmark is a number nobody can act on.
• Where the reading is bad, the next control is Find Advisor. The product knows the limit of what an app can do about a 60% debt-to-asset ratio.

Coverage analytics

• What you pay, broken down by what it is for. Most people know their premium and not what it buys.
• The grid marks what is missing as clearly as what is held. A gap is the finding; showing only the cover held would be a receipt.

And then the simulation table

• The sixth step is not another section, it is the door to the thing all five were for. The rail makes that the visible last stop.
• Simulations are a list rather than a single state, so a plan can be kept alongside the plan it is being compared against.

Life Journey

Simulation table: empty state

• It only unlocks once the five sections above are green, and the rail says so. A simulation run on half a fact find would produce a confident wrong answer.
• One button, named for what it makes. The empty state is the invitation.

Simulation table: create simulation

• A simulation is named, so it can be argued with later. Plans get compared, and two things called "my plan" cannot be.
• Lifestyle is three words, Modest, Comfortable and Premier, rather than a sum. Almost nobody can name the monthly figure they want at 65; everybody can pick which of those three they mean.
• The monthly amount is asked twice, before and after retirement, because they are different numbers and treating them as one is the assumption that hides a shortfall.

Your journey begins

• It renders as a road, and the reference is deliberate: a game like Candy Crush, where a path with stops on it is something everybody already knows how to read.
• The age ruler runs down the side, so the road is a timeline and not a decoration.
• It starts empty and asks to be filled. The blank road is the prompt.

The whole road

• Sixty-two years on one screen. This is the picture that makes the case for the whole idea: no chart of a retirement projection has ever been read as a distance to travel.
• The end of the road is average life expectancy, and it is labelled. The product never pretends the timeline is open-ended.

Events selection

• Events are dragged onto the road rather than picked from a list. The gesture is the point: you are placing a decision at an age.
• The panel retracts when it sees a selection, so the road is uncovered at the moment you need to aim at it.
• Hovering a dot shows the age it stands for, so the drop lands on a year rather than on a position.
• Disability, critical illness and mortality sit in their own row headed unpredictable. An insurance product that filed them next to buying a car would be lying about what they are.

Add event

• The drop asks its questions immediately, in a modal over the road, and only the ones this event needs. Marriage wants an age and a cost; a car wants a loan rate and a resale year.
• The road redraws the moment it is saved, so the answer to "can I still retire if I do this?" arrives with the decision rather than at the end of a form.

Shortfall, panic?

• The road turns red across the years the balance goes negative. Not a warning banner, not a figure in a corner: the path itself is the wrong colour for the rest of your life.
• It says which age it starts at. A shortfall you cannot date is a worry rather than a problem to solve.

Do not worry, be ready

• This is the same tool with the events moved. Discovering a shortfall at 26 costs an afternoon; discovering it at 60 costs the retirement.
• That is the argument for making it feel like a game. Nobody re-runs a projection for fun, and everybody replays a level.

5 of 10found the roadmap transformativeThe other five preferred traditional graphs.

see my financial journey presented in a form other than the usual graphs

A participant, in the half that liked it

A tie on the feature the whole product was built around. The comfortable reading is that half of them loved it. The useful reading is that half of them did not, and they were not wrong: a road is a good way to feel a shortfall coming and a bad way to read an exact number off a year.

Financial chart

• A Map and Chart toggle in the top bar of every Life Journey screen. Every event added to the road appears in the chart and the other way round: two views of one simulation, not two features.
• The event icons sit above the bars they belong to, so the chart keeps the one thing the road was better at, which is knowing what caused the shape.
• The half who wanted graphs got graphs without losing the road, and nobody had to be talked out of their preference. That is what the split was worth, and it is why this is the tab the case study is named after.

Advisor

Find an advisor, just like shopping

• Advisors are browsed as a grid of faces, sourced from the Digital Advisor Suite. The problem was not knowing where to start, so the answer is a shelf rather than a search box.
• Each card carries the insurer they represent. Who somebody works for is the first thing that matters about financial advice and the last thing most directories show.

Advisor profile: is she right for me?

• A rating from other users of the app, not a self-description. It is the only part of the profile the advisor does not write.
• Languages spoken are on the card. In Malaysia and Singapore that decides whether the conversation happens at all.
• Credentials are listed in full and dated. A qualification without its year is a claim rather than a record.

Messaging

• Real-time chat inside the product, so the first contact does not cost a phone number.
• It reads as a professional channel rather than a social one. His own note on the board says it plainly: this is not a matchmaking tool, and the interface should not invite that reading.

Share simulations

• You choose what to send: the whole fact find, or one simulation. Trust is built in stages and the interface should let it be.
• The list shows each plan with its result and status before you send it, so what is being handed over is legible to the person handing it over.

Voice call

• A call placed inside the app. No phone number exchanged, and no WhatsApp, which in this market is the default and puts a financial conversation in the same thread as everything else in someone’s life.

Video call

• The camera is requested rather than assumed. Video is the right tool for a face-to-face conversation and the wrong one to be dropped into.

Screen sharing

• Explaining money is hard for anyone who is not financially fluent, and it is the person who needs the advice who has to do the explaining. Sharing the screen replaces the explanation with the thing itself.

Can you see my screen?

• The advisor can share back, and what they are showing is the customer’s own data inside professional software.
• That is the piece worth building. A fact find shared from the app arrives in the Digital Advisor Suite already converted to the advisor’s interface, so the customer does not repeat themselves and the advisor does not retype anything.

Extra features

• Meeting up, attachments, sharing a simulation and co-browsing all hang off one control in the composer, so the chat is the whole relationship rather than a place to arrange the rest of it.
• Co-browsing is in that list rather than buried in the call controls. The thing the previous two rows argue for is one tap from the conversation where somebody realises they need it.

Appointment: scheduling

• A request, not a booking. It is not final until the advisor accepts, which is how every calendar invite works and therefore what nobody has to be taught.
• The advisor can propose a different time rather than only declining. A no with no alternative ends the conversation the whole module exists to start.

Appointment: calendar

• Appointments land in a calendar inside the app, and sync out to Google Calendar. Nobody is going to check a second calendar, so the product does not ask them to.