T&T Supermarket 2022
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%
• 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
* Based on competitor analysis to generate an insight report to share with stakeholders.
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”.
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
For Low Click Rate
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
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.
For Navigation—Make Products Finable
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.
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.
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.
Weekly Flyer features
Mobile Native App
Styles & Sizes
Grid & Spacing
Grid & Spacing
You may also like...
Provide the best-balanced solution to solve a complex problem.