In-N-Out Burger is an iconic Southern California regional chain of fast food restaurants which has slowly expanded into the rest of California, as well as into Arizona, Nevada, Utah, Texas, and Oregon. In-N-Out has a reputation which entails high-quality food, exceptional customer service, family-owned values, and caring for their employees.
A High-Level Overview
Our team was tasked with finding a solution to the notoriously long lines and wait times at In-N-Out. Using agile methods we sought to alleviate the delay in the ordering process and elevate the customer experience .
Project: iOS Tablet app design (spec work)
Role: Lead UI Designer
Team: Andrew von Haslingen, Jennifer Tran, Alex Johnstone
Tools: Sketch, InVision, Photoshop, Illustrator, SurveyMonkey, Google Slides, whiteboard
Length: 2 Week sprint
In-N-Out was designed to serve quality food quickly. We observed that the popularity has caused a bottleneck when it comes to placing an order, which is causing customers to associate In-N-Out with long lines.
How might we alleviate the wait time in placing an order?
Our main focus lied in improving the customer ordering experience by implementing ways to increase efficiency and address customer pain points. By integrating a digital product to streamline the ordering process we could ensure that In-N-Out does not lose potential customers and capitalizes on providing existing customers the most enjoyable experience.
In addition to the ordering process, we needed to take a look at the service design flow to improve the overall efficiency and production.
Research & Synthesis
What people are saying
In order to gain real-world insight into our user base we conducted interviews and sent out surveys. Initially we screened potential interviewees to make sure they ate at In-N-Out often and ordered inside the restaurant. We then interviewed 5 participants to gain valuable insight into the fast food industry, the restaurant’s reputation, customer expectations, and digital ordering kiosks.
Our findings concluded that although users associated In-N-Out with quality fast food, friendly customer service, and order accuracy, they expected to have to wait a long time to order. Regardless of actual wait time, customers believe that it would take about 20-30 minutes to order and receive their food.
In a survey of 24 respondents, nearly 50% estimated their wait time to order between 10 and 20 minutes.
Determining best practices
To help solve our user’s problems, we ran a competitive and comparative analysis to see what other local, fast food restaurants were doing differently. During the interviews, we asked customers to identify who they thought were some of In-N-Out’s top competitors.
Three competitors which stood out were Shake Shack, McDonald’s and Five Guys. They had implemented in-store digital kiosk system, a native mobile app, and online ordering to help alleviate lines and cut costs. So, we thought if our competitors are doing it, why don’t we do it too? View Competitive & Comparative Analysis
We used an affinity map (below) to discover common trends and relationships in the data gathered during our research. Ideas, complaints, and opinions shared with us helped enlighten us to what users expect when they think of In-N-Out and how we best address those issues.
Observing the PRocess
During a visit to an In-N-Out restaurant we observed through contextual inquiry that on average:
Customers wait approximately 1.5 minutes per customer in line before ordering.
There are a minimum of 10 customers in line during peak hours.
Order wait time is 7.5 minutes from the end of the line.
Approximately 80 customers are served per hour.
With the addition of 2 kiosks per store, we hypothesized that we could cut the order wait time in half, while doubling the number of customers served per hour.
A survey of 2000 restaurant customers in the U.S. revealed:
75% of customers would choose to order from a self-service kiosk, if the line to order is longer than 5 people.
With no kiosk alternative available, 91% would leave the restaurant without ordering if there were 10 people ahead of them in line.
Across a wide range of age groups, customers would choose to visit a store more often if self-service ordering was offered.
Source: Tillster, 2018
Information Architecture & Strategy
Who is our User?
Developing an archetype persona was an instrumental piece in solving our user-centered puzzle. It helps to represent a user type that might regularly consume In-N-Out and struggle with areas of the in-store ordering experience.
Our persona, Lisa, is a 20-year-old student at UCLA, who is on a lunch break. She loves In-N-Out so she heads to the location nearest the campus, but when she gets there there’s a huge line and the wait time is too long for her to order and eat before her next class.
Our next step entailed devising a journey map – a possible representation of the process through which our persona would go about ordering food inside an In-N-Out restaurant.
In our journey map, we generated a narrative through which Lisa might interact with the ordering experience at In-N-Out and possible hang-ups therein.
First Things First
Now that we decided that a digital kiosk system would best solve our problem, we needed to prioritize which features are most important to all of our customer segments.
We used the MoSCoW method to organize which features we must have, should have, could have, and won’t have in a first design iteration, a Minimum Viable Product (MVP).
One such necessary feature would be an eat-in or take-out prompt on the initial screen. Another feature to implement would be the ability to customize one’s order to their specific preferences to align with their notorious “Animal Style” product offering, Spanish translation, and caloric information.
After determining which features were most important, we used open card sorting to organize the navigation schema and content categories of In-N-Out’s signature simple menu.
We then created a site map with a recognizable global navigation based on menus items such as Combos, Burgers, Fries, and Drinks.
Usability & Ideation
Design Studio & Sketching it out
Our team conducted a design studio to explore visual ideas and quickly share visions for the elements of our user interface. Brainstorming, critique, and prioritization were incorporated as we sketched concepts for the landing pages and visual hierarchy of our tablet app.
Sketching also provided us with ideas for graphic elements and iconography to be used in our user interface.
Wireframes, testing, & iteration
Based off of the sketches from our design studio we fleshed out low-fidelity digital wireframes to act as the skeleton of our interface layout. We printed the wireframes and were able to use them as a prototype in order to begin testing the usability of the flow of our product.
The paper prototype revealed problems with our navigation schema and menu intuitiveness. We also needed to tackle how to implement In-N-Out’s signature “secret” customization menu.
Reiterating and testing are crucial steps in the agile methodologies we used to develop our product. Continually testing our users provided us with areas for improvement until we reached an intuitive and user-friendly ordering/checkout flow.
Execution & Validation
Final high-fidelity prototype
After synthesizing our research we decided that the best solution to our user needs was to develop a vertically-oriented, 12.9” iPad digital kiosk.
Inspiration for the user interface was drawn from retro diners and drive-in restaurants prevalent in Southern California. The visual design sought to convey a balance between a trustable, contemporary digital product but also maintain the old-fashioned, no-frills branding.
We wanted the kiosk to be relatively inconspicuous in order to align to the simple In-N-Out branding. The kiosk would be located near the entrance to the restaurant but away from the line and front door.
For our next steps, we also propose the development of a native mobile app for online ordering so that we can capture our entire target market and cater to our loyal customer base.
After running last minute usability tests, we realized that our next iteration should focus on including more ways to customize the orders.
While our brief was to create an ordering alternative, we have to acknowledge that more orders in less time will likely create a new bottleneck in the backstage kitchen operation. An important next step would be to do a complete map of the service flow to find ways to ease the burden on the kitchen.