top of page

A tailored budgeting application that assists users in optimizing their financial management.

Time Frame: 6 Months

My Role: Product Designer

Team: Myself and design mentor

Tools: Figma, Adobe Creative Suites, Miro

Project Goals

The recent pandemic has precipitated unprecedented economic challenges, marked by the highest inflation rates in forty years and significant job losses across various sectors. As a result, both individuals with fluctuating incomes and those with stable earnings are grappling with financial management and savings difficulties. In light of these widespread economic hardships, there is a growing need for innovative solutions that can assist people in effectively managing their finances. This project aims to address this crucial demand by introducing a practical tool to enhance users' financial stability.

My goals: 

Develop a user-friendly financial management tool to empower users in effectively tracking, budgeting, and optimizing their finances.


Identify pain points by user interview

To align with the project goals, I conducted 12 user interviews to identify the common challenges encountered in financial management. The interview insights were synthesized into the following affinity map:

Affinity 1.png
Affinity 2.png

Pain Point 1 - Expense Tracking

Pain Point 2 -  Budgets Management

Users are seeking more intuitive and automated tools to help track and categorize their spending, gain insights into their financial habits, and better manage their budgets. They find current financial apps lacking in seamless integration, accurate categorization, and effective visualization of spending trends, which hampers their ability to make informed financial decisions.

Users are seeking a flexible and user-friendly budgeting tool that automatically adjusts to their unique spending habits, integrates seamlessly with their bank transactions, and provides timely alerts to prevent overspending. They desire a solution that simplifies the setup process, allows for shared budgeting with partners, and offers detailed categorization to accurately reflect their financial activities.

Pain Point 3 - Saving Money

Users struggle with accessing timely discount information and applying effective savings strategies, leading to consistent overspending and difficulties in adjusting budgets to accommodate price increases.

Design Direction

How might we help users track their spending more effectively?
How might we help users better manage their budgets?
How might we provide users with saving strategies?
Get inspired by current solutions on the market

In order to obtain a more comprehensive understanding of the existing solutions on the market, I researched mobile banking applications and financial management apps. This competitive analysis enabled me to identify the strengths and weaknesses of each solution and inspired me on how I can provide the top-performing solution for my users.

Competitive analysis.png
Define solutions by Value and Effort Matrix

After analyzing the features of competitor products and evaluating their performance, I collaborated with my design mentor to brainstorm 14 potential solutions. I used a value and effort matrix to evaluate each one of them to determine the final solutions that are most valuable to users while also requiring the least effort to implement.

After evaluating the value and effort of each solution, we have identified the top three solutions that are most valuable to users while also requiring the least effort to implement.

  1. Provide detailed visualization of users' spending history and trends.

  2. Help users set customizable budgets.

  3. Provide deals information tailored to users' spending habits.

UI Design
Solution 1: Provide detailed visualization of users' spending history and trends
save 1.png


Homepage showing users' monthly spending and budget summary.

save 2.png

Utilizing a bar chart to display users' monthly expenditures. It can be filtered by time and bank account.

Scroll down

save 3.png

Incorporating a pie chart to categorize users' spending. Use colors to differeciate spending categories.

First-round usability testing (Test for effectiveness)

Problem: When setting budgets and tracking spending are put in the same module, users can easily get confused about which number represents spending, and which number represents budgets.

Solution: Get rid of the homepage summary, and create individual pages for spend tracking. All the spending-related data will be shown on the same page.

Screenshot 2023-08-31 at 10.33.30 AM.png
Screenshot 2023-08-31 at 11.37.48 AM.png

Second-round usability testing (Identify refinements)

Problem: The time frame selector is hard to find.

Solution: Added a time picker, showing the user what time frame they can choose. Highlight the timeframe that is displayed right now.


Screenshot 2023-08-31 at 10.33.30 AM.png


Screenshot 2023-09-02 at 12.06.22 PM.png

Problem: Too many categories and colors in the pie chart. It is also ambiguous for users to understand the time period of this spending analysis.

