MobileUX/UIFintech

FinanceHub — Personal Finance Mobile App

Money apps are easy to design until something fails. I designed the four core money flows together with the screens people see when a transfer does not go through.

RoleUX/UI Designer
Timeline6 weeks
TeamSolo — self-initiated concept
ToolsFigma
4 mappedwallet, transfer, exchange, payments — end to endMoney flowsNo flow stops at the version where everything goes right
Designedfailed transfer, expired session, declined paymentFailure statesA failure does not send the user back to the start
5 artefactspersona, journey map, site map and two storyboardsResearch artefactsEvery screen traces back to a decision, not a preference
FinanceHub — Personal Finance Mobile App – hero overview

How this was designed

01

The problem

A finance app has to keep wallet, exchange and payments simple while still showing risk and security clearly. The hard part is not the happy path — it is what the screen says when a transfer fails, a session expires or a card is declined.

02

What I did

Mapped the four money tasks first, then wrote out the empty, loading and error screen for each before drawing any interface. Built dark-theme components with an explicit style for every state, and prototyped the flows end to end so the failure paths could be walked through, not just described.

03

How I got there

Went through the flows of established finance apps to map where each one asks for identity checks, how it explains fees, and what it shows after a failed transfer. Most handle the successful path well and the failed one badly.

04

What came out of it

A complete mobile design covering the four core money flows plus their failure states, with the persona, journey map, site map and storyboards it was built from.

The screens

Why it works that way

Balances stay visible at the top of every screen. The main action is kept away from riskier secondary ones. Warnings use restrained colour rather than alarm, and a short confirmation appears only at the point where a step cannot be undone. Multi-step transfers show progress so nobody loses their place.

Behind the design

What I handed over

Flows for wallet, transfer, exchange and payments
Error and recovery screens for payments and sign-in
A reusable set of buttons, forms and cards, with a dark theme
Clickable prototype of the core money movements
Persona, journey map, site map and two storyboards

Common Questions

How did you keep risk clear without alarming people?▼

Restrained colour for warnings, fees and balances visible on the page rather than in a footnote, and short confirmations only at steps that cannot be undone.

What makes error recovery work?▼

Each error screen keeps what the user already entered and offers one retry, so a failed transfer costs a tap rather than the whole flow.

Your store next

Send me your store link — I'll record a free 5-minute audit

You get a short video walking through what is costing you orders — the product page, the basket and the checkout. No call, no obligation.