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.

My Role

I was the sole UX designer, conducting user research, doing data analysis and coming up with design concepts.

Timeline

3 weeks (Nov - Dec 2020) along with other projects going on.

Tools

Miro, Figma, Procreate (iPad), Pen and paper

The Research

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.

Storyboard

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

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 on different 'how might we' questions.

  1. How might we make the detailed information of food products easy and quick to read to people with dietary requirements?

  2. How might we arrange the supermarket sections to make it easier for people with dietary requirements?

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

Sketches from the workshop

Homemade red velvet cupcakes

Homemade red velvet cupcakes

Key Takeaways

It was a fantastic first time organising and facilitating a design workshop. During the workshop, participants found it difficult to think of practical ways to rearrange the supermarket shelves. What could I have done better in this situation next time?

  • Always have a Plan B.

  • Don't get stuck. Move on to the next activity.

It was good practice for me to deal with unexpected challenges and not limit participants' innovative thinking.

Also, the pastry skills became handy when I had to prepare treats for 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. 

Retrospective

I had a lot of fun and learned so much from this UX project, and I enjoyed working with constraints. I wanted to try new research methods, such as storyboard, user journey map and especially to play the role of a workshop facilitator. Within the timeline, I knew I could only interview a few participants so that I could focus more on my first ideation workshop. It was a good trial, and I would like to run more workshops with future projects. Although the research scope was small, I still enjoyed the process of analysing data by using different methods. I barely sketched in my whole life, and I tried my best to visualise the ideas and insights.

I should have interviewed a few more people and created a survey to gather more data. Also, I wish I could have done user-testing to identify flaws and revise the designs. Until next time!

Thank you for reading :)

References

Food icons retrieved from https://thenounproject.com/

Food labels may be designed to fool. (2017, April 20). Retrieved from https://www.stuff.co.nz/business/91735074/heres-how-to-get-to-the-truth-about-what-you-eat

Iconfinder retrieved from https://miro.com/marketplace/iconfinder/

Unsplash. (2018, April 18). Photo by Kyle Johnson on Unsplash. Retrieved from https://unsplash.com/photos/4y9_Du9mZqI