This project focused on understanding Chase bank users and the frustrations they experience around budgeting and tracking personal finances. The project objective was to design a new feature within the Chase banking desktop portal that addresses the user pain points identified.
2 week sprint | Individual project
4 phases including: Discover, Define, Develop, Deliver
Before talking with users, I mapped out initial research objectives to guide the interview process. These objectives aimed to tackle the following questions:
I met with three Chase users (Marcus, Anna, and Stephanie) to learn more about their current budgeting process.
Interview discussions with users generated the following findings:
Users had similar budget goals on the surface, but their underlying budget tracking subgoals were very unique based on their specific circumstances.
Users are particular in what they want to track, with a lack of automated custom tracking options, users fall back on manually tracking or don’t track at all.
While users did manually track certain budget items, they reported this to be a frustrating aspect of managing their budget due to its time-consuming and tedious nature.
Users often want to track particular aspects of their budget such as monthly spending at a combination of stores or spending only on certain cards. Their current budgeting apps don't provide the ability to easily track more specific budget items. This forces users to manually track certain aspects of their budget. These users need a more customizable way to track their personal budget.
Based on requirements generated from user interviews, I mapped out the major elements of customizable budget trackers. Stemming from each major element, I built out various permutations of how users may approach viewing that information from different perspectives.
Once this exercise was done, I stepped back to find patterns that would help me determine the appropriate extent of customizability offered by the proposed design.
The next question was how to structure the stepped process for building a budget tracking dashboard. I knew that building dashboards could get complicated, therefore it was crucial to keep the process simple and straight-forward. With these goals in mind, I decided to break out construction paper to build a rudimentary dashboard from basic shapes.
The intent of this exercise was to generate insights on the dashboard building process that could aid in developing a framework for the web application design.
While working with the construction paper materials, an idea for a stepped framework began to form. Dashboards could be broken down into smaller components that track specific items. A drag & drop functionality would place components onto a canvas to build a custom dashboard.
I then created a user flow that outlined the stepped experience for creating a dashboard.
The user flow is split up into three channels that outline the a) current screen, b) user actions, and c) user decisions for each step of the process.
I then sketched out pencil wireframes for the screens identified in the user flow. After going through a few low-fidelity pencil designs, I brought the wireframes into digital form.
The designs then went through several iterations of user testing and redesigning, going up in fidelity on each iteration.
When the user wants to create a budget tracker, a range of tracker options are provided. Testing the design also uncovered that users wanted to quickly see more information about the specific options, therefore an i-button was added to provide this information in a hover state.
The dash card builder incorporates an options menu on the left and a rendering of the ‘dash card in progress’ on the right. When users make a selection from the menu, the dash card rendering updates to include the chart selection. Further, a wizard is placed above the dash card rendering to give users context on where they are in the process.
There are two elements of displaying time in the trackers. 1) Time increments (i.e. ‘by week’ vs. ‘by month’), and 2) How many historical periods to display. To avoid users becoming overwhelmed with making too many selections at once, progressive disclosure was implemented to create a two-step process for choosing the desired time format. Once a time format is chosen, the chart rendering updates to include respective time labels.
Users are prompted to select which of their Chase checking, credit card, or savings accounts to include in the tracker data. User testing revealed that displaying the current account balance, in addition to the account number and type, was crucial in reducing cognitive load while distinguishing between accounts. The chart rendering updates when accounts are selected, giving users a real-time view of how account selections impact the tracker.
User requirements generated during testing included three additional ways that users wanted to customize the data flowing into trackers. These included filters for vendor names, transaction categories, and transaction types.
The final step in creating a tracker dash card is editing the default title name as well as choosing from a selection of layout styles and color themes.
Once dash card trackers have been created, users can drag and drop finished tracker cards into the dashboard canvas to create a custom budget tracking dashboard.
This project focused on designing the stepped experience for guiding users through building custom budget trackers. Going forward, I would further understand how the tracker tool integrates into users’ daily routines. Users may intend on discussing trackers with their spouses, family members, or financial advisors. Thus, I think there’s an opportunity to be purposeful about designing a robust exporting/sharing capability that allows more seamless use of the tracker tool during these types of social interactions.