UX / UI CASE STUDY · 2026

FlowFi

Track Your Money,
Achieve Your Goals.

A minimal budget tracking app designed for students — built to turn money awareness into a daily habit.

FlowFi onboarding screen
01 · Discovery

The Problem

Money management is one of the biggest hidden stressors of student life. We mapped four core friction points.

📉

No Daily Tracking

Students rarely log their daily expenses, losing visibility over where money goes.

💸

Overspending

Without limits or feedback, casual spending quickly snowballs into stress.

😵

Complex Apps

Existing finance apps are built for adults — cluttered, jargon-heavy, intimidating.

🔁

No Habit Loop

There's no gentle nudge to come back daily and build a tracking habit.

02 · Direction

Our Objective

Four guiding principles that shaped every screen, interaction and word in the app.

01

Create a simple budget tracking app

02

Encourage daily tracking habits

03

Provide clear financial insights

04

Reduce financial stress

03 · Response

The Solution

Three pillars that turned the problem into a product.

Minimal Design

A clutter-free interface that focuses attention on what matters: the number.

Built for Students

Tailored categories, INR-first defaults, and language that doesn't lecture.

Simple & Usable

Three taps to log a transaction. Zero financial vocabulary required.

FlowFi dashboard
04 · The Product

App Screens

Ten screens, one consistent system. Swipe through the full FlowFi experience.

Onboarding
Onboarding
Home Dashboard
Home Dashboard
Add Transaction
Add Transaction
Transaction List
Transaction List
Budget Overview
Budget Overview
User Profile
User Profile
Edit Profile
Edit Profile
Transaction Detail
Transaction Detail
Edit Transaction
Edit Transaction
Success
Success
FlowFi dashboard
05 · Feature

Smart Dashboard

1

Total balance at a glance

Income, expenses, and net balance — front and centre on launch.

2

Spending breakdown

An at-a-glance pie chart shows where every rupee actually went this month.

3

Recent transaction feed

The last few entries stay one scroll away so you never lose context.

Add transaction
06 · Feature

Effortless Tracking

1

Expense / Income toggle

One tap switches mode — the form adapts instantly.

2

Smart category picker

Pre-set student categories: Food, Transport, Shopping, Bills.

3

Grouped history

Today, Yesterday, and dated buckets keep the list skimmable.

Budget overview
07 · Feature

Stay Within Budget

1

Monthly budget limits

Set a ceiling per category and FlowFi tracks the burn rate for you.

2

Visual progress bars

Color-coded fills make the 60% mark unmistakable.

3

Category-wise breakdown

Food, Transport, Shopping, Bills, Entertainment — all in one view.

User profile
08 · Feature

Personalized Experience

1

Personal information

Name, email, phone, DOB and location — managed in one tidy sheet.

2

Manage categories

Add or rename categories so the app speaks your spending language.

3

Currency · Notifications · Security

Sensible defaults with the controls power users expect.

09 · Flow

User Journey

The shortest path from open to insight.

STEP 1
Onboarding
STEP 2
Dashboard
STEP 3
Add Transaction
STEP 4
View History
STEP 5
Check Budget
STEP 6
Profile
10 · System

Design Decisions

The atoms that make FlowFi feel like FlowFi.

Color Palette

Deep Purple
#6C47C7
Lavender
#EDE9FF
White
#FFFFFF
Dark Gray
#1F1B2E

Typography

Headings · Poppins
Aa Bb Cc
Body · Inter
The quick brown fox.

Icon Style

Outlined, 2px stroke, rounded joins — friendly without being childish.

⊙ □ ◇ ◯ △

Buttons

11 · Wrap

Thank You.

FlowFi was designed to solve a real problem — helping students take control of their finances through simplicity and habit-building.

Designed by
Vanshika Agarwal
© 2026 FlowFi · A student-focused case study