UI/UX Case Study: Ordering Snacks at the Movie Theatre
Love snacking at the movie theatre? Now get your snacks delivered to your seats! (Yes, inside the movie hall too!!)
Greetings! Finally posting this case study that had been sitting in my drafts half-finished for months. In this article, I am going to walk you through the design process of an app I recently designed.
During the Covid-19 lockdown and restrictions, businesses suffered a lot. One such industry was the entertainment industry — theatres, public events, etc. For almost a year, these places were completely shut down making them incur huge losses. And now that things have opened up slowly, they want to make the best out of the situation while also providing users with ease of access. This project focuses on a hypothetical theatre chain, Euphoria, aiming to increase its snack sales. And wouldn’t we love it if they had an easy way to bring snacks to the users? Because admit it, we all have, at least once, been intoxicated by the smell of popcorn at a movie theatre 🤤
With this, let's jump right into the detailed report of how this project went…
Role: UX Designer, UX Researcher
Tools Used: Figma, FIGJAM, Notion
My Design Process
The Problem Statement:
The movie theatre chain, Euphoria Cinemas, has an existing online platform for users to book movie tickets. Their sales have gone down during Covid-19 due to which they had to bear huge losses. Now they want to compensate for these losses by increasing their Food & Beverage sales and encouraging customers to buy more snacks each time they visit.
ASSUMPTIONS & HYPOTHESES
Okay!! So let's get started with this. First off, let’s brainstorm a little about the problem statement and come up will some assumptions about the users and the business. Based on the assumptions, we will frame some hypotheses statements. This step will allow us to get a depth of the problem at hand and possible solutions we think might work.
Assumptions about the users
- Moviegoers would want to avoid the crowded counters during the intermission or at the movie's start.
- Moviegoers would rather not order snacks because of the extremely high price at the theatres.
- They might not want to leave the comfort of their seats to order snacks.
- They do not prefer having snacks at the beginning or the intermission because they end up finishing them before the lights go out.
- When the users are running late to the movie and still like to place an order, they would either have to miss the movie or wait for the intermission.
- Older customers would prefer ordering in person than navigating their way through the app.
Assumptions about the business
- Selling more snacks would result in additional profits.
- Since online ordering at a theatre is not a very huge market at present, the business would want to give the audience this extra feature which makes them stand out from the rest.
- Taking manual orders requires dedicated staff for taking orders, billing, payments, etc. Introducing an app would increase the efficiency of the business.
- The business might find it difficult to maintain social distancing with so many people crowded at the counters.
- Usually, staff members come up to the auditorium seats individually to take orders. Having an app would ease this process.
Hypothesis Statements
- Giving an option of getting the order delivered to the seats would encourage the users to order more because I assume that they would prefer to not leave their seats especially to collect an order from the counter.
- There should be an option for a quick checkout like a one-tap order configured with the default preferences and details because I assume users would be in a rush during the movie and would not prefer spending too much time in the app.
- Potential users would be interested in getting some rewards/discounts while ordering online because I assume that users feel that the prices of the snacks are very high at the movie theatres.
- Users should be able to select a custom delivery time for flexibility because I assume that different users would have different preferences of when to snack during the movie.
With my assumptions and hypotheses, I am going to jump to getting actual insights from authentic sources i.e. Research and basis that validate/invalidate my theories!
RESEARCH/EMPATHIZE
Since I’m working on a new app from scratch instead of an enhancement of an existing app, my research will be more focused on the current offline ordering system, the pain points users are facing and the expectations of an online alternative. This will then lead me to the basic features that I should include in the first launch which will attract the customer base.
Desk Research
The first leg of research is Desk Research where I look up data available publicly (i.e., on the internet, in magazines, surveys, etc.) and draw some insights related to my current problem statement.
- The multiplex and theatre lobby claim they operate on as little as 5 per cent profit. The food and beverages they sell account for 25–30 per cent of their revenues.
- The average markup on movie theatre popcorn is 1275%!’
Although I didn’t get a lot of information during this, the one thing that got cleared was that selling food & beverage is important to the business!
Competitive Audit Report
Next up, since desk research was not quite insightful, I will lean over to conduct a competitive audit report to find out what other close competitors have to offer.
Well, there are no such apps in India that let you order snacks at the movie theatre, so I’m deciding to study the apps that provide the services closest to it and my insights are as below-
If you want a deeper look into the audit, you can check out the detailed and the summarized audit report here - Competitive Audit
Target User Group
With the above knowledge, I was able to decide my target user group i.e., the set of people I want to get in touch with to know their thoughts and opinions. In simpler words, for my interviews, I need to choose users that fit into the below profile :)
Primary Research
Now it's time we reach out to the real users, I sent out a screener survey to get responses from people and from there I selected my participants for the interview. I will conduct user interviews offline and note down the details.
The goal of my research — To understand why or why not people order food and beverages at the movie and what challenges they face while doing so.
Keeping the above goal in my mind, I will prepare a questionnaire (an interview guide) for the interviews.
Insights from user interviews
One thing is nobody refused an app and felt that an app would be particularly helpful
- The majority of the users mentioned that they are not comfortable with the crowded counters and the long queues due to different reasons like — post-pandemic anxiety, fear of missing their movie, etc.
- Most of the users admit that they find the prices to be fairly high at the theatres but they will still want to buy snacks.
- If not for the rushed counters, users would order more frequently than they do right now.
- Some of the users come in big groups and hence lookout for bigger combo meals. Since they feel combos are more cost-effective than buying individual items.
- Regular users often order the same meal every time they visit.
- Regarding the option to pre-book their meal at the time of booking movie tickets, users feel there are not many benefits other than saving a few bucks. They still have to enter the queue to collect their order.
- Users face frequent payment failures while paying online.
- On the idea of currently available service, pre-booking the meals, some users do not feel confident deciding so early while others have no problem because they order the same menu each time.
If you want to go through the detailed User Interview notes, you can check - Interview Dump
Hypothesis Validation
Based on the insights from user interviews, I could validate a few of my hypotheses while the other remains partially validated as there was not enough data for it.
DEFINE
So we have collected a lot of data from the research phase and now it's time to make sense out of it i.e. Analyzing the Data. By now, we are aware of which hypotheses were valid and based on it I will continue to the next steps.
User Sets
To begin with, I will study the User Interviews closely and categorize my users into broad categories. It's difficult to focus on multiple users at the same time and try to solve the problem. Hence, the concept of user sets is where I will find similarities and differences to group users into smaller sections.
The two categories I identified were —
Empathy Mapping
Now for the two user sets, I will create Empathy Maps for both of them. Here, we focus on these broad sets and jot down what these users Say, Think, Do and Feel.
Persona
Once I have the empathy maps, I move forward to drawing out the personas i.e., making a hypothetical personality out of my user sets. This will help us visualize our users as individuals and, thus, understand them better which will eventually benefit us in problem-solving.
For the persona of Jean Jackson, I was a bit more curious and wanted to study the improvement opportunities in depth. For this, I went ahead to create a User Journey Map as it would allow me to go on a granular level of what Jean is going through and list out the possible solutions to it.
Revised Problem Statement
After studying these personas further, I have broken down the original problem statement into individual problem statements —
Jean is a middle aged woman who needs to order snacks at the theatre but also avoid the crowded counters because she feels uncomfortable in large crowds.
— Crowded counters, long queues
James is a busy IT manager coming to the theatre who is almost always in a rush and has no time to order snacks for himself and his group of friends because he reaches in a hurry immediately after his office hours.
— Customers in hurry/groups
James is an adult living alone in a metro city who needs to save money for expenses but wants to enjoy with his friends because he feels lonely.
— Save money, spend less
IDEATE
Brainstorming
With the scoped-down problem statements, the next step is to brainstorm solutions. For this, I went for the Crazy8 method — a method to bring out diverse ideas in just eight minutes!! (crazy, right?) You think of all the possible solutions to a problem as quickly as you can without thinking about the feasibility or the practical approach.
Final Features of Product
Collating all insights from user research, competitive audit and validated hypotheses, I have decided on the features of my app!! 🥳
- Deliver to your seat
Users will not only be able to place an online order but also all orders will be delivered to them at their seats. While ordering, they can add delivery details such as seat number, auditorium, etc. - Favourite Meals
Frequent users will not have to search through the menu for their regular order, they can simply tap the “heart” for the items and find them pinned on the home screen. - Custom Delivery Time
Users will be able to get their orders delivered at any time during the movie. They will be able to mention this in the delivery details. - Loyalty Program
If you have been a user long enough, you will be rewarded! Users will get reward points each time they order which they can use to pay for their next orders. With increasing reward points, users will advance to new levels and unlock amazing benefits at every level.
Connecting Solutions to Hypothesis
User Flow
With the solutions in our hands, let's move on to the interesting part, the UI Screens of the app! But wait, before we start designing wireframes, we should be clear on the user flow of our app so we know exactly which screens to design. To do this, I created an approximate user flow which my app would follow.
Paper Wireframe
Now that I know exactly which screens I need in my apps, let's get to work and start designing!! My approach to wireframes is to pick a screen and design as many versions as I can think of. We will leave the decision to later, but it's important to get out all the ideas on paper.
Digital Wireframe
After designing the low-fidelity screens, I will now create a low-fidelity prototype with the above wireframes.
Usability Testing
Before continuing to the mockups and high-fidelity prototypes, I want to ensure that what I designed works for my users. For this, we will conduct a Usability Test which is asking your users to complete certain tasks in the low-fidelity prototype while we note down the observations.
I conducted an unmoderated test i.e., I prepared the list of tasks (prompts) that users should complete and share with them. Then they recorded themselves while completing the said tasks and shared them with me. I went through it for all my users and made a record of my observations, task completion status, etc. in a sheet as below.
Suggestions from Usability Testing
Got the below insights from the above testing which I acted upon —
- Delivery Details were removed from the bottom of the screen because users felt it was an important detail that they would want to confirm right away rather than having to scroll to the bottom.
- The “Select Location” popup was removed from Home Screen Section as the users found it unnecessary and annoying to select a location every time. If they are travelling to some place and want to change the location (which in their opinion would be minimum), they would be okay to do it manually.
- Removed location-icon from all screens since it was repetitive and instead added the location details on the homepage for users to view and set in the beginning.
- Slightly modified the user flow through the app as per the user feedback.
Iteration — 1
Now we give life to the wireframes aka create mockups and then an interactive prototype. I will use Figma for designing the screens.
UI Screens (High-Fidelity)
PROTOTYPE
Below is the link of the final high-fidelity 0prototype of the app —
TEST
And with thaaat, we have now reached our last stage of the design process. It's time to check the final iterated prototype with the users. For this, we will conduct the usability test again (as already done with low fidelity prototype)
Usability Test Insights
- Added Order Delivery and items details on the order-confirmation page because a user felt anxious when he couldn’t confirm the items he placed the order for. Also, he felt the delivery address/time should be highlighted so that he can rectify the details timely if an incorrect address was put mistakenly.
- Added “My Favourites” section on the menu-items page instead of the home page as users could have different favourite items from different cinema places.
Iteration — 2
Below is what users said about the reiterated prototype :
“Really good interface! Overall flow of the app looks convenient.” ⭐⭐⭐⭐⭐
“Easy to add/modify snacks options. In the future, maybe you could add a “Repeat Previous Order” option as well!” ⭐⭐⭐⭐
“The loyalty program is attractive! I would give it a go for free movie tickets 😂” ⭐⭐⭐⭐
“Great! Getting to see the to-be-delivered details on the confirmation really calms my anxiety!” ⭐⭐⭐⭐⭐
RETROSPECT
Challenges
One of the challenges I faced while working on this project was that there are no existing apps with such services in India yet which made research a little difficult. There was not enough data on the internet for desk research or competitive audits.
Also, I would have preferred if I had been able to get some middle-aged users (30–45yrs) as well to get their insights on the topic while interviewing.
Future Scope
- If the location is ON or the user has already booked a ticket using the app, push notifications to order snacks before the movie to get more traction.
- On the assumption that users are going to use this inside the movie hall, there should probably be Dark Mode for interested users.
- If a logged-in user has already booked upcoming movie tickets using the app, create a pop-up with an option to order snacks for that movie with all details (like seat, location, phone number, etc) pre-filled.
If the user has also favourited some items from that cinema location, create an auto-suggested cart.
Learnings and Takeaway
With each project I finish, I develop a deeper sense and understanding of UX Concepts. There are a few things though that I did for the first time during this project —
- User Journey Maps — helped me understand how to search for opportunities and possible solutions by studying the existing journey, of the user.
- Usability Testing — repeated testing at every stage helps get us the (near to) perfect solution. This was one of the most helpful steps as I received amazing feedback from users and even some peers to work on.
- Storyboarding — got a sense of understanding of how designers communicate their ideas and pitch them to the business stakeholders without being technical. I have not added the storyboard to this article, but you can check it out in the notion doc (also mentioned below).
And well, that’s the end of it! 😊 I am glad you could make it until here, thanks for reading. Please feel free to leave any feedback in the comments or reach out to me at nishidiwan.ux@gmail.com for any queries/help/feedback/etc.
P.S. You can find all the diagram and table snapshots used here under the Notion File - "Order Snacks Notes" for clear viewing.