Skip to content
← All work

Track 03 / 05 · FINANCE / MOBILE APP

Money Management App

Manage your finances with ease

The problem

Simple payments came with second guesses.

A crowded home screen and fragmented payment flows made routine financial tasks feel complicated.

Role
UX Designer & Researcher
Timeline
2 months
Platform
Money Management App
Result
29s median time to make a payment
Tools
FigmaReact NativeXcode

The app gets used in the small gaps of the day: paying a bill on the bus, checking whether a transfer landed, splitting dinner. My job was to make those moments quick without making them easy to get wrong. So the app now has five clear tabs, one Pay and Transfer flow instead of several, and copy that says what is actually about to happen. Before any money moves you see the amount, the fee and when it will arrive, and you can undo it. Fewer mistakes, faster payments and more people finishing setup were the things we watched.

01

Home, the coach, and cashflow insights, working together.
The app shown across tablet and phone.
Another view of the redesigned home screen.

02

Research

I ran interviews and watched people use their existing banking apps, then turned that into personas and journey maps. Those guided low-fidelity wireframes, which we tested and retested against three questions: is it clear, is it safe, and how long does it take. I worked closely with engineering throughout on what was actually feasible inside the bank's payment rails and compliance rules.

03

The old Home screen showed everything at once: balances, transactions, insights, goals and alerts, all shouting equally loudly. People would land on it, pause, go back and forth between sections, and mostly ignore the insights because nothing told them what to look at first.

The new Home has one clear starting point. Your balance sits at the top, Add, Send and Request are right there, and the insights are written as something you can act on rather than something to skim past. Everything else waits its turn.

Before

  • The interface lacked a clear hierarchy; users struggled to identify primary actions such as transfers or deposits.
  • System alerts and promotional banners cluttered the screen, distracting from essential banking tasks.
  • Visual inconsistency in color, typography, and iconography created a dated and untrustworthy appearance.
  • Key information like balance and transactions was buried among unrelated details, causing cognitive overload.
  • The layout provided no actionable insights: users viewed static data without meaningful context or guidance.

After

  • A defined hero section now surfaces the total balance and key actions (“Add,” “Send,” “Request”) for instant clarity and engagement.
  • Clean, structured layout and spacing establish a strong visual hierarchy, improving readability and reducing fatigue.
  • AI-powered insights transform raw data into actionable guidance, supporting smarter financial decisions.
  • Consistent color palette and typography enhance brand trust and modernize the overall look.
  • Streamlined navigation and contextual feedback reduce friction, allowing users to complete core actions quickly and confidently.
The old crowded home screen beside the redesigned one with a clear balance and actions.
Before and after: the home screen.

04

Outcome

Testing after the redesign came back strong. Nine in ten people finished the task, up 22 points. The median time to pay someone dropped to 29 seconds. Payment errors, the kind that actually cost people money, fell to 1.7%. Satisfaction averaged 4.3 out of 5 and NPS moved to +34.

Two smaller things showed up: bank syncing lags on a weak connection, and the charts are hard to read in dark mode. Neither stopped anyone finishing a task, so they went on the next list rather than blocking launch.

90%
task completion, up 22 points
29s
median time to pay
1.7%
payment errors
4.3/5
average satisfaction
+34
NPS
Results dashboard with four summary cards, a task performance bar chart, a radar chart of user experience dimensions before and after, an improvement line chart from baseline to current, a before and after bar chart for completion, errors, engagement, recall and SUS score, an impact donut chart, a key insights summary, and a research methodology note.
Results dashboard and research methodology

05

Research

Two personas came out of the surveys and interviews. They were less about inventing characters and more about naming the two situations we kept running into, and they are what we came back to whenever we had to decide what mattered more.

Persona card for Ava Malik, 27, a freelance UI/UX designer in Austin, Texas. Her quote reads: I just want to see what's safe to spend today, pay what's due, and avoid surprises. Goals cover a daily safe-to-spend balance, paying freelancers and vendors weekly, and monthly category budgets. Pain points include overlapping Home and Money tabs, dense cards, under-explained transfers with no clear fees, arrival times or undo, scattered budget features, and close touch targets.
Persona: a freelancer with irregular income

06

Research

We heard from 200 people, mostly between 25 and 44. The mood was good: 72% were happy with navigation, 74% were satisfied overall, and 76% felt sure of themselves when paying. Among the 40 most active users, most opened the app every day. What they asked for was simple: repeat payments in fewer taps, shorter forms, somewhere to attach a note or a receipt, and voice input for when their hands are full.

