Adding clarity to promotion mechanics

Over the years, FairPrice developed different types of promotions for their retail stores. To maintain consistency, the same promotions are made available online. Though the promotions were effective in retail stores, they pose a challenge on the online grocery space due to its complexity.

ROLE:

Product Design

CROSS-FUNCTIONS:

Product Manager
Front & Backend Engineer
Researcher

Challenges

Though the promotions are effective in retail stores, they pose a challenge on the online grocery space due to its complexity.

Some of the promotions are created by suppliers

Though simplifying promotions would be ideal, there is a need to maintain consistency with supplier-created retail offers to preserve customer trust.

Users struggle to understand promotional offers

While long-time Singaporean customers understand FairPrice's promotional system, younger shoppers and expatriates find these mechanics less intuitive.

Difference in behaviour between online grocery and e-commerce

Online grocery shoppers tend to make repeated purchases of the same item. Hence, a lot of information are placed on the product card including the Add to Cart action.

Types of promotions

Multi Buy

Discounted price when user purchase multiple of the same or participating products.

Digital Club

A monthly subscription that allows users to get products at discounted price with minimum purchase.

PWP (Purchase with Purchase)

Discounted price with minimum total spend of $25. Limited to 4 units per purchase.

Value Deals

Products come with additional quantities per unit.

Carton Deals

Discounted price when user makes a bulk purchase.

Must Buy

Cheapest price guaranteed. Limited to 6 units per purchase.

IN-DEPTH ANALYSIS

Usability audit

We conducted a heuristic evaluation to identify usability problems against established design principles.

Usability violations

Aesthetic and minimalist design

Due to space constraint on the product card, promotional text are truncated and written in a way that is ambiguous. For example, Buy $108 Get $8 Off could be mistaken as buying $108 worth of the same product instead of a range of participating products. (as shown on Product Detail Page; below fold).

Flexibility and efficiency of use

Unlike other e-commerce shopping behaviour where purchase is made on product detail page, online grocery shoppers tend to make purchase directly on the product card instead.

Visibility of system status

There is no indication of how far along is the user from getting the promotion.

IN-DEPTH ANALYSIS

Aesthetic and minimalist design

Interfaces should not contain information that is irrelevant or rarely needed

Using the right layout for the right context

However, the area of focus changes when users are interested in the promotions. Promotional text becomes the focus area and not the image

Using the right layout for the right context

IN-DEPTH ANALYSIS

Flexibility and efficiency of use

A flexible and efficient system isn't just about helping users transition from novice to expert use, it's also about allowing users to approach tasks in multiple ways to suit their working style. This can be as simple as structuring functionality in an open-ended rather than a prescriptive way

Bottom sheets

They are ergonomic surfaces that are easy to reach on mobile devices. They contain supplementary content that are anchored to the bottom of the screen. They are contextual and contain information that supplements or in relation to the screen behind it. Additionally, bottom sheets are flexible. They can display a wide variety of content and layouts.

IN-DEPTH ANALYSIS

Visibility of system status

It refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Progress indicators

Using a progress bar allows you to convey the status of operations to the user. It can be used as inside toast notification and as a display on the screen.

Design

Redesign of the online promo experience

Improvements on the product card

Remove the solid container around the "Offer" label so as to reduce emphasis.
Grey action icon for "favourites" instead of blue as it is a secondary action.
Use of data to show which promotion are users most likely attracted to if there are multiple promotions running. The most attractive promotion will be highlighted and the rest collapsed into "more". Additionally, chevron is added to highlight its interactiveness.
Add prominence to the call to action button by using outlined button.

Bottom sheet as a secondary surface

Bottom sheet allows users to quickly glance into the promotions available without losing context.

Progress indicators

This allows users to see how far along are they in redeeming the promotions.

ITERation

User testing and iteration

Through user testing, we found that while users value our progress indicators and quick-peek bottom sheets for promotions, they find the experience too passive. They want the app to proactively notify them about their progress and available promotions without manual checking.

While toast notifications seem like an obvious solution, we face a challenge: multiple promotions often stack on the same product, which could overwhelm users with simultaneous notifications when they add items.

Progress indicators

Using a progress bar allows you to convey the status of operations to the user. It can be used as inside toast notification and as a display on the screen.