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
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:
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
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
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:
If the user has location sharing turned on and is out of store:
If the user has location sharing turned off:
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:
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:
Monthly timed reminder:
THE PROCESS :
IDEATION
Thinking through potential app features and exploring their integration into different user flows.
Prioritizing functionalities that were most effective in delivering my product objectives, I resolved my ideas into a rough user flow:
ITERATING + USER TESTING
This project was developed in three main stages:
1: Wireframes
%20(2)_edited.jpg)
2: Lo-Fi Prototype: Annotated Frames + Developing the UI
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:
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.
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.
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.
THE VISUAL DESIGN SYSTEM
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.
