top of page

Opt /

A mobile app that helps consumers make smarter and more sustainable grocery choices while factoring in custom constraints to aid selection from options viable for them.

SKILLS :

UI/ UX

Human-Centered Design

System Thinking

User Research 

Iterative Ideating

Wireframing

User Testing

Interactive Prototyping (Figma)

Design System

TYPE:

Individual

TIMELINE:

5 weeks

Anchor 1
BACKGROUND RESEARCH + INSIGHTS

This project began with an investigation into the factors that influence one's ability to control adulterants in their food.

The full scope and breadth of this research can be found here, but here are some key highlights:

Part 1: Identifying the 'What'

A survey was sent out to the general consumer to get a baseline understanding of their food habits, how sustainable their food choices were, and how informed they were about what went into the food they were eating.

Here is the demographic distribution of the 92 people who were surveyed:

demographic.PNG
Key findings:
1
Attention to Food Labels and Awareness of Adulterants
2
Attention to Source of Produce
3
Attention to Type of Produce
Although 68% of the survey sample made their own food, only 23% always checked their food labels for adulterants.
Additionally, while many individuals were aware of the use of hormones and steroids, there was a lack of knowledge of other sources of adulteration.
50% of the survey sample did not know the source of thier produce, and only 18% were eating local.

 
Only 12% of the survey sample made a conscious decision about the type of produce they were buying (eg. organic, non-organic).
Additionally, age played a large role in independence in food making, and hence ability to make grocery choices.
Part 2: Understanding the 'Why'
Numerous in-depth consumer interviews were then conducted to understand why and how people were making these food choices.
Questions about their dietary habits, choice of brand/suppliers and concerns they had with the products they consumed were asked, and an activity analysis was conducted. 
Key findings:
1
Living location drastically impacts one’s potential to choose their food suppliers due to availability restrictions.
2
Trust and reliability play a large role in choosing product suppliers.
3
Budget and priorities become limiting factors in making the 'smartest' choice.
4

Difficulty in decoding nutrition labels becomes an inhibitor to reading them.

5

Product familiarity inhibits consumers from checking their nutrition labels.

IDENTIFYING THE PROBLEM
Anchor 2
Following from this research, it was discovered that:
While increased awareness and education about food adulterants is extremely important to help consumers make more informed, sustainable food choices, there are many more factors sometimes beyond their control that affect one's ability to make such change (eg. locality, producers available at stores most convenient for you to reach, budget, varying priorities, age, etc.).

1

One's curiosity to look beyond the products they know and use is directly proportional to their awareness.

2

Therefore, my project objective became:
How might we mobilize consumers to make more informed food purchasing and consumption choices within their capacity, by increasing their awareness of the production, ingredients, and processing of the food they buy?
If consumers act on greater awareness about what goes on behind the food they are eating, producers will be forced to produce more ethically and sustainably to continue to stay relevant in the market.
THE DESIGN SOLUTION

Stay beyond the download.

The user is shown three info screens the first time they open this app to draw their attention to its value proposition and incentivize acquired users to become active users.

1. ONBOARDING
Anchor 3

Empowering a better choice by enabling awareness.

The user can scan the barcode or take a picture of any grocery item to pull up an info card for that product. When location sharing is on, this is cross-referenced with the digital store inventory for accuracy.

This info card provides:

  • An objective aggregate product rank that factors in the item's ingredients, adulterants, nutrition, and sustainability.

  • An alert if the product contains any ingredients that contravene the user's personal preferences ( see feature 7 ).

  • A reminder of the user's previous opinion of that product if it was scanned before (see feature 4 ).

2. HOME + PRODUCT SCAN

Making the incomprehensible comprehensible.

 

De-mistifying the ingredients list, marketing tactics, the nutrition label, and adulterants through more digestible forms and charts.

 

Evaluating the sustainability of the product's production, processing, and distribution.

3. PRODUCT INFO CARDS

Comparative choices made easy.

 

Scanned products are recorded and sorted into categorial rankings, enabling users to revisit and compare products with their ranks side by side before making buying decisions.

From here, the user can choose to record their own opinion of that product by adding and saving a personal rank.

4. PRODUCT RANKING + SAVING

Search from one place.

An alternative to physically scanning/photographing products.

With powerful search filters, the user can discover and learn about products that fit their restrictions, preferences, and needs, in or out of the store.