Solution: Add a time picker and show the top three spending categories. The other category is labeled as "Others" and is shown on the list below.


Screenshot 2023-08-31 at 11.37.48 AM.png


Screenshot 2023-09-02 at 12.06.42 PM.png
Solution 2: Help users set customizable budgets.
Screenshot 2023-08-31 at 11.59.29 AM.png
  • Users can set up different budgets based on their needs

  • An informative progress bar visually represents available budgets, empowering users to make informed spending choices and prevent overspending

Screenshot 2023-08-31 at 11.59.45 AM.png

First-round usability testing (Test for effectiveness)

Problem: Users don't know how much budgets they should set for a certain category.

Solution: Add new feature "Auto-budget". It can help user calculate their monthly budget automatically. The budgets will change as the fluctuation of users’ monthly income, monthly bills and monthly transfers.

Monthly Budgets = Monthly Income - (Monthly bills + Monthly transfer)

Screenshot 2023-09-01 at 9.02.52 PM.png

Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.

Edit budget 10_edited.png
Edit budget 11.png
Edit budget 13.png
Edit budget 15.png
Edit budget 16.png
Edit budget 29.png

Step 2

Users select the transaction that represents their income

Step 3

Users provide their monthly bills

Step 4

Users choose their monthly transfers that they want to be included

Step 5

System will calculate users' monthly budgets automatically. (Monthly Income - Monthtly bills - Monthly transfer = Monthy Budgets

Users have the flexibility to set budgets by percentage, and these budgets automatically adjust to accommodate changes in monthly income, bills, and transfers.

Step 1

Users select the accounts that they want to included in the budget calculation

Second-round usability testing (Identify refinements)

Problem: The budget list confuses users about their total budgets and how much they already use.

Solution: Show the budget amount for each category at the end of the progress bar. Label the available budgets on the left side. Increase the space between the two budget types to improve visual hierarchy.


Screenshot 2023-09-01 at 9.02.52 PM.png


Screenshot 2023-09-02 at 12.44.44 PM.png
Solution 3: Provide deals information tailored to users' spending habits
Screenshot 2023-08-31 at 12.20.02 PM.png
  • Users can discover various deals that align with their spending habits

  • By clicking the link, users will be redirected to the deals website

  • Maintaining a regularly updated deal can let users keep coming back to the App to check their financial performance.

Screenshot 2023-08-31 at 12.20.55 PM.png

Usability testing (Identify refinements)

Problem: Users are confused about how to browse different type of deals

Solution: Showcase all the deals categories at the top and enable users to toggle between different deals by tapping on the button.



Screenshot 2023-09-02 at
Result & Reflection
The Result
task complete.png

Task completion rate


Satisfaction rate


Recommend this App to others

Users expressed that the SAVE application provided them with a straightforward and convenient way to manage their budgets. The clear visuals gave users a better understanding of their spending habits, and they appreciated the ability to set and adjust budgets, as well as find relevant deals to save money on their purchases. Overall, the feedback from the final round of testing was overwhelmingly positive, indicating that the solution effectively addressed users' needs and was well-received by the target audience.

Final Prototype
Reflection & Next Step

Reflecting on the project, I can say that it has been a valuable learning experience that has allowed me to apply my skills and knowledge to solve real-world problems. I have also learned how to work collaboratively with a team and engage with users to collect feedback that informs design decisions.
As a designer, I have discovered the importance of empathy and understanding the needs of the users before designing solutions. This project has also taught me how to analyze data, synthesize feedback, and make informed design decisions that solve users' problems.
Furthermore, there are still several areas that I need to improve to provide an exceptional user experience:

  1. Establishing trust with users by addressing their privacy concerns and providing them with transparency on how their data is being used. We need to ensure that users feel safe and secure while using our application, and their data is protected.

  2. Designing a multi-platform operating system that will allow users to access the application anytime, anywhere, and on any device. For instance, we could explore the possibility of developing an Apple Watch version to enable users to check their budget and spending on the go.

bottom of page