Challenge

With its great popularity and high-demand for its food, In-N-Out Burger has well-known issues around consumer wait times, a potential harmful risk to their loyal customer base. No matter the time, consumers can expect long wait times with an average of 12-15 minutes in line in-store while drive-thru usually takes longer. This far exceeds wait times of competitors. While they do have an app, it does not have a feature for ordering so customers are forced to experience the long lines. App reviews reflect consumer frustration with this limitation.

customers waiting

Photo credit: William Luther, San Antonio Express-News

Photo credit: William Luther, San Antonio Express-News

drive-thru

Photo credit: TowerGuy, www.city-data.com

Solution

Provide a better In-N-Out Burger consumer experience by reducing wait times through enhancements and increased functionality of an existing app. The goal is to make improvements to allow consumers the convenience of ordering and paying electronically, making for a simple and quick transactional process. Consumers will also have the option of pay-by-phone. Pre-ordered items from the app will then be ready for pickup without waiting on line, avoiding long lines and wait times.

Solution

Provide a better In-N-Out Burger consumer experience by reducing wait times through enhancements and increased functionality of an existing app. The goal is to make improvements to allow consumers the convenience of ordering and paying electronically, making for a simple and quick transactional process. Consumers will also have the option of pay-by-phone. Pre-ordered items from the app will then be ready for pickup without waiting on line, avoiding long lines and wait times.

old ui screens

Current 2018 In-N-Out Burger App

User Center Design Process

UX process

User Research

Research was initiated to discover whether In-N-Out Burger customers find long lines and wait times discouraging, and if it moves them to support a competitor. An online survey set out to identify consumers who frequent fast-food restaurants and collect information about their overall experience. In addition, interviews were conducted with selected In-N-Out customers to obtain deeper insights. View online survey

User Research

Research was initiated to discover whether In-N-Out Burger customers find long lines and wait times discouraging and if it moves them to support a competitor. An online survey set out to identify consumers who frequent fast-food restaurants and collect information about their overall experience. In addition, interviews were conducted with selected In-N-Out customers to obtain deeper insights. View online survey

User Research

Research was initiated to discover whether In-N-Out Burger customers find long lines and wait times discouraging and if it moves them to support a competitor. An online survey set out to identify consumers who frequent fast-food restaurants and collect information about their overall experience. In addition, interviews were conducted with selected In-N-Out customers to obtain deeper insights. View online survey

Survey Method

  • Online screener survey targeting 20 respondents from varying demographics
  • Series of short qualitative, multiple choice questions
  • Feedback about their fast food experiences

Survey Result Highlights

  • On average, respondents visited various fast-food restaurants about three times per week
  • Respondents preferred the drive-thru instead of dining in
  • Most were not aware that fast-food restaurants offer an app, the ones that did used it to order and picking up food for convenience
  • On average, respondents visited various fast-food restaurants about three times per week
  • Respondents preferred the drive-thru instead of dining in
  • Most were not aware that fast-food restaurants offer an app, the ones that did use it to order and pick up food for convenience
  • On average, respondents visited various fast-food restaurants about three times per week
  • Respondents preferred the drive-thru instead of dining in
  • Most were not aware that fast-food restaurants offer an app, the ones that did use it to order and pick up food for convenience
survey infographic report

Questionnaire Report

  • Respondents were excited that In-N-Out Burger offered an app, but found it disappointing that orders cannot be placed with it
  • Generally, In-N-Out Burger customers are happy with the quality of the food. However, they are discouraged by the long wait time
  • To combat the wait times, most prefer to come in the evening and avoid the long drive-thru lines by coming inside

Questionnaire Pain Points

  • Not knowing how much time it will take to get to counter
    and place an order
  • Having to abruptly leave for a competitor without ordering
    due to the long lines
  • Having an incorrect order and having to go back and wait some more
  • Finding a place to sit and eat after waiting in long lines to order
  • Frustrated long drive-thru lines while on low gas
  • Wish the In-N-Out Burger app featured ability to order
  • Not finding a place to park

Competitive Analysis

Two direct competitors were targeted, McDonald’s and Five Guys, along with one indirect competitor, Starbucks. All three have apps that allow users to order and pickup. The Starbucks app is superior in terms of design and user experience based upon Nielsen's’ Usability Heuristics principles. Apps for McDonald’s and Five Guys had a number of issues that did not quite follow Nielsen's’ Usability Heuristics guidelines and both have room for improvement. View the competitive analysis report 

heuristics

Personas & Empathy Mapping

Four personas types were created representing the loyal In-N-Out Burger customer, based on research collected. For each, an empathy map was devised to help understand how each consumer type thinks, feels, hears, sees and does.

empathy map student
empathy map mom
empathy map driver
empathy map warehouse

User Stories & MVP

With a better understanding of the needs of each persona, a Minimum Viable Product (MVP) was created with user story scenarios.

User Stories and MVP

With a better understanding of the needs of each persona, a Minimum Viable Product (MVP) was created with user story scenarios

User Stories and MVP

With a better understanding of the needs of each persona, a Minimum Viable Product (MVP) was created with user story scenarios.

user-story-1
user-story-2
in-n-out-card-sorting

Card Sorting

