arrow_back
Back to home
HSBC Logo White

An easy credit card journey for Singaporean customers.

HSBC has been actively investing in innovation to elevate their interactivity with their customers by embracing the latest technology in the pursuit of improving customer experience. This includes refreshing their online platforms and launching various new digital features to meet their growing customers needs.

Project Type
Mobile App
Year
2018
Role
Product Designer
Tools Used
AxureSketchMarvelWhimsicalInvisionAtlassian Icon White

Project's goal

The Mobile Origination team is tasked to improve the credit card application process and overall experience.
Simplifying a process is not an easy task for a bank, especially when applying for a credit card. The bank has to collect accurate and verified information about the applicants while making the whole process short and easy. Security and privacy are also two concerns for the user as well as HSBC.
Coming up with a solution that takes into consideration all these different factors was a real challenge for me and the team.

HSBC Credit cards

Initial user-flow & user test

After a series of workshops and rapid prototypes, we came up with an initial user-flow that summarised all the steps that the customer needed to take to apply successively for a credit card.

Initial user flow MobileInitial user flow
For presentation purposes, the user flow below has been simplified.

User-test

We've decided to test our initial user-flow before proceeding any further. A Singapore based agency Kadence helped us running the test based on the requirements, tasks and questions we gave them on 10 participants.

• Singaporean
• Even mix of male/female
• Tech savvy
• Non-HSBC customers
• Own a minimum of 3 credit cards

Findings

Participants were turned off by the subsequent step of having to register for Personal Internet Banking (red screen). Many see registering for online banking as a process that was separate from applying for a credit card and questioned the necessity of going through with the process at that point in time.
Furthermore, participants were just notified that their credit card application had been approved and since their aim was just to sign up for a credit card, they did not see the need to continue on with registering for online banking.
The registration journey is currently disjointed from the application journey.

Solution

Making registration part of on-boarding flow.
Users aim is to sign-up for a credit card and start using their card straight away. By providing one seamless form we removed the additional barrier of registration process initially introduced.

Final User flow

Other findings

After fixing the user-flow, we ran some other usability tests and here are some findings:

Eligibility/ Welcome screen

Too much visual distraction. Images distracted from key message. Unclear messaging incentive of the journey.
Virtual card concept unclear.
None of the participants picked up on what “Start using your card now” meant. However, participants did like the mention of the steps at the start.

HSBC Overview
HSBC Overview
Errors & Warnings

Though participants were able to tell what the difference was between the grey and black fonts, it was not obvious to them that they still had to make some edits to the black fields. It was only when they scrolled to the bottom of the page and were prevented from going forward did they realise that there were fields where they had to make edits to.

Some participants had to keep going back and forth while filling up the necessary fields and it took some time for them to notice the yellow font that prompted them on the fields that needed to be edited.

Adding and removing a nationality

Editing and removing nationalities is achieved through a more ‘native’ approach. The group can be switched between edit mode, which shows delete controls, and default mode.

HSBC Overview
HSBC Overview
Snackbars instead of alerts

‘Snackbars’ provide a more subtle nudge when providing additional information. We want to find out if this is still easily understood.

Overview

HSBC OverviewHSBC Overview
mail

Want to know more about this project?

If you want to learn more, see more screens or even experience a prototype for this project, please get in touch!

Get in touch