Grubhub / Redesign

Grubhub is a Redesign project that offers better mobile food ordering and delivering experiences for old customers, existing users, and potential audience, aiming to create functional and vivid visual designs to DRIVE MORE TRAFFIC.

PRODUCT DESIGNER / SOLO

Eight Weeks
Adobe XD, Google Form, Miro

Research + Ideation
UX/UI Design + Business
Low/High Fidelity Prototype
Accessibility Design

Inspired

‍

when

Pandemic

We suffered from Pandemic in the U.S since March 2020

where

Stay-at-home

Everyone follow the stay-at-home orders we need to eat.

who

People

People use food ordering/delivery app at home.

why

I am a user!

A long time user for several food delivery apps

PROBLEM

As a marketing and business background, I care about sales. First, I click the market share chart to know what users prefer and how dramatically the users' have changed during the past few years. Grubhub is not a non-profit company, and I start to find the reasons from the current app why users prefer to use UberEats and Doordash.

Users who from the Apple/Google Play store complain about the app is hard to use:
1. Too many user steps to add to chart
2. Unclear pickup/delivery navigation and messages
3. App is difficult to use
4. Users are hard to understand the UI

Problem Statement:

As a long-time Grubhub user, I remember Grubhub was the most popular ordering/delivery app in the market back in 2016, Grubhub started to lose users due to the app having low user satisfaction, and many functions being missing. Users gradually shift to other applications and forgot Grubhub in recent years. When there is a chance to redesign a better experience for my favorite delivery app, a new design can bring Grubhub to the next level!

Goals

A redesign Grubhub aims to offer a better user experience and user interface to get more users back, grab potential customers, create user engagement, and aims to drive business sales back to the Top One like 2016.

Great design is gaining traffic from 😃Users , 🚗Drivers , and 🍔Restaurants

Research

Process ->

App & Competitive Research

Here are the original Grubhub app user interface looks as below. From left to right 👉🏻 :
A loading page, Basic restaurant list, Clunky menu, and Unclear promotion list.
Look into heuristic evaluation. The cuisines and refine take 2 & 3 steps to the restaurant, and there is no clear pickup and delivery on the main page. Promotion is only shown on the reward page, and it takes 3 steps.

Compared to other top 3 delivery apps - Uber Eats, Doordash, and Postmates in the market, Grubhub's features' are missing Category Search, Pickup in Navigation, add to Favorite restaurant, Group Order.

Left: The current Grubhub App. Right: Competitive analysis functions

‍
‍

User Research

According to GrubHub white paper's research & reliable reports like McKinsey, Forbes, Financial Times and more, we found out users decide by $ 0 delivery fee, Cuisine, Time, Food category, and most users are Males from Age 25 - 45.
90% of guests research a restaurant online before dining. Most diners in the U.S. decide what to eat within 2 hours of their meal. For 79% of diners, “taste” is the main factor deciding where to eat.

In Addition, from the quantitative and qualitative research , I collect three users who are also using Uber Eats, DoorDash, and Grubhub and care about the price, promotion, and user interface. They suggest that users are looking for a new Grubhub app, including color hierarchy, fewer user steps, pickup icon, store time/close, vivid icons, easy-to-understand UI, and clear discount.

‍

Persona

Create persona to know user's goal & frustrations. Pickup and Delivery

(Left) Marcelino - pickup, explore, single, walk, city (Right) Donna - Delivery, family, kids, drive, suburban

‍

Find Improvement Opportunities

Using restaurant/food principle - Michelin Red, I create a dark red as a new Grubhub color and use white and clear color to make the food images stand out and express clean style. Grubhub's original color is bright red and changed to a dark red to keep the branding, and users are easy to recognize the new dark red.

Ideate

Visual Design

Left: 3D icons for 2022 trends Right: Font and colors

Keep the original Open Sans font and use the brand new color palette to enhance Grubhub's branding. Use 3D icons as new iconography in Food Category and Navigation. 3D is the trend in 2021 - 2022 due to huge numbers of millennials users.
The Pickup icon changes into a specific style, like Christmas season.

‍

Design Principle

User centered, Simplicity, Consistency

‍

Wireframe

Starting from the rough wireframe and create the digital wireframes.

‍

Iterations

From user testing's feedback to create some iterations.

‍

Information Architecture

An IA for brand new Grubhub app.

‍

Design X Business

The research makes me understand that users use Grubhub during four peak times to catch more sales. During the research, I went to restaurants and talked to the owners, found out that restaurants owners (clients) manually type in their food on the merchant portal, and they can easily remove and add meals to each category. It is an excellent opportunity for users and clients, similar to popular food at the top of the restaurant list.

Left:for Peak time user/restaurant ;Right: Popular food for user/restaurant

‍Peak time icon (B2C) - circle in gold color
Users click the most peak time orders: Brunch, Coffee, Irish Bars and etc.

‍Popular (B2B/B2C) - circle in red color
Customers are easy to order popular or signature food from the restaurants

‍

Accessibility Design

Everyone stays at home during the pandemic.I care about people who lives alone with disabilities and they can use the Grubhub app to order food, so I add Voice search for them. To meet the needs of all three segments, here are some types as real people's issues:Poor-sight, Age, and Color-blindness.

‍‍

Final Design

Here are the new Grubhub major user interface look.
From left to right :

A loading page, Homepage, Pickup, Restaurant, Rewards, and Order history

The goal of design upgrades for mobile apps. By improving the interface, adding new features, enhancing the overall user experience, new Grubhub can make their platform more user-friendly, efficient, and enjoyable to use. The idea is to make the platform more accessible and easy to navigate for users, allowing them to quickly find what they're looking for and complete their desired tasks with minimal effort. These updates can also improve the overall performance of the platform and make it more reliable and secure.

solutions

The specific details of a redesign for Grubhub depends on various factors such as user feedback, market trends, and business goals. Enhancing restaurant search functionality, Integrating with popular payment methods, and Improving mobile optimization, Accessibility design for people who live alone.

Results

I send the final design to the research users. 96% prefer the final design instead of the current Grubhub app. Users like the new user interface, revise features and care about the promotion even if they don't use it.

The new Grubhub design can solve the current users’ pain points and meet the users need and satisfactions. I believe the new design also can attract the users, bring the clients in and connect to the drivers. Once Grubhub get popular in the market, the stakeholders will happy about it.

‍

TAKEAWAY

I enjoyed working on this redesign project since I am a long-time Grubhub user.

‍User Research between target market research, market research, user interviews, and actual user interviews and how the research statistic led me to the proper designs to solve the user's pain point.I also learned visual design and user flow and received helpful feedbacks during interviews and surveys. It showed me that mobile apps are essential to pay attention to small details, and they can either make or break the user's experience when not well thought out and fewer steps help users to make an order easily, so do not let users think!

Keywords: Redesign, Mobile App, Restaurant, POS, Payment System,