T&T Supermarket 2021

Checkout Redesign 

Role: User research, UX/UI design, user testing
Team: 1 Product manager  / 3 Engineers / 1 Project manager / 1 copywriter / 1 Business analyst
Type: Mobile App / Responsive web
Tools:  Adobe XD / Adobe Suites  / Miro / Google Analytics
Timeline: April 2021 – August 2021
Released Time: September 2021

checkout present.png

How I led this project?

I was the primary designer leading this project in 2021. From ideating early concepts, running design sprints, regularly presenting to leadership, and delivering final assets for production. I worked with multiple cross-functional teams including 1 product manager, 1 project manager, business analysts, 4 engineers, and leads from e-commerce, fulfillment, and business operation. 

About T&T Shopping Online

20K+

products

28+Offline Stores

to fulfill the online orders

1Million

online users

Different

assortment at offline stores

Delivery Principle

use the user's location to assign the closest store to deliver the order

Goals
Increase the placed order rate and reduce the bounce rate.
4-icons-2.png

Practicality
our solution should be pragmatic based on the current fulfillment
modules and use cases.
And staying on budget.

4-icons-3.png

Convenience
Users should go through the checkout journey easily and smoothly.

4-icons-4.png

Flexibility
Allow users to switch delivery methods.  

4-icons.png

Accessibility
Lighthouse accessibility score is 90+.

How do people get their grocery items?
2 Main Service Modules 
Delivery 
1200x630wa.png
Express Delivery ( All products except for hot food & cake ) 
canada_post 1.png
Mail Delivery ( Non-perishable products )
Pickup 
Store & Neighbourhood Pickup ( All products )

Problem

The bounce rate of the checkout process was high. Our research showed that many users terminated their checkout due to the errors of unavailable items.

Old Design

Screen Shot 2022-11-04 at 6.08.30 AM.png

3. Users have to back to

the shopping cart to fix

the error

2. Payment block

1. Error occurs

Screen Shot 2022-11-04 at 6.18.04 AM.png
Products users can see not equal to products users can buy
Solution
Workflow 
Screen Shot 2022-11-04 at 6.22.10 AM.png
Solution
Delivery
Enter a postal code

70%+
delivery users

20%+
pickup users

Screen Shot 2022-11-04 at 6.40.55 AM.png
Solution
Switch to Pickup
At shopping cart stage
Screen Shot 2022-11-04 at 6.50.48 AM.png

Flexibility to switch the service modules

Screen Shot 2022-11-04 at 6.50.48 AM.png

Double-check product’s availability by using the address

Screen Shot 2022-11-04 at 6.50.48 AM.png
Automatically deselect the unavailable item and easy to delete
Metric
Result
Screen Shot 2022-11-04 at 6.57.26 AM.png

Why don't we let people choose the service module when landing?
Best Balanced Solution

We are an omnichannel.

When the user doesn't allow us to use the location, we will assign

a default postal code – L3T to the user. In this way, we ensure to show everyone a rich assortment of online grocery websites in any scenario.

Screen Shot 2022-11-07 at 7.55.07 PM.png

You may also like...

notification cover.png
mix and match cover.png

Offer users a seamless experience from offline stores to online shopping experience