Chase
Mobile app
A mobile app redesign for Chase including a savings goal feature added to allow users to save with little effort for small and big items.
View Case study

Case Study Overview


Role UX/UI Design | Tools Survey Monkey, Sketch, Whimsical, InVision | Timeline 4 weeks

Client

Chase is one of the largest banks in the U.S., serving over half of America’s households with a broad range of financial services. They have over 5,000 US branches and offer  both mobile and online banking services.

Challenge

How might Chase retain and attract younger customers such as Millenials?

Solution

I redesigned the Chase mobile app including rethinking it’s existing IA structure to make the app more delightful and easier to use. In addition, I added a savings feature called Saving Goals to help users save for specific items more easily.

*this was a spec project done while attending design school

Case Study Details

Explore this section to dive deep into my design process and see how this project came together or skip below to the takeaway to see what I learned.

Empathize & Define

Research

Secondary Research

For my secondary research I looked into the banking and financial trends of Millennials. What I found is that that they have a much different relationship with banks and their finances than previous generations.

Many Millennials tend to be more educated than the generations before them which often means higher student loan debt. Unfortunately, they also entered the workforce during the recession and major bank bailouts and scandals. All this plus stagnating wages have left them struggling to get ahead and skeptical of traditional financial systems.

Competitor Analysis

With more Millennials willing to look outside traditional financial institutions, the competition isn’t just limited to other traditional banks. Plenty of Millennials are opting for neobanks (digital, no storefront) and finance apps to help them get on track. They are also looking for  no-fee checking accounts and savings with high-yield interest - neither of which are offered by Chase.


Primary Research

After reviewing this research, I decided to conduct a survey followed by 1:1 interviews so that I could better understand the user’s pain points, un-met finance needs and desires.

Survey

26 participants, ranging in age from 18-45

1:1 interviews

6 participants, ranging in age from 22 to 37

“Am I going to make enough this month”
“Help me save, I don’t want to have to think about it”
“Don’t charge me for being poor”

Persona

After synthesizing all the research I developed the following persona, Corey June. She represents the most common desires and pain points found in my research.

Road Map

This is where the project took a bit of a turn for me. I assumed I would identify what feature(s) would be the most impactful for the user and add them. But after reviewing the project brief, the Chase app and my recent research findings it became obvious to me the existing apps flow needed to be addressed before adding additional features. In addition to this, I would advise Chase to consider offering additional types of accounts such as a free checking account and high-yield savings account

Priority Items
  • Audit and revise the existing IA of app
  • Redesign Accounts page to include new feature Savings Goals
  • Design Page for Savings Goals overview
  • Design flow to create new Savings Goal
  • Design Flow to add/subtract money from Savings Goal
  • Design flow to configure Savings Goals
Secondary
  • Consider redesigning screens for the following
  • Pay & Transfer
  • Deposit
  • Help

Information Architecture

The main issue with the IA is that the menu was hidden inside a hamburger with multiple ways to get to the same place. Our user craves simple and this was anything but. Bringing the dense information out into an easier to access bottom nav would make a huge impact and help the user complete their tasks more efficiently. This UI is also more inline with the competition.

Ideate & Validate

Interaction Design & Prototype

I first started by doing loose sketches of wireframes on paper before moving into Sketch to create mid-fidelity wireframes. I researched design patterns used in the current Chase app as well as in other financial apps for inspiration.

I ultimately went through several iterations to try and visually explain the Savings Goals nested inside the Savings Plus Account. This proved harder than I anticipated and when I looked for help in other apps I was unable to find any products that worked exactly how I had imagined. I decided to put my pencil down and move into testing to see how participants felt and see what I could learn to improve on this area.

In the end I created a prototype in InVision using the main screens below plus many more so that the user could properly interact with the product to complete the tasks assigned during testing.

Testing

With my interactive prototype already created, I put together a test plan outlining my objectives, methods and tasks. I then set up testing times with 5 participants.

Objective

  • To see how well participants understand the Savings Goal concept
  • To see how efficiently participants can complete requested tasks
  • To Identify any pain points during these tasks
  • To identify any happy moments while interacting with the prototype

Methodology

In-person testing via provided mobile device, note taking.

Tasks
  • Create a Savings Goal for a new TV
  • Add $25 to your vacation Savings Goal

Quantitative Results

Task 1: Create a goal.

Completion rate 100% though 3 out of 5 participants searched a little too long for the Create a Goal CTA.

Task 2: Add Money to Goal.

Completion rate 100%. 4 out of 5 of the users added money directly within the Savings Goal page while one user did so by navigating through the main nav Transfer Page.

Qualitative Results

After conducting the testing I created an affinity map to identify common themes voiced among the 5 participants.

What became obviously clear was that the concept of nesting the Savings Goals inside the Saving Plus account was causing confusion. Participants could not differentiate between an overall savings balance, a safe-to-spend balance and a Savings Goals balance.  I was going to need to draw more defined boundaries between the two products in order to make the concept and flow simpler.

Additionally, addressing some issues in the hierarchy of the Savings Goal page would speed up the task of creating a goal and make the page easier to scan.

Iterations

Redefine functionality of Savings Goals. Savings goals are:

  • micro savings accounts
  • money can be transferred in and out only through main Savings Plus account
  • accounts can be opened and closed easily via the app or website
  • the idea is that you are tucking away money from your Savings Plus in order to save  for specific things and easily keep track of those goals.
  • You cannot spend the money in the goals unless the funds are transferred out
  • you can set up an automatic funding schedule (from your savings) or contribute manually

Make CTA for create a goal more prominent

Deprioritize the total of all savings goals on Savings goal page

Prioritize importance of amount in each goal

UI Design

Since I was giving the app on IA overhaul I used this opportunity to also establish some new UI design to make the product more appealing to a younger generation without alienating older generations. I found many financial apps used lots of white or bold brand colors. I decided to go against this logic and tackle the project in dark mode. Dark mode has created a big hype lately and for good reason. It’s certainly easier on the eyes, looks slick and some of my testers felt it made the app feel more secure.

UI Kit
UI Design

Takeaway

What I learned

  • The importance of testing a product even when you know it’s not quite there. I had a tough time designing the savings goal feature. The challenge of it snuck up on me. I knew I was going to have to give it some additional thought but I was burning through time. Rather than starting over, I decided to test the feature to see what I could learn.
  • Finding survey and interview participants to talk about their finances and banking is pretty hard. In order to convince people and make them more comfortable I had to choose my language in my survey very carefully. Rethinking the title from Banking survey (bad, I know) to Trends in Banking and Savings.  I also chose to not do in-person interviews, instead I did them over the phone to help ease the users discomfort.
  • Designing in dark mode is fun!

What I would do differently

  • Conduct an ethnographic study of Millennial mobile app users to see how they use and interact with the product. This would have given further insight into the redesign and restructuring of the Chase app.
  • Spent more time defining the Savings Goal feature. I think had I really sat down and defined exactly how the product would work, how it would relate to other accounts would have set me up better for success.

My projects

Let's connect

Want to have coffee, work together, or just say hi? Email me, I'd love to hear from you.