Designing for grocery shopping in the “new normal” — a UX case study

Solving COVID-19 related grocery shopping problems. A retrospective piece on my first-ever design project — The project was carried out based on a fictional brief, as part of a 6-day Introduction to User Experience course and I worked as part of a four-person team.

Fong Yi Hao
UX Collective

--

A long line of people waiting to check out at Fairprice grocery store
Photo By: Ooi Boon Keong

Due to the COVID-19 pandemic, our habit-filled lives have changed drastically; work has moved to telecommuting, leaving our homes have become health risks for ourselves and those we live with and remaining physically distant from others has become a quintessential safety precaution.

The unprecedented times have in-turn caused problems for major supermarket retailers, namely the occurrence of panic buying, large crowds and long queues due to increased demand for groceries and safe-distancing measures.

Our Task

Fairprice is the largest supermarket chain in Singapore, with over 200 outlets. Identify, prioritize and solve the problems faced by Fairprice due to the COVID-19 pandemic.

Going into the project, our main goals were to:

1. Identify and rectify the shoppers’ most prevalent pain points

2. Improve the grocery shopping experience in a way that goes beyond the bounds of COVID-19 circumstances

Based on news reports, social media posts and first-hand experiences we had an idea of the kinds of problems shoppers faced during this COVID-19 pandemic. However, we did not have a clear idea of which of those problems to solve.

Research

To have a clearer idea of the customers’ shopping experiences, we decided to carry out qualitative research. We conducted 8 user interviews with a mix of young adults and homemakers about their experiences.

Our main objectives were to:

  • Find out more about their current shopping habits
  • Uncover some of the pleasures and pain points they faced
  • Whether these pain points were purely generated from the COVID-19 situation

Our Findings

Through affinity mapping, we extracted insights from our interviews and grouped them by common themes (essences).

Visual for the affinity mapping process; sticky notes arranged according to common themes from user interviews
Each colour of sticky-note represents insights from a particular interviewee
  1. The in-store experience is irreplaceable at the moment (due to, the autonomy to pick and choose fresh products, the immediacy of getting the items and the sheer enjoyment of physically visiting the stores)
  2. Crowds are a big pain point (long queues before entering, at the cashier and crowding within aisles and while getting products)
  3. Crowds during peak hours have always been an issue, and it has only been highlighted by the COVID-19 situation

“I’ll use online shopping for pre-packaged things like rice and chilli sauce and necessities like toilet paper. Because you can’t choose the fresh items they give you, you just have to accept it!” —Housewife, 50s

User Journey Map

User journey map of a typical grocery shopper
User journey mapping helped us understand the problem from the user’s perspective and identify opportunities for potential solutions.

“Wah, I really hate it when five people are waiting at the fresh meats fridge just for one person who’s slowly choosing her items.” — Student, 21

Our Focus

Our research results helped us to hone in on the crux of the current pain points in the consumer experience. Currently having no substitute for the in-store experience actually compounds the problem of crowding at the stores. Thus, we decided to focus on reducing crowds within the stores.

We re-framed the challenge as follows:

How might we design a mobile app feature that reduces crowds to improve the in-store grocery shopping experience at Fairprice outlets.

The decision to integrate this feature with the existing Fairprice app serves two purposes:

  1. Fairprice customers do not have to download a separate application just for this feature which can be considered to be “too much work” and ultimately reduce feature usage.
  2. Users are more likely to consider using the delivery services (the current main function of the Fairprice mobile application) upon finding out that the outlets are too crowded for their liking

Furthermore, we translated some of the key insights from our interview into tangible design directions:

Visual of how each key insight translates into a design direction

The Design

In the age of information for a fast-paced and kiasu (local term for risk-averse) society like Singapore, we decided that employing indicators to serve as auto-regulators would be the optimal direction. Auto-regulation of crowds through increasing information available to the users prevents the need to implement large and potentially costly logistical changes.

8 minutes, 8 sketches

We kicked off the design process by doing a crazy eights exercise — individually coming up with 8 low-fi initial ideas.

An A4 sized paper divided into 8 parts with a rough sketch on each segment
My first 8 sketches

We came together and voted on the frames we liked the most before putting together a design

Mid-Fi Mock-up

Six mid-fi wireframes for the prototype
Due to COVID-19 restrictions, we collaborated on a Miro (online) board

Final Product

After conducting some usability testing, we made the following adjustments before finally arriving at our final product:

  • Removed the “live camera” function users found redundant
  • Emphasized estimated queue time since users found it to be the most useful piece of information
  • Reorganized the “more details” page (page 2 in mid-fi mock-up) into separate pages to display information more purposefully i.e. placing crowd level indicator with nearby stores so users can easily find next best alternative if a store is crowded
Video showing how a user would navigate through the application prototype
Our final product we built collaboratively on Figma

“This is basically like a next bus timing app but for the supermarket! I confirm will use.” — Student, 22

Takeaways

Ultimately, as we move towards an increasingly digital age, I believe that a move towards a larger dependence on online grocery shopping is inevitable. Saving time and effort possibly cheaper if not similar prices are definitely desirable for modern busy shoppers.

If we had a longer time frame, we would have liked to look towards building a more refined online shopping experience that could replace or even surpass the physical shopping experience. I would also have liked to craft a cleaner user interface (being absolute beginners, I recognize that our UI design skills are severely lacking).

All in all, this was an a fun and enriching first attempt at user experience design. It made me realize the importance of evidence-based design decisions, effective collaboration, and user-centered thinking.

It’s exciting to see how design plays into the way the world is constantly shifting during this pandemic as we constantly transition into a new state of normal every few months. At the same time, these “new normals” have revealed the potential for developing a new, better grocery shopping experience altogether.

Three fists with different skin tone colours in support of diversity
The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.

--

--