|
Project Overview
Project Duration:
November 2022 - January 2023 Project Type: Mobile Application Tools & Methods Used: Figma, competitive audit, empathy map, user personas, user journey maps, wireframing, prototyping, usability testing. |
|
The Product ICA is a concept for mobile app for a stadium that allows stadium-goers to order food & drink for pick-up or delivery to their seats so they don’t have to miss a second of the game.
|
|
|
My Role
Lead UX designer designing an app for a major sports stadium from conception to delivery.
|
My Responsibilities
> Conducting competitive research
> Creating wireframes > Building low and high-fidelity prototypes > Conducting usability studies > Accounting for accessibility > Iterating on designs > Documenting design process |
The Problem
|
Many users miss crucial parts of an important event walking around crowded stadiums and waiting in long lines for food & drinks.
|
|
The Objective
Create an app that eliminates these issues for users so they can enjoy food and drinks without missing out on the event.
|
My Process
Here is a quick summary of my design process. Continue scrolling to check out the process in more detail.
Here is a quick summary of my design process. Continue scrolling to check out the process in more detail.
|
|
1. Explore First, I studied different mobile order apps to better understand the landscape.
Then I completed user research, including conducting interviews and creating user personas and journey maps. |
|
|
2. Design I sketched out multiple options for key screens and chose which features were most important to include.
Next came digital wireframes. |
|
|
3. Test & Iterate After designing the low-fidelity prototype in Figma, I conducted the first set of usability tests. Using this data, I completed another iteration of the design, creating a high-fidelity prototype, followed by more usability testing. |
|
|
4. Refine After the second set of usability tests, I refined the design, improving usability of the app and ending with the high-fidelity prototype that you see in this case study.
|
|
|
5.
Reflect At the end of every process, it is important to look back on the project, take stock of what I learned & determine next steps.
|
|
|
|
|
User interviewsFirst things first, we need to understand the user. So I conducted user interviews to learn about the current user experience at major sports arenas and determine pain points. |
Empathy mappingAfter conducting interviews, I used empathy mapping to better understand the user experience. |
|
Empathy mapping revealed three key pain points:
|
|
|
Competitive AuditNext, I conducted a competitive audit to get an idea of the current app space for stadiums. I compared and contrasted the key features & usability of 8 apps. |
This research led to two key insights:
|
|
1. Many major sports stadiums do not have apps that allow you to order food & drinks to your seat. |
2. Of those few that do, many do not also allow you to access your tickets from the same app and some take you to an external website. |
This research brought to life the reality of who the users will be & what the user needs while at a game.
|
|
I divided most users into the two following user groups which I then turned into user personas.
|
2.
Users who may have difficulty navigating the stadium due to mobility issues, anxiety in crowds, or unfamiliarity with the stadium. |
User Personas
|
George Problem statement:
George is a major sports fan who needs a way to order to his seat because he doesn’t want to miss out on watching the game. |
|
Julia Problem statement:
Julia is a young woman who needs a way to limit time in crowds, without spending more on delivery, because she often gets anxious and lost in large stadiums, but doesn't have the budget to pay additional fees for delivery. |
|
User Journey Mapping
Next, I created user journey maps for George & Julia to get an understanding of their experiences attending a game and where our app can improve or eliminate pain points during this experience.
|
When considering George’s journey, I considered that users like him are more willing to pay a little bit more money for convenience. |
|
When considering users like Julia, it stood out that they are not familiar with the stadium, and how crowds are a major pain point. |
|
|
Okay, so now that we have a better understanding of the user experience - what now?
|
Keep scrolling to see the next step of the process:
designing the solution
designing the solution
|
|
The Solution
|
A simple app that:
|
|
Features & Functionalities
These are the key features & functionalities that I wanted to include in the app to address the pain points that I found during the research phase.
|
|
|
App that allows users to quickly and efficiently order and track their orders for pick up or delivery to their seat. |
|
Map that shows users the different concession options as well as helps them navigate to their seats and saves their parking space. |
|
|
|
Create an incentive system so users are rewarded for loyalty. |
|
Allow users to easily access previous orders so that they can quickly reorder favorites. |
|
Paper Wireframes
After determining the key features to include, the next step is to draw some rough sketches for the most important pages.
|
Multiple layouts were sketched out for each key screen before turning these designs into digital wireframes.
Experimenting with layouts on paper allows me to quickly explore ideas and get feedback before moving to more detailed digital designs.
For each page, I prioritized simplicity and accessibility for ease of use while at a busy game.
|
|
|
Once key screens were sketched, more detailed user flows were sketched about before moving to digital wireframes. For example, here you can see how I quickly laid out the basic review cart user flow.
|
Key Digital Wireframes
With digital wireframes, I was able to refine the layouts, add more details such as menus and search bars, and get a better idea of the best size for each item.
|
Conducting the competitive audit & interviews early on, helped me determine which features were key for a mobile order app, such as:
|
|
|
|
Usability Testing
Next, I conducted moderated usability studies so that I could get both verbal feedback and quantitative data gathered through tracking KPIs.
Key Performance Indicators (KPIs):
|
1. System Usability Scale (SUS)
2. Time on Task
3. Net Promoter Score
|
Findings from first set of usability studies:
|
1.
Many users found it unclear what the stadium icon represented before clicking on it. |
2.
The section to choose pick up or delivery did not stand out enough to all users. |
3.
Some users disliked certain parts of the check out process. |
Findings from the first set of studies helped guide the designs from wireframes to mockups.
|
The second set of usability tests used a high-fidelity prototype and revealed what aspects of the prototype needed refining or modifying.
|
Findings from second set of usability studies:
1. |
Search and add to cart buttons should be bigger.
|
2. |
All users found the error messages successful, but one reported it might be helpful if they stood out more.
|
|
3.
|
Some users found the font too small for the body text on the menu & receipt screens.
|
|
4.
|
Users wanted to see photos and to be able to customize their order.
|
Key changes made after second round of usability testing
|
The second round of usability studies revealed:
|
|
|
Usability testing also revealed:
|
|
|
High-Fidelity Mock-Ups
After conducting multiple rounds of usability testing, I refined the designs.
Organization & Documentation
|
Organization & documentation are crucial for maintaining consistency in a design to create an intuitive and easy to use product.
|
Sticker Sheet |
|
|
|
Accessibility Considerations
It is crucial to always design with accessibility in mind. Designing for users with different experiences, whether they be permanent, such as a vision or mobility need, temporary, such as a broken arm, or situational, such as accessing the product in bright sunshine, helps all users.
|
Cognitive Impairments or Non-English Speakers
|
Photos and icons were included to support persons who struggle to read.
Cannot continue on to next page, without including all required info. Tip is automatically calculated. Photos included for menu items & icons included for categories. |
|
Mobility Issues
|
To support these users, I built in the delivery option so users don’t need to leave their seats.
If I were to bring this app to market, the map would be fully functional and include accessibility routes. |
|
Impaired Vision
|
The app utilizes black text on a white background to improve reading efficiency especially in bright light.
If I were to bring this app to market, I would also enable text-to-speech functions as well as alt-text on all key images. |
Takeaways
|
|
What I learned
Do not make assumptions about what users want. Do multiple diverse usability studies whenever possible.
Not all users will have the same preferences. Do wide competitive research early in the process. |
|
Impact
Users were excited with the ease of the ordering process and reported they were looking forward to using an app like this at a real game!
|
|
Next Steps
|
1
Continue building out the different menus and functions within the high-fidelity prototype to be a fully-functioning app.
|
2
Conduct another competitive audit to keep up to date with the current market and explore ways to improve the efficiency and accessibility of the design.
|
3
Conduct another round of usability testing to confirm whether the pain points users experienced have been effectively addressed and discover additional pain points.
|