Grubhub Menu Editor
1120
page-template-default,page,page-id-1120,bridge-core-3.1.9,qi-blocks-1.3.4,qodef-gutenberg--no-touch,qodef-qi--no-touch,qi-addons-for-elementor-1.8.2,qode-page-transition-enabled,ajax_fade,page_not_loaded,,qode-title-hidden,qode_grid_1300,qode_popup_menu_push_text_right,qode-content-sidebar-responsive,qode-child-theme-ver-1.0.0,qode-theme-ver-30.5.2,qode-theme-bridge,disabled_footer_bottom,wpb-js-composer js-comp-ver-7.9,vc_responsive,elementor-default,elementor-kit-10

Grubhub Menu Editor

A responsive web application giving restaurants the power to edit their menus on the Grubhub platform.

Image of home menu page on a large device and a smaller mobile device.
Overview

In 2016, Grubhub released the Grubhub Self-Service Menu Editor, a web application designed to empower restaurant managers to edit and create their own menus. The primary goal was to alleviate the burden on support and data entry teams who were overwhelmed by menu edit requests, thereby enabling the company to focus on rapid growth amidst increasing competition. This was a 12-week design effort.

Team

2 Designers
12 Engineers
1 Product Manager
1 Content Strategist
1 UX Researcher

My Role: Lead Product Designer

Problem

Before the development of the Grubhub Self-Service Menu Editor, the support and data entry teams faced significant challenges. The backlog of menu update requests was growing, and restaurant managers were frustrated with long wait times. Communication breakdowns between support, data entry and restaurant managers further exacerbated the problem, leading to inefficiencies, errors and incorrect orders.

Research

The project began with extensive research. My Product Manager and I visited restaurants in Chicago, conducting interviews and shadowing staff to understand their needs and workflows. This research helped us identify key requirements, such as the need for menu items to include sections, schedules, modifiers and the ability to mark items as out-of-stock (a primary use case). We also recognized the importance of making the tool responsive for use on various devices for ease of use in a variety of environments.

Image of various restaurants we visited to do research in Chicago and other cities.
Design Process

With no formal internal design process, I had the freedom to innovate. Using Sketch for design, Invision for prototyping, and Jira for project management, I iterated on wireframes and higher fidelity designs. Regular feedback loops with stakeholders, including engineering, design and product, ensured alignment and feasibility. User testing was conducted with restaurants to validate the designs and gather actionable insights.

Design System

Bootstrap was utilized as the foundation of the Restaurant League design system. The design team maintained and contributed to the system when needed.

Development Process

Initially, there were lapses in communication between design and development, which we addressed by formalizing frequent feedback loops. This improved collaboration and reduced confusion. I also worked closely with engineers to create clear documentation and ensure designs were implemented accurately.

Key Features

The Grubhub Menu Editor included several innovative features:

• Ability to edit sizes, schedules, and modifiers at a global level, saving users significant time.
• Responsive design for use on various devices, enabling restaurant managers to make updates on the go.
• Photo upload functionality for menu items, enhancing the dining experience for customers.

Launch and Post-Launch

Upon launch, the tool exceeded expectations:

• 6.4% of restaurants made an edit within 90 days, surpassing the 5% goal.
• A 400% increase in new restaurants on the platform year-over-year.
• A noticeable reduction in support calls for menu edits.

Post-launch, we added features such as tags, calorie information, catering options, and the ability to copy menu items based on user feedback. The tool was recognized as the flagship product of Grubhub’s Restaurant league, which was a significant achievement for our team.

Lessons Learned

Leading this project taught me the importance of user research, collaboration with engineers and the value of iterative design. I learned that early and continuous validation with users is crucial for creating intuitive and effective tools. This project remains my favorite, as it allowed me to grow as a designer and make a meaningful impact on both the company and its users.

Conclusion

The Grubhub Self-Service Menu Editor was a resounding success, addressing critical pain points for restaurant managers and internal teams alike. By empowering users with a responsive, efficient tool, we enabled Grubhub to scale rapidly and stay competitive in a challenging market. The lessons learned from this project continue to influence my approach to design and product development.