Case Study | Financial Enterprise Solutions
J.P. Morgan Chase - Comparison Shopping for Credit Card Products
Senior UX Designer | JP Morgan Chase - Shopping Hub | Enterprise Business Software | Figma, FigJam
My role:
Lead UX Designer on a team of 3 designers, 5 developers, 1 product manager and 1 product manager
Co-led workshop with PM to gain alignment amongst team.
Participated in customer calls to gain clear understanding of their needs
Created designs and interactive prototypes using Figma and the Chase Corporate Branded Material Design System
Developed design language for identifying each environment throughout the product UI
Perform usability/heuristic evaluations on customer applications
Conduct A/B testing and reporting results to senior management and cross-functional teams.
Techniques used:
Design thinking workshop and virtual collaboration with cross-functional team and stakeholders utilizing Figma, FigJam and Teams
UI components sourced from Chase Design System
Wireframing concepts
Prototyping interactions
Advanced customer centricity and design thinking by uncovering opportunities
Defining problems, and creating actionable CX Journeys
Ensure brand, ADA, marketing, and design system standards are upheld and influenced through customer needs
Problem to solve:
Customers are having to hunt for credit cards and offers. They often struggle to compare these cards and understand which card best meets their specific needs. The challenge is to design a comparison flow that simplifies the process, clarifies key differences, and ultimately guides users to make the best choice.
Solution:
A hybrid team design sprint to identify, design and size thigh-impact and high-value new or evolved placement for offers to ensure customer centricity is maintained when business priorities depreciate the experience.
Impact:
A shared experience vision with 30+ impact-oriented design concepts and shortlisted backlog of improved offers across the web and mobile experiences.
Productivity Tools:
Figma > Wireframes & Prototypes
Mural & Figjam > Whiteboarding and collaboration
Qualtrics > Quantitative Research > Competitors Site Analytics
·Documentation > Roadmaps > Use Cases > Benchmarking
Lucid > Diagram > Personas
Impact:
Led modernization and redesign of secure Credit Card shopping experience resulting in 60k incremental accounts and 5+ experiments.
From 2022 drove incremental 120k+ in-year accounts and 420k annual accounts through design strategy, discovery, and delivery of 40+ CB/Card specific experiments in mobile app and secure web.
JP Morgan Chase - Comparison feature and user flow redesign
Understanding the Problem Space: Who are our customers? What do they want? Why are they frustrated?
Linda Green
40-year-old mom of 3, focused on maximizing family travel rewards.
Tech-savvy Chase customer seeking low-fee, high-perk travel cards.
Needs a clear, personalized way to compare credit card options.
Problem Statement
Linda finds credit card comparisons overwhelming and not family-focused. She needs a simple, tailored tool to identify the best travel rewards card for her lifestyle.
Research, Competitors and Analytics: Measuring user interactive models and placement
Our next step involved further research to create and demonstrate potential solutions. Our methods involved competitive research through the study of comparison tools in various platforms—e-Commerce and other banks—and user interviews. We also took advantage of existing user research concerning comparison tools. This research noted how users interact with the information presented in tables, both on mobile and desktop formats.
What we learned: We discovered that to create a great comparison tool the key is to demonstrate at least two products side-by-side. Based on our research, we concluded that there is no benefit in showing more than 3 or 4 products at one time—since if one needs to focus on more than 4 items, the task of retaining all pertinent information can become challenging. Therefore, there is higher risk of making the wrong selection.
UX Challenge
Another interesting discovery involved our user types. We learned that we can divide our users into two groups—represented by 'A' and 'B.' Users from group A are detailed-oriented—their decision making process involves researching their options fully before making a decision. They don't mind consuming lots of information in order to find their answer. This group also enjoys employing help of technology during their research. Users from group B are more likely to be overwhelmed by a plethora of options. They have an idea of what they want and seek options that are related to their preconception. They don't like to spend time on details; aiming to pick an option as fast as possible.
UX Solution
After getting to know our users, we came up with two solutions for each group in order to help them in their decision-making process. We used Credit Card Comparison Tool for group A–so they can see all the possible options and compare them. Credit Card Selector was employed for group B—wherein we narrow down their options by asking them few questions to understand what are they looking for, and presenting only the relevant options to them.
Research & Insights
Maximize rewards: Users want to earn the most points or miles for their spending.
Understand perks: Key travel benefits such as airport lounge access, no foreign transaction fees, travel insurance, etc., are essential.
Minimize fees: Users are often price-conscious and want a card that offers high value without excessive fees.
Easy application: The process of applying for a card should be straightforward and quick.
Design Phase: Wireframes, Design & Prototyping
Once we came up with a higher level solution—in this case two answers—we started to work on the details of these application to bring them into fruition.
1. Personalization
Tailoring offers and ads based on user account preferences, user habits, and demographics increases relevance and engagement.
2. Ad-Free Upgrade Options
Offering tiered personalized promotions where users can opt for ad-free experiences or limited ads gives users flexibility and control.
3. Seamless Integration
Ads and Offers that blend naturally into the content, such as product placements or sponsored recommendations, feel less intrusive.
4. Reward-Based Ads placement
Offering incentives for user ads, such as discounts, or extended user privileges, motivates users to engage voluntarily.
5. Clear Call-to-Action (CTA)
Offers with clear, actionable CTAs (e.g., "Click here for more" or "Scan to learn more") make it easy for users to interact with offers.
6. Enhanced Ad Metrics
Providing feedback or visible progress bars for ad completion helps users feel in control.
7. Cross-Device Synchronization
Allowing users to interact with ads across devices (e.g., scanning QR codes on their phones) improves accessibility and engagement.
Responsive Web
To create an effective comparison tool, the key is to demonstrate at least two products side-by-side. Based on our research, we concluded that there is no benefit in showing more than 2 or 3 products simultaneously.
Responsive Mobile