72%
happy with navigation
74%
satisfied overall
76%
felt sure of themselves when paying
Survey charts on frequency of use, ease of navigation, ease of paying, and desired improvements.
What people told us.

07

Making

The wireframes covered the whole journey: welcome, goals, linking a bank, setting preferences, then the four flows people use most, paying, budgeting, logging an expense and saving. I spent most of the time on the review screens and the alerts, because that is where confidence is either built or lost. Balances, bills and progress all stay within reach.

Wireframes for welcome, goals, bank linking, preferences, pay, budget, and saving.
Wireframes.

08

Making

One set of rules for the whole app: colour, type, spacing, and how every component behaves in both light and dark mode. Buttons, toggles, charts and nav bars are all defined once, so screens stay consistent and new ones are quick to build. It also keeps things readable, which matters more here than looking clever.

From a cashflow warning to a plan, in one short walkthrough.
Design system tokens and components in light and dark mode.
The design system.

09

Making

Onboarding has to earn a bit of trust before it asks anyone for a bank login. This is how it does that.

  • Welcoming Experience: Friendly welcome screen with a clear value proposition (“Smarter money, safely managed”) and a single Get Started CTA.
  • Step-by-Step Guidance: Six concise steps (basics, goals, bank link, preferences) with progress indicators to reduce cognitive load and keep momentum visible.
  • Personalization & Relevance: Collects only essentials (name, income, top goals) to tailor insights and recommendations without overasking.
  • Safety-First Design: Transparent, secure bank linking with plain-language consent; optional biometrics for quick, protected sign-in.
  • Data Transparency & Control: Explains what’s accessed and why; users can skip non-critical steps and adjust notifications/savings goals at any time.
  • Simple, Consistent UI: Clear forms, inline helper text, and consistent CTAs (“Continue,” “Skip”) guide users smoothly with accessible contrast and tap targets.
Onboarding screens with progress, plain-language consent, and optional biometrics.
Onboarding.

10

Making

Home answers the one question people open the app for: how am I doing right now? Your balance is at the top, and Add, Send and Request are one tap away.

Under that, the AI Coach flags anything worth knowing before it becomes a problem, recent transactions show where the money went, and Cashflow Insights show what is coming in and going out. The alerts at the bottom are written as actions, not warnings.

The home screen with balance, Add, Send, Request, the AI coach, and recent activity.
The home screen.

11

Making

The coach looks at your spending and tells you one or two useful things, in plain language, that you could actually do something about. No lectures, no dashboard to decode.

Ask in plain words. Get a plan.
Annotated AI Financial Coach screen in dark mode. Four suggestion cards read: transfer funds to avoid a $35 overdraft fee (1 day left), shift bill dates to balance better ($124 a week), cancel unused subscription services ($67 a month), and cut weekend dining expenses ($124 a week). An input at the bottom says Ask me anything about your finance. Side notes explain the plain language, color-coded urgency, and ranking by urgency and savings.
A few plain-language actions, ranked by urgency

12

Making

The prototype strings the whole journey together, from setting up an account to paying, tracking and getting a nudge from the coach. It is dark, quiet and deliberately unexciting to move through, because that is what you want from an app that handles your money.

The key screens of the prototype.
The prototype in light mode.
Light version.
The prototype in dark mode.
Dark version.

13

Outcome

Same tasks, same kinds of people, measured before and after the redesign.

Three charts. Task performance bars compare success rate and time in minutes for paying a bill, transferring, viewing an account, setting a budget and exporting a report. A donut chart splits participants into freelancers, about half, then small business owners and students. Detailed success rates: pay a bill 95%, transfer between accounts 93%, view account and transactions 90%, set monthly budget 89%, export spending report 84%.
Task performance, participants and success rates

14

Outcome

Where the redesign made a real difference: task completion at 90%, up 22 points; median time to pay down to 29 seconds; payment errors down to 1.7%; satisfaction at 4.3 out of 5 and NPS at +34.

Five result cards. Navigation clarity +28%, fewer backtracks and feature searches. Task efficiency +36%, time saved per core task, with paying dropping from 45 to 29 seconds. Error reduction -47%, critical payment errors falling from 3.2% to 1.7%. System Usability Scale 89, previously 62. Net Promoter Score +34, previously +18.
Result cards after launch