Menu Combos - Grubhub
While at Grubhub, the company onboarded multiple chain clients like Burger King, Taco Bell, and Sweetgreen. Through this onboarding, client conversations, and user research, we found that our menu design did not support a user behavior of item bundling. Think of it like grabbing that combo meal from your favorite chain restaurant. Since our menu UI didn’t accommodate this, we embarked on a menu design specifically for chain restaurants.
Project Details / Process
Project Goals:
We designed Menu Combos in response to Grubhub onboarding multiple chain restaurants to our platform to solve for creating menu UI that enabled users to order combinations of menu items. Grubhub, at the time, was only afforded single-item ordering in its menu UI, and ordering multiple items bundled as ‘combos’ was something we observed as a dominant behavior of users ordering at chain restaurants in research conducted by Grubhub’s research team. The goals of this project were to design a feature to allow users to order combination meals from Grubhub and Seamless menus, across web and mobile products. This feature design also had to be scalable to apply to multiple chain client menus.
Role:
UX, Visual Design, Research, Feature Strategy
Metrics Considered:
Task Completion - Completing Orders, Order Conversions
Process:
In terms of my process for this project, I paired with our product team to establish scope and designed this feature end to end, including sketching and wireframe stages, qualitative user testing, and final visual design. For UX testing, I paired with Grubhub’s UX Research team to work on a research plan, and we gathered project inputs that I iterated on after receiving qualitative and usability feedback from users. I also paired with our design systems team including design and engineering to contribute new components for this project, like a selector tile with modifier capability, and an animated item progress bar. The visual design of this project also included new components and animation design.
Final Designs
Based on feedback from users that the form factor agreed upon in my design discovery phase was successful in helping them select combinations of meals in a quick intuitive way, I prepared final visual designs, prototypes and a spec for engineering based on the wireframe flows chosen and tested at that time. In order to prepare final designs, I completed visual design flows, created prototype flows and spec, met with my Core Consumer Team as well as Grubhub’s Enterprise Product Managers and iOS, Android and Web platform teams as well as Design Systems Teams to receive final approvals. I also worked with our in house product illustrator so that she could provide illustrations for our animated progress bar component, and provided component documentation for the new and updated components used in this project.
Designs included:
iOS, Android, Web
