case study
case study
FIG
a personal finance app that helps users manage all aspects of their personal finances, including tracking daily expenses, customizing spending budgets and savings goals, and paying bills.
a personal finance app that helps users manage all aspects of their personal finances, including tracking daily expenses, customizing spending budgets and savings goals, and paying bills.
a personal finance app that lets users track spending, set budgets and savings goals, and pay bills in one place.
Timeline
I Oct. 2021 - Feb. 2022
Role
I Lead UX designer
Problem Statement
Problem Statement
FIG users need an intuitive way to monitor daily finances, budget effectively, set achievable savings goals, and track bills to avoid late fees and protect their credit scores. The app’s success will be measured by a 20% increase in user savings within three months and a drop in late payment fees to 3% compared to their previous payment history.
FIG users need an intuitive way to manage their personal finances. Success is measured by a 20% ↑ in savings within 3 months and a ↓ to 3% in late payment fees.
Competitive Analysis
Competitive Analysis
I conducted a competitive analysis of popular finance apps to understand the market, identify strengths and weaknesses in existing solutions, and uncover opportunities to create a user experience that sets FIG apart from competitors.
Competitive analysis of leading finance apps to identify market gaps and opportunities for a differentiated FIG UX.
Cash Flow Overview
Cash Flow Overview
Set Budgets
Set Budgets
Set Savings Goal
Set Savings Goal
Make Payments
Make Payments
Intuitive UX/UI
Intuitive UX/UI
Mint
Mint
YNAB
YNAB
NerdWallet
NerdWallet
FIG
FIG
Strength
Secure account access with multi-factor authentication
Secure account access with multi-factor authentication
Clear financial visibility through net worth tracking, alerts, and reminders
Clear financial visibility through net worth tracking, alerts, and reminders
Seamless account linking and budgeting tools
Seamless account linking and budgeting tools
Weaknesses
Limited feature depth and overall functionality
Limited feature depth and overall functionality
Disorganized dashboard that makes navigation difficult
Disorganized dashboard that makes navigation difficult
Confusing onboarding flow with intrusive advertising
Confusing onboarding flow with intrusive advertising
Opportunities
Improve transaction visibility and account organization
Improve transaction visibility and account organization
Keep all accounts and balances consistently up to date
Keep all accounts and balances consistently up to date
Enable bill tracking and payments in one place
Enable bill tracking and payments in one place
Threats
Competitors offer stronger proactive planning tools
Competitors offer stronger proactive planning tools
Free alternatives attract users despite ad-heavy experiences
Free alternatives attract users despite ad-heavy experiences
Paid, ad-free models may deter cost-sensitive users
Paid, ad-free models may deter cost-sensitive users
User Interview
User Interview
Building on market insights, I conducted user interviews to explore behaviors, frustrations, needs, and goals. This process provided a deeper understanding of what users need in a finance app.
Conducted user interviews to identify key behaviors, pain points, needs, and goals that shape user expectations for a finance app.
overview
Sessions
Dates between Oct. 07-09, 2021
Length approx. 30 Min.
Test Method moderated Interview
Tool zoom meeting
Participants
All sessions were recorded based on the participant’s consent.
3 demographic questions
12 targeted questions
Amelia
F / 25
Customer Support Rep
San Jose, CA
Evans
M / 26
Business Analyst
Napa, CA
Karla
F / 31
Food Supply Manager
Berlin, Germany
Interview Analysis
BEHAVIORS & ATTITUDES
I use a banking app. It lets me see the overview of the recent transactions and payments. It is quick and simple. — Karla
I use a banking app. It lets me see the overview of the recent transactions and payments. It is quick and simple. — Karla
I use my mobile app to check my checking balance everyday. — Amelia
I use my mobile app to check my checking balance everyday. — Amelia
I feel safe using money apps because they have two factor authentication enabled. — Evans
I feel safe using money apps because they have two factor authentication enabled. — Evans
NEEDS or GOALS
I want a finance app with features for bill payment, financial overviews, budget setting, and expense tracking. — Amelia
I want a finance app with features for bill payment, financial overviews, budget setting, and expense tracking. — Amelia
I need a quick and easy way to check my finance daily. — Evans
I need a quick and easy way to check my finance daily. — Evans
I want to create budget for my monthly expense. — Karla
I want to create budget for my monthly expense. — Karla
FRUSTRATIONS
I often forget to pay my bills on time. — Karla
I often forget to pay my bills on time. — Karla
Sometimes I set a savings goal but forget to contribute to it. — Amelia
Sometimes I set a savings goal but forget to contribute to it. — Amelia
I’m concern for the security issue with finance app. — Evans
I’m concern for the security issue with finance app. — Evans
Key Takeaways
What do users want from personal finance apps?
What do users want from personal finance apps?
• Finance overview
• Finance overview
• Quick and simple to use
• Quick and simple to use
• Ability to set budgets and savings goal
• Ability to set budgets and savings goal
• Ability to pay bills
• Ability to pay bills
Design Personas
Design Personas
Based on research, I created design personas, Madison and Benjamin, to represent user behaviors, challenges, and goals. This helped me prioritize functionality and view the product from the user’s perspective.
Design personas capturing core behaviors, challenges, and goals to inform prioritization and keep design decisions user-driven.
“an impulsive spender”
Madison
22 / Single
Junior Graphic Designer
Annual Salary: $45K
Brooklyn, NY
Behaviors
Orders coffee every morning.
Browsing and shopping on the Internet spontaneously.
Goes out with friends on Fridays.
Challenges
Wishes to put aside money every month, but does not know where to start.
Saving is difficult, as her salary is low and she lives in NYC.
Needs / Goals
Set budgets for her expenses.
Needs a reminder before her budget reaches the limit.
The ability to create multiple categories for her budgets to be in control of spending.
“an impulsive spender”
Madison
22 / Single
Junior Graphic Designer
Annual Salary: $45K
Brooklyn, NY
Behaviors
Regularly orders coffee, makes spontaneous online purchases, and socializes with friends on Fridays.
Challenges
Wants to save monthly but struggles due to low income and NYC living costs.
Needs / Goals
Wants to set expense budgets, receive alerts before reaching limits, and create multiple categories to better control spending.
“an ambitious goal setter”
Benjamin
35 / Single Dad
Physical Therapist
Annual Salary: $92K
Columbus, OH
Behaviors
Often ends up not having enough funds to do what he had planned.
Hasn’t been able to spend quality time with her daughter because of a lack of savings.
Often lacks funds for planned activities and struggles to spend quality time with her daughter due to limited savings.
Challenges
Often ends up spending impulsively, and not having enough money for what he truly wants.
Feels insecure about not having much savings.
Often ends up spending impulsively, and not having enough money for what he truly wants.
Feels insecure about not having much savings.
Often spends impulsively and lacks funds for meaningful goals, leading to insecurity about limited savings.
Needs / Goals
Wants to take a family trip to Jamaica.
Wants to set up a recurring deposit to the savings goals so that it is automatic.
Wants to modify the goal, in case it’s needed.
Wants to take a family trip to Jamaica.
Wants to set up a recurring deposit to the savings goals so that it is automatic.
Wants to modify the goal, in case it’s needed.
Wants to save for a family trip, set up automatic recurring deposits, and adjust the goal as needed.
Task Analysis & User Flows
Task Analysis & User Flows
User flows for Madison and Benjamin outline step-by-step processes to complete their tasks, from entry to success. This approach provided a holistic view of the app, clarified necessary pages, and defined actions to accomplish tasks effectively.
User flows for Madison and Benjamin outline end-to-end tasks, helping define required pages, actions, and overall app structure.
Madison’s Objective
As an impulsive spender,
I want to set a budget for my expenses in the public transportation category,
so I can accumulate and have some savings each month.
As an impulsive spender,
I want to set a budget for my expenses in the public transportation category,
so I can accumulate and have some savings each month.
Benjamin’s Objective
As an ambitious goal setter,
I want to set a savings goal for the rainy days,
so I can feel more financially secure and gain financial freedom.
As an ambitious goal setter,
I want to set a savings goal for the rainy days,
so I can feel more financially secure and gain financial freedom.
Open Card Sorting
Open Card Sorting
Following user interviews to define needs and goals, I conducted an open card sorting to shape FIG's information architecture. This helped me understand users' thought processes and create intuitive, user-friendly flows and organization.
Open card sorting to shape FIG’s information architecture, revealing user mental models and informing intuitive flows and organization.
overview
Sessions
Dates Oct. 18, 2021
Dates Oct. 18, 2021
Length average of 8 min. per participant
Length average of 8 min. per participant
Test Method digital open card sort session
Test Method digital open card sort session
Participants
5 participants
5 participants
Tool
optimalworkshop.com
I conducted an open card sort with 5 participants using 20 content topics. Participants grouped topics into their own categories, which I analyzed and consolidated into final categories. The chart below illustrates how topics were grouped into the final structure.
Conducted an open card sort with five participants using 20 content topics, informing the final information architecture.
Information Architecture
Information Architecture
After open card sorting and refining categories, I designed the app’s information architecture, focusing on simplifying the site map to minimize user clicks and improve navigation.
I designed the app’s information architecture, simplifying the sitemap to reduce clicks and improve navigation.
Low to Mid Fidelity Prototype
Low to Mid Fidelity Prototype
Based on research, I created a low-fidelity prototype to outline key functionalities. I then developed a mid-fidelity prototype with clickable buttons and detailed user flows to refine the design.
I designed a low-fidelity prototype to outline functionality, then refined it through a mid-fidelity, interactive prototype.
Overview
Accounts
Payments
Budgets
Usability Testing
Usability Testing
I conducted user testing with six participants using the mid-fidelity prototype, identifying strengths, weaknesses, and collecting feedback to improve the design while gaining valuable user perspective.
Tested the mid-fidelity prototype with six users to evaluate usability, identify gaps, and inform design improvements.
overview
Sessions
Dates between Nov. 15-18, 2021
Length approx. 15-45 Min.
Test Method moderated remote
Tool zoom meeting
Participants
All sessions were recorded based on the participant’s consent.
All sessions were recorded based on the participant’s consent.
4 demographic & 4 targeted questions
4 demographic & 4 targeted questions
Conducted 3 task scenarios
Conducted 3 task scenarios
Andrew
M / 26 / Single
M / 26 / Single
Real Estate Paralegal
Real Estate Paralegal
Brooklyn, New York
Brooklyn, New York
Leah
F / 23 / Single
F / 23 / Single
Law Graduate
Law Graduate
Memphis, Tennessee
Memphis, Tennessee
Brody
M / 36 / Married
M / 36 / Married
Product Manager
Product Manager
Berlin, Germany
Berlin, Germany
Olivia
F / 28 / Married
Psychology Counselor
Copenhagen, Denmark
Peter
M / 32 / Single
Graphic Designer
Denver, Colorado
Christine
F / 32 / Married
French Translator
Cincinnati, Ohio
result
problem
Can’t make a payment from the dashboard.
Can’t make a payment from the dashboard.
“Make a payment” font is too small.
“Make a payment” font is too small.
Want to have an option to not to have a time limitation on the Goals.
Want to have an option to not to have a time limitation on the Goals.
The last few steps in the Make a Payment process are confusing.
The last few steps in the Make a Payment process are confusing.
Not sure about the bars under Accounts on the dashboard.
Not sure about the bars under Accounts on the dashboard.
It’s unclear if its accounts and budgets are on the monthly.
It’s unclear if its accounts and budgets are on the monthly.
Unclear on what the colors reflect on the Bills and Payments sections on the calendar.
Unclear on what the colors reflect on the Bills and Payments sections on the calendar.
recommendation
Implement a “Make a Payment” FAB on the dashboard.
Implement a “Make a Payment” FAB on the dashboard.
Increase the font size to improve visibility and usability.
Increase the font size to improve visibility and usability.
Add an option to remove the time frame from the goal, giving users more freedom and control.
Add an option to remove the time frame from the goal, giving users more freedom and control.
Refine the steps with a confirmation page at the end to clarify the steps.
Refine the steps with a confirmation page at the end to clarify the steps.
Remove the bars or make it more clear with the bars.
Remove the bars or make it more clear with the bars.
Clearly state whether it’s monthly, weekly, etc.
Clearly state whether it’s monthly, weekly, etc.
Make the obvious colors, for example, red for overdue bills, green for paid.
Make the obvious colors, for example, red for overdue bills, green for paid.
major
minor
Preference Testing
Preference Testing
After usability testing, I conducted preference testing to understand my target market’s mental model and incorporated their feedback into the high-fidelity prototype.
Conducted preference testing to validate user mental models and incorporated feedback into the high-fidelity prototype.
overview
Sessions
Dates Nov. 30, 2021
Dates Nov. 30, 2021
Length approx. 45 Min.
Length approx. 45 Min.
Test Method live Internet session
Test Method live Internet session
Participants
26 participants age from 18-40
26 participants age from 18-40
Tool
usabilityhub.com
result
Onboarding Page
This is an intro page for the finance app. Which one do you prefer?
This is an intro page for the finance app. Which one do you prefer?
A
38%
10 out of 26
A feels unbalanced compared to B.
A feels unbalanced compared to B.
I like the cleanness and the sharpness of the design.
I like the cleanness and the sharpness of the design.
Background color feels jarring.
Background color feels jarring.
B
62%
16 out of 26
B is easier to read and it delivers the point more clearly.
B is easier to read and it delivers the point more clearly.
B draws user’s attention more.
B draws user’s attention more.
B is cleaner and visually more balanced.
B is cleaner and visually more balanced.
I tested which introduction page users preferred, as these key interaction points influence whether users stay or leave the app. My goal was to create impactful, visually striking pages to retain users.
Tested introduction page variations to identify entry points that keep users engaged and reduce early drop-off.
Account Page
This is an account page for the finance app. Which one do you prefer?
This is an account page for the finance app. Which one do you prefer?
A
27%
7 out of 26
Not having the logos leaves a cleaner interface.
Not having the logos leaves a cleaner interface.
A looks simple and less intimidating.
A looks simple and less intimidating.
The page is already quite full, and adding the logos provides too much confusion
The page is already quite full, and adding the logos provides too much confusion
B
73%
19 out of 26
I like the little icons before the name of the companies. It makes it more engaging and enjoyable.
I like the little icons before the name of the companies. It makes it more engaging and enjoyable.
The logos next to each account category make an easier scanning.
The logos next to each account category make an easier scanning.
B makes me feel the 'financial app' vibe more than A
B makes me feel the 'financial app' vibe more than A
I tested two versions: A without product logos and B with logos. Surprisingly, most users preferred B, stating that the logos enhanced their app experience.
Evaluated logo and non-logo designs. The majority preferred the logo version for a better overall app experience.
Design Revisions
Design Revisions
Leveraging usability and preference testing results, along with Material Design and WCAG guidelines, I refined the prototype to ensure universal accessibility and user-friendliness.
Used usability and preference testing results and accessibility guidelines to refine the prototype and improve overall usability.
Previous
1
Not meeting WCAG Success Criterion 1.4.3 for contrast.
Not meeting WCAG Success Criterion 1.4.3 for contrast.
2
Using delicate, thin strokes on icons reduces clarity and legibility.
Using delicate, thin strokes on icons reduces clarity and legibility.
3
Varying icon sizes impair visibility.
Varying icon sizes impair visibility.
4
The CTA button is too small to click comfortably, impairing usability.
The CTA button is too small to click comfortably, impairing usability.
revised
1
Color contrast was enhanced following WCAG guidelines to ensure the app is universally accessible.
Color contrast was enhanced following WCAG guidelines to ensure the app is universally accessible.
2
Revised icon graphics to be bolder and simplified text labels for improved clarity.
Revised icon graphics to be bolder and simplified text labels for improved clarity.
3
Revised the circles as keyline shapes to maintain consistent visual proportions for the product icons.
Revised the circles as keyline shapes to maintain consistent visual proportions for the product icons.
4
Enlarged the CTA button to 56x56 dp, as recommended by the Material Design Component Guidelines.
Enlarged the CTA button to 56x56 dp, as recommended by the Material Design Component Guidelines.
Design Documentation
Below are examples of my design documentation, illustrating my thought process and app guidelines. My goal was to create an engaging, friendly, and intuitive app with simple pages and clear, straightforward language
color
primary
primary
text, animation, logo, buttons
secondary
text, animation, logo, buttons, graphs, ground
accents
animation, graphs, sliders
Typography
intro page header
page title
page subtitles, logo, dates
page subtitles, logo, dates
page subtitles, card titles
body subtitles, buttons
body text headers, card titles, emphasized text
body text
tab menu buttons
body caption
progress tracker text
UI COMPONENTS
logo
data input field
buttons
primary
secondary
tab menu
FAB
toggle
calendar button
iconography
navigation bar
enabled
pressed
Design Documentation
Design documentation outlining the process and guidelines for a simple, intuitive, and user-friendly app.
color
primary
text, animation, logo, buttons
secondary
text, animation, logo, buttons, graphs, ground
accents
animation, graphs, sliders
Typography
intro page header
page title
page subtitles, logo, dates
page subtitles, logo, dates
page subtitles, card titles
body subtitles, buttons
body text headers, card titles, emphasized text
body text
tab menu buttons
body caption
progress tracker text
UI COMPONENTS
logo
data input field
buttons
primary
secondary
tab menu
FAB
toggle
calendar button
iconography
navigation bar
enabled
pressed
High Fidelity Prototype
High Fidelity Prototype
After iterative testing and revisions, I finalized a high-fidelity prototype featuring clear user flows, interactive elements, and clean visuals, prioritizing simplicity and intuitive navigation.
After multiple testing cycles, I completed a high-fidelity prototype focused on clarity, interactivity, and ease of navigation.
Introduction
To provide a delightful user experience, I designed the onboarding with purposeful, engaging animations that guide users through key features and clearly communicate the app’s core value.
Introduction
Designed purposeful intros to guide users through key features and clearly communicate the app’s core value.
onboarding
To streamline onboarding, I minimized friction by requiring only an email, password, and phone number for verification. Users can also register quickly via social media. For added security, I integrated Face ID as part of a multi-factor authentication flow.
Designed a low-friction onboarding flow with minimal inputs, social sign-up options, and Face ID-enabled security.
Overview
The financial overview provides a snapshot of cash flow, bills, budgets, and goals. Users can tap into detailed views or use the floating action button (FAB) to quickly link accounts, make payments, or add new budgets and goals.
Summarizes cash flow, bills, budgets, and goals, with a FAB that provides quick access to common actions and detailed views.
Accounts
The My Account page provides a snapshot of the user's cash, credit cards, loans, and investments. Users can view detailed activity by selecting individual accounts or see all recent transactions in one place. A FAB makes it easy to link new accounts.
Summarizes cash, cards, loans, and investments, with both account-level details and a consolidated transaction view.
Bills & Payments
The Bills and Payments page gives users a calendar view of upcoming and paid bills, making it easy to track due dates, monitor payment history, and make payments in one place.
Provides a calendar view of upcoming and paid bills, allowing users to track due dates, review payment history, and make payments in one place.
Budgets
Users can track their spending, set budgets by category and sub-category, and view detailed breakdowns. A FAB allows them to quickly create new budgets. Budgeting helps users control expenses and stay aligned with their financial goals.
Allows users to monitor spending, manage categorized budgets, and quickly add new budgets.
GOALS
The My Goals page allows users to set, edit, and track their savings goals with clear visual progress indicators. Integrating goal-setting into a finance app helps users stay motivated, prioritize spending, and build better financial habits over time.
Enables users to manage savings goals and track progress visually to support better spending decisions and long-term habits.
What I have learned
What I have learned
Throughout the design process, I gained valuable experience turning research into a high-fidelity prototype. It was rewarding to see an idea come to life through thorough research, user testing, and feedback. Seeing the product from the users' perspective shaped a user-first design and an intuitive experience. This process has been inspiring, and I will continue refining the app based on user feedback
This project strengthened my ability to translate research into a high-fidelity, user-first design. Using validated data, I created an intuitive experience and will continue refining the app based on user insights.
Thank you for watching
