Banking App Design: Screens, Security Cues and Flows

This guide is for founders, product teams and designers building a banking, neobank or money app. You'll get the core screen list, how to design the flows that carry real risk (payments, cards, sign-in), the visual and copy cues that make people trust an app with their money, and a checklist to review your designs before they reach compliance and engineering.

TL;DR: In banking app design, trust is the feature. Make balances and recent activity instantly readable, give every money movement a clear review and confirmation step, put security controls like card freeze one tap away, and explain anything unusual in plain language. Calm, consistent and predictable beats clever.

What makes banking apps different

Four things raise the stakes:

1. •Mistakes cost money. A wrong tap can send funds to the wrong person, and payments are often hard to reverse.
2. •People open them anxiously. Checking a balance before payday or after a suspicious text is an emotional moment.
3. •Security is visible. Users judge safety by what they see: biometrics, confirmations, warnings and how the app responds when something goes wrong.
4. •Regulation shapes the UI. Strong customer authentication, disclosures, accessibility and fraud warnings all appear on screen.

The neobanks set the bar: Monzo made instant spending notifications and in-app card freezing mainstream, and Revolut bundles accounts, cards and exchange behind one home screen. Users now expect that clarity from every bank.

The core screen list

Flow 1: Account opening and verification

Account opening is your onboarding. Make it feel like progress, not paperwork:

1. •Set expectations up front: "Opening an account takes about 5 minutes. You'll need a photo ID."
2. •Ask for one thing per screen: name, date of birth, address (with autocomplete), phone, email.
3. •Guide the camera: for document and selfie capture, show a frame outline, live feedback ("Move closer", "Too dark"), and auto-capture when the image is sharp.
4. •Save and resume: people get interrupted while finding their passport.
5. •Explain waiting: if verification takes time, say how long and let users explore the app in the meantime.

Our onboarding screen design playbook covers step counts, progress indicators and permission priming in more depth.

Flow 2: Sign-in and unlock

The common pattern:

• •First sign-in: full credentials or account verification, then device registration.
• •Every open after that: Face ID, Touch ID or fingerprint, with a 4–6 digit app passcode as fallback.
• •Step-up authentication for sensitive actions such as adding a payee, raising limits, viewing card details or changing contact details, even if the user is already signed in.
• •Automatic sign-out after inactivity, with a clear message on return.

For the credential screen itself, see our guide to login screen design.

Flow 3: The home screen

The home screen answers one question in under two seconds: how much money do I have, and is anything wrong?

Layout, top to bottom:

1. •Greeting and profile avatar (opens settings).
2. •Main balance, large, with an eye icon to hide it in public. Many apps remember this preference.
3. •Account switcher if the user has several accounts, as horizontal cards or a segmented control.
4. •Quick actions: Send, Request, Top up or Pay bills, Cards. Three or four, not eight.
5. •Recent transactions, 3–5 items, with "See all".
6. •Contextual cards: upcoming bills, a suspicious transaction alert, a savings goal. Keep promotions below essential information.

Resist the urge to fill the home screen with products; every promotional banner above the balance erodes trust a little. You can generate a first draft of this layout in floow and compare a few balance treatments side by side.

Flow 4: Sending money

This is the highest-risk flow in the app. Design for accuracy over speed.

1. •Choose payee: recent and saved payees first, then "New payee" and search.
2. •New payee details: name, account details or phone/email, depending on the payment system. Validate formats as people type.
3. •Payee verification: where available, check the account name before sending. In the UK, Confirmation of Payee shows whether the name matches the account, partially matches or doesn't match, and the UI must make a mismatch impossible to miss.
4. •Amount: large numeric keypad, currency shown clearly, available balance visible underneath.
5. •Reference or note: optional, with a character limit shown.
6. •Review screen: payee name, account (partially masked), amount, fees, arrival time, all on one screen with an "Edit" option for each.
7. •Authorise: biometric or passcode confirmation for the payment.
8. •Confirmation: a clear success state with amount, payee, reference number and a "Share receipt" option.

Scam protection in the flow

Authorised push payment scams trick people into sending money themselves. Add friction in the right places:

