In-N-Out Burger

Ordering System: Mobile App

Overview

The In-N-Out Burger mobile app is a conceptual digital product intended to demonstrate the potential of the In-N-Out Burger brand to expand its business into the digital age. As with many self-initiated projects, the main reason this project exists is to illustrate some of my UX, UI, product, and visual design skills that I am unable to showcase through client work.

My role.

Everything from start to finish.

Phase I: Discovery

Coming into the discovery phase, I already had the idea to design an In-N-Out Burger mobile app after recalling having read reviews on the In-N-Out Burger location finder app of customers wanting an app that will enable them to order. The three main objectives of the discovery phase was to 1) create a schedule that I definitely did not stick to because life happens and this is a personal project, 2) gather reading materials, and 3) relay the most useful reading materials to the user research phase. I found eight articles about types of user research, five different links to lists of In-N-Out Burger reviews, nine articles about pain points with food apps, four articles about how much user research is necessary, and four articles about design systems.

Phase II: User Research

The user research phase is when I summarized findings from the articles. This phase was extensive, so I won’t write the entire comprehensive report of my findings here. I’ll just mention the two most important sources of information I came across.

The first is a set of surveys where both customers and deliverers ranked their food delivery service complaints. I concluded that removing third party deliverers and building an in-house delivery customer experience (CX) should mitigate most of the pain points associated with deliverers from both a customer and deliverer perspective.

The second vital source of information are the In-N-Out Burger reviews I read on Yelp that were posted between 2018 and 2021. I read twenty-three (23) different two-star reviews, twenty-two (22) different three-star reviews, and twenty-one (21) different four-star reviews. The goal here was to find complaints about the service process that might be solved or mitigated using modern tech. That means ignoring complaints related to the food itself, as hilarious as some of those can be. Reviewers in each of the star categories complained of long lines, and reviewers in the two- and three-star categories complained about wait times. The four-star reviewers complained about lack of parking. In addition to line lines and wait times, two-star reviewers complained about rude service, restaurants being too busy, lack of seating, and incorrect orders. These again seem like customer complaints that can be solved or mitigated with a mobile app, particularly one with home or curbside delivery that will enable customers to avoid long lines, long wait times, bad customer service, having to find seating, or having to find parking.

Phase III: Personas

Based on the findings in the user research phase, I came up with four user personas.

User Type 1: The home delivery user.
User Type 2: The user who enjoys the restaurant experience, but hates fighting crowds.
User Type 3: The large party user.
User Type 4: The resident who can’t enjoy her/his local In-N-Out due to tourist crowds.

Some of the personas basically wrote themselves as Yelp reviews, including this three-star review from a Yelp user:

“Yeah I love you in n out but this location isn't fun for someone who actually lives in sf and is craving in n out. Like it's super close to my house. But this place is always cradling with tourists and just not a happy place to be. Better to commute to the Daly City one. Like really, how about one more in n out in a more practical area ?”

From a business perspective, In-N-Out Burger is missing out on a customer who loves the food, but doesn’t want to deal with her local restaurant that is very close to her house. I used the review to create the following User Type 4 persona:

Brooke is a mid-20s college graduate in the tech industry who values her down time after work. She recently moved into a downtown apartment in a busy urban area with lots of tourists, so she needs a way to enjoy her favorite restaurant food without having to wait behind crowds.

Before moving onto the next phase, I will give an honorable mention to the Yelp user who said he visited an In-N-Out restaurant with a party of fifteen, and that the restaurant not surprisingly made mistakes with those orders. This inspired User Type 3.

Phase IV: Information Architecture

Here is a simple sitemap of the mobile app. The sitemap was constructed using Figma.

Phase V: Wireframes

Like most digital products this concept began with wireframes, which I completed using Figma. I utilized the wireframes for layout and functional iterations I could later use as skeletons for the final designs (see: Visual Design section). My wireframe style is somewhat flat due to a combination of my own taste and getting a sense of the gravity the elements together will have that is not always accurately communicated using more line-based wireframes. The wireframes may contain minor errors like spelling mistakes, but these are meaningless since most of the polishing takes place in the design and prototyping phases.

In-N-Out Burger mobile app wireframes Figma screenshot

Figma work-in-progress screenshot.

Phase VI: Visual Design

This is where the product begins to take shape. Using the wireframes as a guide, visual designs for all key screens of the initial launch are completed down to the pixel. Just like the wireframes, I used Figma to create the designs, though I could’ve also used either Sketch, Adobe XD, or Photoshop since most design layout programs function the same.

In-N-Out Burger mobile app design Figma screenshot

Figma work-in-progress screenshot.

Phase VII: Prototype

I know I already posted a link to the prototype at the beginning for those who just want a basic idea of how the app functions without reading paragraphs of text, but here is where we product design nerds who have made it this far get to discuss the prototype. I used Figma to build the prototype.

I could have used BBEdit to build a higher fidelity prototype in HTML, CSS, and JavaScript to illustrate functionality, subtle animations, and other interactions that cannot be illustrated using Figma (eg, fixed elements, hover effects, videos, and dropdown menus), but the additional work necessary to code it would not have been worth the incremental gains in interactive demo.

In-N-Out Burger mobile app prototype Figma screenshot

Figma work-in-progress screenshot.

In-N-Out Burger mobile app prototype Figma screenshot

Figma work-in-progress screenshot.

Challenges

Some design challenges include but are probably not limited to: dealing with the many nuances of a secret menu, creating interactions that enable users to customize orders with different onion options or different sizes of drinks, and organizing the information architecture in a sitemap that makes sense.

Conclusion

Maybe one day In-N-Out Burger will make life easier on their customers by building an app that will enable those customers to enjoy the food without unnecessary hassle. If they do, they know who to contact.