Mobile App
Profile Project
2021
MY ROLE
I was the sole UX designer on this app. Between March and August 2021, I created all designs, wireframes, and prototypes, including user testing at all stages to incorporate feedback into each iteration.
THE CHALLENGE
In choosing a prompt for this project, I wanted to create an app for a problem I have not seen a solution for on the market yet. Ordering snacks and beverages at a movie theater is a process that hasn't seen widespread change in years. Even though the sale of movie theater tickets has made a significant switch to online/app ordering, the sale of movie theater concessions has lagged far behind.
Typically, users must stand in the concession stand line, browse the menu in person, place their order with an employee, and stand off to the side until their order is ready. Users often arrive early to a movie, or must miss a large portion of a movie to complete this long user journey. And beyond the time it takes users to complete this process, there is a lot of physical space that is taken up by users while they wait to order and wait again to receive their order.
GOALS FOR CHANGE
The CineSnack app aims to significantly reduce the time and physical space that in-person concession ordering encompasses by providing a simple, efficient way for users to order concessions at any point in the movie-going experience. Specific goals for this project included:
1. Eliminate the snack line
CineSnack was designed so that users can order anything from the concession stand menu at anytime, and are notified when their order is ready for pickup. Whether ordering on the way to the theater, during concessions, or during the movie, users can place their order wherever they are without standing on queue.
2. Simplify choices
I factored in a range of user perspectives in designing the app to allow for quick browsing and selecting. I included item categorization, price and diet filters, and an accessibility search option to make snack selection a breeze for everyone.
3. Expand convenience
Considering users who may not easily be able to transport themselves to the concession stand for ordering or pickup, I included a delivery option, which allows users to have their snacks delivered right to their theater seat.
TARGET USERS
In considering target users, I focused on people who might benefit the most from the convenience and freedom of using the CineSnack app.
Lorenzo Wolf
37-year old male
Married with two children
Framingham, MA
Meteorologist
Lorenzo is an accomplished weather man on the local news, but also juggles life as a working parent with his wife and their two young daughters. He and his family go to the movies at least twice per month, but is frustrated with how complicated and time consuming it is to buy snacks for his entire family.
Tamia Rosas
24-year old female
Single, wheelchair-bound
Nashville, TN
Barista/Fashion Student
Tamia is an aspiring fashion designer living in Nashville. She has a handicap that affects her legs, so primarily gets around with her wheelchair. She and her friends go to the movies once per week, and they always order food and drink. She often finds it frustrating to navigate the tight lines at the concession stands, and would love an easier way order and receive food at the theater.
INITIAL RESEARCH
COMPETITOR AUDIT
I looked to snack-ordering and popular theater apps to help inform my initial designs for CineSnack. While each competitor's app had useful features, there was not one that made for a user-friendly experience in accomplishing my project goals.
Strengths:
-
Simple design for easy browsing
-
Friendly and engaging tone
Weaknesses:
-
No nutritional value included
-
Ordering can only be done once, when ordering movie tickets
Strengths:
-
Can order snacks at any time
-
Lists calorie count for each item
Weaknesses:
-
Snack categories are confusing
-
Snacks can only be retrieved by counter pick-up (no delivery)
Strengths:
-
Nutrition label available for each item
-
Fun and easy item categorization
Weaknesses:
-
The large amount of choices can be overwhelming (takes up all of the screen)
INITIAL USER RESEARCH
From June 1-2, 2021, I conducted initial in-person user research to better understand my target end users. Interviewees were between 24 - 40 years old, included both male and female-identifying individuals, and lived in urban and suburban areas.
Key Questions
About how long does it take you to order and retrieve concessions at a typical movie theater?
10 minutes
50%
5 minutes
25%
15 minutes
25%
What challenges, if any, do you face when ordering concessions at a typical movie theater?
- "Most menu items don't have enough nutritional facts for me to make the healthiest decision."
- "I just don't like how long it takes. There is always a line, and I usually miss part of the movie or trailers."
- "It's just not an enjoyable experience. I usually don't get hungry until the movie has started, and I don't like getting up in the middle of the theater to get snacks, so I usually just don't order anything."
Are there ways in which you think those challenges might be solved?
- "I'd love to see more of those self-ordering kiosks in movie theaters, so you don't have to wait in the line to order."
- "In-seat delivery would be awesome."
- "It would be great if there were healthier snack options, or ways to find out what the healthiest available snacks are."
THE IDEAL USER JOURNEY
Based on initial research, I sketched out a new ideal user journey for using the CineSnack app:
THE INITIAL DESIGN
FRAMEWORK
With a good understanding of potential end-user motivations, frustrations, and desires, I quickly got to work on sketching and wireframing the overall look and feel of the CineSnack app.
My initial wireframe reflected the users' desire to quickly and easily find what they want and order it with inclusions I found useful from my competitive analysis. I ensured that the design was sleek and minimal, in order to put the focus on the products for easier browsing. I included the addition of a nutrition label as a photo for each item, to give full health transparency for the users who were concerned about finding the healthiest snacks. And I aimed to make the user journey no more than five screens, as to make the process quick and easy.
Home Screen
.png)
Category Page
.png)
Item Page
.png)
.png)
"Bag"/Checkout Page
"Success" Screen
USER TESTING
Research Study
I conducted an unmoderated usability study for my low fidelity prototype with five friends with the ultimate goal of seeing if users could easily search for, select, and order a regular popcorn from the app. KPIs included conversion rate, time on task, and system usability scale.
Results
While all users were able to successfully complete the task in a short amount of time, they provided some useful feedback, which I incorporated into design iterations.
1. Too many taps: Majority users expressed some frustration around having to tap too many times to get what they wanted. Specifically, they felt that the "Category Page" was not useful, and that they would like an easier way to see more item details from one screen. They also did not see the need for a search bar, since there were not many items to choose from.
As you see in the before and after below, I replaced the individual category buttons (which each linked to a separate page) with interactive "chips" to give users more control in viewing the menu on one screen. I also removed the search bar, per their feedback.
Home Screen Before
.png)
Home Screen After
.png)
Interactive "Chips" instead of separate category pages
2. Item Amount Confusion: Majority users expressed some confusion around how to select more than one item on the "Item" page. I originally included amount selection in the "Bag" page, but the users made a great point that it makes more sense to also include this on each item page.
As you see in the before and after below, I included a dropdown selector to the item pages.
Item Screen Before
.png)
Item Screen After
.png)
"Amount" dropdown selector added
FINAL DESIGNS
Brand Guide and Sticker Sheet
In creating the brand guidelines for the CineSnack app, I employed variations of bold reds, which remind me of the red carpet and curtains that one often finds at a movie theater. Supporting colors are muted tones with blacks, whites, and greys to put the focus on the content in the app.
_edited.jpg)
Introducing the CineSnack App
Below are screenshots of the main user flow, which in this case is to order a regular popcorn for pickup. Click here to view the app functionality.
The CineSnack home screen allows users to scan the entire menu quickly and efficiently without having to toggle between more than one screen. Based on target user goals, I ensured that there was a "healthy" category in the top line menu navigation for easier access.
.png)
.png)
After selecting an item from the menu, users are taken to the item page, where they can customize their item (size, amount, etc.). A full nutrition label is included in the image carousel for each item to give users full nutritional transparency.
.png)
After the user adds items to their bag, they can continue shopping or navigate to the Bag screen to review their order, specify pick-up or delivery retrieval method, select payment, and place their order.
.png)
.png)
Finally, users are greeted with a success screen after placing their order, with clear instructions on what to expect next.
.png)
CONCLUSIONS
I thoroughly enjoyed designing this app as a part of the Google UX Design professional certificate program. I received much feedback from test users that they wish this was a real product that they could use. I envision this app being most useful as an addition to existing ticket ordering apps for a movie theater client.