• •Ask the purpose of a first payment to a new payee ("Paying for goods", "Investment", "Someone asked me to move money") and show tailored warnings.
• •Warn clearly when a payee name doesn't match.
• •Add a short cooling-off delay or extra confirmation for large first payments.
• •Use direct copy: "Banks will never ask you to move money to a safe account."

Flow 5: Card controls

Put card controls one or two taps from home:

• •Freeze/unfreeze as a single toggle with immediate feedback.
• •View card details behind biometric authentication, with a copy button for online shopping.
• •Spending limits and toggles for online, contactless, ATM and international payments.
• •Report lost or stolen and order a replacement, with clear next steps.
• •Virtual cards for online shopping, if you offer them.

Visual design: what trust looks like

Color

Blues, deep greens and dark neutrals read as stable, but trust comes more from consistency than hue; Monzo's coral card proves a bank can be bright. Rules that matter more:

• •Use color for meaning sparingly. Reserve red for errors and genuine warnings, not for normal outgoing transactions. If money out is always red, the app feels alarming.
• •Don't rely on color alone. Show "+" and "−" signs, or labels like "Received", alongside any color coding.
• •Meet contrast requirements. WCAG asks for 4.5:1 for normal text. Grey secondary text on light backgrounds is the most common failure; test with the contrast checker.

Numbers and typography

Money is the content:

• •Tabular figures for balances and lists so digits line up and don't shift as values change.
• •Clear currency formatting: follow the user's locale for symbols, decimal separators and digit grouping.
• •Balance hierarchy: whole units larger, cents smaller, is a common pattern that makes balances scannable.
• •Never truncate amounts.

Our mobile app typography guide covers tabular figures and type scales for data-heavy screens.

Copy

• •Use plain language: "Money in" and "Money out", "Arrives by tomorrow", "This payment is pending".
• •Explain fees and timing before confirmation, never after.
• •Write error messages that say what happened and what to do: "We couldn't send this payment because your daily limit is £1,000. You can raise your limit in Settings."

Security cues users notice

Accessibility and regulation

Banking apps have to work for everyone, and in many regions it's a legal requirement. The European Accessibility Act, which applies to consumer banking services in the EU from June 2025, is one example. Practical basics: support Dynamic Type and Android font scaling, label every icon for VoiceOver and TalkBack, keep tap targets at 44pt (iOS) or 48dp (Android), and test the payment flow with a screen reader end to end.

Banking app design checklist

• • Balance is readable in under two seconds and can be hidden.
• • Every money movement has a review screen and a clear confirmation.
• • Sensitive actions require step-up authentication.
• • New payees are verified where the payment system allows it, with clear mismatch warnings.
• • Scam warnings appear in context for risky payments.
• • Card freeze is one or two taps from home.
• • Fees and arrival times appear before confirmation.
• • Amounts use tabular figures and never truncate.
• • Color is never the only signal for money in vs. money out.
• • All text meets WCAG contrast; tap targets meet platform minimums.
• • Screen readers can complete a payment.
• • Support and fraud reporting are reachable from every key screen.

FAQ

What screens does a banking app need?

At minimum: account opening and verification, sign-in, a home screen with balances and recent activity, a transactions list and detail, send money with review and confirmation, card controls, notifications, support and security settings. Insights and budgeting screens are common next additions.

How do you make a banking app feel secure?

Combine real security with visible cues: biometric unlock, step-up authentication for sensitive actions, masked numbers, instant transaction alerts, card freeze controls and a device list. Calm, consistent visual design and plain-language copy reinforce the feeling of safety.

How should a banking app handle sending money?

Use a step-by-step flow: choose or add a payee, verify the payee where possible, enter the amount, review all details on one screen, authorise with biometrics, then show a clear confirmation with a reference number. Add tailored scam warnings for first or unusual payments.

Design it with floow

Describe your banking app and refine every flow through chat on floow.design before exporting to Figma or code. For more fintech starting points, see fintech wallet and loan app screens or browse the templates. Try: "Design an iOS neobank app: home with large balance and hide toggle, quick actions, recent transactions; transaction detail; send money flow with payee verification, review screen and confirmation; card controls with freeze toggle. Deep navy and teal, tabular figures, 44pt tap targets."