top of page

T&T Supermarket 2022

Integrating a New Feature
— Mix and Match

Role: Data Analysis, UX research & UX / UI
Team: 1 Product Manager / 3 Engineers / 1 Project Manager /

1 Business Operation Manager
Type: Responsive Web  & Native App ( IOS & Android )
Tools:  Adobe XD / Miro / Figma
Timeline:  August 2022 - September 2022

Released Time: September 2022

Mix-and-Match Meaning in Retail Business  

The Mix and Match promotion gives customers a discount when they buy a specific number of items from the predefined item list. The promoted items could be a single product or product family. 

Frame 189.png

Customers might often see this promotion in the supermarket or supermarket's weekly flyers.

Business Opportunity 


Offline stores' sales reports showed mix-and-match promotion drove the double digits growth in sales in the recent three years. So, we strongly believe it will help the online business if we integrate this feature appropriately. 

Competitor Analysis

_1511457498_404_walmart-preview.jpeg

use the tag to indicate the promotion 

WechatIMG654.jpeg
WechatIMG651.png

after clicking the tag, pup up a layer to show the product detailed information

Insights:

• lack of a call to action button to guide users to explore more

• have an obstacle for users to understand selecting the product family to get the discount, not only just for this particular item

2560px-Longo's_logo.svg.png

use short description

to show the promotion

WechatIMG652.png
WechatIMG653.png

double display the mix-and-match information on the product detail page

Insights:

• hard to find the information

• only can use on a single item 

Workflow

Frame 190.png

Solution

Mix-and-Match on the product listing page

Solution

Mix-and-Match on the product detail page

You may also like...

Frame 185.png

T&T Supermarket / 2021

Checkout Redesign

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

Frame 186.png

T&T Supermarket / 2022

Homepage Revamp

Information architecture, user interface and design specifications for developers.  

bottom of page