top of page

JP Morgan Chase mobile app: adding a feature

Hero (2).png
Bootcamp Project

Adding a feature to an existing product

Duration

3 weeks

Role

 

UX research, UX/UI design

Tools

 

Google Meet, Figma, FigJam

1. Research & Research synthesis

Competitive analysis

User interviews

Personas

2. Prioritization & Roadmapping

HMW & POV

Lo-fi & Mid-fi wireframes

User testing

3. User testing & Iterations

Hi-fi wireframes & Prototyping

Usability testing

Iterations 

Problem

JP Morgan Chase users run into frustrating experiences when searching for transactions on the mobile app. 

Enhancing the system to support seamless cross-account transaction searches and improving recognition of transactions under varying business names present an opportunity to elevate user satisfaction and streamline operational efficiency.

1. Research & Research synthesis

To understand industry standards and identify opportunity gaps, competitive analysis was first made. Then, user interviews were conducted to pinpoint specific user pain points. Two personas were then built to shape a clear understanding of user needs.

Competitive analysis

I compared and contrasted the Chase mobile app against three other banks / fintech company: University of Wisconsin Credit Union, Discover, and PayPal. 

Competitve analysis (2).png
Biggest insight: none of the platforms offer easy, intuitive, cross-account search functionality for transactions
User interviews & Affinity mapping

6 interviews were conducted to gain insights on people's usage of the Chase mobile app; questions were centered on their experience with the search transaction functionality, and participants were invited to comment on other pain points and notable experiences as well. 

Through this process, I discovered three important user pain points:

Some business names don't match with the vendor names on the statement, so it's hard to look up those transactions.

It is frustrating to have to manually search in each account for a transaction when they don't remember which account it’s specifically from.

Canceled subscription still being charged; if the user wasn’t paying attention to their transactions or if they weren’t notified, all that money could have gone through the crack.

Participant 1.png

Participant 1

Participant 3

Participant 3 (1).png

I think searching for transactions is the stupidest thing.

I spent five minutes going through each account and got tired and, ‘nevermind.’

I would love to do a single search on both accounts if the transaction was a while ago.

Participant 2 (1).png

Participant 2

Because two of the three discovered pain points were about the search transaction functionality, I decided to explore a solution for both of them.

Personas

Based on interview findings, I developed 2 user personas to represent different types of Chase app users. These personas helped me empathize with users' needs and kept me focused on them throughout the design process.

2. Prioritizing & Roadmapping

To frame the problem from the user's perspective and invite creative thinking in ideation, I created HMWs and POVs. In the design phase, I sketched a few lo-fi wireframes and used Figma to develop them into mid-fi wireframes before doing a usability testing to discover areas of improvement. 

POVs and HMWs 

Because this project addresses two pain points, two sets of POV (point of view) and HMW (how might we) are created.

POV: For mobile banking users with multiple accounts, it can be frustrating to look for specific transactions when they don’t remember from which account it originated.

 

HMW: How might we centralize transaction searching to improve multiple account holders’ search experience? 

POV: When searching for transactions by vendor name, users can feel frustrated when the name on the bank statement does not match the known business name.

 

HMW: How might we allow users to easily find the transaction if the vendor’s known business name does not appear on the statement?

Lo-fi and Mid-fi wireframes

A few lo-fi wireframes were sketched during ideation, and mid-fi wireframes were developed for testing.

3e33986b-4e76-4c83-9adb-08551ba8ebfd-0000.png
3e33986b-4e76-4c83-9adb-08551ba8ebfd-0001.png
Dashboard - default.jpg
Starbucks search result (1).png
No matching result.png
Movie search result (1).png
User testing

To get feedback from users early in the design phase so that adequate changes can be made as soon as possible, I conducted an unmoderated usability testing on my mid-fi prototype. 

6 participants were asked to interact with the prototype and

  • Rate how easy it was to search for a Starbucks transaction across all accounts,

  • Comment on the "search for merchant type" functionality when search for exact merchant name failed.

