Movie Theater Mobile App

Project Overview

Background

Movie theaters spend a lot of money on snacks for customers, but there is rarely a significant return on investment in this part of the business. Customers often complain about long waits in line or not wanting to miss parts of the movie on getting refills, leading to less purchases and lost revenue opportunities.

Looking at movie theaters in my area, I identified a product opportunity - a mobile app that lets users not only order snacks, but get them delivered to their seat at the theater. Mobile food ordering had been gaining in popularity over the past few years, but was still an emerging product space for businesses outside the restaurant industry. This made for a particularly exciting challenge to tackle.

To avoid designing around an existing brand, I created the concept of a smaller movie theater showcasing popular science fiction movies to base the experience around. This fictional theater, called Reel Deal Theaters, is the basis for the app and branding shown throughout this project.

Research

Competitive Audit User Research

When performing the user research, I set a target audience of individuals between the ages of 16 and 82, who went to the movies either by themselves or with friends and family at least once per month.

While selecting participants to interview, I also made sure they either preferred eating snacks during a movie, or were on the fence about doing so but could be convinced to purchase them by a good mobile ordering experience.

I interviewed six potential users, asking them various questions about their moviegoing and snack eating habits, as well as how they felt about mobile food ordering in general. As a result, I learned about the following issues when it comes to ordering snacks at theaters:

• There is not enough information about the snacks that can be ordered and the customizations available to entice customers to purchase them
• Lines tend to be too long, and there is too much time spent waiting for the snacks to be ready, especially when someone is running late to to a movie
• When ordering by yourself, or even for multiple people depending on how many drinks and popcorn buckets are present, it can be difficult to juggle both the order and your tickets
• If someone gets hungry during the movie, ordering snacks results in them stepping out of the theater and missing a significant portion of what they just paid to see

I also decided to perform a competitive audit to see what other businesses in this product space were doing, and if there was any way I could improve upon what was currently being offered:

• Most movie theater mobile apps were using light backgrounds, making them impossible to use even in theaters that do allow the use of mobile devices
• The branding colors are similar between brands, showing red and orange as the overwhelming choice both in the United States and other countries, making for a lack of visual variation between apps
• Snack ordering in general seemed to be a somewhat buggy process, with dropdown menu options not working, back buttons sending users to the wrong place, error messages not closing properly, and items randomly being removed from the cart
• Several movie theaters offering snack ordering options were using the same whitelabel app to handle this process, which did not sync properly with ticket purchasing options

Together, these two types of research cemented for me that mobile ordering would need to cover delivery to the seat, not just to order as a pickup option, and that it was important any new app entering this space would need to be easy to use and clear to understand.

Design Exploration

Wireframes UX/UI Design

For the initial design, I knew I wanted to follow a sequence of events that would make sense in the app. When someone opened the app, they would likely want to see movies first, this being the main purpose of going to the theater. However, with the focus of this product being on snack ordering, I knew the most critical screens to cover would be the snack ordering screens and the checkout process.

In order to map out the experience, I decided to create a set of low-fidelity wireframes showcasing the general flow the target audience would follow to accomplish the product goal.

	The homepage was the starting point for the interaction, appearing when a user opens the app. The design was informed by the style of the chosen theater, so in this case the flagship movie being shown for the week was showcased up top, while upcoming movies were displayed below. If this design were to be used for other theaters, the flagship movie would likely need to rotate, and there would be different categories beneath there, such as “now showing”, “upcoming”, and “leaving soon”.
Snacks were set up to be a visual experience, as most people eat with their eyes first, and making the images visually appealing would encourage people to order. The mention of combos at the top helped not only to give the page a hero, but to entice bundled purchases. Users could scroll through the list to see all the snacks that were offered at the theater, each categorized under the proper heading as most users would be looking for their specific favorite snack.
	Individual snacks, like popcorn, needed to allow for common customizations. While this differed per snack - popcorn asked about butter, pretzels asked about salt, and drinks asked about ice - the general layout remained the same. A special requests text input field was also offered in case something was not listed. The quantity and associated price were clearly listed, and the add to cart button was prominent being the next recommended user action. The reason the popcorn screen specifically was chosen was because popcorn contains more customization options than other snacks, making it a better choice to account for all design possibilities.
When the cart had at least one item in it, the user could see a list of their items, total cost of the item, and total cost of the cart itself. Items were able to be edited or deleted from this view as well. A link to invite friends to the order was added so that moviegoers could split the bill on a larger group order, and options both to add items and check out were considered to be the next actions.
	The checkout screen allowed users to toggle between either a pickup or delivery order, letting the user know there would be an extra charge for seat delivery. The pickup date & time were also able to be specified, allowing users to place orders in advance. Meanwhile, the user’s name and email were also collected in this step, for attaching a name to the order and an eventual confirmation email.
The payment window was similarly simple, letting users either pay online, or if they were choosing the pickup option then “pay at counter” would also be available. In order to pay online, users would simply put in their credit card number. They also had the option to use a promo code or gift card if they had them. Payment methods would be validated when the user clicked the “Confirm Order” button, and error messages would show if anything was entered incorrectly.
	The confirmation screen showed users a summary of the information before submitting, including their name, email, items, subtotal, tax, delivery fee if applicable, and total amount due. If everything looked correct on the screen, it was assumed that users would then place their order, completing the checkout process.
