A Way to Budget with Chase
Sorting expenses and creating alerts to save users money
Examining the Chase App
In our class, each group was assigned to create a high-fidelity mobile prototype for a banking, delivery service, social media, or networking company. Our group decided to investigate banking apps, as we thought they were the most novel of the four.
We surveyed 30 banking app users and interviewed 6 of them about their banking usage. We asked them questions including their bank, the features they used, spending, and managing their accounts. An interesting finding from our survey was that no one used their banking app to budget their expenses. When asked in interviews about potential improvements, some responses that interested the group were:
My banking app doesn’t separate a purchase’s categories.
Seeing my monthly average spending or something might be helpful.
Seeing my spending habits, how much money is spent each week/month etc.
We decided to further investigate the Chase app, as over half of our surveyors used it as their primary bank. Although a banking app doesn’t need to fill the role of a budgeting app, we believed that it was very important to improve on the designs of the bank’s app. Most of a customer’s interactions are not done at the bank but through their mobile app, especially among the newer generations who are tech savy and find it faster to interact virtually. Thus there is a big push for banks to design an app that is easy to use and addresses many of their pain points. As a banking app, it may allow them to stand out against their competitors if they could help users track their spending.
Our research actually found that Chase had explored budgeting features. As a business in competition with other banking and budgeting apps, Chase widened its breadth through an Autosave feature (extra income is sent to the Savings Account) and Finn, a money management digital bank that was closed in 2019 because ‘Chase could already provide many of its services already.’ Combining our interview findings and our research on the Chase app, we took it upon ourselves to design a budgeting feature.
Our Budgeting Feature
Our group created a budgeting feature where users can manage and overview monthly spending limits based by category and get notified when they are nearing their limit. As a core feature in the side menu, it simplifies the steps to try it. Our Figma prototype not only allows users to see their spending habits, but also actively address them. Limits and alerts give users an active choice with deadlines to follow, which contrasts the homepage where there isn’t a lot of interactive features.
We believed that we achieved our goal through the following:
- We organized one’s spendings on our overview to motivate them to spend less. Filtering expenses into AI-filled categories would better help users understand their spending habits.
- Motivate users to change their spending habits with push alert messages. Some users in interviewing did not like getting important information through email and wanted the app to have more control.
- Incorporated budgeting and promoted Autosaving to allow Chase mobile to compete with similar apps.
Matching Chase’s Interactive Language
We used paper prototypes to quickly capture our features and some of Chase’s interactive language. I designed and simulated Paper Prototype B. In B, I used the bar graphs to make the max limit very clear, in comparison to A where we modeled it after other budgeting apps but the limit was less clear. In B’s Manage, I make the drag more noticeable while in A it is incorporated with the existing Chase UI.
When moving up from the paper prototypes to the Figma model, a lot of attention was spent on how Chase created buttons and dropdown menus. I spent a lot of time in the high-fi translating our new features into existing features. Especially since we were giving users more control, we have to search all over the app for similar layouts:
- Inputting numbers for a limit took inspiration from making a payment.
- The top sliding menu took inspiration from the Credit Score screen. We thought it was very important to have all three functions easily accessible instead of separate because they depend on each other.
- In Paper Prototype A the Overview circle was inspired from Chase Desktop, while in Paper Prototype B it was inspired from other budgeting apps to indicate spending limits.
The Management screen was the hardest problem and it was greatly changing during the paper prototype phase. We considered being able to drag category order around, only to realize that the Chase app only used drop-down menus and sorted it themselves. The hamburger icon was also already being used to represent the side menu, creating a different association for the same icon. During the Figma model, we realized the categories were predetermined by the Chase AI and used carets instead of edit icons. Our second round of user testing resolved misunderstandings in wording and boxing.
Differences in our Visual Language
As my first project working with an existing app, it was fun to scour around the app for existing colors, buttons, and visuals. I developed the group’s stylesheet since Chase did not share their stylesheet publicly.
The Chase mobile UI mostly does not use buttons but instead automatically saves/cancels when a back arrow or a caret is clicked. This created an issue because we needed to update and save limits. Only in settings did we find buttons to save, but never to delete or cancel. Due to our top swiping menu, we opted not to put the cancel/delete buttons there like the mobile because it would be confusing and thus resorted to buttons. If I were to redo the project, it would probably be my main focus to redesign with less buttons.
Although it conflicted with the established scheme, we added red to the overview circle. During user testing, users were confused if a solid blue arch indicated was how much was left or spent. Red helped clarify it was limit left and created a sense of urgency that the limit was near.
The AI-filled categories on the overview was a very interesting development. During user testing, users more reliably understood what the bar graphs of B. However visually they liked the circle for A better. After much iteration we decided to keep both ideas, with the circle to easily demonstrate the limit while the bars would break down the percentages. To give more visual weight to the circle and still make the percentage visible through a drop-down, we merged the drop-down and bar graph. This is not practical from a coding perspective, but it was fun to consider and visually appealling.
Final Outcome
As a school project submitted for a grade, there was no actual outcome. However later that year, Chase added a categorical spending summary under ‘Recent transactions’, displaying the types of spending that month. Chase had come to the same outcome as us, and in fact it visually resembled our Overview. Like most other features on the homepage it only summarized the spending, and thus we felt like our vision still held merit as being able to receive alerts would help users be proactive in changing their spending habits.
Having previously coded all my projects in CSS, it was really fun to design without the issues of coding to get the location right. Figma allowed me to iterate faster and reach higher fidelities. Furthermore, conforming to the stylesheet of another app was very surprising because it was super impactful on the buttons and the screens. This made me notice it earlier in future projects with pre-existing apps.