T&T Supermarket 2022

Homepage Revamp

Screen Shot 2022-12-18 at 9.11.26 PM.png

Role: Data Analysis, UX / UI & Visual Design
Team: 1 Product Manager / 2 Engineers / 1 Project Manager / 1 Business Analyst
Type: Native App / Responsive web
Tools: Adobe XD / Miro / Adobe Suites / Magento / Google Analytics / Power BI
Timeline: May 2022 – August 2022

Released Time: August 2022

Problem of the Old Homepage

T&T Supermarket offline stores are well-known for abundant assortments and exclusive products, however, the website is neither fully responsive nor accessible with overwhelming information channels. Also, the data regarding each section's user behaviour was lower than the benchmarks.

flash sale section was ambiguous

low click rate < 5%

low click rate < 0.3%

Goals

• Increase the "Add to Cart" rate on the homepage which may lead to an increase in the conversion rate

• Increase the banner click rate

• Enable the products to become more findable, which may lead to an increase in sales

Research
Competitor Analysis

* Based on competitor analysis to generate an insight report to share with stakeholders.

Research
Pain Points of Online Shoppers

20%+ of users mentioned it was hard to find items, and a part of people pointed out that a group of products are not in the main categories (tofu products & seasoning powders).
12% of users felt there weren’t some trigger deals/items to motivate them to shop with us.

7% of users said the homepage was boring and overwhelming. Keywords: “always the same”, “dull”, and “not get inspired to cook”.

Research
Pain Points of E-commerce Merchants

“It takes effort to coordinate a designer and submit an IT ticket to arrange a display. And sometimes, while I was waiting for the reply, some of my products were out of stock.”

—— an E-commerce operator from the Household department

Limited by Homepage’s design

No time to submit an IT request to change it & don’t want to wait
No initiative tool to create a rich & compelling shopping experience for users

Solution
For Low Click Rate

old design

new design

Aim to more interactive

Reduce the focus of the banner titles, and use the page control to indicate the following ones
Due to the above visual reduction, the call to action button pops up and becomes the main focus.
Increase the height and create the margins

Solution
For Responsiveness

Screen Shot 2022-12-18 at 8.50.12 PM.png

Screen Shot 2022-12-18 at 8.50.33 PM.png

Grid System & Typography Stack

Dividing it into 4 break points to make the desktop experience fully responsive. ( table attached at the end )
Standardizing the visual language including typography, spacing, and the ratio of each container to create a harmonious user experience.

Solution
For Navigation—Make Products Finable

old design

new design

Screen Shot 2022-12-18 at 9.24.27 PM.png

Cross-department Collaboration

The design team worked with 10 merchandise departments for 2 months on regrouping and redesigning the categories. Based on the competitor's analysis and sales history, we expanded 10 categories to 20 categories and reduced the deep layers of each main category. So, main categories are more specific, subcategories have more exposure.

Solution
For E-commerce Merchants

Modular Design System

Without coding, E-commerce merchants can easily create scenario promotions,

seasonal categories, and image-based navigation.

I have also prepared a user guide for them to understand what each input field means.

Screen Shot 2022-12-18 at 9.29.00 PM.png

Screen Shot 2022-12-18 at 9.31.51 PM.png

solution overview

Desktop

Redesign the navigation system and re-organize the information architecture on the homepage. Here is what the new homepage shopping experience looks like. The feature was officially released on August 09, 2022.