How might personalised food labels improve health?


Social Innovation and XR Design

To make nutritional labels "friendlier". Today's nutritional labels are outdated, impersonal, and confusing. It's hasn't changed much since 1994, and there's oppurtuninties for updates.

A personalise food label that leverages mobile and AR technology to help people make healthier food decisions.

My Team

Katie Q. Chen
Ethan Ye
Sherry Wu


2 Months
Oct-Nov 2019


After Effects
Spark AR

My Role

UX and Interaction Design
AR Prototyping
Video Production

Concept Video

Opportunity Space

“I don’t know what these numbers mean for my body!”

Since 1994, these labels were impersonal.

Nutritional labels hasn't changed much visually since its birth in 1994. While there were slight content changes over the years, the focus was always on the average "2,000 calories diet" that few seem to follow.

Original 1994 Label

Today's Label

Product Feature


Your food label, just for you

A label that understands your dietary goals, restrictions, and preferences.

We created an onboarding experience that takes in data about a people's allergies, dietary goals, restrictions, etc. to generate personalized food labels. People can drag and modify their labels to best suit their concerns. As new research is gathered, this modular design also allows room for new component to be added.


Easily pin & compare what you care about

“Too much...can’t compare!”

There's hidden labor in choosing. Different people have different priorities. Some people focus on price, while other focus on quality. By using AR we make it easy to scan, pin, and compare different products based on specifically your body and what you care about.

This interaction is an enhancement of an already existing behavior of health-concerned people taking photos of nutritional labels, saving them, and comparing them on their phones' photo app.


Show when and where your food came from.

“Where does it come from?”

Lack of information leads to lack of trust. We found the time spent comparing multiple products to be another major painpoint: With the growing number of consumer products.

Painpoint 3

“Where does it come from?”

Lack of information leads to lack of trust

While many people want to eat healthy, few people know how and where their is grown. This lack of knowledge create mistrust between food producers and food consumers.

Our Solution

Repair the trust, tell the Wholestory.

Data Provenance, and Visual Storytelling

Brands that want to stand out as "healthy" need to to tell an honest story of where their food is grown, when its harvest, and how its processed. Knowing where, when, and how is why consumers will choose one brand over another.

Tracing how this Wild Albacore Family Tuna is made.


Journey Mapping and Shadowing

What's the experience of grocery shopping?

There are many, but they all share the same problem

We shadowed five people and also engaged in co-creating a journey map with them in three different groceries stores at various price points in Pittsburgh. We learnt that there were many types of grocery shopping experience. Some go to browse, while others hunt. But what was common was that people are overwhelmed with choices and struggled to compare different products.

Costumer journey map.

Stakeholder Mapping

Who is involved in groceries?

We mapped out who is involved in this experience and where our interaction existed in the wider system.

Positioning where and how our app interacts with wider system.

Personas and Scoping

Identifying who to help

For the sake of limited time on the project, we decided to narrow down our scope and focus on a few notable label attributes that Whole Foods shoppers in particular would prioritize. Through our research we found Whole Foods shoppers to be more conscientious and selective of their food choices which falls in line with the Whole Foods target demographic.

Key Insight

Nutrition labels are designed for the "average human".

You're not average.

Your food labels shouldn't be average.

Design Process

AR Interaction Design

When should an interaction not be flat?

While there's a "cool factor" for using AR, we wanted to make sure that picked the best interactions for the shopper's experience. This means no gimmick. Our early interactive prototype actually had the comparison floating in 3D space, but through testing we found that it was actually hurting the comparison rather than helping. On the other hand, people were bored and not engaged when the traceability of the product was flat and text-based.

Low-fi early card prototype.

Mid-fi video prototype.

High-fi video prototype in After Effects.

High-Fi interactive prototype in Spark AR.

Interface Label Design System

Modular and Glanceable

From ideation, we moved into the design phase where we developed a label system that is modular and glanceable. Full-width and half-width information allow people to customise and prioritise what matters to them. Tags was used to allow people to easily glance and indenrifty products that are "good" or "bad" for their diet.

Modules for personalisation and tags for glancability.

High fideltity interaction mock up

Video Prototyping

Collaborative Storyboarding

After establishing the main structure of: big picture problem, demo, and conclusion we collaboratively storyboarded the video. With the storyboard in place, the script and assets was further refined.

Yes, we pinned a bag of chips on our storyboard to emphasise the problem of the "average diet"


Add value by making information personal

In world where there's too much information, relevant and personalise information is what adds value an interaction.

Boldly prototype emerging tech

Emerging experience with new tech are digital-physical hybrids. To prototype these novel experience, we need to be open-minded to new ways of envisioning it with both analog and digital tools.

Next Case Study: Resmed Lumo