Once the process was complete, users would be taken to a screen confirming successful submission of their order. This included both the day & time selected for pickup, and the total amount paid. An email confirmation would also be sent to the listed email address when the order was placed, and the users would have both a push notification and an email sent to them when their order was ready for pickup or had been delivered.

Visual Design

Designs Color Palette Figma

The visual design was the part I was most excited to dive into, partly because I had known approximately what color scheme I wanted to use as soon as I had looked at what competitors were offering.

My two biggest complaints with competitors were that the app background was very light and would glare up at the user jarringly if opened in a darkly lit theater, and that all the apps looked the same because all the movie theater brands I looked at have similar personalities and red/orange color schemes.

As a result, I went with a blue & green color scheme, set on a dark background that would be easier for users to look at even if they decided to order snacks halfway through their movie-going experience. The final dark blue background was tested against an alternative black color scheme, and it was easier on the eyes to see dark blue as the background rather than pure black.



In order to go with my color scheme, I chose a set of textured backgrounds to use with any custom images needed, such as the hero images accompanying the combos and the snack images themselves.



In addition to these textures, I wanted to choose a set of icons for the bottom navigation that would correspond with the look and feel of the app. It was important to me to choose icons that were more subtle and contained thin lines for this section, as the navigation bar was visible on every single page and I did not want it competing for attention with the main page content.




Finally, I chose the design of the call to actions specifically to be the loudest component on the screen, to keep the user continually moving to the end of the checkout process. I also left them on the larger side so that mobile device users would have an easier time tapping on them.

Usability Study

In order to validate the design, I performed a moderated usability study of five participants who attend movies either alone or in groups of 2 - 4 people. One participant regularly uses a magnified screen on their device due to visual impairment. The study contained six prompts with follow up questions for each one:

• Prompt: Add a snack to your cart.
  Follow-Up: How easy was this task to complete?
• Prompt: Add a second snack to your cart.
  Follow-Up: How easy was this task to complete?
• Prompt: Go to any other screen, then return to your cart.
  Follow-Up: How easy was this task to complete?
• Prompt: Complete the checkout process for all items in your cart.
  Follow-Up: Is there anything you would change about this process?
• Prompt: Do you see any possible uses for this application?
  Follow-Up: Would you personally use this application?
• Prompt: How did you feel about this application overall?
  Follow-Up: What did you like and dislike about this application?

Most participants spoke in a positive tone while using the application, showing either confidence or curiosity throughout the process. Participants also thought the app would be useful. While most of them said they would use it before arriving at the theater, two of them also stated they would use it while inside the theater - and one even said they would like to use it if they were waiting in a long line.

Final Design

I decided to incorporate the final feedback into the prototype before submitting this project for review, so that the app would be the best it could be. Below are the changes I made in response to the user feedback:

	Before	After
Cart Visibility	Originally, the cart was only visible to users once they had added an item to it. This caused issues as users wanted to see their cart before adding anything to it.	The top bar of the app was redesigned to include a link to the cart in it, so users could check it even when it was empty.
Snack Categories	Originally, "popcorn" was listed as a separate item from other snacks, with separate sizes listed. However this caused inconsistency with the soda selections, where the size was selected on the item screen and not before.	Popcorn was looped back into the main "snacks" category to bring it back in line with the options available for other snack items.
Rewards Login	Originally, rewards points were not included in the basic flow for just purchasing snacks. Many users complained about the lack of this in the original wireframes as they would only use the app if they could earn points.	A full login process was added with a method for users to see they would be earning points on their snack purchase. As part of this, a login prompt was added to the checkout process.
Checkout Process	Originally, the order confirmation screen showed instructions with a day and time for pickup. Despite this, users could not figure out they had completed their purchase and were confused on the instructions.	The order confirmation screen was redesigned to not include pickup instructions - instead emailing them to the user - and adding order details such as items ordered and total price.

Upon rerunning the usability study with the new mockups, all participants praised each of these changes, and several were rather upset that local movie theaters were not using an app that functioned as nicely as the Figma prototype did.

Outcome

A month after I submitted this project, I found out that Google had selected my design as a featured example within their UX Certificate Course, linking to my case study and Figma file. My project was selected due to the following reasons:

• Unusually strong interaction design, allowing users to perform various actions within the prototype and navigate backwards without looping screens
• Thoughtful visual design, catered specifically to the target audience and the environment they would be most likely to use the mobile app in
• Overall completeness, including not only screens that were part of the project prompt but ones that users would be likely to want to click on or navigate to as they were looking at the prototype

I received 30+ mentorship requests based on this design alone, some of which I took on as these UX hopefuls were completing the course and looking for work. These requests ultimately shaped my focus as a mentor around people who are switching careers and looking to move into UX or product design.

Later, Google interviewed me for a chance to be publicly featured as a course graduate, an honor they only granted to previous designers who had work selected as a featured project.