WOOPAY

Building a seamless experience for first-time buyers using the express checkout solution

Client

WordPress
WooCommerce

Industry

eCommerce

Services

Product Design

Product Area

Express Checkout

My Role

Product Designer

Timeline

March - August 2023

Context

The project aimed to build a seamless experience for first-time buyers using the WooPay express checkout by capturing critical info (shipping address and payment) and reducing the loading time.

Problem

First-time buyers leave the incomplete express checkout form as it’s unclear where to input the information and what to do next, causing the checkout abandonment rates to be over 70%.

The redirecting time to the express checkout using an iframe modal would take around 8-13 seconds, which is not ideal in the current market and gives shoppers the impression of a third-party experience.

Goals

Design the native and seamless express checkout experience, capturing critical info from first-time buyers to lower the checkout abandonment rate.

Role

I led the design improvements by collaborating with the team to redesign the log-in or sign-up flow to create a native express checkout experience with the new NUX flow to capture critical info from first-time buyers.

Design

Data and research
I identified from the transaction data of the last three months that there were only 300 orders completed from over 1000 checkouts initiated. Around 40% of buyers abandoned the checkout during the “Log in or Sign up” flow due to slow loading time, and 30% left their half-filled checkout form.

Merged into express checkout
I proposed the native express checkout experience by redirecting shoppers to the hosted checkout and merging the “Log in or Sign up” flow into the checkout form.

The native experience by merging into hosted checkout

Guided checkout form with a progressive flow for first-time buyers
Restructured the checkout form with a progressive flow to guide first-time buyers in capturing critical info for completing their purchase.

Search address with Google autocomplete
Embedded the Google autocomplete API to help buyers quickly fill in their shipping address.

Search suggestions with Google Autocomplete API to help buyers quick fill in their shipping addresses.

Preselect the saved info and add additional information
Ensure a smooth and hassle-free express checkout solution for repeat customers by automatically preselecting the captured information.

Preselect the saved info and add additional info to ensure a smooth and hassle-free payment process for repeat customers.

Testing and iteration
We did user testing to gather feedback on the new proposed “Log in or Sign up” and the NUX flow of express checkout. One key insight is that merchants expect to add more card payments seamlessly.

Therefore, I proposed to save the billing addresses so they don’t need to add the same address for multiple cards (different from the shipping address).