Getting the right credit card
With many choices available, it is imperative for Hyphen to guide its users to the right products while maintaining its status as a free and impartial financial platform.
Qualitative research
To appreciate the problem better, we recruited 10 participants and conducted user research. We observed how users interacted with the product and asking user about their experiences using it
We identified 3 pain points from our research:
- Users find that the filter options are limited to help them get to the right product
- Users felt that they had to scroll a lot in trying to compare and look for the right product
- Hard to compare product
Mapping the journey
Additionally, we identified two 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 persona a specific scenario and mapped out the journey to give us a clear view on touch-points where we can improve.
Customer journey mapping of a value-seeker. Tasks: Get a credit card that gives the best savings on petrol.
Customer journey mapping of a bargain hunter. Tasks: Get a credit card that gives the best cash reward.
Heuristic evaluation
We conducted heuristic evaluation of the flow using the Norman Nielsen guide to uncover usability issues.
The redesign
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.
How might we help users to quickly find the products that match their needs?
How might we help our users get the deals they prefer?
Before & After design of the Listing Page
Hygiene
- Ensure text and interactive elements meet the min. colour contrast ratio of 4.5:1 for usability
- Switch all of the typeface to OpenSans. Currently, the site uses OpenSans & Poppins. The lack of differentiation adds no value and it impacts site’s performance
- Establishing visual hierarchy by using typography and colours
Filters
- Anchored left hand column so users can filter and sort easily
- Usage of segmented control to allow the users to quickly switch to type of cards they require
- Use of checkboxes instead of switch for filters as it is a more appropriate component to use in this scenario
- Improve filter by need options by using clearer labels and expansion to more needs
- Introduce filter by promotions for users to quickly get the types of promotions they prefer
Ad Banner
- Instead of having the ad banner stretches across the screen, having it in a modal-less dialog appearing at the bottom right of the screen will increase its visibility. User has the option to act on the dialog, or dismiss it if it is irrelevant to the user.
Before & After design of the Listing Page
Expandable Product Card
- The current design utilises expandable product card. This is inefficient as user will have to scroll back up to apply or to collapse the product card. Additionally, content such as filters and information; surrounding the product details are irrelevant to the users as they consume the content of the product details.
Full Screen Modal Window
- We change it to a scrollable full screen modal window. By doing so, user can now focus on the information without the distraction of surrounding elements. We also added anchor tabs to allow users to quickly jump to information that is relevant to them. Additionally, the CTAs sticks to the bottom of the modal window which will allow users to quickly Apply or dismiss it.
.png)
Comparison tool
User can select multiple products to compare. Inside the comparison tool, user can also choose to apply the card directly or switch different to cards to compare without the need to dismiss the comparison tool first.
.png)
%201.png)