5. PRODUCT SEARCH

Location resources, located.

The user can find stores around them that hold the specific type of product they are looking for.

6. STORE LOCATOR
6. STORE LOCATOR

An experience that accounts for you.

The user can add ingredients they want to avoid, allergens, dietary restrictions, and medical conditions to be alerted if the products they scan or search for contain anything that contravenes these.

This feature also provides a quick search guide for the thousands of ambiguous ingredients out there.

7. ADD PREFERENCES
ALTERNATE USER SCENARIOS

If the user has location sharing turned on and is in-store:

Capture2.JPG

If the user has location sharing turned on and is out of store:

Capture3.JPG

If the user has location sharing turned off:

Capture4.JPG

This app can be used without signing in / creating an account, however, the user will be reminded to do so in

places it is required to access full app functionality:

Capture6.JPG
Capture7.JPG

If a product without a barcode is photographed / the barcode is not recognized, the user will be prompted to add any additional information available to them:

Capture1.JPG
Capture9.JPG
Capture8.JPG

Monthly timed reminder:

Capture5.JPG
THE PROCESS :
IDEATION

Thinking through potential app features and exploring their integration into different user flows.

Anchor 4
2022-05-17_044289-5_edited_edited.jpg
2022-06-05_093859-2_2.jpg
2022-06-05_093859_2.jpg

Prioritizing functionalities that were most effective in delivering my product objectives, I resolved my ideas into a rough user flow:

2022-06-05_092913-5-01_2.jpeg
Anchor 5
ITERATING + USER TESTING

This project was developed in three main stages:

Wireframes

1: Wireframes

Food Scanner (Copy) (2)_edited.jpg

2: Lo-Fi Prototype: Annotated Frames + Developing the UI

i3.PNG

3: Hi-Fi Prototype: Refining the UI +

Prototyping the UX

These iterative stages progressed from three rounds of user testing with individuals of different ages, genders, grocery buying priorities, and constraints that emphasized a process of simplifying and distilling my ideas. This was pivotal to ensure my product caters to the user's needs most effectively.

Here are a few highlights of the user testing and development process:

user testing infographics.png
1. Decluttering the Home Screen
3. Distilling Scan Records

Problem:

Users found a progress tracker on the home screen ineffective in motivating sustainable habits (its purpose). Their inhibiting constraints would always hold precedence over a superficial reward system.

My Solution:

This feature is replaced with a curiosity instigator that refocused attention on the home screen to its primary function: initiating product scanning.

Stage 1

Stage 3

Stage 1

Stage 3

Stage 1

Stage 2

2. Changing the Personal Ranking System

Problem:

Making physical responses while juggling groceries was highly inconvenient and became an unnecessary interruption in a touch-based user flow. Also, a yes/no type rank was not granular enough.

My Solution:

This is replaced with a simple star rating system.

Problem:

This system required the user to log information they wouldn't have time for during usually rushed grocery runs. Multiple information logs made clutter.

My Solution:

Product saving is optional and smarter search and filter capability simplifies the user flow. 

user testing infographics.png
4. Accounting for Non-Linear Navigation

Stage 2

Stage 3

Stage 3

Problem:

How can the user revisit a product's info card?

How can products found through search be added to the categorial rankings tab?

My Solution:

An arrow beside each product in the categorial rankings tab enables adding a personal rank.

Clicking on the product now alternatively opens its info card. An 'add to rankings' option appears on info cards accessed through product search.

Quakers Oatmeal.png
user testing infographics.png

All Stage 3

5. Adding + Clarifying Personalization

Problem:

The users found it difficult to differentiate whether the product's objective rank or their personal rank was being displayed.

My Solution:

-All items resulting from the user's custom input appear in the same brighter green.

-Personalization is added to the 'add preferences' tab by greeting the user, and in the 'store locator' functionality by marking the user's location and store's relative distances.

Simply Chex.png
THE VISUAL DESIGN SYSTEM
Anchor 6

Typeface:

Clean and easy to read.

Visual Hierarchies and Ques:

Enabled with text size, weight, and italicization.

Iconography:

A consistent minimalistic line style with rounded ends and corners.

Color Palette: 

Subtle, monochromatic, and reiterates sustainable branding.

App Branding:

Short and snappy.

Frame 8654.png
bottom of page