SafeEats: Elimination diet made easy

A smart food and symptoms logging tool that helps you better avoid allergens and intolerances

Collaborators

Ines Acosta​

Sean Perryman

Brandon Kim

Role

UX Designer

Prototyping​ specialist

Date

Aug 2020 - Dec 2020

Tools Used

Figma

Qualtrics

Excel

Problem Space

Easy access to accurate nutritional information is growing need for many Americans. According to a 2014 study, over 60% of US households contained at least one member monitoring or limiting consumption of at least one macronutrient or ingredient. Our team aimed to understand the problem space and design a product for users with dietary restrictions.

Our Approach

Our design process and decision makings are firmly rooted in user research. Surveys and interviews are used to direct our problem definition and generate design requirements. User feedback sessions are conducted in every iterative design cycle. 

My Contribution

I was involved in every stage of the project. During research, I designed the survey in Qualtrics and analyzed and visualized results in Excel.  I also conducted two semi-structured interviews. At the prototyping stage, I led the design of the prototype and transformed our early wireframes into a prototype in Figma. I was also involved in prototype feedback sessions and devised solutions to address problems revealed.

Note: some content and layout of this page are not finalized.

Home - default.jpg
/ Background

 

Easy and efficient access to accurate nutritional information is growing need for many Americans. According to a 2014 study (“Households with Dietary Restrictions, 2014), over 60% of US households contained at least one member monitoring or limiting consumption of at least one macronutrient or ingredient. Our team aimed to understand the problem space and design a product for users with dietary restrictions.

User

Research

Our user-centered design process

User

Feedback

User

Feedback

Usability

Testing

Literature

Review

Design

Implications

Brainstorm

Ideas

Mockup:

Sketches

Mockup:

Wireframes

Mockup:

Prototype

 
/ User Research

// Research Problem Directions

After background research, our team came up with 4 general themes of questions for users with dietary restrictions:

  1. Current process for determining food safety

  2. Usage of existing systems

  3. Need for educational content on dietary restriction practices

  4. Demand and risk tolerance level for new food

// Research Methods

 

Semi-structured Interviews

We conducted eight video interview sessions with target users. Our participants have ages between 22 and 50. Their dietary restriction types include allergies, intolerances, vegetarian/vegan, and religious.

See our full semi-structured question script here.

Fun time: user interviews!

Qualtrics survey blocking logic

Screen Shot 2020-10-27 at 14.05.11.jpg

Joining an online support group

Surveys

We reached out to a wider user population through online surveys. Our primary goal was to answer two questions: "what problems/contexts do our users find challenging to meet their restrictions” and "how do those challenges differ among users with different restriction types". These questions would help us narrow down our user group and problem space, giving us a specific design direction. We designed the survey in Qualtrics and distributed the survey via social media platforms. We also reached out to online support communities for dietary restrictions for more targeted users.

See the full survey here.

Contextual Inquiry

We conducted with one in-person contextual inquiry. We were primarily interested in the process by which someone with complex dietary restrictions shops in a grocery store. We payed close attention to how they utilize food labels when determining what to purchase. The data collected from this inquiry would facilitate the creation of a task analysis for the process of using food labels and packaging to determine what was safe to eat.

// Result Analysis

 

Affinity map

We held interpretation sessions after each interview. Interpretation notes were pooled into a spreadsheet together with questions and design ideas. Those sessions resulted in over 200 notes. We imported them into a Miro board and created an Affinity Map. The process helped use condense the data into seven major categories of user needs. 

affinity map.jpg

Creating an affinity map in Miro

Various chart types used

Survey data analysis and visualization

We first cleaned the survey data ​by removing any abnormal responses with extra short response times. Results were recoded and conditionally formatted in Excel. Visual inspection and basic statistical measures such as mode, quartiles were adopted. We made various charts to compare inter-group (different restriction types) differences in responses.

Conditional formatting for visual inspection

Task analysis for elimination diet

