T&T Supermarket 2022

Homepage Revamp

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


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 invisible

old homepage

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

overview

Solution

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.  

new homepage

Event Promotion

Weekly Flyer features

Frame 21.png

Promotional offer

Category Sale

New Navigation

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. 

New Product Display + Add to Cart Feature

The product SKU display was redesigned. Also, the Add to Cart button became more interactive and approachable.

UI Guide — Desktop & Mobile Grid

Setting specifications and dimensions of the user interface for software engineering hand-off. Establishing font, colour, typographic scales and grid system on four break points for desktop and baseline points for mobile end. 

Screen Shot 2022-11-08 at 6.59.44 AM.png

UI Guide — Desktop Spacing

Screen Shot 2022-11-08 at 6.59.57 AM.png

UI Guide — Mobile SKU

Screen Shot 2022-11-08 at 7.00.13 AM.png

Visual — Category Icons 

Screen Shot 2022-11-08 at 7.00.47 AM.png

Result

Screen Shot 2022-11-08 at 9.27.51 PM.png

You may also like...

notification cover.png
Frame 185.png

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