UX CASE STUDY Create on 31 Aug 2018

Improve the usability of Registration flow (Stage 1) in PrimePay QR Payment App

Project Details

Client | PrimeKeeper Malaysia
Client Type | Fintech
App | Mobile Payment
Project Year | 2017-2018

ABOUT THE APP

Digital Wallet & Mobile Payment

A digital wallet app allow user to make payment to physical merchant.

PrimePay - transfer and make payment directly with bank saving account or electronic money (e-money) account.

Target user - User with over 18 years old is eligible, verify through identification documents (e.g. NRIC, Passport, driving license) in the app.

The app is launching in event, collaborate with Putrajaya Government, local hawker stall, and night market merchant. Registration is the 1st action to sign up new user and bring confident to the app security.

Business Requirement

A new user account must have username, password, email (for password recovery/EDM), contact number, Terms and Conditions, 3x security questions to avoid scam, display name to cover username.

UX Case Study PrimePay

TASK

User Goal

Register a new user account.

The Early Version

Based on the business requirement, all this information is necessary for a new user account. The registration flow includes 12 parts and total 46 screens:

  • 1) Splash
  • 2) Introduction and product tour
  • 3) Terms & Conditions *
  • 4) Identity confirmation with NRIC(MyKad) or Passport *
  • 5) Mobile verification *
  • 6) Set up account with username, password, re-enter password *
  • 7) Set up the security questions *
  • 8) Set up profile picture and display name *
  • 9) Email verification *
  • 10) Force sign out and sign in again *
  • 11) Mobile security, setting up passcode *
  • 12) Mobile security, setting up fingerprint *
Registration flow version 1_01
Registration flow version 1_02
Registration flow version 1_03
Registration flow version 1_04

    SITUATION

    Observations

    During the event, we have collected a list of response from the user based on observation.

  • 1) User is hesitating to take next step after read the instruction to Scan NRIC (MyKad).

  • 2) User waiting quite some times and realized SMS OTP is control manually.

  • 3) User take times to upload a favorable profile picture and fill in a nick name (display name).

  • 4) User do not access email on their phone.

  • 5) User claims that forgot to continue and the email OTP is expired.

  • 6) User claims that they can't remember the password when restart the app.

  • 7) User claims that they can't remember the questions and answers when they ask for password recovery.

    Questions Asked By User

    Based on Survey, we have collected a list of question from the user

  • 1) Why do I need to add NRIC(MyKad)/Passport in this app?

  • 2) Why SMS OTP do not send automatically?

  • 3) What is the different between Username and Display name?

  • 4) What if I don’t have an email account?

  • 5) What if I register with company email and the pc is not with me right now?

  • 6) Why do I need to set up 2-3 security questions? One is not enough?

    PAIN POINTS

    Define Problems

  • 1) Bouncing rate is high

    Identity verification (with MyKad or Passport) in registration doesn't help to gain trust from the user. Part of the user refuse to add in their private information before explore the app.

  • 2) Password recovery rate is high

    Username, password, mobile verification, email verification, 3x security questions and answers, and passcode.

  • 3) Learnability is low

    User take time to understand every step.

  • 4) Email verification stop the user finish the last step

    Part of the user forgot to continue the email verification and quit the registration.

  • 5) High friction in the flow

    User need to go through 3 verification (mobile, email and identity) before explore the app.

    Solutions

    Suggested Solutions

  • 1) Value proposition

    PrimePay branding itself as "On-To-Go Payment", target to bring convenient yet focus on security. Identity verification (with MyKad or Passport) is to ensure the user is eligible to use the app.

  • 2) Distinguish Mandatory and Optional field

    Username, password, re-enter password, mobile verification, email verification, Terms & Conditions, Mobile security is required for new account. Profile picture and Display name is an optional.

  • 3) Eliminates the need of remember password

    User tend to forget their password and security questions' answer. Three security questions change to (one) Secret Phrase authentication.

  • 4) Automate the OTP flow / SMS Retriever for Android

    SMS OTP send after the confirmation of mobile number. Automatically retrieve OTP from SMS without manually type.

  • 5) Provide Sign-In Hint

    Allow user to set up Sign-In hint.

  • 6) Biometrics Verification

    Bring confident to the security of the app by adding Fingerprint.

    Implement solutions

    Identity confirmation (NRIC or Passport) and Security questions is removed from the registration flow. It's compulsory to verify user identity before user add bank details or make payment but it's not a necessary in registration.

    Security questions is replaced by Secret phrase authentication. User can add Secret phrase before add bank card in the app.

Draft on paper
5x Draft of Registration flow

    EXECUTION IN DESIGN

    "Lightweight"

    User allowed to explore the app feature. They only need verify identity when they decided to spend with PrimePay. It's help to reduce bouncing rate.

    Therefore, the registration flow is restructured and simplified to 9 parts, 3 major parts has removed:

  • 1) Identity confirmation with add NRIC(MyKad) or Passport

  • 2) Set up the security questions

  • 3) Set up profile picture and display name

Comparison btwn version 01 and 02
Registration flow version 2 wireframe_01

Automate Mobile Verification OTP

In mobile verification flow, user take times to wait for the SMS OTP, they don't even realized the SMS OTP is trigger manually. So, we fulfill the user expectation - once user confirm the mobile number in confirmation pop-out, it trigger the SMS OTP.

Comparison btwn version 01 and 02
Comparison btwn version 01 and 02

Remove the unnecessary step

In Term & Conditions flow, we reduced the category screen, encourage the user read the content straightly.

Registration flow version 2 wireframe_01
Registration flow version 2 wireframe_01

Restructure the sequence

After remove the Identity verification flow, the first info collect from the user will be the mobile number. We have re-arrange the sequence: Username > Mobile Verification > Email Verification.

Registration flow version 2 wireframe_01
Registration flow version 2 wireframe_01

OUTCOME

Medium Fidelity Wireframe

The registration flow is restructured and simplified to 9 parts. (Product Tour has removed due to Business Requirement.)

Comparison btwn version 01 and 02
Registration flow version 2 wireframe_01
Registration flow version 2 wireframe_02
Registration flow version 2 wireframe_03

    Problem Solved

    The new registration flow is use to solve all these problems -

  • 1) Reduce bouncing rate. User is allowed to explore the app before go through identity verification by adding NRIC (MyKad)/Passport and private information in the app.

  • 2) Automate the OTP and Email OTP to reduce the friction of registration.

  • 3) Reduce the needs of password. Reduce the account recovery rate, e.g. Forgot username, Forgot password, Forgot secret phrase.

  • 4) Reduce optional fields, left only mandatory fields.

  • 5) Improved the learnability

  • There are always limitation in actual project to cope with different situation. We have present the new registration flow to the product owner and product manager and get the green light to proceed development to staging.

    After that, we released this version to production, and run the promotion event at Putrajaya.

    In the next case study, we will show the 2nd stage of usability improvement for the same registration flow.

    The End