Task analysis

We used task analyses to break down common tasks our users must go through. This method helps us discover potential subtasks that are not addressed by existing tools.

On the left is a task analysis for Elimination Diet, a diet where users test their body’s reactions to certain ingredients by adding them to their safe diet one-by-one. This is a common process many users with food allergies go through voluntarily or under doctors' suggestions.

// Research Findings

From the result analysis, we summarized the following eight user pain​ points:

  1. Determining whether food fits within one’s dietary restriction is stressful. This is especially true for people with food allergies and intolerances. It can take years for them to feel comfortable selecting food.

  2. Food Packaging and labeling can be confusing and lacks information. Jargon is a commonly mentioned source of confusion. The actual amount of ingredient is a commonly missing piece of information.

  3. Some users learned about some of their allergens using  self-devised testing strategies similar to an Elimination Diet.

  4. Restaurants pose a difficult barrier for people to navigate their dietary restrictions. 

  5. Taste and price sometimes out-weight dietary restrictions for users without life threatening restrictions during decision making process.

  6. Desires and anxieties about exploring new foods.

  7. Youtube is a popular source of information for vegan users. Some allergy users would get manufacturer information via customer hotlines or websites.

 
/ Identifying Needs

// Problem Statement

​After reviewing our team capabilities and environmental limitations, we proceeded with the specific problem space:

"Help users with allergies and intolerances improve food product selection process by helping them better understand their conditions and offering product information relevant to their restrictions."

// User Needs and Design Implications

User Needs

They need a system that allows them to easily track and manage their restrictions.

They need to feel comfortable with trying new foods and recipes.  

They need food labels that are easier to understand and have more information on the ingredient proportions, taste, quality, and explanation of ingredient jargons.

 

They need useful and accurate information about their dietary restrictions that includes byproducts and products that are safe to eat.

They need to track their food intake and test for any adverse reactions to determine any allergies or intolerances.  

Design Implications (Our product should...)

Build trust with the user by providing accurate and helpful information. Informs the user on whether a new product or food may cause an adverse physiological reaction

Help the user discover new recipes and food products that won’t cause adverse reactions. Suggest safe alternatives when needed.

Include product pages that:

  • Extract information relevant to the user's restriction profile.

  • Smartly suggest ingredient proportion based on product type.

  • Show crowdsourced user reviews on the taste or quality of the item.

  • Show users additional information not found in a common food packaging, for example, changes in a manufacturer's cross-contamination practices

Provide users with specific pages dedicated to useful and accurate information about their dietary restrictions that include:

  • Risk level for common ingredients and potential symptoms

  • Compound ingredients that may contain potential allergens

  • List of related information sources

Allow users to track their food and symptoms to products they may have tried. This can include adding specific products they found through the app and tracking how the food made them feel.

// User Persona

// Usage Case Storyboard

 
/ Brainstorming and Design

We did a group brainstorming session via a "wall walk", during which each team member generated and posted idea notes onto related section of the affinity map. We then discuss ideas one by one, building connections and condensing them into "systems of features". We finally came up with four major systems for our mobile app:

  1. A user dietary restriction profile that accommodates users who are unclear about their full restriction list. The profile should also incorporate the idea of consumption threshold

  2. A mobile implementation of the Elimination Diet process that features food and symptoms tracking. The result will update user's dietary restriction profile accordingly

  3. An ingredient detector that reports product risks based on user profile

  4. A product search filter that helps users to select food suitable for their user profile

Screen Shot 2020-10-27 at 10.35.35.jpg

Design ideas connected to form systems of features

How four systems of features interact to enhance the service

/ Design Sketches
 
/ Wireframes
 
/ User Feedback Session

We conducted feedback sessions with users after sketches and wireframes. We pooled interview results into to create design improvements. See the full list of user feedback session interview questions here

// Design critique sessions with users

feedback.jpg

Conducting a user feedback session

A snippet of some feedback session notes

// Design critique sessions with users

