Movie Theater Mobile App

Project Overview

Research

User Personas User Journeys Competitive Audit User Research

The first step in research for this app was to start with the business, rather than the users. While I do go to movies occasionally and always purchase snacks, I didn't know what went into it on the movie theater side. In order to make sure I was asking users the right questions and keeping the business in mind too, I started out by learning the following:

• Lots of money is spent on purchasing snacks for customers, but there is not a lot of ROI on this side of the business
• The most common complaints movie-goers have in regards to purchasing snacks is how long the wait is
• Customers are also reluctant to purchase additional snacks because it means getting up during the middle of the movie

I also discovered some startling things from the competitive audit I performed, which specifically was only done on movie theaters that have mobile apps which allow for snack ordering.

• Most apps have light backgrounds, making them impossible to use even in a theater that allows the use of mobile devices
• Movie theaters seem to prefer using either red or orange as their branding colors, so there was a lack of visual variation between each app
• Snack ordering tends to be very buggy, with dropdown menu options not working, back buttons sending users to the wrong place, and error messages that were unable to be closed

View Competitive Audit


From there, I went on to perform user research. After speaking with users, I learned that most people fell into one of two groups - they either attend the movies by themselves or with 1 or 2 other people, or they attend the movies in large groups of friends or family. For this user research study, I tried to listen the closest to participants who would be most likely to order snacks.

Check out Lani's Persona Check out Liam's Persona


Additionally, based on these two personas and the recounting of the movie theater experiences they explained to me, I created a user journey for each of them.

View User Journeys

Low-Fidelity Design & Feedback

Wireframes Usability Study UX/UI Design UX Research

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, naturally they would see movies first, as this is what drives most individuals to the theater. However, with the main focus of this app being on the snack ordering process, I knew the flow I would be designing out for the prototype would involve adding snacks to the cart and completing the checkout process. Using inspiration from the competitive audits I had formed, and thinking about how I would want to navigate through an application, I set out to create the basic layout of the app.

Once this had been completed, I moved onto performing a usability test. For this test, I sat down with potential users in person for a monitored study and had them open the Figma prototype on their mobile device. I asked them a series of questions while watching how they used the app, taking down notes as they went through the study. From this, I learned the following:

• All participants spoke positively about the app and expressed interest in using it
• There was a 50/50 split on whether participants would use it before arriving or when they were already at the theater
• Users wanted to check their cart multiple times during the process, even when they knew it was empty
• The confirmation screen causes too much confusion due to lack of instructions and seeing your purchased items
• Most users wanted a way to purchase with points or earn rewards points due to the movie theater's high prices

As with all low-fidelity designs I've done user research with, every user commented that they would be able to give much better feedback with colors and pictures in the app, so I decided to take what I learned and apply it directly to the high-fidelity designs rather than doing another round of user testing on the wireframes.

High-Fidelity Design

Designs Color Palette UX/UI Design Figma

Because I had started with a wireframe, it was fairly easy to update this to a more traditional mockup. The first thing I needed was a color scheme - and I already knew I wanted something dark so that people could use it in the theater, and that I wanted a different color palette than the other movie theater apps on the market. Eventually, I chose a dark blue because when testing it ended up being much easier on the eyes in a darkly lit environment than pure black, and I then went on to pick green as a complementary accent color.


Once the color scheme was in place, imagery became the most important part of the update. While some images would be fairly standard - for example, real images of the snacks for the ordering page - others needed to stand out. Specifically, I focused in on the main navigation, because while the bottom-aligned navigation had received good feedback in the usability study, I knew that a navigation is only as good as its labels - which include proper icons for those with them.




Finally, there were a handful of changes I needed to make from the original wireframes to improve the usability of the mobile application. The table below outlines which changes were made and why.

	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 users praised each of these changes, saying this makes the app the best movie theater app they have ever used.