Information Architecture
Core Sections
The app is divided into seven main areas: Home, Transactions, Summaries, Quick Entry, Notifications, Groups, and User Profile.
Key Features
Home: Summary of goals, groups, expenses, and subscriptions
Transactions: Inflow/outflow details
Summaries: Visualize spending with charts and track savings goals.
Quick Entry: Quickly add expenses or make payments.
Notifications: Stay updated on settled payments and upcoming dues.
Groups: Manage group expenses and summaries.
User Profile: Connect wallets store receipts and organize monthly budgets.
Interactive Wireframes
Quick Entry:
Groups:
Transactions:
Goals:
Interviews
We conducted interviews with ten participants from diverse academic and professional backgrounds, ranging from undergraduates to part-time working professionals. The goal was to understand their financial habits, challenges, and aspirations.
Needs Assessment
Problem Statement
Oops, where did all my money go?
This was the recurring challenge voiced by students struggling to manage their finances effectively. Many faced difficulty tracking expenses, leading to overspending, financial stress, and a lack of clarity about their spending habits. Our goal was to empower students to take control of their finances by creating a solution that was intuitive, educational, and tailored to their needs.
The Journey
Understanding our problem
We started by conducting surveys and interviews with students to uncover their pain points. Patterns quickly emerged: impulsive shopping, a lack of structured financial habits, and frustration with existing tools that were either too complex or too basic. These insights became the foundation of our personas, Gloria Rodriguez and Ashok Gupta, who represented the diverse financial management needs of students.
Ideation and Prototyping:
Our design process began with brainstorming solutions that balanced simplicity for novice users like Gloria and advanced functionality for disciplined users like Ashok. The result was a comprehensive app concept offering features like:
Quick logging of expenses and incomes.
Centralized management of subscriptions and recurring payments.
Visual goal tracking to make saving engaging.
Group expense management to ease shared costs.
We created low-fidelity prototypes and conducted usability testing to refine these ideas.
Iterative Improvements:
Feedback played a pivotal role in shaping our design. For example:
Users found terms like "Inflow" and "Outflow" confusing, so we replaced them with "Income" and "Expense."
Early visualizations were overwhelming, leading us to simplify graphs and prioritize clarity.
The need for a dedicated homepage emerged after users expressed confusion about navigation.
Each iteration brought us closer to a user-centered design that aligned with real-world expectations.
Impact
Our final design made a tangible difference in how students approached financial management. The app provided:
Clarity: Visual summaries of spending patterns and progress toward savings goals gave users a clear picture of their finances.
Convenience: Centralized tools eliminated the need for multiple apps or manual tracking.
Empowerment: Students felt in control of their money, reducing financial stress and building healthier spending habits.
High Fidelity Prototype
Visual Design
Logos
Typography
Aa
Poppins
Regular
Medium
SemiBold
Bold
Colors
Primary Colors
#023F25
#077546
#6FC586
#CEE5BE
#EFF6E9
Neutral Colors
#333333
#6A6A6A
#A9A9A9
#D3D3D3
#F4F4F4
#FDFDFD
Text Colors
#333333
#6A6A6A
#A9A9A9
Error Colors
#F45757
Div Boxes
Background 1
Background 2
Stroke 2
Margin, Padding, Parargraph Width
Vertical padding: 12
Horizontal padding: 12
Vertical gap: 16
Horizontal gap: 12
Grid
Buttons
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Default
Primary
Secondary
Icon only
Ghost icon
Active
Disabled
Input Boxes
Default
Default
Default
Left Icon
Left Icon
Right Icon
Right Icon
Right Icon
Both Icons
Both Icons
Both Icons
Selected
Disabled
Filled
Error
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Graph Colors
Colour Map
Colour for axis lines
Colour 1
Colour 2
Colour 3
Colour for Error Data
Donut Chart
Primary Data
Secondary Data
Tertiary Data
Other
Background Fill (if used)
Bar Graph
Colour for axis lines
Primary Data
Secondary Data
Tertiary/Other Data
Optional/Background Fill
Labels
Excess Spending
Pie Chart
Colour for axis lines
Primary Data
Secondary Data
Other
Graph Title
These are some words about this graph.
Graph Title
These are some words about this graph.
Item 1
Item 2
Item 3
Item 4
Item 5
Baseline
-200
-100
0
100
200
Month 1
Month 2
Month 3
Month 4*
USD
Saving Goal
Graph Title
These are some words about this graph.
Option 1
19%
Option 2
32%
Option 3
29%
Design Iteration
Before
After
"Inflow" and "Outflow" labels were changed to "Income" and "Expense" based on usability testing feedback
Users found the original terms confusing and less intuitive during the usability evaluation and could not understand what Inflow v/s Outflow meant.
Users found the low-fidelity screens overwhelming and could not understand the graphs.
We changed the final design by reducing clutter, using a clearer visual hierarchy, and implementing understandable visualization to improve user comprehension.
Before
After
Before
After
During usability testing, users found it confusing that the transaction screen was the homepage.
To address this, we introduced a dedicated homepage that overviews key financial metrics, including upcoming payments, spending trends, savings goals, and subscriptions
Users were confused about savings tracking due to the missing budget-setting functionality in the low-fidelity wireframe.
Added monthly income, savings target, and category-specific budgeting in the high-fidelity design.
- Aligns with the heuristic “Match between system and the real world” by meeting user expectations for budgeting and saving.
Users were confused about savings allocation and progress tracking in the low-fidelity wireframes.
Added inputs in the high-fidelity design for:
Frequency of saving (e.g., weekly, monthly).
Savings amount (per contribution).
Aligns with the heuristic “Visibility of system status” and ensures users understand their contributions toward goals
Usability Testing - Results
Overview
The usability test provided actionable insights into the strengths and weaknesses of the personal finance app prototype. Feedback from participants informed design improvements, ensuring a user-friendly experience.
Key Findings
Strengths
Goals Feature: Users appreciated the concept of setting and tracking savings goals.
Transactions View: Detailed transaction breakdowns were praised for their clarity and organization.
Group Splitting Feature: Found helpful, with potential to replace third-party apps.
Challenges
Goals Page: Users struggled to understand progress indicators and required fields.
Transaction Summary: Terms like "inflow/outflow" and pie chart interactivity caused confusion.
Bank Integration: Linking accounts felt unintuitive, and logout placement was unclear.
Task Analysis
Task
Outcome
Improvement
New Expense Entry
Most users successfully added expenses but faced difficulty distinguishing required fields.
Clear labels and better visual feedback for field requirements.
Group and Split Expenses
Users navigated group creation easily but desired more flexible splitting options.
Simplify group settings and add advanced split features (e.g., uneven splits).
Connect Bank Account
Account linking steps and logout placement were not intuitive.
Reorganize profile layout and separate logout from account deletion
View Transactions
Users appreciated the detail but struggled with terminology ("inflow," "outflow").
Use simpler language and provide clear navigation cues.
Check Categorized Spending
Pie chart interactivity was unclear; filter icons were underutilized.
Add tooltips and clickable elements to enhance usability.
Add Goals
Users liked the feature but found progress tracking and goal creation unintuitive.
Add visual progress bars and simplify goal setup fields.
Usability Testing - Preparation
Participant Demographics
Diverse participants with relevant financial habits provided actionable insights.
Age Range: 18 - 26
Young adults, primarily college students and recent graduates
Education Level
Current undergraduate and graduate students
Employment Status
Part-time, full-time, and unemployed participants
Financial Habits
Mix of budgeting tools: Mint, Excel, Rocket, or pen and paper
Research Protocol
A structured protocol ensured we captured meaningful feedback efficiently.
1
Introduction
10 mins
Introductory and warm-up questions
2
Scenario-based Tasks
30 mins
User completed 6 different flow tasks
3
Conclusion
10 mins
Feedback and wrap-up
Scenario-Based Tasks
Each task focused on evaluating key features and user experience clarity
1
Add a new expense
2
Create a group and split an expense
3
Connect bank account
4
View transactions
5
View categorized spending
6
Add a goal
Testing Script
A structured protocol ensured we captured meaningful feedback efficiently.
Warm-up questions
"Are you a student? Do you use apps to budget?"
Purpose: Build rapport and understand user context.
Scenario Based Tasks
Users performed specific actions using the prototype.
Observations noted on ease, confusion points, and feedback.
Conclusion
"What did you like/dislike about the experience?"
"Would these features be useful to you?"
User Flows
Goals
This maps out a user flow for managing saving goals, branching into two . main pathways - setting aa goal and viewing a goal.
Transactions
This maps out a user flow for users to view their summaries and analyze spending patterns.
Start
Summaries
Views Category Summary
Enters Preferred Timeline
Views In Detail Transaction Details
Sorts the Transactions from Highest to Lowest
Clicks Category Button
Selects Timeline Button
Selects Category Legend
Selects Sort Button
Groups
This maps out a user flow for users to add groups to simplify payments amongst a group of friends and housemates!
Start
Summaries
Views Category Summary
Enters Preferred Timeline
Views In Detail Transaction Details
Sorts the Transactions from Highest to Lowest
Clicks Category Button
Selects Timeline Button
Selects Category Legend
Selects Sort Button
Privacy and security
Participants consistently expressed concerns about the security of financial information shared with third-party apps. Primarily,
Data encryption
Transparent data use
Clear and intuitive spending insights
Participants struggled to understand their financial habits using current tools, which led to a need for,
Detailed visualizations
Real time spending updates
Transaction categorization
Impulse management tools
Unplanned spending and lack of impulse control were major pain points, leading to a need for features that encourage financial discipline,
Spending alerts
Goal based visual prompts
Flexible and accessible tracking
Participants appreciated tools like Excel for their customization and flexibility. These insights informed the need for,
Customizable tracking options
Integration with payment apps
Simplified onboarding
Support for financial goals
Many participants wanted tools to help them set and achieve financial goals,
Savings goal management
Budget allocation by category
Long term planning
Gloria Rodriguez
Profile: 24 years old, Master’s student in School Psychology, part-time school psychologist intern in Minneapolis, MN.
Needs: Visual tools to categorize and track expenses intuitively, guidance to form structured financial habits.
Insights: Impulsive spender influenced by social environments and convenience. Motivated to save for short-term goals but struggles with long-term planning.
Ashok Gupta
Profile: 24 years old, MBA student, part-time data analyst in Ann Arbor, MI.
Needs: Efficient tracking tools, automated categorization, and streamlined financial records.
Insights: Highly disciplined but frustrated by time-consuming methods. Focused on long-term savings and investment planning.
Overview
Many students struggle with managing their monthly budgets and daily expenses, often leading to overspending and financial stress. They lack a clear understanding of their spending habits, the ability to categorize expenses, and tools to track payment methods or identify saving opportunities. This project aimed to provide students with an affordable, accessible, and educational solution to improve their financial management.
Key Areas: Interaction Design, Usability Testing
Timeline: 10 Weeks
My Role: Conducted user interviews, designed user flows, designed all data visualizations and the summaries page, usability testing to refine the user experience.
Personas