Redesigning Grubhub’s Menu Page
A case study
Summary
As part of my time at Grubhub, I was tasked by the VP of Design to redesign the existing menu. Over the years, the menu had fallen into disarray — and at the same time, competitors like Doordash and Uber had established certain patterns that users had come to expect.
Collaborators
Emily Mark was the product designer on menu — she took my final designs, made certain changes, and brought it over the finish line. She was a terrific collaborator.
A note on being a systems designer
When a design system is mature, the contributions of a systems designer can start to get more complex. We aren’t designing as many components, but we are exploring templating opportunities, hosting office hours, and keeping up with all of the Figma fun.
At Grubhub, the bounds of what a “component” is, was regularly fluctuating — to the VP at the time, this menu header was a component — to others, it was a feature. This led to my redesign of the menu header — and also to my collaboration with and handing off to product design.
Analysis of old menu
The old menu header had a number of problems — I will bucket them into two categories:
- Usability improvements (UX)
- Visual design improvements (UI)
Usability improvements (UX)
Grubhub was founded before Doordash or UberEats. This allowed Grubhub to gain a strong footing in certain markets, but also led to the organization having a lot of technical debt when competitors were first being designed.
Some of the design patterns used by Grubhub were fairly reasonable at the time — but as the market became more saturated with delivery apps — and users became less “loyal,” successful, repeated, interaction patterns emerged.
For example — choosing between delivery and pickup is pretty much always a toggle.
In Grubhub’s old design, switching conveyance was hidden in an dropdown that also allowed you to schedule your order. Poor discoverability.
Additionally, group order — being a relatively new feature to the delivery world — is always a labeled button.
In Grubhub’s old design, group order was an unlabeled icon button. Poor discoverability.
And finally, the headers are utilized to the fullest to give the images more impact. It is known that good imagery increases likelihood of placing an order by a significant percentage.
And also, the ability to favorite and/or share — and possibly more — resides in the header.
In Grubhub’s old design, the image was cut off and most actions were hidden in the information “i.” Poor discoverability.
My design aims to use these clearly established patterns, while respecting the design system (Cookbook) we had — and while trying to add one key improvement.
Here, I used a segmented control component for the delivery/pickup toggle and I used a Tag component for the Group order button.
(Note: I designed both of these components for Grubhub’s design system, Cookbook.)
I made a number of changes to the header including:
- a full-height image
- adding backgrounds behind the buttons
- exposing favoriting and sharing
- changing the “info i” icon to a more standard “overflow menu” icon
- changing the down arrow nav icon to a dismiss x
Other usability improvements
Due to adding the delivery/pickup toggle — the ability to schedule an order needed a new place to live. By using another Tag and labeling it, scheduling an order becomes much more discoverable. This is something that is available at different steps in both UberEats and Doordash’s experiences — but through user interviews, we found that many users had to learn about Doordash’s “schedule order” feature, since it’s so late in the funnel.
In addition to exposing this capability on home, exposing it directly on the menu keeps all “order logistics” nicely packaged. The “where (restaurant), what (food), when (schedule), and who (group)” are all within the same screen.
Scalable design
I’m a firm believer in designing for scalability. The way in which I approached scalability for this header has to do with grouping like information.
In the future, when a new feature is proposed, it shouldn’t be difficult to figure out where to slot it in.
If it’s restaurant info — it should go in the “restaurant info” section.
(Note: When “Open now” status was added, it was added in this section!)
If an order-specific action was added — like “Catering” for example — it would show up as an additional Tag to the right of “Schedule.”
Visual design improvements
I made a number of changes to the visual design language:
- Expanded image to full-height
- Added backgrounds to navigation in header
- Added parallax scrolling effect
- Rounded corners to give appearance of bottom sheet
- Designed
segmented controlandtag - Fewer colors
- Increased vertical padding between elements
What went to production?
After I designed this — I collaborated with Emily Mark to hand it off to her menu team. There were certain product requirements that came up that she had to accommodate — but for the most part she honored my contribution — and in many ways — improved upon it.
Some of the changes:
- “Info i” and “Down arrow” icons retained
- GH+ flag moved into eyebrow text along with cuisine type and price range
- Green statuses added to restaurant info (Note: “New” in this case is replacing ratings, so that did stay in the same place)
- Vertical switch between
segmented controlandtags - Group order and schedule traded places
- GH+ $0 delivery fee text added
- Search menu took on a secondary style
- Dividers removed
- Vertical padding tightened
(Note: Some other differences are due to different screen sizes. For example the segmented control appears shorter in the after photo, but that is due to the screenshot being taken on an iPhone 13 Max vs the design at 375px width.)
Conclusion
Designing this menu header had a big impact on me and my career. It pointed to the fact that I enjoyed product design — and inspired me to move on to my next role as a senior product designer. Design systems are terrific and my 2 years as a systems designer only have strengthened my ability to contribute as a product designer.
