NutriAR

An AR Solution that helps you to make healthier food choices in supermarkets

By Xinyuan (Rina) Zhang

Learn in 6 min 📍
INTRODCTION

Be careful!
A bottle of 5 Star health rating juice 🧃 can be as sweet as three and a half chocolate bars 🍫🍫🍫...

Unhealthy food consumption contributes to many diseases, including obesity, heart disease, type 2 diabetes, strokes, and certain cancer, which account for 70% of all global deaths.

When we attempt to make healthier food choices, misleading nutritional claims on food packaging can confuse us. Did you know that a bottle of fruit juice labeled "no added sugar" and “5-star health rating” can contain as much sugar as three and a half Kit-Kat bars? Fortunately, we have a lifesaver: the nutrition facts label.

Sometimes it seems as though every single part of packaging is trying to confuse us…there is one haven of objective information: the Nutrition Facts.

Jessie Inchauspé

Biologist

However, do you understand how to interpret a
nutrition information panel (NIP)?

While shopping, do you have the patience and time to read nutrition fact labels, compare them, and confidently say, 'I made a good choice'? NutriAR, an AR solution with interactive nutrition label features and a comparison mode, is designed to help.

Project Process

An iterative design thinking process

This project followed an iterative design thinking process. I began with secondary research to explore current technological possibilities. Based on this, I brainstormed to understand stakeholder relationships and potential user frustrations, which guided the design of user research. I analyzed user research data using an affinity mapping approach. Additionally, a brief competitive analysis was conducted to identify market gaps. These steps informed a list of design requirements to address the identified problems.

Moving to the design phase, I sketched out function connections and then created mid-fidelity prototypes in Figma. These prototypes were tested with four participants using cognitive walkthroughs. Feedback from these sessions guided iterative improvements. For a more realistic experience, I used Reality Composer to prototype the AR component. The final round of user testing focused on validating the design concept and evaluating the user experience.

User Research

9 interviews + 1 focus group + 2 hrs fieldwork observations

In order to understand the user challenges, I conducted one-on-one in-depth interviews with 9 regular shoppers (with low or medium nutritional knowledge), a focus group with 2 food science graduates, as well as a total of 2 hours on-site observations at 4 different supermarkets in Melbourne.

Research questions

Different questions are constructed for different participant groups and research methods:

Access Research Artefacts ➡️

One-on-one Interviews

🎯 How do general consumers make healthy food choice? Any strategies?
🎯 What frustrations did they encounter when trying to eat healthier?
🎯 How about their perspectives on online and offline shopping experience?

Focus-group Interviews

🎯 How do the professional define healthy diet?
🎯 How do they make food choices?
🎯 What are the major challenges faced by the general public from their perspectives?
🎯 Their suggestions on the design of potential technology to improve the situation.

On-site Observation

🎯 How do shoppers behave in supermarkets or groceries?
🎯 How do people interact with the commodities?
🎯 How is the environment of supermarkets like?
🎯 What do people look at when selecting food products?

Research Findings

Challenge with interpreting nutrition fact labels, Importance of comparison & Context of supermarket shopping

Through affinity mapping approach, 3 main findings were emerged.

Finding 1

Lack of Prior Knowledge Causes General Customers to Struggle with Interpreting Nutrition Fact Labels and Using the Information Healthily

While nutrition fact labels are an important reference for making healthy food choices, a lack of prior knowledge poses significant challenges for general consumers in effectively interpreting these panels, making healthy purchase decisions difficult. The research identified two main challenges faced by participants in interpreting nutrition information panels: 1. Uncertainty about impact of an unfamiliar nutrient on body & 2. Difficulty interpreting intake amount standards

Finding 2

Comparing as a common and important behaviour for food choice

Comparing products is a common behavior when shopping in supermarkets. From the interviews, 8 out of 9 regular shoppers stated that they compare products for various reasons, including health, taste preferences, allergies, and dietary habits. However, they mentioned that this process "takes time and effort" and that they still "make mistakes."

In addition, some consumers prioritize personal taste preferences over health considerations when making decisions. However, they also expressed a willingness to “select relatively healthier options from the ‘unhealthy’ foods.”

Finding 3

The context of supermarket shopping influences how people interact with technologies.

From on-site observations, shoppers' hands are often occupied with baskets, carts, or products, and they frequently need to handle items directly. This diminishes their motivation and willingness to use a mobile application that requires additional effort to operate while shopping. ("I will not scan every item on the shelves...it’s too time-consuming.")

Problem Statement

How to help people with minimal nutritional knowledge interpret nutrition information effectively and efficiently?

Solution

NutriAR:
An AR solution to facilitate healthier food choices

To address the identified user challenges, the concept of NutriAR is proposed. NutriAR is an AR solution compatible with both HoloLens and mobile phones, designed to assist people in making healthier food choices. Its core features include an AR nutrition label and a comparison mode.

Access Latest Prototype

Quick & Easy

Calculate health ratings and display results using icons, colors, and stars to facilitate easy and efficient information retrieval

Free up your hands

AR components, compatible with HoloLens, display relevant details based on proximity to objects

Confident decision making

Nutritional information is visualized with diagrams and explained in plain language, directly indicating what is good or bad

AR nutrition label

Struggle with interpreting nutrition information? NutriAR Integrates AI recognition technology and a comprehensive database, offering three different levels of detail to suit your needs.

Detail level 1

Icons & Most important Info for quick filtering

When you're relatively far from the shelves, the system displays simple recommend or not recommend icons to help you quickly filter options.

Detail level 2

Detailed nutritional info

