MoneyMap : Personal Finance App
MoneyMap is like that friend who always knows where your money went—except it doesn’t judge you for that Iced Mocha Java Chip Oat Milk Frappucino in your hand.
The Full Story Awaits Below.
Quick Summary (TL;DR)
MoneyMap is a personal finance app designed to simplify expense tracking, budgeting, & saving through an intuitive, engaging experience.
Problem Identified: Users struggle with expense tracking, inconsistent saving habits, & lack of financial clarity.
Research & Insights: Competitive analysis & user interviews highlighted the need for a seamless, engaging, & motivating financial tool.
Design Approach: Iterative process with usability testing led to a dashboard based homescreen, gamified features, & customized financial insights.
Key Features: Automated expense tracking, personalized budgeting, & an intuitive visual framework for financial planning.
Next Steps: Expanding AI capabilities, enhancing investment tracking, & refining automation for an even smarter financial assistant.
OVERVIEW
Type of Project
Conceptual
Role
UX Designer
UX Researcher
Visual Designer
Tools
Pen & Paper
Figma
Adobe Photoshop
Timeline
22 Days
Managing money can feel like trying to learn rocket science. Or worse, math class. One might be wondering- "How much more adulting do I have to do?"
Whether you're plotting your path to riches or just trying to figure out how to make payday last longer than a weekend, this app's got your back. MoneyMap was designed to help you navigate the chaos of adulting without losing your sanity.
In MoneyMap, all your objectives are broken down into different sections such as 'Expenses', 'Budgets', 'Investments' & 'Savings'. No more boring excel sheets!
OUTLINING THE PROBLEM
Problem Statement
"Beware of little expenses. A small leak will sink a great ship." -Benjamin Franklin
Many people struggle to track their spending, set achievable savings goals, & maintain a clear overview of their financial health. Existing tools are either too complex, too fragmented, or fail to make the process engaging. This leaves users feeling frustrated & disconnected from their financial goals, with little motivation to take control of their money.
The Goal
To design a user-centric platform that simplifies financial tracking & motivates the users to stay engaged with their finances through intuitive interface & actionable insights, helping users make smarter financial decisions & achieve their goals with clarity & confidence.
Initial Research
Preliminary research was conducted to identify user pain points, determine target audience & to evaluate existing products in the market. The research was conducted in the form of an interview with 5 people from my network. The interview questions can be viewed here.
2 of the participants had or were using a personal finance tool while the other 3 had never used such a tool. Their insights offered me valuable data about the user habits around managing personal finance. The insights were coded in the form of an affinity map as shown below.
Affinity Map of the Interview Responses
After organizing user insights into an affinity map, clear patterns began to emerge. Grouping user frustrations, desires, & behaviors into themes revealed recurring challenges that users face when managing their finances. These clusters highlighted areas where existing tools fall short & the barriers of entry for new users. By analyzing these themes in detail, I distilled them into four core pain points-
The identified pain points provided critical insight into how financial planning fits into users’ daily lives. 100% of the interviewees agreed that financial management was something that intimidated them & that they didn't have even a basic understanding of it. However, all of them also agreed that they needed guidance with it.
By understanding how financial tasks occur—often on the go or during small pockets of time—it became clear that a mobile app would be the ideal medium. A mobile-first approach ensured users could integrate this app seamlessly into their routines. Moreover, new users are likely to invest time into their personal financial planning if they had easy access to it in the form of one consolidated, simple & intuitive app with clear instructions.
Empathizing with users is always at the core of the design process, therefore, I developed user personas that embody the diverse financial behaviors & needs of MoneyMap's target audience.
User Persona #1
User Persona #2
The next step after creating user personas was determining how the users were navigating their finances in the absence of an app like MoneyMap. This helped me identify where the users were getting stuck & where were the opportunities for improvement in the entire user journey. For this, I created user journey maps for both the personas.
User Journey Map #1
User Journey Map #2
Competitor Analysis
Mapping the user journey provided a comprehensive view of the challenges, emotions, & needs users encounter while managing their finances. But to craft a truly impactful solution, it was essential to understand how existing financial tools address these same needs.
I evaluated popular personal finance apps to identify gaps, strengths, & areas of differentiation. I identified two of the top rated personal finance apps on App Store- Spendee & Monefy. I downloaded & used both of these apps for a few days to determine the strengths & weaknesses in the overall UX, & the features they offered, which I compiled in the form of an audit sheet that can be viewed here.
Key Insights
Initial research and competitive analysis revealed the direction for MoneyMap's design. I condensed all the information gathered into actionable insights as follows-
- Core Features: Integration of expense tracking, savings goals, budgeting, and investment management into one seamless platform
- Streamlined User Flows: Guided on-boarding, intuitive interface, and simplified navigation
- Design Opportunities: Visually appealing dashboards, intuitive minimal interface, and diagrammatic representation of data
- User-Centric Approach: Addressing key pain points and empathizing with diverse financial habits
- Market Differentiation: Focus on simplicity, clarity & a gentle learning curve targeted especially towards new users
Literature Review
After completing the initial research, I had enough data to delve into the design but felt like something was missing. Then I remembered this book I had read a couple of years ago which talked about the psychology behind the financial decisions people make. The book is called 'The Psychology of Money' written by Morgan Housel.
I decided to use the book as inspiration for crafting the tone of the insights provided to users, ensuring they are relatable, encouraging, and grounded in an understanding of spending behaviors. There were several core lessons from the book that I applied, which have been condensed into a diagram as shown below.
Core Lessons & their Translation into the App Design
THE DESIGN
Ideation
Gathering all the information I had, the next step was to create the IA of the proposed app. Using that, I sketched out some quick wireframes on paper to conceptualize the interface.
Paper Wireframes
Going through several iterations of the paper wireframes gave me a good starting point for the concept of the app & all the screens that would be needed to achieve the proposed user flows. At this point, I felt confident about my design, so I converted the paper wireframes into digital ones.
Digital Wireframes
After creating digital wireframes, I turned them into lo-fi prototypes to test how users would navigate the app. A usability study was conducted to identify some areas for improvement. The usability study was based on the 4 main user flows- adding an expense, setting a budget, tracking investments & setting savings goals. With the feedback from the study, I incorporated some changes to the design, overall navigation & copy of the app.
Visual Framework
This stage brought the app’s visual identity to life. I defined a distinct color palette for the app's theme. I chose green as the main brand colour, as it universally symbolizes growth, stability, & financial well-being. The app's typography & iconography were carefully curated to keep in mind accessibility & ease of use. To maintain consistency & scalability, these elements were organized into a comprehensive design system, serving as the foundation for all future developments.
UI Stickersheet
High-Fidelity Design
With the visual aesthetic of the app in place, I started creating hi-fi mockups for the app using iPhone 16 Pro as the device. This phase is where the core functionality of MoneyMap started to materialize. The hierarchy of the app frames were determined by the proposed user flows & making sure that the users could easily interact with the app with minimal guidance. The following graphics showcase the hi-fi mockups in correlation with user flows.
User Flows
The Prototype
Shown below is an interactive prototype of the app made using Figma. You can either use the arrow keys to skip through screens or click on specific areas of any screen which performs the assigned function. Have fun!
TESTING & ITERATION
Design is only as effective as its real-world impact. To ensure MoneyMap resonates with users & meets their financial needs, we conducted a series of usability tests on the high-fidelity prototype. These tests were aimed at uncovering pain points, validating design decisions, & identifying areas for improvement.
Design Optimization
During usability testing, five participants were asked to navigate the MoneyMap prototype & complete key tasks such as tracking an expense, setting a savings goal, & reviewing their budget summary.
The usability test revealed that users found the original button-based launch screen overwhelming & counterintuitive, requiring extra clicks to access key information. Feedback indicated a preference for a centralized view of their financial data. Based on these insights, the launch screen was redesigned as a dashboard-style page, consolidating essential metrics like expenses, savings, and budgets into a single, accessible view.
Home Screen- Menu vs. Dashboard
Furthermore, participants appreciated the clean layout but suggested clearer labels & more intuitive navigation. These findings guided refinements to improve accessibility & ensure the app effectively met user expectations.
Accessibility
After the design was optimized as per the usability study, MoneyMap UI was also checked for accessibility. There were some considerations that the app was able to achieve, which are as follows-
Colour Contrast: All the elements cleared AA rating as per WCAG guidelines. This was tested using the 'A11y Color Contrast Checker' plugin for Figma
Clear Visual Hierarchy: Intuitive design with consistent placement of buttons, labels, & navigation
Simple Language: Financial terms & instructions are explained in clear, jargon-free language
Flexible Navigation: Multiple navigation options have been provided, such as tabs & drop-down menus, to accommodate varying user preferences & abilities.
Expected Impact
"Control over your time is the highest dividend money pays." -Morgan Housel, The Psychology of Money
MoneyMap is designed to help users achieve financial stability—a foundation that unlocks greater peace of mind, flexibility, & long-term security. By simplifying the complexities of managing money, the app enables users to monitor spending, save with purpose, & plan for the future. Financial stability brings more than just numbers in balance; it reduces stress, supports better decision-making, & allows users to focus on what truly matters- freedom of your time.
CONCLUSION
Next Steps for MoneyMap
The user feedback convinced me that MoneyMap has a lot of potential. It is a work in progress, & here are some of the things that could enhance the UX-
Incorporate AI for Personalized Insights: Introduce AI-driven features to analyze user spending habits, predict upcoming expenses, & offer tailored financial tips to enhance savings & budgeting strategies.
Collaboration: Option for adding shared household wallets & savings goals
Automated Expense Tracking: Linking bank accounts & credit cards to automatically track online payments as expenses, reducing manual work for users
Dark- Mode: Users could have the option to toggle between Dark & Light modes
Improving Overall Accessibility: Optimizing the app for a wider audience, introducing multiple languages, currencies, adjustable text sizes, & other accessibility features.
Lessons Learned
Response of the users was very motivating & it was empowering to see people interacting with a product I created from scratch. My favourite part about the design journey was the data visualization elements, where I had to ensure they conveyed important information without being intimidating. I would love to explore a spin-off to this app for young adults to promote financial literacy at a young age.
Next Project
MoneyMap : Personal Finance App
MoneyMap is like that friend who always knows where your money went—except it doesn’t judge you for that Iced Mocha Java Chip Oat Milk Frappucino in your hand.
The Full Story Awaits Below.
Quick Summary (TL;DR)
MoneyMap is a personal finance app designed to simplify expense tracking, budgeting, & saving through an intuitive, engaging experience.
Problem Identified: Users struggle with expense tracking, inconsistent saving habits, & lack of financial clarity.
Research & Insights: Competitive analysis & user interviews highlighted the need for a seamless, engaging, & motivating financial tool.
Design Approach: Iterative process with usability testing led to a dashboard based homescreen, gamified features, & customized financial insights.
Key Features: Automated expense tracking, personalized budgeting, & an intuitive visual framework for financial planning.
Next Steps: Expanding AI capabilities, enhancing investment tracking, & refining automation for an even smarter financial assistant.
OVERVIEW
Type of Project
Conceptual
Role
UX Designer
UX Researcher
Visual Designer
Tools
Pen & Paper
Figma
Adobe Photoshop
Timeline
22 Days
Managing money can feel like trying to learn rocket science. Or worse, math class. One might be wondering- "How much more adulting do I have to do?"
Whether you're plotting your path to riches or just trying to figure out how to make payday last longer than a weekend, this app's got your back. MoneyMap was designed to help you navigate the chaos of adulting without losing your sanity.
In MoneyMap, all your objectives are broken down into different sections such as 'Expenses', 'Budgets', 'Investments' & 'Savings'. No more boring excel sheets!
OUTLINING THE PROBLEM
Problem Statement
"Beware of little expenses. A small leak will sink a great ship."
-Benjamin Franklin
Many people struggle to track their spending, set achievable savings goals, & maintain a clear overview of their financial health. Existing tools are either too complex, too fragmented, or fail to make the process engaging. This leaves users feeling frustrated & disconnected from their financial goals, with little motivation to take control of their money.
The Goal
To design a user-centric platform that simplifies financial tracking & motivates the users to stay engaged with their finances through intuitive interface & actionable insights, helping users make smarter financial decisions & achieve their goals with clarity & confidence.
Initial Research
Preliminary research was conducted to identify user pain points, determine target audience & to evaluate existing products in the market. The research was conducted in the form of an interview with 5 people from my network. The interview questions can be viewed here.
2 of the participants had or were using a personal finance tool while the other 3 had never used such a tool. Their insights offered me valuable data about the user habits around managing personal finance. The insights were coded in the form of an affinity map as shown below.
Affinity Map of the Interview Responses
After organizing user insights into an affinity map, clear patterns began to emerge. Grouping user frustrations, desires, & behaviors into themes revealed recurring challenges that users face when managing their finances. These clusters highlighted areas where existing tools fall short & the barriers of entry for new users. By analyzing these themes in detail, I distilled them into four core pain points-
The identified pain points provided critical insight into how financial planning fits into users’ daily lives. 100% of the interviewees agreed that financial management was something that intimidated them & that they didn't have even a basic understanding of it. However, all of them also agreed that they needed guidance with it.
By understanding how financial tasks occur—often on the go or during small pockets of time—it became clear that a mobile app would be the ideal medium. A mobile-first approach ensured users could integrate this app seamlessly into their routines. Moreover, new users are likely to invest time into their personal financial planning if they had easy access to it in the form of one consolidated, simple & intuitive app with clear instructions.
Empathizing with users is always at the core of the design process, therefore, I developed user personas that embody the diverse financial behaviors & needs of MoneyMap's target audience.
User Persona #1
User Persona #2
The next step after creating user personas was determining how the users were navigating their finances in the absence of an app like MoneyMap. This helped me identify where the users were getting stuck & where were the opportunities for improvement in the entire user journey. For this, I created user journey maps for both the personas.
User Journey Map #1
User Journey Map #2
Competitor Analysis
Mapping the user journey provided a comprehensive view of the challenges, emotions, & needs users encounter while managing their finances. But to craft a truly impactful solution, it was essential to understand how existing financial tools address these same needs.
I evaluated popular personal finance apps to identify gaps, strengths, & areas of differentiation. I identified two of the top rated personal finance apps on App Store- Spendee & Monefy. I downloaded & used both of these apps for a few days to determine the strengths & weaknesses in the overall UX, & the features they offered, which I compiled in the form of an audit sheet that can be viewed here.
Spendee is a feature-rich tool that offers comprehensive budgeting capabilities, however, its reliance on premium features & the absence of savings & investment tracking can be limiting. In contrast, Monefy focuses on simplicity, with a minimalist design but lacks other advanced features, making it less suitable for users seeking an all-in-one financial management solution.
Key Insights
Initial research and competitive analysis revealed the direction for MoneyMap's design. I condensed all the information gathered into actionable insights as follows-
Core Features: Integration of expense tracking, savings goals, budgeting, and investment management into one seamless platform
Streamlined User Flows: Guided on-boarding, intuitive interface, and simplified navigation
Design Opportunities: Visually appealing dashboards, intuitive minimal interface, and diagrammatic representation of data
User-Centric Approach: Addressing key pain points and empathizing with diverse financial habits
Market Differentiation: Focus on simplicity, clarity & a gentle learning curve targeted especially towards new users
Literature Review
After completing the initial research, I had enough data to delve into the design but felt like something was missing. Then I remembered this book I had read a couple of years ago which talked about the psychology behind the financial decisions people make. The book is called 'The Psychology of Money' written by Morgan Housel.
I decided to use the book as inspiration for crafting the tone of the insights provided to users, ensuring they are relatable, encouraging, and grounded in an understanding of spending behaviors. There were several core lessons from the book that I applied, which have been condensed into a diagram as shown below.
Core Lessons & their Translation into the App Design
THE DESIGN
Ideation
Gathering all the information I had, the next step was to create the IA of the proposed app. Using that, I sketched out some quick wireframes on paper to conceptualize the interface.
Paper Wireframes
Going through several iterations of the paper wireframes gave me a good starting point for the concept of the app & all the screens that would be needed to achieve the proposed user flows. At this point, I felt confident about my design, so I converted the paper wireframes into digital ones.
Digital Wireframes
After creating digital wireframes, I turned them into lo-fi prototypes to test how users would navigate the app. A usability study was conducted to identify some areas for improvement. The usability study was based on the 4 main user flows- adding an expense, setting a budget, tracking investments & setting savings goals. With the feedback from the study, I incorporated some changes to the design, overall navigation & copy of the app.
Visual Framework
This stage brought the app’s visual identity to life. I defined a distinct color palette for the app's theme. I chose green as the main brand colour, as it universally symbolizes growth, stability, & financial well-being. The app's typography & iconography were carefully curated to keep in mind accessibility & ease of use. To maintain consistency & scalability, these elements were organized into a comprehensive design system, serving as the foundation for all future developments.
UI Stickersheet
High-Fidelity Design
With the visual aesthetic of the app in place, I started creating hi-fi mockups for the app using iPhone 16 Pro as the device. This phase is where the core functionality of MoneyMap started to materialize. The hierarchy of the app frames were determined by the proposed user flows & making sure that the users could easily interact with the app with minimal guidance. The following graphics showcase the hi-fi mockups in correlation with user flows.
User Flows
The Prototype
Shown below is an interactive prototype of the app made using Figma. You can either use the arrow keys to skip through screens or click on specific areas of any screen which performs the assigned function. Have fun!
TESTING & ITERATION
Design is only as effective as its real-world impact. To ensure MoneyMap resonates with users & meets their financial needs, we conducted a series of usability tests on the high-fidelity prototype. These tests were aimed at uncovering pain points, validating design decisions, & identifying areas for improvement.
Design Optimization
During usability testing, five participants were asked to navigate the MoneyMap prototype & complete key tasks such as tracking an expense, setting a savings goal, & reviewing their budget summary.
The usability test revealed that users found the original button-based launch screen overwhelming & counterintuitive, requiring extra clicks to access key information. Feedback indicated a preference for a centralized view of their financial data. Based on these insights, the launch screen was redesigned as a dashboard-style page, consolidating essential metrics like expenses, savings, and budgets into a single, accessible view.
Home Screen- Menu vs. Dashboard
Furthermore, participants appreciated the clean layout but suggested clearer labels & more intuitive navigation. These findings guided refinements to improve accessibility & ensure the app effectively met user expectations.
Accessibility
After the design was optimized as per the usability study, MoneyMap UI was also checked for accessibility. There were some considerations that the app was able to achieve, which are as follows-
Colour Contrast: All the elements cleared AA rating as per WCAG guidelines. This was tested using the 'A11y Color Contrast Checker' plugin for Figma
Clear Visual Hierarchy: Intuitive design with consistent placement of buttons, labels, & navigation
Simple Language: Financial terms & instructions are explained in clear, jargon-free language
Flexible Navigation: Multiple navigation options have been provided, such as tabs & drop-down menus, to accommodate varying user preferences & abilities.
Expected Impact
"Control over your time is the highest dividend money pays." -Morgan Housel, The Psychology of Money
MoneyMap is designed to help users achieve financial stability—a foundation that unlocks greater peace of mind, flexibility, & long-term security. By simplifying the complexities of managing money, the app enables users to monitor spending, save with purpose, & plan for the future. Financial stability brings more than just numbers in balance; it reduces stress, supports better decision-making, & allows users to focus on what truly matters- freedom of your time.
CONCLUSION
Next Steps for MoneyMap
The user feedback convinced me that MoneyMap has a lot of potential. It is a work in progress, & here are some of the things that could enhance the UX-
Incorporate AI for Personalized Insights: Introduce AI-driven features to analyze user spending habits, predict upcoming expenses, & offer tailored financial tips to enhance savings & budgeting strategies.
Collaboration: Option for adding shared household wallets & savings goals
Automated Expense Tracking: Linking bank accounts & credit cards to automatically track online payments as expenses, reducing manual work for users
Dark- Mode: Users could have the option to toggle between Dark & Light modes
Improving Overall Accessibility: Optimizing the app for a wider audience, introducing multiple languages, currencies, adjustable text sizes, & other accessibility features.
Lessons Learned
Response of the users was very motivating & it was empowering to see people interacting with a product I created from scratch. My favourite part about the design journey was the data visualization elements, where I had to ensure they conveyed important information without being intimidating. I would love to explore a spin-off to this app for young adults to promote financial literacy at a young age.