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

Assume → Research → Define → Ideate → Prototype → Test

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

1. 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.
2. 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.
3. 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.
4. 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

1. 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.
2. 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.
3. If not for the rushed counters, users would order more frequently than they do right now.
4. 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.
5. Regular users often order the same meal every time they visit.
6. 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.
7. Users face frequent payment failures while paying online.
8. 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.

User Journey Map for Jean Jackson

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!! 🥳

1. 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.
2. 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.
3. 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.
4. 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.

Basic User Flow for the app

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

Wireframes for the Hamburger menu, profile page, loyalty program, etc.

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 —

1. 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.
2. 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.
3. 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.
4. Slightly modified the user flow through the app as per the user feedback.

Iteration — 1

The “Delivering To” section moved from the bottom to the top and stretched the Payment button to the width.

Moved Location details on the home screen at the top instead of the status bar. Added Profile button instead.

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)

Upon entering the app, users get an option to sign in/sign-up. After this, the list of theatres in the selected city is viewable. The menu has all items along with the Filter Option for a few favourite categories like Popcorn, Burgers, etc. The users can add items to their cart from this screen and continue to checkout.

After checking out, users see a cart confirmation page with their delivery details, Cart Summary and Bill Details. It is possible to edit the deliverable location from here or select to pick up the order from the counter. Once done, users can Proceed to Pay and then land on the order confirmation page which shows the Order Status, Bill Details, Help Links, etc.

The hamburger menu opens up a list of options for the users including Past Orders, Wallet, Settings, etc. Users will be able to view/edit their basic details and check the Loyalty Reward Points.

PROTOTYPE

Below is the link of the final high-fidelity 0prototype of the app —

Figma_SnackAppPrototype

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

1. 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.
2. 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

Added the Reaching-At and Reaching-In details along with the Order Summary

Moved My Favourites from the homepage to the menu-items page.

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.