Everyday banking, rebuilt for the phone.
A regional bank's mobile app, redesigned from the ground up for iOS and Android, from research to a design system the whole bank can build on.
It mirrored the bank's org chart. People just wanted to get things done.
The existing app had grown one feature at a time. Core tasks sat in menus that mirrored the bank's internal departments, so checking a balance, freezing a card and paying a friend each lived somewhere different.
The brief: keep everything the bank offers, but make the five things people do every day effortless.
Each of these features saves customers an enormous amount of time and patience: no queues at the branch, no calls to the contact center, no waiting for working hours.
Balance first, everything else buried
The home screen showed one account. Other currencies, savings and cards were three taps away.
A lost card meant a phone call
Freezing or limiting a card required the contact center, often outside working hours.
Transfers without a clear total
Fees and exchange rates appeared only after confirming, which eroded trust.
Listening before drawing.
We combined what customers said with what they did: interviews and app reviews on one side, support tickets and analytics on the other. Three products set the bar: Wise for fee transparency, Revolut for card control, and Monzo for savings pots and plain language.
Interviews
One-on-one customer interviews about everyday banking habitsReviews
App store reviews, tagged by theme and severitySupport
Support tickets from the contact center, grouped by causeWorkshops
Stakeholder workshops with business, IT and complianceBenchmarks
Wise, Revolut and Monzo, compared flow by flowPeople check, then act
Most sessions start with a balance check. The next action should be one thumb-reach away.
Control is reassurance
Being able to freeze a card instantly matters more than how often it's used.
Surprises cost trust
A fee shown late feels hidden, even when it's small.
Verda: growth you can see.
Verda stands in for the real bank. The name comes from verde, green, and the mark folds a leaf into the V. One confident green carries every primary action. Everything else stays quiet, so money is the loudest thing on screen.
Colour in use
Green is reserved for actions and money coming in. Alert red appears only when something needs attention, so it never loses its meaning.
Typography
Voice
Five screens, five decisions.
Each screen answers one question a customer actually asks. The toggles and the freeze button on the card screen are live, so you can try them.
One number first, then everything else.
The total across every currency and vault answers "how much do I have?" before anything else. Accounts sit in a swipeable row, and the four most used actions stay in thumb reach.
- Total balance with monthly change
- Multi-currency accounts and vaults side by side
- Send, Request, Exchange, Top up as primary actions
Every payment explains itself.
Raw card descriptors become clean merchant names with categories. Pending payments look different from settled ones, and each payment can be split, receipted or reported from its detail screen.
- Search, filters and a monthly in/out summary
- Pending state shown in the list
- Split, receipt and report in one row
No phone call for a lost card.
Freeze is the first action, one tap and reversible. Online, contactless, ATM and location security are separate switches, so people limit only what they need. Try them on the left.
- Instant freeze and unfreeze
- Granular security toggles
- Physical, virtual and single-use cards in one place
The total before the button.
The fee, the rate and the amount the recipient gets are visible while typing, not after confirming. Arrival time is a promise in plain words.
- You send / they receive, both editable
- Fee and rate broken down step by step
- Arrival estimate before review
Money that's going somewhere.
Spending is grouped into categories with budgets, so overspending shows early. Vaults give savings a name and a target, and round-ups fill them without thinking.
- Category budgets with progress
- Named savings goals
- Round-ups from card payments
Built to scale past this app.
Every screen is assembled from shared components documented in Storybook, so web banking and future products reuse the same parts. The clearest example is card control: a form that waited for the back office became a component that acts the moment you touch it.
* Requests are processed within 24 hours. To block a lost or stolen card, call the contact center.
- Status hidden in a dropdown, written in capitals
- Nothing happens until a request is processed
- A lost card still means a phone call
- One tap, applied the same second
- Every change can be undone
- Plain words and live feedback instead of a form
Before: simplified reconstruction of the original screen. After: the Verda component, live.
Type
Actions
Controls
One component, two platforms
- 1Merchant
- 2Name
- 3Context
- 4Amount
The same tokens and anatomy on mobile and web. The layout adapts to the screen; what it means and how it behaves stays the same.
Light and dark, same tokens
Switching themes swaps token values only. Not a single component was redrawn.
States, defined once
What changed.
The moments that used to cost a phone call, a branch visit or a day of waiting now take seconds in the app. Customers solve everyday problems on their own, and the contact center gets time back for the questions that really need a person.
The product is live and still growing. Since 2022 the team has kept shipping on the same components, so every new feature starts from a tested, familiar pattern.
Name the money
A savings goal with a name and a target feels real. That idea shaped the whole Vaults experience.
Show the fee early
Answering "what will this cost?" above the button stops the question from ever becoming a complaint.
Saving together
Shared vaults for partners and flatmates are a natural next step for the product.