People struggle to save money consistently. Saving tends to be treated as whatever is left over rather than a deliberate choice.
This was a UI design project, with the UX research already in place. The findings showed that money sits split across separate accounts, so what someone spends and what they save never appear side by side, and the impact of everyday spending on savings stays out of view.
Our task was to design a banking product built around a single account for both spending and saving.
Understanding the Users
We built two personas, each representing a different relationship to money — one who struggles to save, and one who wants full control over it.
For the Big Spender, a single spending/savings account makes the relationship between spending and savings transparent: going over budget forces them to reduce the percentage allocated to the savings pot. This helps those who struggle to save by making clear the impact frivolous spending has on their goals.
For the Organiser, separate savings and spending pots show the funds available for each, letting them add as many items to their spending pot as they like, reducing the need to use budgeting software. The Organiser has lots of tools to get their immediate and longer-term budgets in order.
Ideation
Ideation started from the two personas and the tension between them: one account that had to feel effortless for one and controllable for the other. Instead of two separate paths, we worked toward a single structure flexible enough to hold both, mapping out how much should happen automatically, how much control to expose, and how goals of different sizes and timeframes could live in the same place.
From these principles, we mapped the persona journeys to define the core MVP flows across savings and spending. The journey covers creating and editing buckets, adjusting item percentages, filtering by tags and handling payments, while identifying where users can customise the spending-savings ratio and choose how payments are scheduled.
A
Image 1–10 veya Video 1–10 bağla
Each of those decisions settled into a master flow that mapped the entire product as one system. Sign-up included a 100-point identity check before the flow branched into every route through the account: lazy-loaded transactions and future payments, bucket and payment management, and profile actions, each distinguishing page-to-page navigation from interactions within a page. Every screen carried its full set of states, blank, loading, partial, error and success, so the product's behaviour was defined before a single interface was designed.
Image 1–10 veya Video 1–10 bağla
Master Userflow
Design & Prototyping
There's an extensive design system running from atoms and molecules through to responsive organisms, templates and pages. Colour ramps show the WCAG level of contrast at every tint. Molecules and organisms combine into templates, and pages built on those templates formed the basis of the initial prototype.
WalleyBank needed to read as an innovator while still being trusted as a bank. The palette pairs turquoise and indigo, sitting either side of the blue conventionally used in banking, with several blues retained to keep a visible link to established banks. Manrope carries the same tension: neo-grotesque for trust, with enough geometric character to read as current.
Image 1–10 veya Video 1–10 bağla
A
Image 1–10 veya Video 1–10 bağla
A
Testing
Users were presented with three scenarios:
#1 Understanding WalleyBank One, specifically how funds are allocated to spending, savings and the optional buffer
#2 How to create and edit savings buckets
#3 How to create and edit payments
Users completed the tasks effectively and found the individual flows and the entire experience satisfying, with a SUS score of 75.8 and SEQ ratings of 5.67 for buckets and 6.33 for payments.
Every issue was rated from Minor through to Critical. Minor issues have a small impact, though numerous minor issues can accumulate across the overall experience. Moderate issues have some impact and are likely to make task completion challenging. Critical issues make task completion challenging and affect business objectives.
Issues were identified, none critical, all addressed in the final prototype.
Image 1–10 veya Video 1–10 bağla
A
The changes from testing brought the prototype to its final state.
The finished prototype opens on the balance across budget, savings and safety net, with buckets tracking towards their targets alongside payments and transactions, each filtered by timing. Buckets are named, tagged, scheduled and funded by percentage or amount. Payments cover both methods and timing, from one-off to recurring, and feed back into the spending pot. Profile handles identity, security and payment settings, with about and help pages alongside.
Image 1–10 veya Video 1–10 bağla
WalleyBank One
Image 1–10 veya Video 1–10 bağla
