Work About Blog Résumé

In-N-Out Burger App

eCommerce • Interaction Design • Visual Design • Information Architecture • User Research

Introduction

Looking to create another eCommerce system I searched for restaurant chains without current food delivery apps. I eventually came across the In-N-Out Burger mobile app, one of the few restaurant chain apps that has yet to implement functionality that enables users to pre-order food. I scrolled through the reviews (below) to get user goal inspiration.

Reviews

In-N-Out Burger app reviews.

Notice in the top two screenshots the 3-star review at the left and the 1-star review at the right. The reviews from the bottom two screenshots speak for themselves. Based on the reviews I created two sets of user goals:

As a customer I want to…

User flow and information architecture.

In-N-Out Burger restaurant app redesign redesign checkout process user flow.

Though I am showing this before the visuals, I actually created this flow after finishing the screens so I could add the button/link interactions to the architecture. At the beginning of the project I used pen and paper to create a rough version of this flow.

Low fidelity wireframes.

In-N-Out Burger restaurant app redesign low fidelity wireframes.

I have multiple art degrees, so I promise I'm neither this bad at drawing nor this bad at handwriting. But often my designs begin as chicken scratch wireframes that allow me to get visual ideas on paper as quickly as possible to tackle the user goals above. What you see here is the pen and hand desperately attempting to keep up with the brain. Since this is a solo project, the wireframes only need to be legible to me. If this was a team project, I would refine these wireframes into mid- and/or high fidelity.

Visual mockups.

In-N-Out Burger restaurant app redesign log in and sign up screens.

Log In screen (left) and Sign Up screen (right).

One of my user experience pet peeves is forcing the user to sign up for something that has neither provided that user any value nor indicated it will provide that user any value. While forcing the user to sign up initially maximizes the number of immediate members, the percentage of active members will be lower than that of a design system that enables users to sign up only after they believe the app somehow makes their lives easier. A “Use As Guest” call-to-action (CTA) maximizes sales on all e-commerce platforms by enabling users who would otherwise be discouraged by a sign up process to make purchases.

In-N-Out Burger restaurant app redesign order screen and delivery information.

Order screen (left) and Delivery Information screen (right).

The home screen on the current app gives the user a menu with basic website links. The Order screen on the redesign acts as the home screen where I put three pre-order CTAs. The Delivery Information screen appears when the user selects “Get Delivery” option on the Order screen.

In-N-Out Burger restaurant app redesign location screen.

Location screen with default (left) and location selected (right).

The Location screen appears when the user selects either “Eat In” or “Pick Up” options on the Order screen.

In-N-Out Burger restaurant app redesign menu and item.

Menu screen (left) screen and Item Overlay screen (right).

In-N-Out Burger restaurant app redesign menu and secret menu.

Menu w/ Item in Bag screen (left) and Secret Menu (right).

In-N-Out Burger restaurant app redesign bag and payment information.

Bag screen (left) and Payment Information (right).

In-N-Out Burger restaurant app redesign submit and order confirmation.

Submit screen (left) and Order Confirmation (right).

In-N-Out Burger restaurant app redesign tracking.

Tracking screens for delivery orders.

Hypothetical completion.

Like any disciplined independent creative, I gave myself an arbitrary deadline, so most of the work above I completed within a two-week span. However, deadlines create limitations, which is why no perfect app exists, thus the term, "minimum viable product" (MVP). I determined that the best place to end this project is a basic demonstration of the order process, which means this app design is far from complete as a concept. Below is what the app would need to be closer to “complete,” including but not limited to:

Home > Work > In-N-Out Burger App