You can try out the prototype here.

Screen Shot 2021-01-26 at 13.49.35.png
Screen Shot 2021-01-26 at 13.50.08.png
 
/ An Updated Prototype
// Onboarding Dietary Threshold Test

Targeted and generic 

SafeEats is designed particularly for people with allergies and intolerances but can also be useful for people with other dietary restrictions or self imposed restrictions.

Hover mouse over the video to play

// Home Page and Elimination Diet

Visualized logs for users to explore 

Food and symptoms logs are visualized into a daily chart and a monthly overview. Users can tap on a data point to see the food consumption and iterate through any following symptoms possibly related to the food.

// Logging Food and Symptoms

Quick access to log

The logging button is highlighted and placed at the center of tab bar. We would like the logging function to be as visible as possible to encourage users not to miss a record. 

// Food Packaging Scanner

Multilingual support

Language translation allows users to keep informed about product purchases when traveling abroad or shopping imported goods.

// Profile and Sharing

Friend profiles

For families or college students living together, sharing friend profiles allows easy group meal planning. But ultimately every user can reject a friendship invitation and hide their profile when needed.

/ Design Evolution Highlights
 
// Food and symptoms logging system

Research to Brainstorming

We found that some users determined their allergens through a process similar to Elimination Diet. We proposed a tracking system for logging food and symptoms

Brainstorming to Sketches

The initially designed logging process is based on a regular schedule of three meals a day. Time of consumption will be recorded first, followed by food consumption and post consumption feeling.

Food tracker.jpg

Logging food and symptoms initiated by users

Food tracker reminder.jpg

Logging symptoms reminded some time after consumption 

Sketches Feedbacks

  1. The app didn’t allow users to log the time they felt the symptoms,  and the types of symptoms they felt (as opposed to how they felt).

  2. Users prefer to track food and symptoms separately (since it doesn’t always happen at the same time) 

  3. Quickly record food and symptoms.

Sketches to Wireframes

Feedbacks can be summarized into three primary changes: flexibility of use cases, efficiency of recording, and accessibility of recorded data. 

The design allows recording every possible time point while preserving the quick selection convenient button for "just now".

Multimodal input and quick amount selection are accompanied by edge case handling: custom amount and custom product. Since logging is a daily task, we  aim to optimize the experience for veteran users.

The food label scanner feature is borrowed here for the convenience of input. This has good internal consistency with the scanner function for ingredients detector.

Though separated from symptoms logging, food logging page still ends with a quick portal to symptoms tracking.

Users can quickly enter a list of symptoms from common food intolerance/allergy  reactions.

Tracking - Symptom details (2).png

The design allows recording every possible time point while preserving the quick selection convenient button for "just now".

Daily data are visualized and monthly overview is also available. 

Wireframes Feedbacks

  1. Users would like to record more information on demand about nuances in symptoms, for example, the duration.

  2. The unit quantity shown on each button is different based on the food type. We designed them in order to provide convenient food input methods, but they do not follow users’ mental model very well.

  3. Users would like to see the data they input into the tracker better visualized, either to determine their own conclusions on their diets or to communicate their diet patterns with others. 

  4. Some users find it more intuitive to say "I ate this at some time" instead of "At some time, I ate this".

Wireframes to Prototype and Beyond

Tidy up interfaces with logic and reimagine the alternatives.

E-diet - Instruction.png
Frame 17.png

A clean and straightforward flow of process may work better for most users. Convenience is important but may come with tradeoffs such as information overload or unfamiliar design patterns.

Home - monthly.png
Frame 2.png

We enhanced the affordance  for interactivityby applying shadows to the chart elements. 

Popup details are available for users to explore potentially correlated records. 

Home - monthly.png

The clear delineation of tab bar, popup page sheet, and navigation bar helps convey information hierarchy.

Why not try ...

Calendar

+

When2Meet

=?

For the prototype, we conducted heuristic evaluations and quantitative usability testings.