A Mobile Application for Comparing Wait-times & Ordering Ahead.

Overview

Built from the root up, the In-N-Out Order Ahead mobile app was made to keep customers happy, not hangry.

Developed as part of an advanced UCLA UX design course, my team and I implemented on holistic, research based solutions by deploying several rounds of remote user testing. We utilized the data to iterate on a product designed & proven to succeed.

Roles & Responsibilites
UX UI Design
User Research
Prototype
Branding & Story-Telling

Duration
10 Weeks

Tools
Figma, Miro, Maze, Trello, Zoom, Google Surveys, Paper & Pen

Tags
Food Services, Product Design, Restaurant, Instant Chowing

The Problem

In-N-Out has been failing to live up to its name sake. With long lines and wait times, customers are no longer flowing ‘in and out’ of the drive-thru, but parked there. drowning in crowds and cars instead of Double-doubles.

Frustrations with limited pick-up parking, no way know wait times and no app for ordering ahead prevent customers from eating at In-N-Out.

The Solution

Users want quick browsing, easy pick-up, and the right information when it comes to apps.

We designed a product that allows our customers to intuitively find & compare restaurant wait times, order ahead at a convenient pickup time with a streamlined checkout & a digital wallet to save time, customers will feel at ease to follow their inner ‘animal-style’ craving again.

Design Process

Using design thinking as our guideline, we started to research, desiring a better understanding of customer frustrations. Through this research, my team and I defined the solutions, brainstorm ideas, built a prototype and tested our product versions with users.

Empathize

Assumption Mapping

For our first step, my team and I collected all our assumptions about In-N-Out customer’s pain points, desired results, and reasons for loyalty. This helped us kickstart on what to pursue in improving customer experience.

Value Propositions

Next, we used a Value Proposition Canvas to create a customer profile, and value map. This helped us further understand what products and services could be made to be gain creators and pain relievers for our users.

Customer Persona & Journey Map

Using our customer profile, we created a user persona which guided the progress of the customer journey map to help us empathize with our target user audience.

As the In-N-Out website is not created for food ordering, we did an in-person field study to find improvement opportunities and voted on which we thought were most important to pursue.

Define

Market Research: Why an Order Ahead App?

The current In-N-Out demographic is 24-34 with opportunities for growth in 18+ audience. In fact, 29% Zoomers and 31% Millennials more likely to ordering out due to being busy.

As mobile app ordering for food services on the rise and skewing younger, they are on tighter budgets with money and time. Fast & easy access to digital wallet is necessary for this target audience and we don’t want In-N-Out to get left behind with this technology.

Competitive Comparative Analysis

With more and more apps in the market, we wanted to align our design solutions with key market competitors, ensuring user familiarity and practicing best in breed designing.

Validating Our Strategy

We created a test card and deployed a survey to help us better understand what are customers wanted in order to help ease their overall dining-out experience.

Through our remote survey results, we saw which services users would value most within an In-N-Out app, validating our assumptions and solutions from our research and empathizing stages.

Defining Our Goals

Ideate

Site Map

To help us envision the functionalities, information architecture and features of our mobile app, we created a site map as our outline. We starred categories needed to create an MVP.

Sketch: Crazy 8s

We began by stating the MVP objectives and problems my team and I wanted to solve for within the new order ahead mobile app concept.

Utilizing a Crazy 8's format, we each brainstormed our design solutions, voted on our favorites, and discussed each member’s final iterations. As we had several different objectives to design for, we had 4 total rounds of ideation. Below is an example of the first round.

Design

Lo-Fidelity Wireframes

Each of my teammates chose an ideation they wanted to work on. With our notes from Crazy 8s, we used the ideas in those sketches to design the lo-fidelity wireframes.

As the stitcher, I was responsible for editing each screen, maintaining UI branding, overall consistency of the design, and constantly making sure our prototype worked smoothly.

Hi-Fidelity Prototypes

From low to high-fidelity designing, our focus was to design and edit solutions on the following screens:

Intuitive home screen
Familiar in-app location services
Easy wait time comparisons
On-brand menu browsing
Simple item details page
Streamlined checkout
Multiple payment methods

Iteration 1 Clickable Prototype

Test

Remote User Testing

Using Maze, we gathered data on the usability of each version of our prototype and addressed user issues.

Home Screen

Issues:

Users unclear on how to start tasks
Cluttered visuals causing customer frustration
Hierarchy of information confusing to users

Solutions:

Mobile friendly button sizes & clear language
Information architecture organized with ‘order’ and ‘location’ first
Apply minimal design

Location

Issues:

Currently no way to compare wait times
Users confused with inability to click on pins Confusion with two store details

Solutions:

Create in-app location services with wait time comparison
Fast and easy way to select location using large pins on map
Single location window shown with pin

Menu & Details

Issues:

Menu Organization
Avoid unfamiliar language to brand
Consistent imagery

Solutions:

Categorizing menu items from most popular to least
Stick to familiar menu browsing and customizations
Include all In-N-Out customizations

Checkout

Issues:

Currently no way to order ahead
Customers want easy/quick payment options

Solutions:

Create order ahead & checkout options in app
Offer customers options for payments
Add customer delight to completed orders

Before

Before

Before

Before

After

After

After

After

Final User Survey Results

Though a survey, 100% of our testers answered they would download this app to help them to save time, avoiding long in-person lines, check restaurant wait times and use apply pay.

These responses directly correlate the pain points we wanted to address through the product & solutions we built.