As one of the largest food delivery services in a competitive marketplace, Grubhub seeks to stand out by including filters for people with special diets.
Difficulty finding compatible restaurants and meals is a major pain point for people with allergies, gluten intolerance, special dietary preferences, and other kinds of food restrictions, especially when ordering remotely without easily being able to ask the restaurant staff for advice. The new dietary filters in Grubhub aim to help such users find what they need quickly and reduce the burden of research.
Interactive and user research
Trustworthy, practical
Bradford Prairie & Sean Bacon
2022
As of this project, Uber Eats is the only major national food delivery service that lets users filter restaurants based on multiple dietary options. Their list of filters is minimal, and does not provide further guidance to the user beyond their search results.
AllergyEats is like a Yelp for people with food allergies and intolerances. Though their goals are different from a delivery app’s, a review of the app highlighted important features to include and information to communicate.
Since people have many reasons for their dietary choices, the filtering system must suit a range of needs. A spectrum of mini-personas helped guide the development of the user experience.
"I need to find food that's prepared safely without my trigger ingredients so I can enjoy my meal without worrying about having a reaction."
"I need to find food that's compatible with my dietary preferences because I want to enjoy meals that suit me."
"I need to find a restaurant that caters to everyone's needs so we can all get delivery from the same place."
Four rounds of prototype testing via Zoom helped to clarify pain points, refine the UI, and foster stronger solutions. Multiple suggestions from testers were incorporated into the final design.
Several testers expressed concern about the filters they were selecting, because it wasn't clear to them whether picking an ingredient from a list of restrictions, such as "Milk," meant that the ingredient would be included or excluded. The word "free" helped to clarify this, as in the case of "Milk-free."
Originally, users had to go to their account settings to edit saved dietary preferences. Testing revealed this wasn't intuitive, so the final design allows editing via the filter menu. This is a better UX pattern in its directness and ease of recall.
The initial design allowed users to save their personal dietary options to their account, but testing illuminated other situations where users might want to save a set of options, such as when ordering for family members. Letting users save multiple sets of options helps to streamline their ordering for themselves and others.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Based on information provided by participating restaurants, the Dietary Options filters take the mystery out of searching for safe delivery options. The filters not only show restaurants with compatible meals, but also generate personalized recommendations and helpful tags within menus. Additionally, users can save sets of filters to streamline their future searches.
....
...
I built this project with the user first in mind; however, to be successful, a feature like dietary options requires coordination and compliance on the business end. The UX for restaurants seeking to implement this new feature would be just as important as the UX for the customers.