T&T Supermarket 2022
Homepage Revamp

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 with 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


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

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.


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.

Event Promotion
Weekly Flyer features

Promotional offer
Category Sale
solution overview
Mobile Native App

user interface
Colour Role



user interface
Typography
Baseline

Font

Font Stack

Styles & Sizes

user interface
Grid & Spacing
Column Grid

Horizontal Rhythm
mobile

desktop

user interface
Grid & Spacing
mobile
desktop

metric
Result

You may also like...
Provide the best-balanced solution to solve a complex problem.