Role UX/UI Design | Tools Survey Monkey, Sketch, Whimsical, InVision | Timeline 4 weeks
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.
How might Chase retain and attract younger customers such as Millenials?
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
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.
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.
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.
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.
26 participants, ranging in age from 18-45
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”
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.
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
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.
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.
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.
In-person testing via provided mobile device, note taking.
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.
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.
Redefine functionality of Savings Goals. Savings goals are:
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
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.