Wenjing Xie
UX designer

Grocery shopping made easy with better UX

UX Conceptual Design Case Study

Image alt tag

What is the problem?

Grocery shopping is the first step in providing safe and healthy foods. It is essential to know how to select the products, especially for those who have dietary requirements, such as being vegetarian or having a food intolerance. According to previous research, "misleading food labels and packaging may trick customers into thinking the products they buy are good for them".

Why do we need to solve this problem?

Customers with dietary requirements have to spend more time reading food labels. Some people don’t read food labels or have little knowledge about what they are eating, which will cause health issues, such as food allergy, obesity and diabetes. Also, those customers have a smaller range of products to choose from.

The Research
Grocery shopping made easy

Qualitative User Interviews

When framing this UX problem, I was going to focus on one diet, such as being vegan, then I realised the point was to improve customer’s experience no matter what the dietary requirements were. The research goal was to put myself in the customer’s shoes. At the discovery phase of my project, I conducted qualitative user interviews with 3 participants.

Desk Research

I also did desk research on the following area:

  • What the dietary requirements are

  • How those requirements affect the grocery shopping experience

  • How sections are set up in grocery stores and supermarkets

  • Food packaging & Food labelling

Visual Insights

Visualisation helps communicate the ideas

As a UX designer, my role is to identify the needs of the users through visual communication tools and come up with insights into what a good experience should be.  The purpose is to visualise the user’s perspective as much as possible and putting my own biases on the side.

Empathy Mapping

By putting research notes into similar groups, I was able to create connections and find patterns and themes in the data, such as common pain points and behaviours. The next step was to understand the user’s mindset and build empathy for them. I found customers with more food dietary requirements are more cautious about the food products while others are less careful. In this case, I created different empathy maps for these two user types.

Grocery shopping made easy


During the interviews, all participants said they had a shopping list with them during grocery shopping. Some of them would use Google to research while in the supermarket and some use an app to check information about food products. I created this visualisation to show the process of a vegan customer trying to buy some chocolate from the supermarket.

Scenario: Jimmy is a vegan customer. He always has the grocery shopping list on his phone. One day, he was at the supermarket looking for some chocolate at the vegan section, and he didn’t find any. He went to the chocolate section but he wasn’t sure which product would be vegan friendly, and there was no staff to ask (he didn’t think any staff would know about it). He had to use Google to find out.

Ideation Workshop
Grocery shopping made easy

Ideation Workshop

I facilitated my first workshop with 8 fellow UX design students to explore a variety of solutions and develop them into design concepts. I followed the following structure to organise the workshop:

Immerse — Walk through the research findings and insights to stimulate thinking and spark innovation.

Empathise — Put everyone in the shoes of the user to understand their problems and needs.

Ideate — Generate as many ideas (both digital and physical solutions) as possible.

Focus — Refine and focus thinking to provide a clear direction, share and talk through ideas, and sketch the concepts.

Sketches from the workshop

Design Concepts

Based on the ideas generated from the workshop, I created these sketches and low fidelity wireframes. The main purpose was to present the outcome of the research and to visualise the potential solutions.

Grocery shopping made easy

Concept 1: Smart Trolley

Smart Trolley is the creative concept that each trolley has a scanner attachment installed and a large touch screen. The customer scans his/her loyalty card to log in and chooses the dietary preferences (only need to set up preferences for the first time), then he/she can enjoy the hassle-free grocery shopping. When the customer put a product in the trolley, if it doesn’t fit the dietary requirements, the silicon handle of the trolley will vibrate and there will be a notification displayed on the screen. The customer can also check information about the products with the touch screen.

Concept 2: GrocARy

GrocARy is the AR scanner app with an easy-capture feature. After the user has set up the dietary preferences, the scanner identifies food packages and tells the customer what he/she can eat (indicated by colours). User can use it while browsing in the supermarket or to check detailed information about the products. The wireframes show how to check detailed information (raw ingredients, nutritional and dietary information) to ensure safe and healthy grocery shopping. Items can be saved to ‘My List’, which can be an option for future purchases.

Design limitations: These design concepts have constraints because of the project timeline and the user research scope. The target audience would be the types of users I have conducted interviews with. 

Thank you for reading :)