Project: United Center Delivered App (Grow with Google course project)
Role: Concept, Branding, Mobile UI/UX
Duration: Winter 2019
An app that keeps you engaged with what matters: The game
United Center Delivered is an ordering app that allows users to have food and beverage delivered to their seats with the tap of a few buttons. Most stadiums today require users to get out of their seats, walk to a restaurant, stand in line, pay and wait to receive their order, thus missing important moments. United Center delivered aims to fix that by allowing fans to focus on what matters: The game.
The challenges
I:
Design an easy to use solution that is quicker than the normal hunt for food at a stadium
II:
Figure out an intuitive way for users to place an order for delivery now or for a later time
III:
Seamlessly track and receive instructions on how to receive your order
Looking at the competition
It was important to look at both direct and indirect competitors to help build the foundation and most important features of the United Center Delivered app. A competitive audit revealed not only gaps, but also shows what was working within the food delivery space in terms of features and functionality.
I found that only two competitors had robust delivery tracking systems, which, from user research was important for them to feel like they were informed.
What was a must-have, and what most competitors offer, is a stored payment system. Users shared that having to input payment information each transaction would be a high barrier to completing a purchase.
Meet the users
Through things like user interviews and empathy mapping (as well as secondary research) I got to understanding the behaviors, needs, and motivations of our users. Careful observation and the collection of meaningful feedback helped identify user pain points, and ultimately led to the creation of two representative personas that would help guide the direction of the app.
Name: Marina
Age: 39
Education: Bachelor’s Degree
Hometown: Elmhurst, IL
Family: Married, four children
Occupation: Small business owner
“The mom who does it all.”
Marina and her kids love going to games, but it can be a lot to juggle. If the kids are hungry, she can’t leave them at their seats to get food, so they end up going together. It would be super convenient to get food/drink delivered directly to their seats, and in some cases, ordered in advance before leaving home. Marina is somewhat tech-savvy, but needs to spend minimal time on her device in order to watch over her kids, who can be a handful. English isn’t her first language, so it can sometimes be a barrier when interacting with staff at restaurants.
Name: Markham
Age: 27
Education: Bachelor’s Degree
Hometown: Chicago, IL
Family: Single, dog owner
Occupation: Senior Analyst
“The tech-savvy, sports buff.”
Markham’s a big sports guy who doesn’t want to be disturbed while watching the game; the excitement is part of the experience. He wants a seamless ordering experience that leaves no stone unturned when it comes to the success of his order getting in his hands. He wants his food hot and without issue. He’s tech-savvy and is particular about his time. He’s always on the look out for innovative tech-trends and is an early adopter of them.
User research and findings
Our user research revealed some key pain points:
Users don’t want to miss the excitement of the game they are attending
Standing in lines can be frustrating and feel like a waste of time
Choice for users can be limiting depending on where they are seated
Some users don’t have the ability, choice or are uncomfortable ordering in person
There’s an access, convenience and comfort gap we can fill with the creation of an app that delivers directly to the user.
Ideating for a design solution
With the goal of designing an app that allows users to conveniently place food and beverage orders, and have them delivered to their seats in mind, I used the research insights and personas to build out user stories and journey maps. Once these key steps in the design process were complete, I began ideating on a solution to the problem through sketches, user flows, storyboards and lofi wireframes.
Usability testing and high fidelity designs
Once I translated sketches to lower fidelity wireframes, I conducted my initial usability study. I gathered user feedback, synthesized the data and came up with actionable insights that led to changes to the design and flow of the app. This valuable information was a key component in developing out higher fidelity designs, and a working prototype. Some selected screens from the high fidelity prototype (below) show the main user flow of ordering to your seat.
Usability study feedback
Once I developed out a hifi prototype, which included most of the visual elements of the final app (color, iconography, imagery, button styles, etc.) I then conducted another usability study to determine if I was on track with delivering a successful app. This revealed the need to iterate further.
Usability update I
Testing revealed that it was easy to miss the “For now” vs “For later” toggle, which dynamically changes content on the Home Screen. As a result, I adjusted the color to make the toggle more noticeable, and to visually align the element with the app’s main action color of red.
Usability update II
Testing revealed that users felt it was cumbersome to scroll through a menu, if there are a lot of items listed. This resulted in creating tabs at the top of the menu, which categorized items in a more convenient way, thus making it easier to browse, and ultimately order.
Usability update III
Testing revealed that users may not always remember their seat information, but might have a paper or digital ticket. I added in functionality that allows the user to scan a physical ticket, or if stored, add seat information directly from their phone’s wallet.
“Make the app second priority. Make sure I’m in and out of it as fast as possible, so that I can keep my eyes on the game.”
— Participant D
Addressing the challenges
Challenge I:
Design an easy to use solution that is quicker than the normal hunt for food at a stadium
Solution:
When testing with users, a key component for success was to ensure the time spent on the app, plus any waiting would, on average, be less time than getting up and going to a concession stand. I used time on task to measures how long it took for a user to complete the main user flow, which on average was less time than physically getting up and getting to a vendor. In addition, having your order brought to you is inherently less demanding, and if runners are on time, quicker than waiting in line, ordering, receiving your items and walking back to your seat.
Challenge II:
Figure out an intuitive way for users to place an order for delivery now or for a later time
Solution:
While only one user flow was built for this project, I wanted to make sure users were aware of the two ordering avenues: ordering for immediate delivery, and ordering for a future time. In my initial sketches, a prompt required the user to select “For now” or “For Later” before moving forward. In the final designs, and with the help of user feedback, a toggle was added to the top of the main screen, which allows users to select when they want to place their order.
Challenge III:
Seamlessly track and receive instructions on how to receive your order
Solution:
Through user interviews, it was clear that many apps don’t give users enough information related to their order delivery. I wanted to make sure UCD struck the right balance. I concluded through usability testing that providing five different, but specific checkpoints, plus supplementary delivery details was acceptable for tracking an order delivery within the app. Additionally, text message and push notifications were added to the functionality of the app to ensure notifications were getting to the user.
Design system
I built out a design system that allowed for expansion, as the app grows. The colors were grounded in the United Center’s palette - particularly the navy blue that is primarily used on site. The red action color that is seen pretty consistently throughout the app was born out of the palettes of the two teams that play at the UC: the Bulls and Blackhawks. I chose the font Musli for all app content, as it was approachable, easy to read and versatile. Finally, an icon set helped bring some variety to the app, while helping with accessibility - by using universally familiar icons.
Takeaways and successes
While designing the United Center Delivered app, I learned that thoroughness the first time around doesn’t always yield the best final product. I leaned on the success of competitors, only to realize that feedback in the usability studies and the amalgamation of different app features produced the best ideas. Thoughtful iteration and the continued development of the design system were key to the success of this project. All improvements along the way came from users’ direct feedback, a few ah ha! and a lot of “how did I miss that?” moments. As time goes on, I’d love to fully bake all user flows for this app, and further iterate on the ordering and tracking process.