T&T Supermarket 2021
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
to fulfill the online orders
the assortment at offline stores
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 )
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.
How to Solve the Problem?
1. User Testing
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
Background: Immigrate from Hong Kong, shopping online for 2 years.
Needs: Big basket size, well delivered
Background: Canadian-born Chinese
Needs: Quick, convenient, low price
Background: Canadian-born Vietnam
Needs: Improvement in overall shopping experience
Background: Digital Nomad; Europe & North America
Needs: Easy to start
*ATA means average transcation amount
Started wrong > Fix Errors > Bounce Rate
Solution 1: Encourage users to enter the location, so we could provide them with the available service model based on their locations.
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.
Started right > No need to fix the error
Help users get started right
Enter a postal code
Switch to Pickup
At shopping cart stage
Flexibility to switch the service modules
Double-check product’s availability by using the address
Automatically deselect the unavailable item and easy to delete
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.
You may also like...
Offer users a seamless experience from offline stores to online shopping experience