Upgrading the Dietary Restriction Dining Experience
An app designed to help those with dietary restrictions find restaurants they feel comfortable and confident eating at.
Details
Role
UX Designer, UI Designer
Duration
80 hours
User
Individuals who live with or encounter special diets
Platform
iOS application
Skills
User Research, Persona, Flows, Visual Design, Wireframing, Prototyping, Usability Testing
Client
Academic Project
Tools
Figma, Otter.ai, Whimsical
Understanding the Special Dieter’s Perspective
Let's say you or your friend have a special diet and you both want to go out to dinner. You open Google Maps to find what's near you and within seconds you realize you have no clue if any of the restaurants will accommodate your needs. You are not the only one feeling stuck during these moments. The CDC reported that in 2018, nearly 1 in 5 adults 20+ years old have some special diet. I wondered, how can we alleviate some of the barriers people with special diets face when looking for a restaurant to eat at?
Discovering Habits of People with Special Diet
In order to gain an understanding of users with diverse special diets, I wanted to interview people of a variety of backgrounds. I interviewed 5 people of the 18-50 year age group. This included people with gluten, soy, or dairy allergies as well as people who are vegan or eat halal food.
Interview Conclusions:
I learned that people with special diets prefer open and clear communication when they learn about the ingredients in food. I also noticed how people’s confidence levels in restaurants are stronger if menu details are written out or if a restaurant is known to make accommodations for customers. Many of those interviewed don’t like to eat food in social settings because they are often not confident the food is safe for their special diets. I made an affinity map to help identify these patterns.
Affinity Map Key Points:
Interviewees need to regularly ask for menu adjustments and like to know when menus were last updated. I learned that interviewees like to read reviews, but they don’t like to leave reviews. This showed that menu preferences and reviews factors that users care about as they affect their direct experiences.
I began to consider designs for an app that would be able to accommodate some of these desires users have. Seen below, I created a side-by-side comparison of competitors users mentioned and this new app I named “Commonplace.”
Competitor Research Analysis:
4 of these websites were good for accommodating only 1 special diet, and the 5th website is not always accurate for users of special diets. I wanted to ensure that Commonplace included the expected features of searching by destination, filters, and favoriting while also accurately accommodating for people with more than one special diet. Since I wanted to incorporate a variety of users' needs, I needed to assess what the similarities are in the experiences they have faced.
Connecting the Dots of the Various Users
In order to visibly see the similarities and differences between types of users, I placed each interviewee on a scale of what their current habits are when choosing a restaurant. I then was able to highlight and group which types of users face similar experiences and how regularly. For example, interviewees #3 and #5 always contact a restaurant before going.
Behavioral Scale:
Based on this data, I was able to more strategically create my user persona. I could better see similar patterns of the variety of users and how they behave in different situations.
Below is my persona, Zack Hayes. Zack is always a little doubtful about trusting restaurants with his special diet, but he knows that he often doesn’t have any other options.
User Persona:
Having understood some of Zack's experiences and desires, I took a step back to visualize how this overlapped with the business and the tech team’s goals. The overlapping goal of all 3 groups is to: Confidently show and access clear, up-to-date information. This shows how all the groups have aligned goals that would benefit one another. Accomplishing the user goals is actually accomplishing the business goals.
Business/User/Tech Goals:
To put these goals to tangible ideas, I needed to start mapping out the app’s design.
Plating the Results into a Design
Thinking about both Zack's and the app's goals, I created task flows to guide my wireframe process. I wanted to create a quick, yet individualized on-boarding process that also was tailored specifically to the user’s dietary needs. This gives the user comfort right from the beginning and informs them of what to expect in the app.
Since Commonplace is an app I was creating, I created a UI kit for the branding. This allowed me to think about what themes and feelings I wanted users, like Zack, to experience. I chose warmer colors and rounded icons, so that the user felt calm when taking actions and confident about the information and content.
UI Kit:
In order to take the task flow steps into the actual interaction flows, I sketched out some low-fidelity wireframes of the on-boarding process, the search results, and a restaurant’s page. Since each restaurant will have a lot of information, I sketched out multiple tabs, a drop-down, and a scrolling option.
Key Low-Fidelity Wireframes:
I chose a variation of the tab option because it is less crowded and the user could select the information they wanted to see. I further developed this idea into mid-fidelity wireframes using Whimsical. As seen below, the on-boarding process is on one screen, while my search results page has two CTA buttons in the bottom right of the screen for filtering and sorting.
Key Mid-Fidelity Wireframes:
From the mid-fidelity wireframes, I created high-fidelity wireframes using the UI kit. I added the logo, colors, and icons. They seemed to achieve eliciting the calm and confidence feelings, but this will be further tested with users later on.
Key High-Fidelity Wireframes (Round 1):
After presenting my higher-fidelity screens to a group of designers, I learned a one-screen on-boarding process may be asking too much of the user at one time. I decided to break up this long screen into 6 separate screens to better guide the user through the process.
User Testing:
With this updated version, I created a prototype to test the on-boarding process and user’s ability to search for restaurants near them. I conducted 5 live tests over Figma.
High-Fidelity Wireframes (Round 2) Prototype:
Changed to 6 separate screens vs. 1 long one
Input placeholders in form blanks
Used warmer, calming colors
Each tester completed the test successfully, but they offered some great food for thought for next developments. This includes information architecture changes such as for the layout of the bookmarks page and the process for leaving a review. Although all the testers accomplished the requested tasks, I realized that a walkthrough upon initially using the app may be beneficial to explain the app’s smaller details and features.
Conclusions
In creating Commonplace and user tests, the number of resources a user usually needs to research and decide on a restaurant dropped from around 3 resources to 1 resource. However, there is more that could be tested and explored for further development of the app, such as a walkthrough of the app or considering the restaurants as users with profiles. With these changes, Commonplace could become the go-to dietary restriction app for locating restaurants.
Project Outcomes
Reduced number of researching steps for a user from 4 to 1
Due to the familiar UX, all the testers were able to navigate through the app
Next Steps
Make UX and UI changes, and test again
Consider adding a walkthrough for first-time users
Develop the restaurant’s perspective of Commonplace
Learning Outcomes
Designing for many different people, doesn’t have to require designing many different experiences
