Introduction
Payment step is the most important step during the checkout process. We always take learning from VOC (Voice of customers) team and analytics team to improve our product.
Our design team always put user experience centric design as our no.1 priority.
It's time to bring brand new payment experience to our customers.
My Role
Lead payment redesign project.
Launch Date
Jun, 2020
Payment redesign
We always take learning from VOC (Voice of customers) team and analytics team to improve our product. We’ve learned a lot from both team, here are some stands out problems:
1. Can’t find other payment methods (PayPal, Visa pay, pay with cash, etc)
2. Difficulty in understanding how to use multiple payment methods / split payment.
3. Where to use Gift card?
4. Need more clarity in understanding payment methods and how it works.
What is the change?
Currently, we are hiding payment options under different tabs.
1. Customer having difficult to use gift card and understand how to use split payment.
2. All other payment methods are living under the “+ More” tab which no one knows there are options.
Key Motivation
1. Credit card authorization rates are much lower than that of PayPal (87% vs 94%).
1. Moving PayPal into the “+More” tab reduced usage of PayPal from 6% to ~13%.
Goal
1. Provide more visibility to other Payment Methods (with a focus on Paypal).
2. Make the multi tender experience more intuitive.
3. Reduce friction in interactions.
Happy path user flow
wireframe_1
wireframe_2
Design_1
Design_Final
Key design change
1. Keep design consistent with the radio button container below.
Organize two payment groups by separate them out visually, help customer to understand gift card is different with all other payment methods below, also helps customer to understand how split tender works more easily
2. Increase visual prominence of CTA.
3. Changing credit card grouping logic to nested radio button selection, so it becames child level of 'Credit or debit card' selection.
1. Global message to indicate how much has been applied from gift cand and provide instruction to help customer understand what to do next.
2. Disable all unavailable split tender, help customer to focus on the available option. It also reduced friction in interactions during the process.
Other pages
Old guest landing page
New guest landing page
Old other payment options
New other payment options
New affirm option
New pay in store option
