Arrowhead Eats
OVERVIEW
Enhance the live game experience for football fans
Arrowhead Eats is a food ordering app for the Kansas City Chief’s stadium. Arrowhead Eats allows fans to order food from the comfort of their seats. The target audience are football fans who attend live games and want to spend more time enjoying the game.
PROJECT TYPE
Conceptual
ROLE
UX Researcher and Designer, designing from conception to delivery
PROJECT DURATION
April 2023 - August 2023
RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs
THE PROBLEM
Fans at Arrowhead Stadium dislike having to sacrifice time watching the game to stand in line for food.
THE GOAL
Design an app for Arrowhead Stadium that allows fans to order food and get it delivered to their seat.
For this project I used the Design Thinking Process, which is a user-centered approach to problem-solving.
01. EMPATHIZE
Initial user research
To begin this project, I conducted interviews to understand the users I am designing for and their needs. During interviews, I discovered a user group with a great need. This user group were football fans who are non-English speakers. Initially, I assumed the only user pain point was the long wait time when ordering food. This assumption was confirmed. However, after research, I was able to identify other user problems including language barrier.
User pain points
Competitive analysis
I conducted a competitive analysis of both direct and indirect competitors’ food ordering apps with the aim of identifying where user needs were met and common problems I could address with my food ordering app.
02. DEFINE
User personas
Based on the data from the user research, I created two personas whose needs, goals, and frustrations represent the potential users of the app.
User journey map
To really understand the problems and experiences a user would go through to achieve their goal, I created a user journey map for Salim. I tried understanding the behaviors and emotions of the user while they tried to order food in person. Salim’s user journey map revealed where I could provide a better user experience with my app.
03. IDEATE
User flow
After getting a better understanding of my users, I started my design process by creating a user flow to understand all the screens I would need to design.
Paper wireframes
With the user flow mapped out, I then proceeded to sketch wireframes. When sketching wireframes, I drafted many iterations of each screen to get all my ideas out and then finalized each screen with the elements that captured users’ needs the best.
Digital wireframes
As the initial design phase continued, I transferred my final sketches over to Figma. I included design elements to address findings from my research. For the welcome screen, I implemented a language dropdown for non-English speakers and a guest checkout button for users who attend games at least once a year. On the restaurant selection screen, I decided to go with a simple layout to accommodate the wide range on users that will be using the app.
04. PROTOTYPE & 05. TEST
Low-fidelity prototype
Once the digital wireframes were complete, I connected the primary user flow of building and ordering food. This low-fidelity prototype was used in the first usability study with users. View the Arrowhead Eats low-fidelity prototype here.
Usability studies
I conducted two rounds of usability studies. In the first study, users tested a low fidelity prototype and offered insights on how to improve the design for transitioning from wireframes to mockups. During the second study, I used a high fidelity prototype which influenced the refinements of the final product. Here are the revisions from each round of testing:
Round 1 Findings
1. Users want a more intuitive way to edit their orders. To address this concern, I added buttons that allowed users to change the quantity of the items and a “Add Items” button at the bottom to allow users to add items they may have missed.
2. Users want a different universal “Back” button. Some users were confused by the “X” icon so I created a new back button with an arrow and the label “Back”.
3. Users want more visual cues for selecting a restaurant and menu items. To resolve this issue, I added a designated arrow button to give users more visual cues as how to select a restaurant or menu item.
Round 2 Findings
1. Some users felt the buttons and clickable areas were difficult to press. To address the buttons issue, I increased the size of the buttons on all screens. However, for the list selection of restaurants and menu items, I decided to group all the elements into a component. This allowed users the ability to transition to the next screen in the flow without having to directly click on one element.
2. Users felt the verbiage for the Add Items button was confusing. To resolve this issue, I changed the verbiage from “Add Items” to “Add More Items” to give users more context.
THE RESULT
A dedicated food ordering app for Arrowhead Stadium
Final designs
The final high fidelity prototype presented a more accessible user flow for creating and placing an order. View Arrowhead Eats high fidelity prototype.
Accessibility considerations
Takeaways
The Arrowhead Eats app allows users to order food from the comfort of their seat. Users have expressed that the app allows them to spend more time with their friends and family at the game.
When designing the Arrowhead Eats app, I learned that usability studies are very important. If a task is difficult to just one participant, that is a reflection of a larger crowd in the real world. These users helped me think more critical and ideate on my designs from a different perspective.
Moving forward, I plan to conduct another round of usability studies to validate whether all user pain points were addressed and explore more options on ways to improve the app whether it’s a new need or feature.