top of page

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

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



28+Offline Stores

to fulfill the online orders


online users


the assortment at offline stores

Delivery Principle

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

Increase the placed order rate and reduce the bounce rate.

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


Users should go through the checkout journey easily and smoothly.


Allow users to switch delivery methods.  


Lighthouse accessibility score is above 90.

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

Problems of Old Design

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.

Screen Shot 2022-12-15 at 3.57.31 PM.png

How to Solve the Problem?

1. User Testing

Select Users

10 out of 200, from 4 segments

Test on App

setting tasks to complete


feedbacks & expectation

2. Defining Pain Points

User Testing Result

quantitive  &  qualitative


old workflow analysis

3. Providing Solutions


aimed at users’ pain points

with 3 solutions

Analysis  & Communication

with users, devs & stakeholders

Selected Users — Persona

Screen Shot 2022-12-15 at 4.37.06 PM.png

Age: 60    

Background: Immigrate from Hong Kong, shopping online for 2 years.

ATA: $200

Needs: Big basket size, well delivered

Age: 32   

Background: Canadian-born Chinese

ATA: $50

Needs: Quick, convenient, low price

Age: 23    

Background: Canadian-born Vietnam

ATA: $100

Needs: Improvement in overall shopping experience

Age: 39    

Background: Digital Nomad; Europe & North America

Needs: Easy to start

*ATA means average transcation amount

Testing Result

Screen Shot 2022-12-15 at 4.49.09 PM.png

Pain Points

Started wrong > Fix Errors > Bounce Rate

old work flow.png

Possible Solutions

service method first.png

Solution 1: Encourage users to enter the location, so we could provide them with the available service model based on their locations. 

shopping cart regroup.png

Solution 2: Auto-group function at the shopping cart stage. So, instead of popping up errors, we help them to receive the items in other ways.

Final Solutions

Started right > No need to fix the error

final new workflow.png

Work Flow

Help users get started right

popup window key workflow.png
Enter a postal code

delivery users

pickup users

Screen Shot 2022-11-04 at 6.40.55 AM.png
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
Screen Shot 2022-11-04 at 6.57.26 AM.png

Business Needs
Best Balanced Solution

Why do we let people choose the service module after clicking the “Add to Cart”?

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

bottom of page