Participants rated the task as 4.5/5 on average!

Frame 2.png

Very difficult

Effortless

And one participant left a useful insight:

When searching for the exact vendor name fails, the system should suggest more options to improve search. Now the system provides one suggestion, search for vendor type, limiting users to only one alternative.

Next step: Add more recommendations to improve search result if searching for vendor name fails (e.g., search for amount, date, etc), so that users are offered more possibilities to find the transaction.

3. Testing & Iteration

With the above insights in mind, I moved onto creating hi-fi wireframes and made a prototype for another round of usability testing. Then, iterations were made to improve the design based on user feedback.

Hi-fi wireframes & Prototyping

I made five screens for two task flows: conducting a single search for a transaction across all accounts, and searching for the merchant type when the exact vendor name generated no results.  Then, with the prototype, I conducted another unmoderated usability testing.

Dashboard - search bar (default).png
Search results - Cornerstone Church.png
No result (1).png
Transcation details.png
Seach results - flower.png
Usability testing

The objective of the usability test was to: 

  • Observe whether users can easily find and utilize the cross-account search engine,

  • Gage understandability of the “search for merchant type” functionality,

  • Pinpoint any usability issues that may inhibit the ease of product navigation and task completion,

  • Receive feedback and suggestions for the product, if available.

Success metrics:

  • For the first task - finding the cross-account search engine - participants should rate it as at least 4 out of 5 on average for easiness.

  • For the second task - searching for merchant type - participants should rate it as at least 4 out of 5 on average for clarity.

Test results

7 people attempted the test: all 7 of them completed the first task, 1 person dropped out before reaching the second task. 

First task: Success! 
On average, participants rate it as 4.86 out of 5 for easiness.

Score of second usability test_ task 1.png

Very difficult

Effortless

Second task: Success!
On average, participants rate it as 4.08 out of 5 for clarity.

Score of second usability test_ task 2.png

Very ambiguous

Very clear

Even though both success metrics are met, for the second task, 2 participants did question whether users are able to come up with the exact word that matches the merchant type in the database.

 

For example, in my current prototype, I prefilled “flower” in the search box after searching for the exact vendor name failed. Participants of the usability test wondered whether users are able to come up with “flower” on their own – would using another word produce a failed result again? 

With this in mind, I decide to change the terminology: instead of prompting users to search for “merchant type”, which suggests that there is only one correct input, the system would suggest users to search for “keyword”, which is more subjective and allows for a wider range of word choices.

Final iteration

Even though success metrics of the usability test were met, two participants misunderstood the terminology "merchant type." This means that I needed to come up with a better, more straightforward word instead.

Pre iteration.png
After iteration.png
Final design
First screen (1).png
Second step.png
Third screen.png
Fourth screen.png
Fifth screen.png
Key learnings
  • A deep dive into the world of standard UI practices - I got to flex my design muscles in a way that aligned with what Chase users already know and love. Sticking closely to Chase's design rules, I really practiced working within set guidelines, making sure the new feature I added fit in smoothly for the users. This experience underscored the importance of standard UI practices in maintaining consistency and usability in product design, enriching my skill set as a UX designer.

Next steps
  • Design a tool that helps users manage subscriptions - One common pain point that I learned during user interviews is that users find it taxing to mentally keep track of all the subscriptions they are enrolled in. They find it frustrating when they forget the date of an automatic renewal of a subscription and get charged against their will. If I had more time, I would design a tool that allows users to keep track of all their subscriptions that are paid via Chase, allowing more stress-free management of subscription expenses.

  • Conduct a moderated usability test - Both of my usability tests in this project were unmoderated. While the skill of creating succinct, smooth tests is valuable, I could also gain more qualitative feedback through moderated, face-to-face user tests, such as observing facial expressions and hesitations. For next steps, I would conduct a third usability test via Google Meet to uncover a wider scope of user feedback, further improving the usability of this feature.

bottom of page