PROJECT OVERVIEW
INTRODUCTION
I designed this responsive website as a part of the Google x Coursera UX Design Professional Certificate program. It is intended to allow users to skip the movie theater concession stand line and order snacks and beverages for pickup or delivery to their seat.
Themes
UX Research
UX Design
User Testing
Wireframing
Prototyping
Design Systems
Role
UX Designer
Tools
Figma
Timeline
4 Weeks
THE CHALLENGE
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.
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
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 line
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
The app allows for quick browsing and selecting with item categorization, price and diet filters, and an accessibility search option to make snack selection a breeze for everyone.
3. Expand convenience
The app includes a delivery option, which allows users–especially those with physical handicaps–to have their snacks delivered right to their theater seat.
RESEARCH
USER RESEARCH
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.
"Most menu items don't have enough nutritional facts for me to make the healthiest decision."
"I'd love to see more of those self-ordering kiosks, so that you don't have to wait in line."
"I don't like how it takes to get your food. There is almost always a line, and I usually miss part of the movie of trailers."
"In-seat delivery would be awesome."
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 2 kids
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.
COMPETITOR AUDIT
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)
THE IDEAL USER JOURNEY
Based on initial research, I sketched out the ideal user journey for the app:
DESIGN PROCESS
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.
In my wireframes, 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
Category Page
Product Page
"Bag"/Checkout Page
"Success" Screen
Usability Testing
Home Screen Before
Home Screen After
Problem: Majority users expressed some confusion around how to select more than one item on the product 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 product page.
Solution: I included a dropdown selector to the product pages.
Product Page Before
Product Page After
FINAL DESIGNS
Brand Guide and Sticker Sheet
When creating the style guide for the CineSnack app, I employed variations of bold reds, which remind me of the red carpet and curtains in movie theaters. Supporting colors are muted tones with blacks, whites, and greys to put the focus on the content in the app.
.png)
Introducing the CineSnack App
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.
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.
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.
Finally, users are greeted with a success screen after placing their order, with clear instructions on what to expect next.
See it in motion! This user flow searches for and selects a regular popcorn, then checks out.
CONCLUSIONS
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.
Next steps would include more user testing to inform further iterations until designs are ready to be handed off to the developers.