top of page

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

MacBook Pro 14_ - 1.png

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

Competitor analysis.png

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

Research
Pain Points of Online Shoppers

online shoppers painpoints.png
  • 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

merchants painpoints.png

“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 and new  banner design.png
old and new  banner design.png

old design

new design

   Aim to more interactive

  1. Reduce the focus of the banner titles, and use the page control to indicate the following ones

  2. Due to the above visual reduction, the call to action button pops up and becomes the main focus.

  3. 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

  1. Dividing it into 4 break points to make the desktop experience fully responsive. ( table attached at the end )

  2. 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.  

Event Promotion

Weekly Flyer features

Frame 21.png

Promotional offer

Category Sale

solution overview

Mobile Native App 

user interface

Colour Role

colour role.png
colour role sample.png
primary colour sample.png

user interface

Typography

Baseline

baseline.png

Font

Font.png

Font Stack

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

Styles & Sizes

style and size.png

user interface

Grid & Spacing

Column Grid

grid system.png

Horizontal Rhythm

mobile

mobile rythym.png

desktop

desktop rythm space.png

user interface

Grid & Spacing

mobile

desktop

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

metric

Result

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

You may also like...

notification cover.png
Frame 185.png

Provide the best-balanced solution to solve a complex problem.

bottom of page