Scroll
Scroll
Moneytreat - Budgeting App
Moneytreat
Budgeting App
Moneytreat
Budgeting App
Skills
UX RESEARCH
PRODUCT DESIGN
PROTOTYPING
WIREFRAMING
Tools
FIGMA
Branding
Branding
Branding
UX/UI
UX/UI
UX/UI
App
App
App
Case Study
Case Study
Case Study
Duration: 1 month
November 2024
Why?
Simplifying Financial Management
Managing money can be tough—saving, tracking spending, and planning for goals often feel overwhelming.
This case study explores the design of a financial management app that provides clarity, control, and actionable insights, helping users take charge of their finances with confidence.
Managing money can be tough—saving, tracking spending, and planning for goals often feel overwhelming.
This case study explores the design of a financial management app that provides clarity, control, and actionable insights, helping users take charge of their finances with confidence.
UX Research
01
Timeline
01
RESEARCH
01
Identify the problems
02
User Persona to understand general user’s needs
03
Address the challenges
02
IDEATION
03
HI-FI DESIGN
04
USABILITY TESTING
05
DOCUMENTATION
01
RESEARCH
01
Identify the problems
02
User Persona to understand general user’s needs
03
Address the challenges
02
IDEATION
03
HI-FI DESIGN
04
USABILITY TESTING
05
DOCUMENTATION
01
RESEARCH
01
Identify the problems
02
User Persona to understand general user’s needs
03
Address the challenges
02
IDEATION
03
HI-FI DESIGN
04
USABILITY TESTING
05
DOCUMENTATION
01
RESEARCH
02
IDEATION
03
HI-FI DESIGN
04
USABILITY TESTING
05
DOCUMENTATION
01
Identify the problems
02
User Persona to understand general user’s needs
03
Address the challenges
01
RESEARCH
02
IDEATION
03
HI-FI DESIGN
04
USABILITY TESTING
05
DOCUMENTATION
01
Identify the problems
02
User Persona to understand general user’s needs
03
Address the challenges
02
Challenges
The focus was on people struggling to save and track spending. However, diverse financial habits and literacy made it hard to address everyone. To stay focused, I targeted individuals who face challenges with saving and tracking but are motivated to improve.
The focus was on people struggling to save and track spending. However, diverse financial habits and literacy made it hard to address everyone. To stay focused, I targeted individuals who face challenges with saving and tracking but are motivated to improve.
The focus was on people struggling to save and track spending. However, diverse financial habits and literacy made it hard to address everyone. To stay focused, I targeted individuals who face challenges with saving and tracking but are motivated to improve.
User characteristics
01
01
Spending Awareness: Lack clarity on where money goes, making saving hard.
02
02
Savings Goals: Struggle to set and achieve goals like emergency funds or vacations.
03
03
Simplicity: Prefer an intuitive tool without complex terminology or features.
USER PERSONA
USER PERSONA
Name – Calvin
Age – 23 yrs
Occupation – Working Student
Technology Access – Smartphone, Laptop, and Internet
Education – Pursuing a Bachelor’s Degree
Background – No formal education in finance
Calvin is a 23-year-old working student balancing a part-time job at a local café with their studies. While they are tech-savvy and use their phone for almost everything—social media, productivity apps, and entertainment—they don’t have a background in finance. Calvin is motivated to save money but often feels confused and overwhelmed by budgeting and tracking spending. They want to start managing their money better but don’t know where to begin.
“I just need a simple way to track my spending and save more without the confusion.”
Name – Calvin
Age – 23 yrs
Occupation – Working Student
Technology Access – Smartphone, Laptop, and Internet
Education – Pursuing a Bachelor’s Degree
Background – No formal education in finance
Calvin is a 23-year-old working student balancing a part-time job at a local café with their studies. While they are tech-savvy and use their phone for almost everything—social media, productivity apps, and entertainment—they don’t have a background in finance. Calvin is motivated to save money but often feels confused and overwhelmed by budgeting and tracking spending. They want to start managing their money better but don’t know where to begin.
“I just need a simple way to track my spending and save more without the confusion.”
Name – Calvin
Age – 23 yrs
Occupation – Working Student
Technology Access – Smartphone, Laptop and Internet
Education – Pursuing a Bachelor’s Degree
Background – No formal education in finance
Calvin is a 23-year-old working student balancing a part-time job at a local café with their studies. While they are tech-savvy and use their phone for almost everything—social media, productivity apps, and entertainment—they don’t have a background in finance. Calvin is motivated to save money but often feels confused and overwhelmed by budgeting and tracking spending. They want to start managing their money better but don’t know where to begin.
“I just need a simple way to track my spending and save more without the confusion.”
03
User Journey
A user journey has been created to map how the app will be used, starting with setting goals and categorizing expenses. Expenses will be added by the user, and the app will track spending, providing insights into where the money is going. The journey concludes with the achievement of savings goals and a clear view of spending patterns.
A user journey has been created to map how the app will be used, starting with setting goals and categorizing expenses. Expenses will be added by the user, and the app will track spending, providing insights into where the money is going. The journey concludes with the achievement of savings goals and a clear view of spending patterns.
A user journey has been created to map how the app will be used, starting with setting goals and categorizing expenses. Expenses will be added by the user, and the app will track spending, providing insights into where the money is going. The journey concludes with the achievement of savings goals and a clear view of spending patterns.
Why create a user journey?
01
01
Clarifies Task Flow: Defines the steps users will take, ensuring a smooth experience.
02
02
Identifies Pain Points: Highlights potential issues early to address before prototyping.
03
03
Aligns Goals with Functionality: Ensures features match user needs for a more effective prototype.
TASK FLOW
TASK FLOW
TASK FLOW
04
From Lo-Fi to hi-fi
Insights from the user journey were used to develop low-fidelity wireframes, focusing on the functionality and structure of the design without the distraction of aesthetics.
Insights from the user journey were used to develop low-fidelity wireframes, focusing on the functionality and structure of the design without the distraction of aesthetics.
Insights from the user journey were used to develop low-fidelity wireframes, focusing on the functionality and structure of the design without the distraction of aesthetics.
Process
01
01
01
Lo-Fi: Created wireframes in Figma focusing on structure and functionality.
02
02
02
Iterations and Refinements: Tested multiple iterations, refining design based on feedback.
03
03
03
Lo-Fi to Hi-Fi: Translated wireframes into high-fidelity designs, adding visual details and interactivity.
LOGIN
DASHBOARD
DASHBOARD
SAVINGS DASHBOARD
PROFILE
PROFILE
05
Usability Testing
Usability testing was conducted with the high-fidelity prototype due to limited time and resources. The aim was to identify usability issues and gather insights to improve the app's overall user experience.
Usability testing was conducted with the high-fidelity prototype due to limited time and resources. The aim was to identify usability issues and gather insights to improve the app's overall user experience.
Usability testing was conducted with the high-fidelity prototype due to limited time and resources. The aim was to identify usability issues and gather insights to improve the app's overall user experience.
5 Partecipants
5 Partecipants
5 Partecipants
2 males, 2 females, 20 to 50 years old.
Goal
Goal
Goal
Assess the usability of the app, identify pain points, and gather feedback to refine the design and enhance user satisfaction.
AFFINITY DIAGRAM
NAVBAR UI TWEAK
NAVBAR UI TWEAK
V1
The position of the “Add” button overlaps important elements, causing confusion for users.
The position of the “Add” button overlaps important elements, causing confusion for users.
V2
The "Add" button was repositioned to align with the navbar, reducing overlap with other elements.
The "Add" button was repositioned to align with the navbar, reducing overlap with other elements.
V3
Final version: A lighter navbar color was introduced due to the previous color being too dark and lacking sufficient contrast with the background.
Final version: A lighter navbar color was introduced due to the previous color being too dark and lacking sufficient contrast with the background.
ACCESSIBILITY CHECK
V1
V2
BEFORE
AFTER
05
Final Concept
MAIN SCREENS
MAIN SCREENS
DESIGN SYSTEM
Inter
Inter
Inter
123456789.!@#$%
123456789.!@#$%
123456789.!@#$%
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
#B2F142
#B2F142
#B287FD
#B287FD
#D8D9DD
#D8D9DD
#262626
#262626
06
Conclusion and Takeaway
Users Need Clear Guidance to Start
Users Need Clear Guidance to Start
Users Need Clear Guidance to Start
Users Need Clear Guidance to Start
Offering pre-suggested categories and easy onboarding helps users feel more confident and reduces the friction of setting up the app.
Offering pre-suggested categories and easy onboarding helps users feel more confident and reduces the friction of setting up the app.
Visual Clarity Helps Users Make Better Financial Decisions
Visual Clarity Helps Users Make Better Financial Decisions
Visual Clarity Helps Users Make Better Financial Decisions
Visual Clarity Helps Users Make Better Financial Decisions
Users respond positively to well-designed visual tools like the pie chart, which help them quickly understand their financial status and make informed decisions.
Users respond positively to well-designed visual tools like the pie chart, which help them quickly understand their financial status and make informed decisions.
Understanding User Contexts
Understanding User Contexts
Understanding User Contexts
Understanding User Contexts
This case study highlighted the importance of considering diverse user contexts and environments. Factors such as lifestyle, habits, and circumstances can lead to vastly different needs among users, and even a single user’s needs can shift over time.
This case study highlighted the importance of considering diverse user contexts and environments. Factors such as lifestyle, habits, and circumstances can lead to vastly different needs among users, and even a single user’s needs can shift over time.
More Work
Have a project in mind?
I’m currently available for new work,
Have a project in mind?
I’m currently available for new work,
Have a project in mind?
I’m currently available for new work,
let’s work together
Have a project in mind?
I’m currently available for new work,