top of page
iPhone 13 Pro.png

SAVE

An efficient way to save money by tracking your spending, setting budgets, and getting discounts.

Time Frame: 6 Months

My Role: Product Designer

Team: Myself and another senior designer

Tools: Figma, Adobe Suites, Miro

Product Overview

SAVE is an innovative mobile app that empowers users to achieve their financial goals by offering an intuitive and personalized budget management system. With SAVE, users can easily monitor their spending habits, identify trends, and make data-driven decisions about their finances. The app offers a range of features to help users optimize their savings, including the ability to track their daily transactions, set category-based budgets and receive tailored tips and discounts for future spending.

Define the problem

Problem Assumption

As inflation has reached its highest level in four decades, and job losses have been widespread, many people are struggling to manage their income and expenses. Even those with stable incomes are finding it challenging to save money, often due to a lack of awareness about their spending habits. There is a growing need for a solution that can help people better understand their expenses and save money more effectively. Therefore, my problem assumption is:

How might we help the user save money?
emoji.png
My Solution
Reward page-ST.png
Reward page-ST-1.png

Improve users' awareness about saving money by tracking and categorizing their spending

Deals page-HI.png

Help users spend less by providing them with discount information based on their spending habits.

Reward page-ST-2.png

Help users have better management of their finance by helping them set customizable budgets

Reward page-HI.png

Designed an incentive system that offers immediate benefits to users who are looking to save money, and it adds an element of playfulness to the saving money experience.

Primary Research
INTERVIEW.png

To gain a deeper understanding of users' needs and validate my hypothesis, I conducted 12 user interviews to explore their perspectives on budget management and spending. I used a screener survey to identify the appropriate target audience for the interviews and testing. The following are some key insights gathered from the interviews. These insights helped to inform the development of a solution that is tailored to users' needs and preferences:

Interviewee demographics:
  • 40% male, 60% female

  • Ages ranging from 25 to 55

  • Monthly income range from $3k to $12k

  • All manage their money consciously

Some notable user feedback includes:

“I always realize the importance of saving money after I'm out of budget.”

image 2228.png
Participant 1

“I always want to get discount information before buying groceries.”

image 2224.png
Participant 2

“I want to save some money each month, but I don’t know how to do it effectively.”

image 473.png
Participant 3
Summarize interview insights

To better understand the needs and frustrations of potential users, I created two distinct user personas and an empathy map based on the information gathered from the interviews. The first persona, Student Sara, is unemployed and has a limited budget, while the second persona, Designer John, works full-time as a designer and has a higher income. These personas help me to gain a deeper understanding of users' goals, challenges, and behaviors regarding budgeting and spending. In addition, the empathy maps allow me to get pain points and user gains by analyzing how the user's thoughts, words, actions, and emotions. These methods help me keep the user at the center of the design process, I can ensure that my solution is both useful and intuitive and that it meets the unique needs of the user.

John.png
SARA.png
Empathy Map.jpeg
Identify the problem

Through the synthesis of user feedback on spending and budgeting, I have identified key areas where users are facing challenges. After analyzing these challenges and understanding user needs, I have identified the primary problem that my solution aims to address.

How might we help users spend less?
How might we improve user awareness about saving money?
How might we help users have better management of their finance?
Competitive Analysis

In order to obtain a more comprehensive understanding of the existing solutions in the market, I conducted research on mobile banking applications and financial management apps. Initially, I reviewed mobile banking systems which enable users to monitor and analyze their spending patterns. I also analyzed a range of financial mobile apps that aid users in managing their finances and tracking their expenditures. This competitive analysis enabled me to identify the strengths and weaknesses of each solution and determine the top-performing option. By comprehending the competitive landscape, I can ensure that my solution is innovative, distinctive, and provides a competitive edge.

Competitive analysis.png

What solution can I provide?

Define MVP by Value and Effort Matrix

After analyzing the features of competitor products and evaluating their performance, I collaborated with another designer to brainstorm potential solutions that aimed at addressing the saving and spending issues faced by users. We came up with 14 potential solutions and then used a value and effort matrix to evaluate each one of them to determine the minimum viable product (MVP). The solutions are listed below:

8. Help users cancel unwanted subscriptions.

9. Offer free gifts to users on their celebration.
10. Help users make group purchases.
11. Send reminders for holiday deals and discounts.
12. Allow users to exchange merchandise.
13. Provide reward points that users can redeem for          gift cards.
14. Allow users to track their spending by importing          their data manually.

1. Allow users to sell items they no longer need.

2. Help user set their budget
3. Provide investment advice to users.
4. Help users reduce their loan payments.
5. Help users split bills.
6. Provide deals and discounts based on users'        spending habits.
7. Allow users to track their spending by linking        their bank accounts

After evaluating the value and effort of each solution, we identified the top three solutions that would be included in the MVP. These are: helping users set a budget, allowing users to track their spending by linking their bank account and providing deals and discounts based on users' spending habits. These solutions were chosen because they are most valuable to users, while also requiring the least effort to implement.

My Solution