An open card sorting activity was initiated to help determine the framework for app infrastructure, mapping of user journey, and navigation. Three participants were selected, each was tasked to sort into categories to help understand how they envisioned content on an app, what content they expected to see, and where they expected to see it. Surprisingly, each participant shared a completely different view from one another.

Card Sorting

An open card sorting activity was initiated to help determine the framework for app infrastructure, mapping of user journey, and navigation. Three participants were selected, each was tasked to sort into categories to help understand how they envisioned content on an app, what content they expected to see, and where they expected to see it. Surprisingly, each participant shared a completely different view from one another.

Card Sorting

An open card sorting activity was initiated to help determine the framework for app infrastructure, mapping of user journey, and navigation. Three participants were selected, each was tasked to sort into categories to help understand how they envisioned content on an app, what content they expected to see, and where they expected to see it. Surprisingly, each participant shared a completely different view from one another.

Card Sorting

An open card sorting activity was initiated to help determine the framework for app infrastructure, mapping of user journey, and navigation. Three participants were selected, each was tasked to sort into categories to help understand how they envisioned content on an app, what content they expected to see, and where they expected to see it. Surprisingly, each participant shared a completely different view from one another.

Site Map

With useful data on hand from the card sorting exercise, a tentative sitemap was created.

Site Map

With useful data on hand from the card sorting exercise, a tentative sitemap was created.

site map

User Flows, Sketches, and Wireframes

Based on the MVP’s and user stories, I developed the user flow journey by mapping out and documenting what the user might do and what they might expect to see while in the process of accomplishing a task quickly and efficiently. This helped visualize how certain screens may appear from a user perspective. It set the groundwork for creating low-fidelity sketches, which evolved to high-fidelity wireframes with software application tool ‘Sketch’. This validated the flow and allowed me to optimize and improve the user experience.

User Flows

user-flow-1

Order gift card user flow

user-flow-2

Add location to favorites user flow

User flow two

user-flow-4

Order menu item user flow

Order Menu item user flow

Sketches

sign-up-sketch-mock
add-menu-item-sketch-mock
change-location-sketch-mock
add-menu-item-sketch-mock
wireframe sign up
wireframe change location
wireframe add menu item

Prototype

A fully functional user flow prototype was then created from the wireframes using the Invision prototyping app. The wireframes were enhanced throughout this process to further optimize the user experience. Click links below diagrams to view full prototype.

Prototype

A fully functional user flow prototype was then created from the wireframes using the Invision prototyping app. The wireframes were enhanced throughout this process to further optimize the user experience. Click links below diagrams to view full prototype.

Prototype

A fully functional user flow prototype was then created from the wireframes using the Invision prototyping app. The wireframes were enhanced throughout this process to further optimize the user experience. Click links below diagrams to view full prototype.

Prototype

A fully functional user flow prototype was then created from the wireframes using the Invision prototyping app. The wireframes were enhanced throughout this process to further optimize the user experience. Click links below diagrams to view full prototype.

Usability Testing

Next step focused on user interaction with the app through testing of each of the user flows. Three users with different backgrounds matching the persona type tested each user journey script created. A college student, a mother of two, and a working professional. All were fairly proficient at using various mobile food apps, frequently using them throughout the test week. Each tester had 3 tasks to complete, to add a menu item, to change and find a location, and to set up an account for a first-time user. View usability testing script

Usability Testing

Next step focused on user interaction with the app through testing of each of the user flows. Three users with different backgrounds matching the persona type tested each user journey script created. A college student, a mother of two, and a working professional. All were fairly proficient at using various mobile food apps, frequently using them throughout the test week. Each tester had 3 tasks to complete, to add a menu item, to change and find a location, and to set up an account for a first-time user. View usability testing script

Test Report

Testing uncovered additional important feedback and observations to incorporate for a more enhanced the app user experience including:

Test Report

Testing uncovered additional important feedback and observations to incorporate for a more enhanced the app user experience including:

  • Update the labeling on certain fields to make it clearer
  • Enhance the selectable checkbox function on customizing screen
  • Simplify the ‘add payment card’ screen to make process easier for user
  • Clarify verbiage on action buttons
  • Make items more visible and not hide them behind an action button once added
  • Update the labeling on certain fields to make it clearer
  • Enhance the selectable checkbox function on customizing screen
  • Simplify the ‘add payment card’ screen to make process easier for user
  • Update the labeling on certain fields to make it clearer
  • Enhance the selectable checkbox function on customizing screen
  • Simplify the ‘add payment card’ screen to make process easier for user

 

  • Clarify verbiage on action buttons
  • Make items more visible and not hide them behind an action button once added
  • Clarify verbiage on action buttons
  • Make items more visible and not hide them behind an action button once added

 

Style Guide in n out

Style Guide

With functionality testing complete, I created a mobile style guide that included components, patterns, and icons aligning with the In-N-Out Burger brand guidelines.

High Fidelity Visuals

The final step was combining the elements to create a fully branded In-N-Out Burger app user experience

High Fidelity Mockups

Now that the revised high fidelity wireframes, prototype and style guide were created it was time now to put them together and create the look and feel and identity of the app. Overall I am pleased with the final product and believe it will deliver a successful user experience receipt for In-N-Out Burger customer and for the business.

in-n-out burger screens
in-n-out burger add menu screens
Add Menu Item
in-n-out burger change location screens
Change Location

© SANDEEP HUNDAL 2022.