Helping people find the right credit card

SingSaver (part of MoneyHero Group) allows user to find, compare and apply credit cards that suit their needs. With many choices available, it is imperative to guide its users to the right products while maintaining its status as a free and impartial financial platform.

ROLE:
Product Design
TIMELINE:
6 weeks
CROSS-FUNCTIONS:
Product Manager
YEAR
2020
CHALLENGES & DESIGN PROCESS

Product team wanted to improve the conversion rate of the platform. However, we were limited with both data and resources

To overcome these limitations, we did the following:
1
Qualitative research
Observe how our current users interact with the product and ask about their experiences
2
Customer journey mapping
Identify proto-personas and map their journeys and touch points
3
Heuristic evaluation
Do a design audit based on best practises to improve the usability of the product
DESIGN PROCESS

Qualitative Research

To appreciate the problem better, we recruited 10 participants. We observed how users interacted with the product and asking users about their experiences using it
painpoints
80%
Found it hard to find a card that matches need
70%
Had difficulty in comparing products
100%
Excessive scrolling on screen
PRODUCT LISTING PAGE
1
Users find it hard to compare credit cards
The filter labels lack clarity, with vague terms like "Daily Expenses." The system also fails to accommodate users seeking specific promotional rewards like cash back and gift cards.
PRODUCT Detail PAGE
1
Difficulty in finding a credit card that matches their needs
The absence of side-by-side comparison forced users to mentally juggle card features while switching between options.
2
Excessive scrolling
Users have difficulty in finding a credit card that matches their needs
DESIGN PROCESS

Mapping the journey

We identified two proto-personas. A bargain hunter who primarily looks for deals such as free gifts or cash; and a value seeker who primarily looks for products that suit their lifestyle. We gave each personas a specific scenario and mapped out the journey to give us a clear view on touch-points where we can improve.
value-seeker
Task: Get a credit card that gives the best savings on petrol.
baargain hunter
Task: Get a credit card that gives the best cash reward.
DESIGN PROCESS

Identifying broken experiences

We conducted heuristic evaluation of the flow using the Norman Nielsen guide to uncover usability issues.
Report
View Report
DESIGN

Identifying opportunity

Upon the completion of the user research, the problem statements were defined so as to have a clearer picture on the problems we are trying to solve.
PROBLEM STATEMENT

How might we help users to quickly find the credit cards that match their needs, so that they could enjoy the rewards that they prefer?

Design

Setting goals

We converted our key problems into opportunities to solve for during the redesign.
1
Hard to compare → Easy to compare
The redesign should make it simpler for users to compare credit cards.
2
Unfindable → Findable
Make the filters easier to use and optimised for what users are looking for.
3
Scroll-intensive → Optimised
Make the design efficient and easy for users to consume content.
DESIGN

Making it findable

Filters
  1. Filters are anchored to the left so they are always accessible to the users
  2. Added segmented control so system can quickly display filter options based on users' preferences
  3. Use of checkboxes instead of switch for filters as it is a more appropriate component to use in this scenario
DESIGN

Optimised for consumption

Modal as an additional surface
Through user testing, we identified key friction points in our product details design. Users struggled with the expandable card format, which required frequent scrolling.
Key improvements:
  1. Replaced expandable cards with modals to create focused, distraction-free product exploration
  2. Added anchor tabs for efficient navigation between product information sections
  3. Use of checkboxes instead of switch for filters as it is a more appropriate component to use in this scenario
Results:
Our redesign streamlined the user journey by eliminating unnecessary scrolling and maintaining context. The modal approach allows users to deeply engage with product details while keeping key actions readily accessible. This enhancement creates a more intuitive and efficient browsing experience, helping users quickly find and act on the information most relevant to their needs.
DESIGN

Making it easy to compare

We empowered users with a robust comparison tool that streamlines decision-making. The redesigned interface allows users to:
  1. Select and compare multiple products simultaneously
  2. Apply for cards directly from the comparison view
  3. Seamlessly swap products in and out of the comparison without interrupting their analysis
This flexibility eliminates the traditional back-and-forth between comparison and product selection, creating a more fluid and efficient evaluation process. By keeping users in their decision-making flow, we've simplified what was previously a fragmented experience into one cohesive journey.
© 2024 Haikel Zaini