DineSafe: Finding restaurants that serve you!

CSE 440 Staff
5 min readDec 12, 2023

--

Team

Andrew Darmawan Tjahjadi: Usability testing computer, sketching, prototyping, documentation

Pahn Yenbut: Usability testing facilitator, sketching, prototyping, documentation

Robert Snow: Usability testing notetaker, sketching, contacting interviewees

Problem Overview

Food sensitive individuals (those with food allergies and/or intolerances) and those with dietary restrictions sometimes experience challenges finding appropriate food, especially when they are traveling in unfamiliar places. The difficulty stems from a lack of access to information about food ingredients and potential cross-contamination with harmful foods. Furthermore, our surveys and interviews with food sensitive people found that food sensitive individuals experienced the most difficulty at restaurants and take-out stores. Therefore, we narrowed down the issue to focus on food sensitive individuals’ access to dineries and information about the ingredients used.

Solution

We propose DineSafe, a publicly available kiosk designed to help individuals with food sensitivities. DineSafe empowers anyone on the go to discover compatible dining options at restaurants and take-out shops in their immediate local area, allowing them a safe food experience. The kiosk would be available in concentrated urban areas where people are likely to pass by and use if interested. They can achieve this by filtering out specific ingredients and finding what restaurants and foods work for them. Our vision is to make finding food sensitive options away from home or the grocery store a less daunting aspect of daily life.

Paper Prototypes & Usability Tests

Initial Paper Prototype

Task #1: User confirms ingredients of dish at restaurant

The user uses the DineSafe kiosk in a restaurant, which only shows a digital menu of that restaurant’s.

Task #2: User finds directions to nearby restaurant that offers dishes that accommodates their foods sensitivities

The user uses the DineSafe kiosk in a public area to find a nearby restaurant while abroad.

After switching languages, the user enters the main work flow:

Testing Process

We first received heuristic critiques from fellow classmates and made some changes. Then, we recruited three individuals for our usability testing. We first chose a CS student with professional experience in UX design and user research to experience our prototype. Although he did not have any food sensitivities, his knowledge helped improve the prototype and testing protocol. Then, our next interviewee, an individual with severe food allergies, was able to focus on providing us feedback related to increasing usability for food sensitive people rather than general issues. Finally, our third interviewee had dietary restrictions such that she does not eat red meat due to cultural reasons.

We conducted all interviews in-person in which we used the facilitator-computer-observer model. The facilitator would ask the participant to complete the two tasks using the paper prototype while the observer would note down feedback and critical points.

Results

Our first two interviews both had the critical point of when the participant encountered the main restaurant page and spent a few seconds decoding the information dense page and figuring out how to apply the ingredient filter. Although not explicitly asked for, we decided to add an extra screen between the starting page and the restaurant page which asks the user to input their food sensitivities. We found on our final interview that the extra screen greatly increased user understanding of the implementation model and eliminated the long processing time.

We also learned that the most important information for a food sensitive person when viewing the options was the amount of availability. Our second interviewee expressed feeling lost in figuring out which restaurant to pick because he did not know which one had the most available options and if they were dedicated facilities or if there was a cross contamination risk. Therefore, we added metadata to each restaurant which states “#/# dishes available” to indicate the number of available dishes. A high number or 100% of dishes being available would mean a lower chance of cross contamination.

Digital Mockup

Based on our user testing, we implemented many changes between our initial paper prototype and our final digital mock-up. As aforementioned, we added the food sensitivities selection screen to make it easier for users to process the information gradually and labels per restaurant, highlighting the ratio of available dishes to help food sensitive people choose one. The inclusion of the food sensitivities selection page required that we also revise the display of the selected ingredient filter. Instead of directly showing dropdown categories and selected ingredient filters separated, we merged them into a singular feature. This feature consists of a search bar like container but with the filter inside it and a button to edit the contents which brings the user back to the food sensitivity selection page. We also improved the way to see the dish ingredients. Initially, the ingredients were in a dropdown attached to the dish card. However, participants remarked that it was small and difficult to press and see and evenmoreso crowded when cross contamination warnings were added. Thus, we opted to replace the dropdown with a large pop-up modal.

Task #1: User confirms ingredients of dish at restaurant

The user uses the DineSafe kiosk in a restaurant, which only shows a digital menu of that restaurant’s. An interactive flow of this task can be found here.

Task #2: User finds directions to nearby restaurant that offers dishes that accommodates their foods sensitivities

The user uses the DineSafe kiosk in a public area to find a nearby restaurant while abroad. An interactive flow of this task can be found here.

After switching languages, the user enters the main work flow:

Summary

To conclude, DineSafe addresses the pressing need for a comprehensive solution for navigating food sensitivities out in unfamiliar public areas. We’ve found that our target group needs more information, transparency and awareness as to how food is prepared, what it is cooked with, and where it came from. As a result we’ve developed a platform with this information available, that simplifies finding suitable restaurant and takeout options. We aim to make it available to all people regardless of their dietary or economic background. DineSafe can make a significant impact on the lives of those with dietary restrictions, transforming the way they interact with their food environment.

--

--

CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction