Overview

Going to the movies is a classic pastime. However, the experience itself can be inconvenient - dealing with lots of lines and crowds to purchase concessions and tickets, and then get good seats. Movie Master eliminates the need to get to the theater super early and spend unnecessary time in lines, and spend more time enjoying the movie!

Problem

This project was created for Google’s UX Certificate on Coursera. The original prompt was to create an app to order snacks at a movie theater, but for more of a challenge I expanded it to be a full service app for a movie theater. My goal going into the project was to make an app that allowed for the most seamless, frustration-free moviegoing experience possible.

Approach

I began the project with conducting secondary research, as the course did not require conducting interviews or using surveys. I completed my own competitive analysis of 3 other apps in the moviegoing space.

I also looked at reviews for these apps, taking note of common complaints or compliments on things they did well. 

From there I decided the key features my app needed to have, and how it would address pain points users were experiencing with competitors:

• Concessions

  • Able to purchase independent of tickets

  • Option to get concessions delivered to seat

• Rewards

  • Integrated into app, no need to sign in each time

  • Easily able to view rewards

• Ticket experience

  • Able to view previously purchased tickets

  • Tickets can be downloaded for offline access in case of bad internet/service

  • Ad-free - app will make money through a convenience fee

I developed initial wireframes and a low-fidelity prototype from these wireframes.

Wireframes - V1

The course required conducting an initial usability study with the lo-fi prototype. I created an affinity map to synthesize the results of the study.

Wireframes - V2

The major changes in my second iteration were related navigation - most participants found the hidden menu to be confusing, so I replaced it with a navigation bar at the bottom of the screen. I also moved the "Back" buttons and added clear descriptions to the "Continue" buttons, as participants wanted to know what was coming next in the process.

After completing the high fidelity mockups, I put the project on hold to focus on my boot camp. When I returned to it 4 months later, I decided to put my new skills to the test and completely overhaul the look of the app. There was lots of misalignment, weird color choices, and I previously did not know how to properly use components in Figma, which made the prototype a lot more complex than it should have been. I also developed my own design system to give the app a clean, consistent look.

Before

After

Design System

I then conducted a second round of usability testing with my high-fidelity prototype, and found task completion times had significantly reduced with the new navigation. I also created another affinity map and made a few last changes based on the insights, which can be seen at the prototype linked below.

• Improved reward system integration

  • Added the option to select rewards from profile and instantly be taken to reward redemption, instead of waiting to redeem during the checkout process

• Cohesive checkout flow for concessions

  • Added ability to select shopping cart and instantly be taken to checkout, instead of having to navigate backwards through the menu, which confused most users

• Include distance and directions for nearby theaters

  • Participants wanted to know exactly where the theater was located relative to them through the app

Outcome

Check out the final product here!

I believe I achieved my goal of an app that creates a seamless moviegoing experience. I also learned how to create and use my own design system.

In terms of things I'd do differently, one of the biggest frustrations I encountered was Figma’s lackluster prototyping abilities - the movie details, concessions, and checkout values were all static, making the experience itself less realistic. Right after I wrapped up this project, Figma announced the rollout of more advanced prototyping capabilities, such as variables, expressions, and conditionals. I would love to go back and re-work my prototype with those, but I’ll have to save that for a future project.