The Challenge

The COVID-19 pandemic led to widespread restrictions on in-person dining. Many restaurants had to quickly adopt online ordering systems and mobile apps to continue serving customers.

This use of technology for food ordering has become the new norm, and is likely to continue even after the pandemic subsides.

Design a holistic mobile app solution for a fast food chain ordering experience.

A Team Effort

Our team chose In-N-Out (because, California) and were immediately surprised to learn that In-N-Out does not currently offer in-app ordering. Challenge: accepted! Their mobile app was ripe for a redesign and the integration of in-app ordering.

This is how we brought classic icon In-N-Out Burger into the modern age.

My Role and Responsibility

As the lead UX Designer on our cross-functional team of 5 design and developer students, it was my responsibility to align the team on a singular vision, foster open communication and collaboration, and advocate for user-centered designs.

In order to facilitate these responsibilities, I made a point to hold weekly scrum meetings via Zoom, host live design sessions in Figma and conduct critical feedback retrospectives after each sprint.

Our Design Process

With just 10 weeks to deliver a mobile ordering solution from scratch, time management was essential. I budgeted our time to allow for both the research and design phases of our double diamond design process.

Following this UX methodology, we produced a number of deliverables to explain and defend our design thinking in a final pitch presentation for our stakeholders.

Pain Points and Expectations

We conducted an initial Survey with the goal of uncovering the needs, pain points and mental model of In-N-Out customers.

With 67 responses, we learned that users want & would use the In-N-Out app to order food, that 9 out of 10 people were unaware there currently is an In-N-Out app, and that the most important features when ordering in-app are: Easy Navigation, Quality Food and an Accurate Order.

View full survey here.

View full survey results here.

Meeting User Needs

In our Zoom meeting for this sprint, we needed to verify market fit and brainstorm X-factor opportunities from the insights of our survey responses. Compiling a Value Proposition Canvas identified the products & services, gain point creators and pain relievers the app could feature to meet the needs, pain points and mental model of In-N-Out customers.

Bringing the Target Market to Life

I prepared User Personas to represent the various demographic groups found in our survey respondents. Our market research for In-N-Out Burger showed that In-N-Out primarily caters to teenagers and young adults and that mobile app usage is higher among the age group of 18-34.

With these insights, our team agreed to move forward prioritizing my user persona for Matt “Matty” Engle. Matty is a culmination of both the market research and survey results. From this point forward, we would keep Matty in mind for every design decision.

Matty’s In-N-Out App Experience

In-N-Out Burger’s current mobile offering is solely a locator app: In-N-Out locations, hours and directions.

Mapping out Matty’s Customer Journey with touch points from the current In-N-Out app, helped us identify which stages of the mobile ordering process he would face pain points, and the business value opportunities those pain points present.

Competition and Common Conventions

We conducted a Competitive Analysis of top competitors: Chick-fil-A, McDonald’s and DoorDash to uncover common conventions for mobile ordering apps and industry standard features to meet Matty’s expectations and provide him with a more intuitive experience.

We 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.

Everyone Has Ideas...

We were aligned on who we were designing for and our objective of enabling online ordering. It was time to transition from research to design. I led an ideation workshop to start sketching the features and interface of our app.

Each team member began with sketching their vision for displaying menu items, customization and a checkout process. We then presented the 3 top versions of our sketches with each other.

Anonymously, we then submitted Lo-fi Wireframes, pulling from all of the ideas shared and discussed in the sketches.

Utilizing the UX methodology of dot voting, we were able to see which features and interface elements we wanted to move forward with and those that needed to be altered or abandoned. I wanted this part of the ideation phase to be anonymous, so we could be candid in our choices and not be intimidated or influenced.

Putting Our Designs to the Test

Getting our designs into the hands of actual users was an exciting moment. We ran a series of remote unmoderated Usability Tests through Maze.co with the goal to:

• Establish if users understand the use & purpose of the navigational menu

• Establish if users can accomplish the core aspects of placing an order

• Find areas of potential frustration & improvement

Preference Testing questions, helped us to determine specific UI elements that would equally suit our persona, Matty. In the example above, we were looking for the ideal placement of the CTA button to “Order for Pickup”.

Usability Testing was the key to uncover points of frustration in a user task and pinpoint the difference between what users say they want and what users actually do.

Surprise! We had the opportunity to test this theory with a preference test question paired with a usability test task of starting a meal purchase.

86% of testers preferred Option 1 with the CTA button of “Start Your Pickup Order” on the home screen preference test.

0% of those same users actually used that CTA button on the home screen when tasked with starting their order.

With each round of usability testing, we made iterations for a more seamless experience. Scrolling through the images above, I’ve highlighted the pain points we identified and iterated from our initial prototype to our final design solution.

View our prototype here.

Epilogue for Leading a Team

I am grateful to have had this opportunity to step up and lead a cross-functional design team. User experience is a commitment to never-ending learning and this project taught me a lot about team building, taking on added responsibility, and product management.

Thank You.

Thank you for your time today and adventuring through my team design challenge for In-N-Out. I invite your thoughts and critique, so please feel free to contact me. Until then, have a great day!