NTUC FairPrice Online Store Selector

uiux design
ECOMMErce
social enterprise
2019 - 2020
About project
Customers in designated zones have a new online grocery shopping option that allows them to choose to shop between two different stores. Each store has different perks tailored to different needs.
How might we...
How might we help customers in different zones understand their shopping options and make the relevant choice?
Role
Under the guidance of Siew (Design Lead), I was in charge of executing the design. This included designing the user experience flows, doing up prototypes, and working with Jacqueline Soo (UX Writer) & Ivan Sim (UX Researcher) to conduct usability testings.

Context & Hypotheses

To optimize operations workflow and cost, customers who live in an area with a nearby store (Selected stores equipped to support online delivery) were defaulted to shop only from these stores. However, a situation arose where the supply of products in these nearby stores couldn't meet the demand, and customers faced frequent out of stock situations.

Together with the business, we started to explore giving our customers an alternative option — To shop from the warehouse! The nearby store and the warehouse have different perks tailored to different needs, and as a team, we strived to help our customers in these zones to understand each option, and make the relevant choice between these two options.

Finding the right moment to introduce the new feature

Since different stores have different assortments, we hypothesized that it would be more ideal for customers to select a preferred option at the start of their shopping journey. This would lower the likelihood of having to remove unavailable products from the customer’s cart when they switch between stores.

In Iteration 1A, Store Selector was surfaced after customers selected their address, however this led the customers to make an association with delivery, and many questioned the need to select a delivery type so early on in their shopping journey.

We surfaced Store Selector at an earlier touchpoint in Iteration 1B, however as customers are in a ‘mission mode’ to shop, they dismissed the “obstacle” quickly by tapping on ‘Continue shopping’. When prompted, customers were able to understand the different options, however, they needed to tap in to explore both options before they could tell which was more suitable for their needs.

Reflection: Work with the priorities of the customers

We learnt that for the customers, it wasn’t so much about where to shop but whether they can find the products they are looking for. Instead of making our customers choose where to shop before they can proceed, a collective decision was made together with the business to default customers to their nearby store for better economies of scale.

Providing the right nudge for call to action

One of the design goals was to minimize disruption to the customers’ shopping flow, and to present a nudge only to customers who would find this service relevant. At the same time, we wanted to draw an association of the service to the address bar in the header such that in the future, without the nudge, customers would still be able to find the entry point.

Iteration 2A did not fulfil the goal as we noticed in our user testing sessions that the design nudges were too subtle, almost transparent to a customer whose primary aim was to start browsing. This led us to rethink the nudge, and as seen in Iteration 2B, a persistent tooltip was used instead. A persistent tooltip proved to be effective as it provided real estate to communicate the benefits for customers to tap on the tooltip. At the same time it can also be easily dismissed, or scrolled away, for customers who didn’t find it relevant.

Reflection: Communicate the benefit for deviation

We learnt that it’s not likely for customers to deviate from their usual shopping behaviour, and in our design, we need to help customers to quickly understand why the new design would help them, so that they are able to decide its relevance.

Identifying relevant moments of switch throughout the journey

Together with the product, business and development teams, we identified several use cases that surfaced due to technological or operational limitations. In the following scenario, the store selector feature was introduced to help customers overcome the constraints resulting from each store having its own catalogue.

In the above scenario, the option to switch stores is presented to customers who are unable to view a product because they are in a different store. Once a customer decides to switch, the backend checks for products in his cart that are unavailable in the new store, and if some products are unavailable, customers would then be asked to confirm the store switch. Instead of meeting a ‘deadend’ in their shopping journey, customers are supported with the option to switch stores and continue their shopping.

Reflection: Understand the goals of our customers, and help them to achieve it

We learnt the importance of understanding the goals of our customers in different scenarios because that would allow us to better make design decisions based on their mental models.

Results 🙌

Within the first week of launch, the average expenditure of customers who used the store selector feature increased by at least 20%. This was especially significant for customers who switched from shopping at nearby stores, to shopping at the warehouse that has a larger selection of products.

The launch of the feature happened in phases. It was first released to customers within a particular zone. The feature has since been released to customers in every zone that has a nearby store.

Reflection & Improvement ~ 

The store selector feature was released post-circuit breaker in Singapore, with the primary intention of helping customers shopping online secure a delivery slot at either of the stores. I'm grateful that the store selector feature was useful and added value to our customers in times of need! 

Reviewing the problem statement & hypotheses

While we are thankful for the results achieved, we also realised that some of the issues we were trying to solve were as a result of existing gaps in the current user flow (E.g. out of stock items in a user's cart would be removed, hence complicating the store selector user flows). This allowed us to jump on to new conversations with the team to look into these issues, and to work them out together! 

I created this space to remember, reflect on, and to celebrate the works of my journey as a designer.

© 2022 Glenda Yeo