top of page
T&T Supermarket
Checkout Redesign
Overview
T&T Supermarket offered delivery and pick-up service throughout Canada (Yes, even the Yukon area). Each delivery zoon has one selected offline store to fulfill. Like most of the retail chains, stocks and products in each store are different, which may cause various unavailable-item issues if the user didn't share their location while they were doing their online shopping.
I was the main designer working on redesigning the checkout procedure in Spring 2021 with a team of product managers and 4 engineers.
The Problem
As a business with three major types of service models—Express Delivery (fresh & groceries), Mail Delivery (non-perishable) and Pickup (hot food & pre-order & others), checkout is technically complex. The most difficult part of redesigning the checkout flow was addressing potential errors states and edge cases that can occur during the checkout procedure.
Our research showed shoppers terminated their checkout due to the errors of unavailable items or selected services. And most of them had to go back to the shopping cart to fix the errors.
Goals
• User: No errors in the checkout process,
• Business: Increase the placed order rate and retention of shoppers
• Product: Maintain the major parts of our current checkout structure
How it works
Lock up the fulfillment store to ensure the availabilities
1. First-time to click the "Add to Cart" button, encourage the user to choose the service model (Delivery or Pickup)
2. Use their delivery postal code to locate the fulfillment store
3. Available assortments and correct stocks will be shown based on the fulfillment store that they belong to.
Use shopper's address to verify the service model
Enable shoppers to fill out the delivery or pickup information in the shopping cart stage to ensure the items and the service they've selected was available. At the same time, shoppers still have the flexibilities to switch the service model. Moreover, shoppers no longer need to go back and forth to fix the errors, we used concise copy and clear visuals to guide them to solve the errors before proceeding to checkout.
Result
So far, the bounce rate dropped 3% during the checkout procedure. We've also seen an increase in retention and conversion from shoppers as a direct result of redesigning the checkout flow.
bottom of page