Visual Design · Mobile · Fintech

A banking app designed around financial clarity.

A personal exploration in mobile banking UI — building a system that surfaces the right financial signal at the right moment, without making every screen feel like a dashboard.

Type Personal Project

Tool Figma

Screens 4 key flows

Focus Visual language

9:41

DB Bank

Good morning,
Durga.

Enter your PIN to continue

Forgot PIN?

2 ABC

3 DEF

4 GHI

5 JKL

6 MNO

7 PQRS

8 TUV

9 WXYZ

Confirm

02 · Interactive prototype

9:41

Savings Account

$90,000

Loan Account

$640,000

10/2

21:00 Starbucks, Park Ave. −$15.50

18:00 Bankieren Dienst −$149.99

16:00 Uber Ride Share −$25.50

For You

💡

AI Tip See what's new in your banking app

🤖

AI helps you Your spending is 12% lower this month vs. last month.

Income & Expenses

77% saved

Total Income $140k

Total Expenses $40k

Active Loans

🎓

$2,144/ month

Educational Loan

75%

🚗

$1,144/ month

Car Loan

42%

Home

My Space

💳

Credit Card

↗

Transfer

Invest

9:41

Insights

total $7,851

Savings Account

4 Ongoing Fixed Deposits

$2,500.50

Total Expenses

This month

$1,500.50

Loan Account

2 active loans

$1,750.00

Fixed Deposits

4 Ongoing

$1,600.90

Home

Insights

💳

Credit Card

↗

Transfer

Cards

9:41

BANK

9956 9956 9956 9956

Card Holder DURGA BATCHU

Exp Date 8/26

Balance Due

$1,500.50

Membership Pts

9,000

$1,500.50 due in 20 days

Last transaction on 15th Apr for $100.50 to Whole Foods Inc

Setup Autopay

Recent Transactions

Apple INC

DEC 20

$1,015.99

Netflix US

DEC 30

$15.99

Amazon

JAN 15

$75.30

Home

My Space

💳

Credit Card

↗

Transfer

Invest

A personal project exploring visual design and interaction patterns for mobile banking — focused on how financial data can feel calm rather than cluttered.

Decision 01

FAB as the primary action trigger

Instead of spreading primary actions across the nav, a single floating button expands into Transfer and Pay. It keeps the chrome light and signals importance through form, not label count.

Decision 02

Insights as one screen, not two

Accounts overview and expense breakdown are both sub-views of the same mental model — "how is my money doing." Making them sibling tabs within Insights, rather than separate top-level screens, reflects that hierarchy and removes the confusion of two screens that felt identical in purpose.

Decision 03

Monochromatic expense palette

The expense breakdown uses a single-hue spectrum instead of arbitrary colours. Every shade of rose belongs to the same category of "money leaving" — the visual logic reinforces the information logic.

Decision 04

Card stack with depth cues

Three stacked cards with subtle rotation and gradient layering communicates "there are more cards" without a list. Physical metaphors reduce cognitive load in a screen that already has a lot of numbers.

03 · Design language

What this project is about.

The case studies elsewhere on this portfolio show how I reason through complex systems. This project is the other side of that — how I make things look and feel when the brief is open. The choices here are deliberate: colour as information, not decoration; hierarchy as sequence, not size alone; interaction as orientation, not novelty.

Colour

Teal for trust, orange for urgency

The palette is kept to two functional hues. Teal carries calm, informational content. Orange triggers action — due dates, CTAs, active nav states. Nothing else competes.

Typography

Monospace for numbers, sans for context

Financial figures use monospace so digits align and the eye can scan vertically. Labels and copy stay in a geometric sans. The contrast is functional, not stylistic.

Interaction

One tap for the most important action

The FAB is one tap to surface Transfer and Pay. On a screen where people make real financial decisions, reducing the path to the primary action is not a UX nicety — it matters.