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
20K+
products
28+Offline Stores
to fulfill the online orders
1Million
online users
Different
the 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.
Practicality
our solution should be pragmatic based on the current fulfillment
modules and use cases.
And staying on budget.
Convenience
Users should go through the checkout journey easily and smoothly.
Flexibility
Allow users to switch delivery methods.
Accessibility
Lighthouse accessibility score is above 90.
How do people get their grocery items?
2 Main Service Modules
Delivery
Express Delivery ( All products except for hot food & cake )
Mail Delivery ( Non-perishable products )
Pickup
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
Select Users
10 out of 200, from 4 segments
Test on App
setting tasks to complete
Interview
feedbacks & expectation
2. Defining Pain Points
User Testing Result
quantitive & qualitative
Analysis
old workflow analysis
3. Providing Solutions
Goals
aimed at users’ pain points
with 3 solutions
Analysis & Communication
with users, devs & stakeholders
Selected Users — Persona
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
Pain Points
Started wrong > Fix Errors > Bounce Rate
Possible Solutions
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.
Final Solutions
Started right > No need to fix the error
Work Flow
Help users get started right
Solution
Delivery
Enter a postal code
70%+
delivery users
20%+
pickup users
Solution
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
Metric
Result
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.
You may also like...
Offer users a seamless experience from offline stores to online shopping experience