Creating clarity in complexity
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.
01
Some of the promotions are created by suppliers
Simplifying the promotion mechanics would be the ideal solution, but they are being created by suppliers. Additionally, the promotions work well on retail space and there is a need to maintain consistency to ensure trust.
02
The promotions are ambiguous to some of our users
Fairprice has been around since 1973. Older generation of Singaporeans are familiar with the promotion mechanics. Same cannot be said for the younger generation and expats.
03
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
Multiple promotions may appear on the same product.
01
Multi Buy
Discounted price when user purchase multiple of the same or participating products.
02
Digital Club
A monthly subscription that allows users to get products at discounted price with minimum purchase.
03
PWP
Discounted price with minimum total spend of $25. Limited to 4 units per purchase.
04
Value Deals
Products come with additional quantities per unit.
05
Carton Deals
Discounted price when user makes a bulk purchase.
06
Must Buy
Cheapest price guaranteed. Limited to 6 units per purchase.
Heuristic evaluation
We conducted heuristic evaluation of the flow using the Norman Nielsen guide to uncover usability issues.
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). The product card holds a lot of information as online grocery shoppers tend to make purchase decision on the product card itself.
Flexibility and efficiency of use
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). The product card holds a lot of information as online grocery shoppers tend to make purchase decision on the product card itself.
Visibility of system status
Though there is a toast feedback mechanism when user adds the product in cart, there is no indication of how far along is the user from getting the promotion.
Aesthetic and minimalistic design
Interfaces should not contain information that is irrelevant or rarely needed
Using the right layout for the right context
The key difference between a regular e-commerce and online grocery is that users tend to make repeat purchases of the same product. That means product image needs to be the most prominent thing in the card. Suppliers even manipulated the imagery in such a way that the quantity and size is clearly visible on the image. Additionally, Add to Cart action is within the card itself without the need for the user to tap into the detail page.
However, the area of focus changes when users are interested in the promotions. Promotional text becomes the focus area and not the image
Horizontal Card
Horizontal layout works best when text becomes the primary source of information instead of an image. This allows more space for text.
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.
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.
.png)
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
Improvement of 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. Will be shown later.
- Add prominence to the call to action button by using outlined button.
Introducing Bottom Sheets UI
Bottom sheet allows users to quickly glance into the promotions available without losing context.
Progress Indicator
This allows users to see how far along are they in redeeming the promotions.
User testing
From the user testing, we've discovered that users like the progress indicators and the ability to quickily peek into the promotions via bottom sheet. However, it feels passive. They would prefer if the app actively informs them on the progress and the promotions available without the need to tap into the promotions.
A toast notification would normally be ideal, but different promotions are sometimes stacked together on the same product. This creates a risk of multiple toast notifications appearing at the same time when the user adds a product.
Expandable Content Area
When a user adds a product directly on a product card, a content area would appear in between the rows of product cards displaying the progress indicators and available promotions. User can then choose to dismiss it and continue browsing or, tap into the modules that will lead them into a a product listing page of all the products available for the promotion.
