Duration
10 weeks
Type
Course project
completed in team of 4
Role
UX Design & Research
Overview
ZotDiet is a mobile application that UCI students can use to find food items and nearby food establishments that accomodate their dietary restrictions.
The Challenge
UCI is home to a diverse community of students, some of whom face dietary restrictions that impact what they can or cannot eat. As a Muslim student who follows a halal diet, I have also faced many difficulties when attempting to find suitable food options on or near campus. These difficulties led my team and I to dive deeper into the issue of dietary restrictions. Our secondary research on dietary restrictions gave us insight into the struggles of various dietarily restricted communities and the different ways in which they are being accommodated for at other college campuses. Through this newfound insight, we realized our goal to help dietarily restricted students more easily navigate their food journey at UCI through design.
User Research
To kickstart our research process, my team and I had to first concretely identify the problem at hand, using the following design question to guide our research and design methods throughout this project:
How can UCI students who follow dietary restrictions gain better access to food products and services at/near UCI?
From this question, we then came up with the following research questions, questions that are essential to fully understanding the problem space before diving into our solution:
What kinds of dietary restrictions do UCI students have?
How do UCI students find food according to their dietary restrictions?
What challenges do UCI students face when trying to adhere to their specific diets?
Data Collection: Interviews
To answer our initial research questions, we conducted one-on-one interviews with four dietarily restricted students to discuss, in depth, their dietary experiences while attending UCI. We each followed a script containing relevant questions, carefully crafted so as to prevent any response biases. Each participant had a different dietary restriction, each restriction resulting out of religious, medical, or personal reasons. Each interview was held and recorded virtually over Zoom.
Analyzing Our Data
Thematic Coding
One of the methods we used to analyze our data from the interviews was thematic coding. We each individually "coded" our respective interview transcripts, taking note of reoccurring themes and patterns within the participant's responses. A portion of the coded transcript I produced from my interview with Participant 1 is shown on the left.
Affinity Diagram
After individually coding our transcripts, we came together and categorized the data into an affinity diagram as shown on the right, grouping together similar observations and quotes under relevant thematic categories.
View our affinity diagram here: https://miro.com/app/board/uXjVO40Wbrk=/
Research Results
Through our data analysis, we discovered two reoccurring themes within our participants' responses: awareness and accessibility. Our participants shared specific difficulties they experienced regarding these two areas as well as further suggestions and methods they took to try to resolve said difficulties.
Increasing Awareness
Participants described situations and frustrations regarding the process of increasing the awareness of others or their own when attempting to obtain food that adheres to their dietary restriction. Ex. reading labels, asking staff.
“It can be difficult sometimes because you run the risk of not reading something and then maybe eating something that you can't have. Or not reading it properly, or if it's not listed, it can be troubling” - Participant 4
Lack of Access
Participant responses revealed their struggles with food accessibility on campus and the ways in which this has limited their dietary experience.
"I just feel like it would make my experience better if I could eat out and have more options on campus so I don't have to eat only at home everyday" - Participant 1
Ideation
Once we identified accessibility and awareness as our users' primary pain-points, we could begin designing a solution. Our goal was to create an application that would allow dietarily restricted students on campus to more easily find or gain clarity on food options that suit their dietary needs.
To begin this we began to brainstorm possible ideas for how we could implement such a solution. Each of our team members came up with various sketches of different features our application could include, as shown below. Some of these features included scanning food items for nutritional info, navigating restaurant and campus dining hall menus, and reviewing.
Low Fidelity Prototype
Combining the elements from all of our sketches together, we created wireframes and a low fidelity prototype that would be used for user-testing. Our prototype focuses on the following four features: onboarding, dining hall navigation, restaurant navigation, and product scanning.
Onboarding
Students are able to select their dietary preferences/restrictions before beginning to use the application. This information will be used by the app to filter through available options to the student that fit their dietary restrictions so they don't have to.
Dining Hall Navigation
The dining hall feature allows students to access the daily UCI dining hall menu. The student can then check which menu items are suitable for their respective diet via detailed ingredient information.
Restaurant Navigation
Through this feature, students will be able to find restaurants near UCI's campus that provide food options that suit their dietary needs. The application tells the student how many options are available for them at each restaurant and allows them to view the ingredients of each option.
Product Scanning
This feature allows students to scan the barcode of food products that they want to verify fit their diet. The application will provide them with the product's detailed ingredient and nutrition information.
Usability Testing
We recruited 4 participants to test the low-fidelity version of our prototype. We asked them to imagine a scenario where they are a vegan UCI student looking to find food options and complete tasks related to the following three categories: onboarding, menu navigation, and product scanning.
User Feedback
Minor Issue: Onboarding
Participants expressed confusion when attempting to select their dietary preferences during the onboarding process due to the belief that they were only allowed to choose one option. This was due to our choice of using circle shaped selection buttons. This issue was minor in nature, as the participants were still able to complete the task despite minor confusion. To address this issue, we changed the buttons to square-shaped check boxes to reflect a more clear, common convention of multiple answer selection.
Before (left) and after (right) feedback
Severe Issue: Navigation
Participants struggled to locate the main page of the dining hall menu despite it being accessible through the navigation bar. Although they still technically completed the task, this was a severe error, as participants were unable to complete the task in the way intended. This further reflected a lack of accessibility, which is contradictory to the purpose of our app. To address this issue, we added a clear, labeled dining hall button on the homepage so that the feature could be more easily visible and accessible to the user.
Before (left) and after (right) feedback
Additional Suggestions
Participants suggested including additional features that they believed would provide a more accessible, enhanced experience for dietarily restricted users. This included calorie information, more detailed ingredient information, and direct ordering of food from the application. However, due to time constraints, we were unable to add these suggestions to our final prototype.
The Final Prototype
After conducting usability testing, we moved onto creating a finalized version of our prototype. We applied the changes described previously and added finishing touches such as color and sample images/text.
Our goal was to maintain a minimalistic and clean finish so as to not take away from the app's main functionalities and prevent any visual clutter/confusion within the app. We chose accent colors that reflected the dining and nutritional functions of our app and were not visually distracting.
Click the button below to access the final prototype:
Takeaways & Reflection
-
As a group, we learned about the prevalence of food accessibility issues and how to address them. Listening to the responses of both our interview and usability testing participants helped us gain a deeper understanding of the dietarily restricted community, which further guided us in creating/revising our prototype solution.
-
As for technical skills, I personally learned more about the UX interview process, one that I was unfamiliar with prior to this project. I also learned how to more effectively collaborate as a team throughout both research and design processes, applying methods such as affinity diagramming and convergent/divergent thinking.
-
Both the research and design work we completed through ZotDiet have the potential to aid students at UCI in their dietary ventures. The school itself can utilize our research to further advise how they go about providing accessibility through their facilities while students with dietary preferences can use the ZotDiet app as a tool to guide their food choices.
-
For the future, I believe that our research and prototype can be further expanded upon so that it is more applicable to a wider population, outside the scope of UCI.