Chase Bank Budgeting Feature

Updating Budgeting Feature for Chase Banking Mobile App

Problem

How do you offer current users within Chase Mobile Banking a new budgeting feature, but also make it easy to understand, comprehensive in its solutions, as well as maintaining the consistent UI of the Chase brand? Building within a current system can be difficult, but not at all impossible.

Solution

Make budgeting even easier, offering users the ability to set up their budget using a custom walkthrough feature as well as simple ways to edit or change in the future.
‍
Tools Used: Adobe Illustrator, Photoshop, Sketch, InVision, Maze
Role: UX Design + Research. Updated UI kit.

Research

Creating a new feature within a working app poses some difficulty, especially when working with finances. To help Chase compete within the mobile banking realm, creating a custom and intuitive budgeting feature would help the app and Chase itself stand out competitively. In order to better understand mobile banking and mobile budgeting apps, I began my research by trying to determine the following:

  1. What is a “personal financing or budgeting feature” within the realm of iOS apps and who the top competitors are in that specific market are.
  2. What are the top reasons an individual would want to use a personal financing or budgeting feature and how they would like to use it.
  3. What an individual would like to know when setting a budget and how to do it.
  4. How personal budgeting systems work and what is the best way to plug in the correct information without it getting too complicated
  5. Design a simple and clean feature that is easy to navigate and understand.
  6. Different ways to separate and organize types of transactions and include all money received as well.
List of direct competitors and indirect competitors.

FINDINGS
With past banking trends and systems still heavily relying on manual processes and lengthy procedures, consumers are looking for something new, personalized, and effortless to aid them with their banking.

After conducting user interviews, my findings concluded with the following:

SIMILAR RESPONSES + THOUGHTS‍

  • Memorization is consistent across all participants. Each of them used their own brainpower to keep track of finances in their own way.
  • There is not a typical amount of time an individual spends managing their finances each week or month. The average was 3 hours month.
  • Each participant stated large long-term goals for their savings as well as some shorter-term goals as well.
  • All participants manage their finances out of responsibility. There is some sense of pride mixed with being a responsible adult.

THEIR WANTS‍

  • Ability to set short term and long term goals with an app. Have a budgeting app within their banking app so they don’t have to have multiple apps.
  • Set budgets do not offer flexibility or emergency funds. Giving the option to set a flexible budget to allow for emergencies or changing cell bills or utility bills would help solve this issue.

THEIR NEEDS‍

  • Balancing your checkbook option without offering a budgeting option. It’ll give the user an opportunity to see everything is going in and out and budget in their own mind.
  • Clean and simple design that’s easy to navigate and offer helpful insights.‍
  • Offering a home page with daily monitoring for quick and easy access for quick view options.

‍OPPORTUNITIES FOR IMPROVEMENT‍

  • Simple budget setup with auto-fill options for bills and category selections so there is no manual entering or very little.
  • Give users the opportunity to set short-term and long-term goals that can also be viewed easily.
  • Offer swiping of multiple screens to give users more detail but only if they want it.
User type with goals, needs and motivations defined.

DEFINE

Working within the current application and its user journey, I developed the best flow based on user needs and wants, as well as areas where the app could improve. I chose to not update the UI of the app, but rather, work within its confines, offering another challenge to overcome.

Based on user research and interviews, I chose to build a walkthrough section for setting up a personalized budget within the app, offering automatically filled-in income and bill information, since users that would be using this feature would already have a Chase checking or savings account.

I also opted to create a budgeting section with swipe-able screens to offer more detailed information about upcoming bills, budget amount remaining, category spending, as well as short and long-term goal achievements.

User flow with each decision, choice and details of the user journey within the new budgeting feature.

Hi-Fidelity Wireframes + Prototype

I began my wireframes by mapping current Chase screens and UI elements to build out the new budgeting section, now named My Budget by Chase. I chose to build hi-fi from the start as the UI was already created and finalized within the Chase app, offering me the option to make sure this specific feature was going to work with the current app UI.

After building the user flow I had completed during the last design phase, I created a prototype in InVision to conduct usability testing. Unfortunately, InVision is no longer a viable platform and has been shut down.

High fidelity wireframes for Chase Banking app.

Usability Testing + Results

After creating an intricate prototype, I conducted usability testing with 7 individuals via Maze. Due to the nature of this feature, I did not ask for demographic information as it was not pertinent to the case study.

They were prompted to complete 5 tasks:‍

  1. Log in to Chase Mobile Banking
  2. Find the My Budget Dashboard
  3. Set up My Budget
  4. Monitor your Budget
  5. Change the budget amounts

Summary of Feedback and Final Results
‍
Overall usability testing score was an 85 via Maze. All tasks were completed by the individuals 100% except:

  1. Set up My Budget Section: Overall 83% success rate with a 20% misclick rate. 2 users were confused by the task to be completed and were confused by the 2nd screen of approving their income. This indicates the directions may not have been clear enough. The same 2 users were also stuck on the 3rd screen to change the category of the bill EQUINOX FITNESS. It seems either the directions were not clear enough or they were confused by what the goal was. The remaining 5 users were able to complete the entire task without issue.
  2. Change the Budget Amounts Section: This task had an 83% success rate with a 27% misclick rate. Overall, the 2nd screen was the biggest issue. Most users tried to click on the slider to move it vs. clicking on Edit Budget. This would imply offering an update section next to each category may be easier for users when they want to update their work.

Iterations and Fixes

  1. Update the Change the Budget section to let users update each section separately to give them an easier time when updating their budget sections.
  2. Also, add more space between the budget sections to give users more space to monitor their spending as well as make changes
  3. Update the dropdown menu triangles to lines for better usability and accessibility.
Example screens of the Chase budgeting app from first prototypeupdated designs of Chase app based on user feedback

UI KIT

To showcase the new elements I created and other elements I used from the current Chase app, I created an updated UI kit. Each element remains true to the original design while adding usability to the new My Budget feature.
‍

Chase UI kit including typography, icons and components.

Final thoughts

Building a new feature within an existing app can be challenging, but even more rewarding. Working to build a feature that can help make life easier for Chase banking customers is a admirable, albeit, tough undertaking, one I would proudly take on again in the future. I found usability testing to be the most helpful within this project to help refine the direction and flow of the entire feature to create a strong and functional product design.