Uber Eats

Menu Redesign

January 2018

As Uber Eats' entered a strong growth period and emerged as a viable business for Uber, it became clear that our menu design needed an update.

Users weren't discovering methods of navigating the menu (like search or our navigation) and our restaurant partners wanted the ability to display multiple menus and dietary information, the latter of which was also blocking lucrative partnerships in some parts of the world.

At the same time, as a team, we knew our current design wasn't flexible enough to accomodate features we planned to explore like promotions, smart recommendations, and more restaurant metadata.

Over the course of a couple months, I redesigned and prototyped and a new experience and system of menu components help our menu scale.

The redesign led to a 2% uplift in orders completed, driving substantial revenue for Eats.

Simultaneously, the menu framework and associated components that were created laid the foundation for many features that have since been introduced, like restaurant-level promotions, dish dietary information, and restaurant info and opening hours.

Sketch, Framer, After Effects

Menu Redesign Visuals

Select screens from the app A flow depicting the new menu framework.

The project was much more than a redesign of the singular menu screen. Rather, it created a new framework of multiple screens to support various permutations of the menu.

We added an entry point at the top of the menu for more information about the resturant, an overflow menu for additional restaurant-level actions, an area for upsells and promotions (which we coined the amuse bouche, for any foodies out there), overhauled search, and added a menu switcher to alleviate issues with displaying multiple menus based on time of day.

The sharing experience Three core screens from the flow.

To test these changes, I built out a robust prototype utilizing real San Francisco restaurant data from our backend to bulletproof the designs.

In this prototype, I also explored motion concepts for our new header, which introduced a top-level, pill-based navigation that surfaced when a user scrolled to the menu content.

Prototyping motion for our header states.

Our decision to make the navigation top-level was a direct reaction to previous issues with navigation discoverability and our hypothesis that a clear navigation would increase conversion for longer menus.

The navigation would automatically cycle through and highlight navigation anchors as the user scrolled, to help them understand and encourage them to interact with the new paradigm.

Tap-initiated scroll (left) and automatic navigation cycling (right).

Introducing a new header and subpages to the menu framework also required creating guidelines for layering UI and creating depth.

Layering specs were added to the Eats UI kit, while sub page transitions were are also included in the prototype.

An excerpt on z-index from the Eats UI Kit (left) and a subpage transition example (right).