top of page
UX Case Study — Self-Initiated

Budget Compass

Helping everyday users take control of their finances through clarity and calm design.

ROLE

UI Designer

TIMELINE

4 Weeks

TOOLS

Figma · FigJam · Maze

01

Overview

Personal finance is often a source of anxiety rather than empowerment. Budget Compass was born from a desire to strip away the complexity of traditional banking apps and create a serene, focused environment where users can quickly understand their financial health without feeling overwhelmed by charts, jargon, or cross-selling.

Personal finance is often a source of anxiety rather than empowerment. Budget Compass was born from a desire to strip away the complexity of traditional banking apps and create a serene, focused environment where users can quickly understand their financial health without feeling overwhelmed by charts, jargon, or cross-selling.

02

Research & Discovery
Research Goals

  • Understand the emotional triggers associated with checking bank balances.

  • Identify the core features users actually use versus what banks provide.

  • Discover friction points in existing budgeting applications.

Key Findings

  • Cognitive Overload: 78% of interviewed users felt overwhelmed by the data density in their current apps.

  • Reactive vs. Proactive: Users check their accounts to confirm they aren't overdrawn, rather than to plan ahead.

  • Guilt Spirals: Over-categorization of spending led to guilt rather than actionable insights.

  • Safe to Spend: The most desired piece of information was simply "how much can I safely spend today?"

  • Visual Calm: Users preferred muted colors and whitespace when dealing with stressful topics.

Alex, 26- Marketing Coordinator

"I just want to open the app, know I'm okay, and close it. When I see ten different pie charts in neon colors, my heart races. I feel like I'm already failing."

Needs: Quick balance checks, plain English, guilt-free insights.
Frustrations: Complex setup, aggressive alerts, confusing categorization.

03

Define & Ideate

Problem Statement: Financially anxious young professionals need a way to see their "safe to spend" amount at a glance because dense data and complex categories induce avoidance behaviors.

HMW #1

How might we surface the most critical number immediately upon opening the app?

HMW #2

How might we use color and typography to lower the user's heart rate?

HMW #3

How might we reframe "budgets" as flexible guidelines rather than strict rules?

04

Design Process
Information Architecture

The goal was ruthless reduction. I flattened the navigation, removing secondary menus and hiding settings behind a single profile layer. The core loop became: Open → View Safe to Spend → Add Transaction (if needed) → Close.

Wireframes

Early sketches focused on the hierarchy of the dashboard. I tested three different layouts for the 'Safe to Spend' module, ultimately choosing a central, large-typography approach that completely dominates the top half of the screen.

High-Fidelity UI

The visual language relies heavily on whitespace, soft rounded corners, and a muted, earthy color palette. Red is used sparingly for critical alerts, relying instead on amber and soft blues to guide attention gently.

05

Prototype & Testing

4

Participants

5

Tasks Tested

2

Iterations Made

Findings

  • Success: 4/4 users immediately understood their 'Safe to Spend' balance.

  • Friction: Users hesitated when adding a manual transaction, unsure if it updated instantly.

  • Insight: The term "Budget" was still triggering for some; we tested renaming it to "Plan".

Iterations

  • Added a micro-interaction and toast notification upon adding a transaction for immediate feedback.

  • Changed copy from "Weekly Budget" to "Weekly Plan" to soften the tone.

06

Outcomes & Reflections

Budget Compass proved that designing for anxiety requires a fundamentally different approach than designing for engagement. By stripping away features that typical fintech apps boast about, the resulting product was calmer, faster to use, and more aligned with the psychological needs of financially stressed users.

What I would do differently

  • Involve a behavioral psychologist earlier in the research phase to better understand the mechanisms of financial avoidance.

  • Conduct a longitudinal study (2+ weeks) to see if the calmer UI actually resulted in changed spending habits.

  • Explore motion design more deeply to create fluid, breathing transitions that enforce the calm aesthetic.

bottom of page