Eatery Blue

How do we make comparing menus easier for 10k+ students?
Timeline
Fall 2022
Team
2 designers
Role
User Researcher
Visual Designer
Tools
Figma,
Notion,
Slack

Welcome to Eatery.

THE AppDev flagship product, providing users with a glance at Cornell dining hall and cafe menus, giving students with a meal plan the power to make informed decisions about where to dine.

As a product designer on the team, I was tasked with finishing out Eatery's biggest-ever update, Eatery Blue, and exploring product spaces for future updates. Let me walk you through a semester's work at AppDev, as well as my contributions to an app with an already-rich history.

Our users collectively have been acquainted with our product for the better part of a decade. They are undergraduate students, graduate students, and faculty. With a marketing team member, I dove into user research with a protocol and an intent to understand user behavior on Eatery, specifically what factors drove them to certain places.

What did our interviews tell us?

Users already find comfort in the few dining hall options they are most familiar with! The app helps facilitate this by using a favorites feature.

Users decide on where to go based on based on 1) opening and closing times, 2) an eatery's menu, and 3) the eatery's proximity

Based on this, user go on Eatery to quickly scan Cornell's assortment of menus.

Our Problems on Eatery

1. Eatery Blue does not yet handle support for looking ahead at menus

As development on Eatery Blue wraps up, Upcoming Menus is one of the last legacy views on the app that are yet to be implemented, and it is essential for displaying the most information in a brief and succinct manner for the user.

2. Eatery Blue lacks a menu comparison feature

Eatery has never been lacking in features, but something that we had not gotten around to yet is a digestible way to compare menus from different dining halls. With over 14 different dining halls, it is difficult to taken in dozens of menu items and be expected to weigh those options.

Understanding Eatery Blue

With a quick view of drop-downs for each dining hall, the classic version of Eatery does its job at showing users content. However, especially when choosing between 2+ menus, information overload can become a real issue and users are left picking up the pieces of where they once were.

Eatery Blue card components are all contained. Filtering buttons free up some UI real estate and can potentially be used for the user to select between breakfast, lunch, and dinner options. How can we add to our design system components that can be fit to serve Upcoming Menus?

Redesigning Eatery

Item Cards

By redesigning our cards with an eye for iconography, keeping a strong visual hierarchy, and using secondary buttons, we found our new card components.

Filters

As a user wants to explore eatery menus, a key aspect of their experience is getting to the few eateries that they have an eye on. Since a factor that helps users decide where to go is proximity, simply having an idea of where you are on campus is enough to narrow down your choices. because of this, we decided to add location filters. Adding this with an already existing filtering feature was a challenge we made iterations on.

Both solutions depart from the tab bar solution to keep consistent with Eatery's design system, but we chose to go with Option 2: One-line Button Filtering. It benefits from visual efficiency and consistency at the expense of a weaker mental model and more taps.

How do we help users compare menus?

Now that we had a framework for viewing eatery menus at a glance, we encountered the challenge of finding the best way for our users to compare menus.

We understand that our users already know more or less which eateries they would like to go to, so how can we make the flow of the page more conducive to quick and easy menu viewing?

To help guide our design decision, we conducted user testing on samples of students on prototypes of this app. From the outset, it seemed that the Pure Horizontal Scroll helped users get to the eateries they wanted in less time. As an added measure, our next challenge is to distinguish visually the 'scroll to' button, to distinguish visually in function from the other filters that exist in the app.

At the moment, we don't want to abandon our current, updated view of Upcoming Menus. It is a reskin of the classic Upcoming Menus that is currently being worked on by developers. However, our user testing has proven effective in bringing down the time it takes to make a decision between menus. To compromise, the next step for designers is to explore whether the creation of view toggles, such as in the Grid View Toggle exploration, can help users switch between a horizontal and vertical Upcoming Menus view.

Reflecting on a busy semester

Diving into product design on Cornell AppDev, working on Eatery was exceptional because of the practice I got working within a design team, with co-designers, and a product manager, mobile developers, and marketers, but it also meant I was finding a way to touch the lives of thousands of students at Cornell.

As Upcoming Features has shown, industry-level designs take time to ship, whether it be due to backlogs or feature complexity. It's a blessing in disguise, as even though it may take until FA '23 to ship out my new features, my Eatery successors will have plenty of time fine-tuning the interactivity designed by me, as well as  exploring a full-fledged menu comparison feature.

Until then, I'll be working on other projects within AppDev's ecosystem and lending a hand to our next class of Eatery designers!

Thank you for reading!