Grubhub - A car app design

Role

UX/UI Design

Team

Jaee Apte

Client

University of Michigan

Timeline

Feb 2017

Problem

This was a design exercise for a job interview. The brief was to identify an issue I often face on a mobile device and visualize the reasons. Then design an approach to alleviate that problem. I chose the problem of ordering food while driving a car in a safe and convenient form.

Solution

As a solution, I designed GrubHub car app as an extension to the mobile app. The app allows saving customized orders in stationary or mobile mode. The customized orders can then be directly placed through 1-click interaction in driving mode safely, without pulling-over.


Design Process

Let me run you through a scenario:

I’m a busy grad student with two part-time jobs and a full time course load. I have no time to cook and often eat take-out food. I’m driving home from work and on my way I realize I need to pick up something to eat.



Night time driving

I’m on the road, it’s nighttime and there’s a lot of traffic.


This is GrubHub, the app I usually use to order food. It’s nearly impossible for me to browse through the list or pick a restaurant while driving, let alone pick a dish or order food.

Grubhub mobile interface

I might try to simplify that by picking a previous order. Then again, I have to scroll through a huge list of previous orders, some of which may not even be in the vicinity of where I’m driving. And I will have to go through 3 more steps before my order is placed.

Ultimately I will have to pull-over, stop the car, open the app, find a restaurant, place an order and drive to pick it up. There has to be an easier way for me to alleviate this situation.

Solution ideation

I thought of a couple of approaches to alleviate this problem:

1. An app that intelligently keeps track of your food ordering and daily schedule. It trains itself to your routine and remind you to order food at times you usually buy food.

2. A “meal-mess” facility - A user signs up for this service, every week he gets to select the food for everyday in advance. The app reminds users when it’s meal time, and users have to just pick up the food or have it delivered.

3. An extension of food ordering app tailored for automobile interface - User can order food through the automobile's interface without having to pull-over.

In one of my classes, fundamentals of human behavior, we learned the importance of channels of attention while driving.


Channels of attention

Thus, while driving, the visual (eyes) and spatial (hands) channels are engaged. The product cannot have actions that require heavy use of these channels as that will distract the driver.

Alternatively, the product can enhance other channels such as auditory and verbal which are not as engaged and are available.

I wrote down requirements and constraints of the design to help me get started.
Designing for car

This led me to think about my product in 2 scenarios - Stationary and Driving. I categorized interactions according to what mode can they be performed in.

Mode Functions

So the product would work something like this:

In stationary mode, the app can be used in its existing form. BUT along with that user can create “meal plans” from existing orders to be used in driving mode.

In driving mode, only essential information is displayed and essential interaction will be required. All supporting interactions will be done beforehand, so that driver can successfully place order while driving.

App Design

I created some sketches to explain the interaction flow.

interaction sketches

Then I created static mock-ups for this interaction flow.

interaction mockups
interaction mockups
interaction mockups
interaction mockups
interaction mockups
interaction mockups
interaction mockups
interaction mockups
interaction mockups
Edge cases

Summary

To summarize, I faced the problem of ordering food while driving a car in a safe and convenient form. As a solution, I designed grubhub car app as an extension to the mobile app.

The app allows saving customized orders in stationary or mobile mode. The customized orders can then be directly placed through 1-click interaction in driving mode.