About

Grubhub Dietary Filters

Compatible meals Delivered

Mobile App Integration

Overview

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.

Approach

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.

Services

Interactive and user research

Personality

Trustworthy, practical

Director

Bradford Prairie & Sean Bacon

Completed

2022

Discovery

Competitive audit

Uber Eats

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

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.

User spectrum

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.

Adult with food reactions

"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."

Adult with chosen dietary preferences

"I need to find food that's compatible with my dietary preferences because I want to enjoy meals that suit me."

Adult ordering food for a group

"I need to find a restaurant that caters to everyone's needs so we can all get delivery from the same place."

User testing

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.

Key insights

Language is key

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."

Make editing as direct as possible

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.

Enable flexibility

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.

UI/UX Design

Iterations

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Completed Prototype

Personalizing searches

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.

Visual Design

What I learned

Follow the process

....

Balance ease of use and thoroughness

...

Solutions require coordination

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.