As you get closer to a product, you'll unlock a more detailed view of its nutrient information. This includes an overall health rating and the levels of each nutrient, explained in plain language and diagrams that are easy for people to understand.

Detail level 3

Introduction to specific nutrient

If you want to learn more about a specific nutrient, simply click on it. A window will pop up to explain how it impacts your body, with images supporting your decision-making process.

Comparison Mode

Simply mark one food as product A and another as product B, then click "Go to Compare." A table comparing the nutrients of the two products will be displayed to help you find the food that meets your needs. You can also switch between table and diagram views according to your preference.

Shopping Cart Scanner

Data is powerful and impactful. When you're about to finish shopping, simply scan your cart, and a report will be generated regarding the healthiness of the food you selected. This encourages and guides you towards making better selections.

Hololens & Mobile Compatibility

NutriAR enhances your shopping with Hololens for hands-free, immersive AR and mobile compatibility for widespread accessibility.

Competitive Analysis

How I stand out in the market?

Magic of AR

AR integrates virtual objects into the real world. NutriAR, compatible with HoloLens, adapts product detail based on proximity, freeing your hands. The mobile version saves effort by avoiding physical interaction with items like large ice cream boxes in fridges.

Personalised suggestions & experience

Health is subjective, and individual diversity often goes unrecognized in current offerings. NutriAR addresses this gap by prioritizing your personal experience. By allowing users to input their personal data, NutriAR provides tailored suggestions and experiences based on your specific conditions and preferences.

iteration 1: design

Preliminary Sketches

Sketches were created with pencil and paper to explore how different features work and to be connected.

Mid-fidelity Prototype

Based on the sketches, mid-fidelity prototypes and some variations on certain features were created on Figma.

Iteration 1: Test

User Evaluation on Mid-fidelity Prototypes with 4 participants

To pinpoint deficiencies in user experience within the current design, evaluations were conducted with four participants using a cognitive walkthrough approach. Results were analyzed using affinity mapping, leading to corresponding modifications aimed at improvement.

View Data
Key Adjustment 1

Easier Landing & Navigation

The preference among users was clear for version A navigation (4 out of 4), as it provides "contents of each feature with texts," though "the naming can be improved" for better clarity.

Additionally, the main page was removed as it was deemed "unnecessary," enhancing ease of access for returning users to core features in supermarkets.

Key Adjustment 2

User needs on personalising AR nutrient label

During the evaluation, 2 participants expressed a desire to emphasize certain nutrients they care about most, as it would help them "quickly and effortlessly find wanted information."

In the high-fidelity prototype, users can set their preferred nutrients of interest. The AR labels then emphasize relevant information using colors, making it easier for users to identify important details at a glance.

Key Adjustment 3

Clearer comparison view

All participants identified an insufficiency on the clarity of current comparison view, expressing that “it is not direct or clear enough for me to see the differences.”

In the hi-fi prototype, information of two products are displayed within one form or diagram instead of showing them separately.

other info to note

Introduction of Context Awareness Capability

During the evaluation, questions about users' preferences regarding color modes and placement of attached AR components were raised. Participants highlighted the importance of context, such as the color of the background, in their responses. This underscores the need for the system to have context awareness capabilities.

In the high-fidelity prototype, both dark and light modes for the AR labels were created to accommodate different environmental conditions.

Iteration 2: Prototype

High-fidelity Prototypes were developed with Reality Composer for AR Components

Iteration 2: Test

User tests for validation and usability evaluation

In the second iteration, three participants were involved in evaluating the design concept and usability of the high-fidelity prototypes. They were tasked with setting up a personal profile, selecting a healthy food item, and learning about the healthiness of all products in their shopping cart. Several key findings emerged from the evaluation:

Key finding 1

“This is information I  want to know...” :)

Participants expressed positive attitudes towards the features offered by NutriAR. Specifically, regarding the AR nutritional labels, participants commented, "It's information I am interested in."

Key finding 2

Fatigue as a main downside on mobile experience

When participants tested NutriAR in a supermarket, they experienced fatigue when trying to access information about products on higher shelves. The current design requires users to continually hold their phones up to scan products. Directly displaying information on the screen may be a more practical solution for mobile cases, enhancing usability and reducing physical strain.

Key finding 3

Revealed user needs

Regarding the shopping cart report, participants showed a positive reaction to the visualized data, stating, "It’s interesting to see how many healthy or unhealthy foods I took." However, 2 participants expressed a desire for detailed information on where to find recommended foods. "You know, it’s often hard to locate a food in a supermarket - maybe some AR arrows to lead the way? That would be very helpful..."

conclusion

AR prototyping as a main challenge & Future work

The solution proposed in this project is rooted in user research, with two iterations refining the user interface for a user-friendly experience. One of the most challenging aspects has been designing the AR experience, which involves integrating the interface not only with human interaction but also with real-world objects and environments. AR prototyping, which I learned through this project, focuses on creating prototypes that simulate a realistic AR experience within tight deadlines to gather valuable user feedback. To achieve this, my final prototypes combine AR components developed using Reality Composer with user interfaces created in Figma.

There is ample room for improvement in this project. Conducting more interviews with professionals in food science, nutrition, and dietetics could enrich the design of AR nutrition labels. Understanding why certain foods receive high or low health marks would benefit from professional input. Additionally, due to time constraints, only one of the three user tests in the final iteration was conducted in a supermarket. Given the importance of context, more on-site testing is essential to gather feedback and further refine the project.

Contact

Thanks for your time
I'm happy to connect :)

Email: rinazhangx@gmail.com
LinkedIn: Xinyuan (Rina) Zhang's Profile