In-N-Out

USER research . ux design . prototyping

This project was an in depth, wholistic dive into UX design. Starting at the beginning with a heuristic evaluation of the In-N-Out Burger website, then following the design process by creating personas, user stories, competitive analyses, and finally a fully functioning prototype.

I then took this a step further by using the data collected to produce a mobile application for In-N-Out Burger. Currently In-N-Out does not have an application that allows for online ordering. While In-N-Out's decision not to have an online ordering app may be rooted in its commitment to tradition and simplicity, this ideology was kept front of mind while designing the in app ordering experience.

You can view the web prototype here.

You can view the mobile prototype here.

Heuristic Evaluations

Heuristic evaluations play a crucial role in understanding and improving website design by providing structured insights into usability issues and design flaws. While the In-N-Out website relates to its real world restaurants in many ways, after conducting a heuristic evaluation there were a number of issues that could be remedied to effectively improve the overall success of the site and garner more engagement with the brand.

KEY FINDINGS

The In-N-Out Merchandise tab takes you away from the original page with no way to backtrack. This breaks the H3 heuristic ‘User Control and Freedom.’
Limited to no customization of menu items, which if you are an avid In-N-Out customer you know is not how the stores operate. This breaks the H2 heuristic ‘Match Between System and the Real World.’
In-N-Out offers catering, it has a large truck that you may rent out for events and parties but there is no way to see online if the truck is available for certain dates. This breaks the H1 heuristic ‘Visibility of System Status’ and the H3 heuristic ‘User Control and Freedom.’

Personas & User Stories

With information collected from the heuristic evaluation as well other usability test materials three personas and three user stories were generated.
A quick synopsis of these findings are as follows;

High Fidelity Web Prototypes

1 . By integrating a merchandise carousel in the home page we can call out signature and new items. This will drive sales and creates more of an integration between food and merchandise on the main webpage. Additionally opening the ‘Merchandise’ page as a new tab will save the end user from confusing the two separate web pages.

Mcdonalds has a strong emphasis on their rewards program. Ordering food gives users points to redeem for free items on their next visit.
A great way to ensure repeat customers.
To edit an order in the application can feel cumbersome. Users must go and repeat the entire checkout process after modifications to order.

High Fidelity App Prototypes

4 .

5 .

chipotle

2 . A loading screen animation for use in between screens.

3 . The main menu screen which has pictures of the items being ordered as well as customizable options. The price and calorie count are shown in the bottom red portion where you can also ‘add to bag.’

Next Steps

6 .

2 . One of the many things In-N-Out Burger is known for is its ability to be fully customize food orders. In this prototype you can see what that would potentially look like alleviating any confusion for the health conscious user. This will also add a fun feature for new guests who are interested to see just what makes an In-N-Out Burger special.

3 . Creating a calendar on the ‘Cook Out Truck’ page can quickly show users the availability of the truck and will help to alleviate frustration of someone just trying to inquire about its availability and packages.

Upon further inspection of this truck, its rental options are extremely limited and as such I generated a mock up for a smaller and more mobile option for smaller events as shown below.

Competitive Analysis

I conducted a competitive analysis of some top competitors: Chipotle, McDonald’s and DoorDash to uncover common conventions for mobile ordering apps and industry standard features to meet users expectations and provide them with a more intuitive experience.

I found that the ability to reorder past purchases, providing a visual representations of menu items and that access to nutritional information & ingredients were the main industry standards.

mcdonalds

Much like in person ordering, the Chipotle app gives users a very large amount of customization on all of its items.
The app overall is slow and cumbersome. Many times timing out, and leading to users giving up all together.

1 .

door dash

Door Dash is an amazing example of maximization in UX design. Its organization of the many ordering options feels seamless.
There is a great ‘group ordering’ feature that allows for users to group and label items for each person in the order.
Unfortunately their is no option to order In-N-Out on door dash.

The overall design is inspired by the existing web presence of In-N-Out Burger. The homepage features a carousel that will call out specials, features, and other important information. The ‘order here’ button will be locked at the bottom of the page, as the users main point of entry to the ordering process.

There is a top navigation consisting of three elements, a ‘hamburger’ icon that opens to allow users to sign in or sign up, as well as options that will ultimately bring them to the In-N-Out web page for more information. The In-N-Out logo acts as a home page which mimics the website, and is a fail safe if the user wants a quick exit. Finally the 'user account’ icon which will take you to your account. Eventually showing previous orders, payment information, and other basic information about the user.

The page scrolls to the iconic In-N-Out sunset scene at the bottom of the page much like you will see at the bottom of the webpage. This further connects the application and website as two separate but equal entities.

1 . Location services will show both a map and below addresses that can be selected for either your pick up or (eventually) delivery. There is also a search bar if you cannot find the store you are intending on looking for.

2 .

3 .

4 . The ‘Check Out’ screen will give a visual summary of the users order, as well as add ons such as condiments, and cutlery. It also shows the pick up location and approximate pick up time. All of these options are still editable until order is finalized.

5 . This the final screen before placing your order again gives the user final options to edit, pick up time, contact information, and a tip option before submitting the order.

6 . A confirmation screen shows that the order has gone through, and the final pick up time and location. There is also a cancel order button in case the user cannot get to the food in time or other issues arise.

As I move forward with the development of the In-N-Out application, next steps involve diving deeper into market and user research to refine and enhance my understanding of the user base. Specifically I would like to explore some of the likes and dislikes about user profiles in online ordering applications. What do users want to see? What do users expect to see? What are some features that users like and dislike? Answering these questions while also keeping the In-N-Out identity is key, and could really make an application that users love, but also drives an already expanding business.