To provide a more comprehensive and user-centered solution, I have expanded my initial concept. My solution is a mobile app that can:
1. Help users better manage their finances by setting customized budgets.
2. Improve users' awareness to save money by tracking their expenses in real-time.
3. Help users spend less by receiving deals information tailored to their spending habits. 

How can I implement my solution?

Main feature user flow

In order to ensure a seamless user experience, I have created user flow diagrams that illustrate the critical paths users take to achieve their goals of tracking spending, setting budgets, and finding deals information. These diagrams depict the steps involved in completing each task and provide a visual representation of the user journey from start to finish. By designing user flows that are intuitive and easy to follow, I can guarantee that my product offers a positive user experience.

Capstone user flow1.jpeg
Capstone user flow4.jpeg
Capstone user flow2.jpeg
Capstone user flow3.jpeg
Main feature Wireframe

After analyzing the user flow diagrams, I started sketching out the wireframe for the critical paths, which include tracking spending, setting budgets, and finding deals information. Before moving on to the prototype design, I carefully considered what content should be included in each path. To ensure that my wireframe was user-friendly and intuitive, I shared my sketches with a teammate and asked for feedback. Based on her input, I made several changes, such as simplifying the menu bar and decluttering the interface. This feedback helped me refine my wireframe and create a more polished prototype.

Placeholder Circle.png

Spend tracking

ST wireframe 6.png
ST wireframe 3.png
ST wireframe 4.png
ST wireframe 7.png
ST wireframe.png

Redeem Rewards

Reward wireframe 1.png
Reward wireframe 2.png
Reward wireframe 3.png
Reward wireframe 4.png

To promote the continued use of this app, I have designed an incentive system. Users will receive reward points as they complete daily missions, which they can redeem for gift cards. This system offers immediate benefits to users who are looking to save money, and it adds an element of playfulness to the experience.

Budget setting

BS wireframe 1.png
BS wireframe 2.png
BS wireframe 3.png
BS wireframe 4.png

Find deals

Deal wireframe 1.png
Deal wireframe 2.png
Deal wireframe 3.png
Style Guide

Once I completed my wireframe, I began considering which colors to incorporate into each screen. I researched color theory and ultimately selected blue as my primary color and yellow as my secondary color, as I am designing a financial app and need to establish trust with my users. Blue is a well-known color that represents trustworthiness, while yellow is commonly associated with money. After deciding on the colors, I used the WebAIM accessibility test service to ensure the app meets accessibility standards and it passed all criteria.

WechatIMG2089.jpeg
WechatIMG2090.jpeg
Prototype

After finalizing the content and layout for each red route, I moved on to the high-fidelity prototype design stage. Taking into account the feedback received from the other designer, and following the style guide I created, the first version of my prototype should be easy to navigate and user-friendly. As I had limited time, I used the Material Design system for the high-fidelity design and make some adjustments to fit my own work. It's now ready for my first round of usability testing.

Spend tracking

Prototype 1-st1.png
Prototype 1-st2.png
Prototype 1-st5.png
Prototype 1-st3.png
Prototype 1-st6.png
Prototype 1-st4.png
Prototype 1-st7.png

Budget setting

Prototype 1-bs1.png
Prototype 1-bs2.png
Prototype 1-bs3.png
Prototype 1-bs4.png

Find deals

Prototype 1-deal2.png

Redeem Rewards

Prototype 1-reward1.png
Prototype 1-reward2.png
Prototype 1-reward3.png
Prototype 1-reward4.png

Will my solution effectively address the problems?

Usability Test with 6 participants

During the usability testing phase, I recruited six participants to evaluate the effectiveness of my prototypes. I provided the participants with a set of task scenarios to complete, which included actions such as tracking last month's spending, setting a budget for Food & Drink, and finding some shopping deals. I observed their interactions and collected feedback. This feedback helped me to identify areas that needed improvement and informed my design decisions for the next iteration.

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

Solution: Add new feature "Auto-budget"

Reward page-ST.png
Edit budget 10.png
Edit budget 11.png
Edit budget 13.png
Edit budget 15.png
Edit budget 16.png
Edit budget 17.png
Edit budget 29.png

The "Auto-budget" feature allows users to enter the amount of their monthly income, bills, and transfers. And the system will calculate flexible spending automatically as users' monthly budgets. They can set budgets by percentage and the budgets will change as the fluctuation of users' monthly income, bills and transfers.

Issue 2: Users are confused about what kind of deal they can get

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

Before

After

11.png
Iteration with 6 new participants

During the second round of testing with six new participants, I observed significant improvements in task completion efficiency compared to the previous round. However, users still encountered some issues. Based on the feedback collected, I identified the following problems and corresponding solutions to address them:

Before

13.png

After

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 displays right now.

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.

Before

15.png

After

Problem: The budget list confuses users about how much budget they have for each category.

Solution: Show the budget amount for each category and increase the space between the two budget types.

16.png
The Result
task complete.png

Task completion rate

Group 1152.png

Satisfaction rate

daily.png

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

What did I learn and what is my next step?

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 informed 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, I have realized that launching the product is only the beginning of the journey, and there are still several areas that we 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.
     

  3. Experimenting with 3D design elements to enhance the user experience and make it more engaging. This will help differentiate our product in the financial app market and provide a unique selling point.

bottom of page