top of page
Image by Sincerely Media
SAVE cover.png
01
Overview
Duration:

6 months

January 2023 - May 2023

Team:

Designer, Design mentor, Product Manager

My Role

SAVE is an innovative mobile app designed to empower users to achieve their financial goals through an intuitive and personalized finance management system. As a product designer, my contributions are as follows:

  • Conduct user research, including interviews and competitive analysis, to uncover user pain points in financial management.

  • Deliver 3 hero features using the Material Design System to enhance users' financial management efficiency.
  • Facilitate two rounds of usability testing to assess the feasibility and effectiveness of my design solutions.
Tools:

Figma, Adobe Creative Suites, Miro

Problem

Users frequently encounter difficulty in managing their finances. Many of the available options are either missing essential features or lack user-friendliness, resulting in frustration and inefficient financial management.

Outcome
  • The task completion rate for my final design solution stands at 85%.

  • Users have rated my design solution a 9.0 out of 10 in terms of satisfaction.
  • 95% of users believe that SAVE is effective for managing their finances and would readily recommend this product to their friends.​

slide 3.png

Real-time expense tracking

Improve users' saving awareness by helping them track and categorize their past transactions. Users can analyze their spending trends to identify potential saving strategy

Context
02
About the project
A growing demand for better financial management

The recent pandemic has precipitated unprecedented economic challenges, 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.

financial-management.jpeg
My Goal
Designing a user-friendly financial management tool

Identify user pain points related to financial management and develop a user-friendly financial management tool. This involves understanding the specific challenges users face, such as difficulty in tracking spending, creating realistic budgets, or identifying savings opportunities. By addressing these issues, the tool will not only enhance users' ability to manage their money more efficiently but also provide them with actionable insights to achieve their financial goals with greater ease and precision.

financial tool.png
User Research
03
Interview
Dive deeper into the target users' financial management experiences

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
User Pain Points

Lack of a flexible, adaptive budgeting tool for unique spending habits.

budget setting_edited.jpg

Users lack an intuitive, automated spending tracker.

expense tracking_edited.jpg

Limited capability of finding deals information

deals searching.png
Image by Sincerely Media
To have a better financial management..
How might we help users effectively track their spending, set customized budgets, and provide personalized deal information?
Ideation
04
Competitive Analysis
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.

chase mobile.png
chase logo.png

Pros:

  • Real-time expense tracking

  • Set customizable budget

  • Spending & Budget comparison

  • Provide discount & coupon info

nerdwallet.png
NerdwalletLogo.svg.png
Mint-Intuit-Finance.jpeg
mint.png

Cons:

  • Unclear data visualization

  • Vague spending categorization 

  • Unreliable finance advice

  • Expense tracking can't sync with bank transactions

Design Soultions
Define solutions by Value and Effort Matrix

After evaluating competitor products' 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.

V&E Matrix.png

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.

A mobile application with:

  • Interactive Expense Visualization

  • Goal-Setting Features

  • Personalized Deal Recommendation

Design Exploration
05
User Flow
Streamline the design process to focus on user paths

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. 

Spend Tracking Flow

image_edited.jpg

Goal Setting Flow

image_edited.jpg

Deal Searching Flow

image_edited.jpg
Concept Validation
How do we provide interactive expense visualization

The interactive expense dashboard utilizes a bar chart to display users' monthly expenditures. It can be filtered by time and bank account. I also incorporated a pie chart to categorize users' spending. Use colors to differentiate spending categories.

ST wireframe 4.png
ST wireframe 6.png
ST wireframe 7.png
ST wireframe.png
How do we build Goal-Setting Features?

Users can set up various budget goals on the Budget Page tailored to their needs. An informative progress bar visually displays available budgets versus money spent, enabling users to make informed spending decisions and avoid overspending.

BS wireframe 1.png
BS wireframe 2.png
BS wireframe 3.png
BS wireframe 4.png
How do we implement Personalized Deal Recommendation?

Users can explore a range of deals tailored to their spending habits. By clicking on a provided link, users are seamlessly redirected to the relevant deals website. Regularly updating these deals not only ensures relevance but also encourages users to frequently return to the app. This continual engagement not only helps them monitor their financial performance but also maximizes their savings opportunities.

Deal wireframe 1.png
Deal wireframe 3.png
Deal wireframe 2.png
Evaluation
06
Usability Testing
Evaluate prototype feasibility and effectiveness

I recruited six participants to assess the effectiveness of my prototypes. They were given a series of task scenarios, including tracking last month's spending, setting a budget for food and drink, and locating shopping deals. Through observing their interactions and collecting their feedback, I was able to pinpoint areas for improvement. This valuable input guided my design decisions for the subsequent iteration.

Participants:

usability test.png

Me as a facilitator:

Provide Feedback

Interview

Task Performance

Time Recording

Observe

Think out loud

Design iteration
07
Refinement #1
Straightforward time selector and spending catergory chart

Before: The time frame selector on the expense dashboard is hard to find. Too many categories and colors are cluttered in the pie chart. It is ambiguous for users to understand the spending trend and time.

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

After: Added time picker on both expense dashboard and category analysis, showing the user what time frame they can choose. Highlight the timeframe that is displayed right now. Only display the top three spending categories on the pie chart. The other categories are labeled as "Others" and are shown on the list below.

Screenshot 2023-09-02 at 12.06.22 PM.png
Screenshot 2023-09-02 at 12.06.42 PM.png
Refinement #2
Automated budget computation

Before: The budget list confuses users about their total budgets and how much they already use. And sometimes users don't know how much budget they should set for a certain category like gas, food takeout, etc...

Screenshot 2023-08-31 at 11.59.29 AM.png
Screenshot 2023-08-31 at 11.59.45 AM.png

After: Redesign the budget list to improve the visual hierarchy. 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)

Refinement #3
Showcase intuitive deals category

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

After: 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 11.38.37 AM.png
Final Outcome
08
Project ​Impact
A straightforward and personalized way to manage users finances.

Users expressed that the SAVE application provided them with a straightforward and convenient way to manage their finances. The clear intuitive expense dashboard gave users a better understanding of their spending habits, and they appreciated the ability to set personalized budget goals, 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.

85.png

Task Completion Rate

Satisfaction Rate

9.0.png
95.png

Recommend this App to others

Takeaways
09
01
Enhancing Skills Through Real-World Problem Solving

Reflecting on the project, I can confidently state that it has been an immensely valuable learning experience. It provided an opportunity to apply my design skills and knowledge in tackling real-world challenges effectively. Throughout the project, I enhanced my ability to collaborate with a diverse team, which enriched our collective problem-solving capabilities. Additionally, engaging directly with users to gather feedback was particularly enlightening; it played a crucial role in shaping my design decisions and deepened my understanding of user-centered design principles. This experience has not only honed my technical abilities but also strengthened my interpersonal skills, preparing me for future projects.

02
"Empathy and Analysis: Key Drivers in User-Centric Design"

As a designer, I have come to appreciate the critical role of empathy in truly understanding user needs prior to developing solutions. This project has been instrumental in teaching me not only how to effectively analyze data but also how to synthesize user feedback into actionable insights. These skills have enabled me to make informed design decisions that directly address the challenges faced by users. By integrating empathy with analytical rigor, I have been able to craft solutions that are both innovative and user-centric, enhancing the overall effectiveness of my design process.

bottom of page