FairPrice . New onboarding to tackle 50% drop-off rate

 

Background & my role

As the Senior Principal Product Designer at NTUC FairPrice, Singapore's leading supermarket, I was responsible for leading the digital transformation, focusing on enhancing the in-store shopping experience for our customers.

| Project: 1.5 - 2 months

| Role: Product Design, Usability Testing, Interaction & Visual Design

“FairPrice allows you to check the availability of items in stores near you before your grocery trip. Above is the store-listing screen, allowing users to choose the store nearest to their home.”
 

Problem

We have a high drop-off rate in the Store Listing Screen

After we launched the MVP of the new customer in-store journey, there was a high drop-off rate in the Store Listing Screen, I immediately checked further data regarding that screen:

  • 30% of users have no interaction at all on that screen

  • Most users tap the 1st or the 2nd store (nearest to their home)

  • 77% of users usually tap 1 store only

 

About the users

Online shoppers could be curious about this new journey, but they might not understand what it is.

Since we had redesigned the app's home screen, online shoppers might show interest. As an in-store grocery vertical, we should aim to assist the following users in enhancing their in-store shopping experience.

User Profiles:

  1. Users Who Dropped Off

  2. Successful Completers

  3. New Users

    • Online shoppers who used our app previously, but also previously did go to FairPrice physical store.

    • Younger, 24-48

    • Tech-savvy

 

Customer problem

Users misunderstood the purpose of the grocery in-store tile, or they had difficulty to choose the store.

Problem 1
Users thought the grocery in-store tile was for them to use ONLY WHILE they were physically in the supermarket.

Problem 2
Some of the stores name were too alike, causing users to be unsure of which store to select, ultimately leading them to abandon the choice.

Goals

To increase the % of new users who successfully landed on the Store Home Screen, and the % of users to correctly understand Grocery in-store tile

 

The thinking behind

Designing journeys for both new and returning users

Based on the data presented, 2 things we needed:

  1. Explaining the benefits of the in-store grocery journey: As users did not understand what means by the grocery in-store tile, we need to explain what is the benefits of the in-store grocery journey, we either add the description on the existing Store Listing Page or turn the page into an onboarding process.

  2. Tedious every time returning users have to choose the same store: it was evident that the majority of users typically opt for a single store. This tendency was logical, as most users preferred to fulfill all their needs from one store unless specific items were unavailable there.



We focused on designing the journey for new users, but we also need to consider returning users in the process, though we wanted new users to successfully land on the Store Home Page.

In conclusion, it appeared that replacing the existing Store Listing Page with an onboarding process could be beneficial. This would have allowed users to select their default store upfront, eliminating the need for returning users to make the choice repeatedly. Additionally, the onboarding process could have been utilized to highlight the benefits of the in-store grocery experience.

Therefore, I suggested implementing an onboarding process to emphasize the core value of the in-store grocery journey and enable users to set their default store.

 

Solutions

Designing a 2-step onboarding that highlighted the core value of the in-store grocery journey, and enabled users to choose their preferred store as the default.

1st Step

At a glance, users know they can check items availability even while they are at home

2nd Step

Users no longer feared selecting the wrong store because of similar names, knowing they could change their choice later.

After onboarding

Users had the flexibility to modify their default store whenever they chose. By accessing the map feature, users could more effectively determine the best store to set as their default.

Before

 
 

After

Refine Design based on customer insights

The above design was refined following a usability test involving 6 participants. A researcher facilitated the testing while I observed and made iterative improvements to the design.

 

Results

~28%

increased of users who landed on the Store Home Screen

 

Summary & learning

Considering the journeys of both new and returning users results in a more enduring and comprehensive design approach.

Initially, our focus was heavily on the first-time user experience, driven by concerns over the 50% drop-off rate at the Store Listing Screen. However, we later utilized the data to guide us toward a more comprehensive perspective, enabling the development of a more inclusive experience for both new and returning users.

 

What could have done better?

We are not able to know if the % of users to correctly understand the Grocery in-store tile increased

Since the research resource was already full and we did not plan it in previous quarter to have a quantitative measurement for this new journey.

Setting up regular UX measurement: My main insight is that to consistently demonstrate an enhanced user experience, particularly for new businesses or journeys, it's essential to establish routine UX measurements, like surveys. This approach enables us to quantify aspects of the experience that cannot be monitored through the app or platform.