Project F9
Making the Click to Pay experience frictionless with new features.
Click to Pay Overview
Click to pay is a fast, secure, online checkout that serves as a digital payment wallet for making checkout easier, quicker, and enjoyable.
The Ask
These are the problem statements the product team gave me to solve for:
How might we reduce friction when authenticating with Click to Pay
How might we make the mobile number the primary identifier rather than email
How might we ensure that is clear to a Click to Pay user that they have used Click to Pay to complete a transaction
My solution process…
What is friction?
Friction is anything that comes in the way of a user’s ability to achieve a goal.
What causes of friction were we solving for?
Users needing to leave the Click to Pay flow for verification.
How are we solving for friction?
By implementing face id, touch id, and pattern lock.
By introducing mobile numbers as the user-id.
How do we ensure to users they have used Click to Pay to complete a transaction?
By implementing messaging that provides product education to the user.
By implementing messaging that thanks the user for using Click to Pay and including it in the payment method section of the payment confirmation page.
Customer Journey
To visualize my ideas, I created a customer journey that will help me create the user flows.
Tim is a Click to Pay user and hasn’t used Click to Pay in two months. Tim’s birthday is coming up and he wants to splurge on Sak’s 5th Avenue, and he also wants to use Click to Pay as a payment method for this purchase.
User Flows
Creating user flows helped me finalize how the user’s experience was going to be from when they are on the merchant’s site, to when they are in the Click to Pay flow, and when they finally checkout and make their payment.
Return User via Mobile Number
In this button-based checkout flow, when the user clicks on the Click to Pay button, they are notified that they can now use their mobile number to sign in.
How this solves for friction:
The average user has 2 or more emails, and some users may not know which email they used for their Click to Pay profile. Introducing mobile numbers as a way to sign in reduces the amount of time the user would have to think about which email they used, and mobile numbers are also quicker to type and remember.
Return User via Mobile Number Setting up Face ID
In this integration-based checkout, when a user enters in their mobile number or email on a merchant site, a Click to Pay profile attached to their number or email pops up, and they are prompted to verify their identity via OTP. In the verification process, the user is asked if they would like to set up their face ID for future use.
How this solves for friction:
Many smartphones have authentication systems that can be integrated into digital products. Taking advantage of these authentication systems like face ID for iPhones would be a faster way for users to check out without needing to enter OTP codes, which would be quicker and frictionless, without the user needing to leave the checkout flow to get OTP codes from their emails or text messages.
Return User via Mobile Number: Face ID Available
In this integration-based checkout, when users enter their mobile number or email on a merchant site, a Click to Pay profile attached to their number or email pops up, and they are prompted to verify their identity through face ID, in this case, the OTP verification isn’t needed because the user has set up face ID previously.
How this solves for friction:
The OTP process is a 3-step verification process. Using face ID for authentication reduces these 3-step processes to 1, where the user’s iPhone authenticates their face ID and they can speed through checkout.
Design…
HMW reduce friction + use mobile number as the primary identifier
Return User Sign-in Screen
•Notifying the user that they can now use their mobile number to sign in
•Creating a hybrid of the new feature we’re introducing and the action (to make the process quicker)
•Toggle approach: to give the user the choice of signing in with their email
Return User Setting Up Face ID
•OTP verification process to make sure it’s the user
•Opt-in / opt-out approach: using a checkbox to give the user the choice to set up their face ID for faster and frictionless checkout
•Creating a page to introduce how face ID can be used for clarity purposes
Return User: Face ID Available
•Mobile number for face ID lookup
•No OTP code is needed
•Provided fast and frictionless checkout experience for the user
HMW Ensure that a Click to Pay user know that they have used Click to Pay to complete a transaction
Implementing a thank you message in the payment method section of the payment confirmation page
Implementing friendly messaging, like when you buy an item from a store and the owner thanks you for your purchase.
Other wording is being tested for product education
Sketch Flows
Return User Face ID Available
Future Decisions?
•A user study has been set up for this project and is currently in testing
•Using feedback from research to build improved and impactful experiences for Click to Pay users