User Flow

Low-Fidelity Prototype

Before delving into paper prototypes, our team first decided to go with one particular user flow above where the user can access their spending analysis called “Budget Snapshot” from the home page instead of from each individual credit/debit card page. The reason behind is that we found most people expressed their preference to see their spending analysis right when they enter the app during our user research and interview phase.

After arriving at this decision, our team started to build low-fidelity paper prototypes following the same user flow but with two different UIs. This allowed us to bring the two prototypes to users for A/B testing then further iterate based on users’ responses.

Previous Next

Differences between the two prototypes:

1. Prototype A strictly follows the current Chase home page design, simply replacing the “Daily Snapshot” in the original design, whereas Prototype B includes a subtle line chart in the background to better signify what “Budget Snapshot” entails. With this change.

2. Upon entering the “Budget Snapshot” page, Prototype A asks the user to select the time period and account in a drop-down filter menu, while Prototype B displays the options as buttons below the line graph.
Below the line graph, Prototype A provides an interactive pie chart while Prototype B uses a static circular chart. By clicking on each slice of Prototype A’s pie chart, users will be prompted with the spending on that category with the option to view recent transaction on that category as well.

3. On “Manage Budget” page, Prototype A partitions “Total Spending Limit” and “Category Spending Limit” by putting them in two tabs, while Prototype B combines the two more naturally in a sliding bar. On top of that, Prototype A lays out all the information required to set up budget limit in one page whereas Prototype B wraps “Calculate Budget Limit” in a popup window that will only show up if the user clicks on the button.

Findings and Insights

This was my first case study project that I had undertaken. We spent 3 months working on this project starting from user research to deploying the final prototype and finally making an account of every step in this case study. It was a good challenge to learn how to prioritize design process and features, how to prototype using Figma, and have an experience of design thinking. The inspiration for this feature redesign came naturally as three of us had been frustrated when we saw several high-cost purchases and unnecessary expenses on card bills. From our own experiences and casual observations, our team believes that there is a significantly large unmet need among young adults to wisely manage their budget. We also believe the budget snapshot feature can help young adults cultivate better spending habits that will benefit them in the long-term.

In addition, this experience was also a great help for me to know design is not an individual sport. Transparent communication in our team is essential for the success of this project. Though we played different roles in this project and sometimes had divergent opinions on the same issue, we spared no effort to give each other honest feedback and real criticism. it seems that we worked on distinct tasks, but we still learned from each other and participated in the whole design process. Another takeaway from this project is that usability testing is a critical way to help us uncover insights of users and make dramatic changes to our final design.

For the next steps on this project, I would like to continue to explore how young adults save money for their future purchase, and how we as designers come up with more attractive and creative ways to help them save budget, besides merely presenting data of budget.