Overview

Goal: Add new features to the Chase Mobile Banking

Role: Lead UX & UI Designer (Research, Interaction Designer of the New Feature)

Tools: Pen/Pencil & Paper, Figma, Maze

Duration: 80 hours over 4 weeks

Process: Research → Define → Ideate → Design → Test

Background

In this project I was tasked with adding new features to an existing Chase mobile banking application.

Chase is one of the largest banks in America. They want to use their reach to improve the financial health of its customers. Their current mobile app is very well rated but very basic in functionality. The features they offer focus primarily on spending and making payments. Chase would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. As an initial entry into this service, the focus was on a mobile app (recent research has shown that Chase's mobile banking base totals 12.4, and around 2/3 of this customer base does their banking solely from mobile devices).

The high-level design goals of this project were to design a new personal financial management feature that embeds smoothly within the current Chase app in Android. This entailed creating new services that respected the existing brand and design of Chase Bank.

Note: This project was completed as part of Design Lab’s UX Academy course.

Research

11 hours

• Competitive Analysis

• Personal Interview

Competitive Analysis

The first step was to analyze and recognize competitor’s mobile banking applications. I have gained a deep insight into four different banks. Two of them were from the American market, two others belonged to non-American brands - from a country where mobile banking solutions are very highly rated.

Typical features for finance management other banks have are: weekly/monthly budget, savings goals, expense tracking, rounders, and autosave.

Personal Interview

For user research, I prepared a couple of questions pertaining to how people currently manage their money. What are their specific pain points with their current financial strives as well as how they manage them and the tools they use for managing?

Interview Findings:

• Users reported they have a good understanding of their finances.

• Users manage finances by splitting income into different accounts, monitoring progress over time, using some special dedicated tool for this.

• Users more or less know how much they are spending in different categories.

• Most of them don’t track this in particular because this would be too complex for them. Some of them use special tools for this.

• The majority of participants believe they have a saving mindset and they usually have a savings account where they transfer a specific amount of money each month or quarter. Some just to try to spend less than they earn.

• The biggest complexity to have good management of their finance is too many accounts and credit cards. A good option would be to be able to consolidate all accounts.

• To have better control over spending and saving the best would be to have the option to set up limits and notifications. Some participants declared that excel would be enough for this.

• Almost all participants used tools that helped them manage finances, Spendee, Finance Mint, Excel, and others.

• Half of the participants know that their bank offers features for finance management. Some users know how these features work, some never tried any.

Define

9 hours

• Persona

• Empathy Map

Persona

From the research data gathered, persona. Charles is making a good salary at his current job and is able to save money each month. He is looking for any tool that could help him easier and faster have better control over spending and account balance.

Empathy Map

After Persona, the next step was to build an empathy map to get deeper in the minds of users and understand the greater context of their lives.

Ideate

6 hours

• Project goals

• App map

• User flows

Project goals

Having a better idea what users need I can compare the business goals with the users goals and find mutual part.

The new values I decided to offer for Chase’s clients would be :

• Create a monthly budget with categories under this budget

• Redesign tracking expenses feature with splitting spendings into categories possibility

• Redesign cash flow feature

App map

Before adding new features, I created an app map to understand the architecture of the existing Chase mobile banking app and determine where my new features could go and how they would be connected throughout the whole app.

Until this time Chase had only one feature for personal finance management - Autosave. For this feature and the two others, I was about to create, I decided to add them into a Hamburger menu under the tab named “Finance Management”.

To promote Create a budget feature I added a link to the homepage.

User Flows

After identifying and empathizing with users during the research phase, I decided to add a feature: Monthly budget with category goals.

I also decided to change features: Expenses by category, and CashFlow. Redesigning these last two will make features more readable hence more useful. I decided to start by creating user flows for all these features.

Design

36 hours

• Low-mid fidelity wireframes

• Style tile and Component library

• High fidelity screens

Low-mid fidelity wireframes

I started the wireframing with a set of constraints:

• Strict coherence with the existing design system

• Keeping the functionality of the features similar across all devices

Since I was designing these new features for the Android version, I made sure that I was staying in accordance with Google’s Material Guidelines: https://material.io/

See all below screens in details.

Style tile and Component Library

To prepare for high fidelity design, I created a style tile by analyzing the app screenshots. This way, I was able to re-design the exact fonts, colors, and icons used in the app.

I added to this document a component library consisting of color styles, some icons, buttons, and navigation elements, and spacing. Although this was time-consuming, I knew this component library would make accomplishing my project goal that much easier down the line.

High fidelity screens

Guided by my wire-frames, style tile, and component library, I designed the features in high fidelity. Homepage and Today’s snapshot were mainly recreated. I had to choose the proper icons.

Screens for Analysis of expenses (2nd image) were designed from scratch. I had to find a set of icons suitable for app design. I chose to color these icons - one color for one category. I think this makes the design of this feature more readable and in the future will let users remember the colors of categories and act in their analysis more automatically.

For the budget set up feature all screens were designed by me from scratch, too (3rd image). I made a revision of wireframe screens and made some changes:

• Eliminated unnecessary information like “What is the budget” page

• Removed the slider for set up budget amounts

When I was designing those screens I paid particular attention to different states for text filed “Put the budget amount”. I started with empty, through focused and filled-focused and ended on filled.

See the hi-fi screens in details. 

Usability Study

7 hour

• Prototype

• Usability plan and test

• Affinity map

• Next steps

High fidelity prototype

For prototype purpose I designed all the necessary pages and decided to use Figma. Using the same tool for prototype as for design helped me save some time.

Usability plan and test

To test my designs, I conducted a one-on-one session using Maze, an online testing tool. I sent my prototype to a few participants with similar demographics to those from the user research. Each user performed three tasks:

• Task 1: Check expenses in May. Check transactions in the Entertainment category. Switch category on Spotify transaction for Fees & Adjustment.

• Task 2: Check your money (income and expenses) for the last 12 months. Check expense details for May 2020.

• Task 3: Set up a monthly budget and set up category goals for Entertainment and Shopping in it.

Based on users’ feedback and behavior when using the new features, I made an affinity map to synthesize my findings.

Affinity map

All participants agreed - all tasks were easy to complete and the design is intuitive and straightforward. Below, on Affinity map, you can find more detailed feedback from each participant.

Next steps

• Consider changes pointed out during usability test and prepare new iteration

• Significantly increase the number of testers to get more feedback

• Continue making testing-based revisions and testing those revisions

• Developer hand-off and implementation

Summary

I really enjoyed the purpose and focus of this project. Adding new features to the Chase mobile banking app was a valuable experience. I learned what it’s like working on an existing product and how to be strict within an existing design and also provide with something new at one time. In particular, it made me appreciate the importance of having an organized design system.

During this project, I realized that it’s always a good idea to get started with good old fashioned pencil and paper for any type of design work. Creativity is easier when you are less restricted and good ideas come quicker when you can eliminate the bad ones.

I decided to go with several new features in this project, so preparing multiple screens was quite time consuming, even if most of the screens were changing only in some sections.

After researching the latest UX/UI ideas for banking it was tempting to include some out-of-scope ideas into this feature design. I think those influences will be future projects for all finance managing businesses. As this sector affects almost all people, it will be interesting to see how the user experience and technology will continue to evolve. My work experience is closely related to a financial institution, so I'm very excited about it.