Movie Concessions App

The Brief

Design a movie theater
concessions ordering app

Prompt Generated by for Google Certification Coursework

Problem Statement

Movie-goers want to order their food quickly and easily—with minimal taps and frustration. 

Software and Tools

Hand Wire Framing // Figma // Adobe Photoshop // Rotato //  Transmit FTP // Personal Web Host

5 Week Design

Role: Solo  Product Designer

Discovering  user needs

I created two personas and explored their needs through empathy maps and user journeys, illuminating pain points and helped narrow the focus of my study for this concept

Optimized Order Flow

As I began to explore this concept, I was drawn to develop information-rich screens that required less scrolling and fewer steps to complete a task compared to the typical order-creation flow found in competitor’s apps.

A primary goal for the design is to provide users with the opportunity to add items to the cart directly from menu screens rather than only from an item screen. This reduces time spent navigating up/down the menu structure and tap-fatigue found in many menu-based apps.

I used “The Current State of Checkout,” a 2021 Baymard Institute Study, to draw key insights into the UX difficulties faced across 71 different e-commerce websites. I was not intent to build every step of the checkout experience for my concept, but it was crucial background as I began shaping the flow through the concessions app flow.

Competitive Analysis

Understanding how mobile ordering is offered by both national chains and smaller theaters gave me a broad view of approaches and opportunities.

Research Insights

opportunity to optimize

Paper tickets and long lines at the concessions counter detract from users’ theater experience.

Large and mid-sized national operators who offer mobile ordering require intensive effort to place orders.

inconsistent experience

I found significant differences in brand identity and features when comparing competitor’s web and app experiences.

Tedious mobile ordering processes reduce user engagement with online ordering when available.

Food is a Differentiator

Theaters have been adding premium food and beverage options as a way to entice customers back to theaters.  

An overlooked key is to offer a best-in-class ordering experience that reduces friction for larger orders,  thereby increasing average check revenue.

User expectations 

In-theater deliveries are available for some high-end theaters but has high implementation costs, out of reach for many theaters.

Offering a concessions pickup area, similar to what is found at many restaurants today would allow theaters of all sizes to offer mobile ordering without significant cost or labor increases.

AMC has polish but makes users work for their order

The AMC app and website are driven by the same system which can be challenging to navigate, requiring dozens of taps and excessive scrolling.

Consumer trends drive market focus

“When you think about it, there are a lot of businesses that are no longer around because  they failed to innovate and keep up with consumer trends,” Couch says. “So we’re just innovating and trying to give consumers what makes that movie-going experience that much better.”

Cinololis Focuses on In-Person Ordering

The Cinepolis brand is built on its food experience, however, despite some modern user interface elements, the app offers few details about the food and no way to place a food order outside the theater.

Market Demand for concessions is strong

“Prior to fourth-quarter earnings, Wold said theaters have not seen pressure on consumer concessions spending despite rate hikes. Concessions have been a “pretty recession-resilient segment,”

Paper Wire Frame Explorations

Goal Statement

“Our mobile app will let users with complex or repeat orders quickly order what they want using favorites and order new items quickly with minimal taps”

User experience can be evaluated through qualitative usability studies, reduction in steps in the user journey and time on task compared to competitor’s apps and websites.

Business KPIs can include comparing mobile vs. in-person order quantity, average spend per order, and comparing concessions revenue to the year prior.

Primary functions at the tips of users’ fingers

Given the risks large screens pose for usability, I located primary app features and buttons within typical reach zones for left and right handed users.

Using thumb zone overlays created by Scott Hurff, I verified the controls and actions users would need are available in the primary reach zone, also verifying shifted-grip reach zones allow for confident selection of all features.

Everything you need in one screen

I wanted the home screen to include important information about users’ ticketed movie, specials deals, and immediate access to the two most commonly ordered items, popcorn and drinks, with candy close at hand.

A menu thats tailored for you

I studied ways to provide quick access to frequently ordered items and integrate marketing into the experience while maintaining a user’s access to primary menu features such as Favorites, Specials and Combo Deals.

Check out without frustration

I considered how the cart design could present a clear, actionable list of items alongside key order settings, eliminating the need for single-step sequential checkouts common to many cart experiences.

Low Fidelity Prototype

Once the paper wire frames had been reviewed and refined, I used Figma to study the scale of interface elements and layouts and learn the practical considerations of wiring up an interactive prototype for user testing.

Wired to Order

The app concept focused on seamless, fluid ordering using multiple journeys. I took care to develop several potential user paths during testing to evaluate which was preferred.  

Despite these efforts, user testing revealed a number of alternative journeys taken through the app that were not intended for these studies.  

This provided valuable feedback regarding how difficult it can be to carve out a happy path when asking users to perform multiple steps in their testing.

Low-Fi Prototype

Usability Testing

To understand whether the order flow was effective, I developed a script for conducting a moderated usability study and augmented those findings with unmoderated usability tests.

Interactive Prototype Development

To accurately test the effectiveness of the multiple user paths—and to understand which path were preferred—I designed an unmoderated usability study with three target use-cases to generate data.

Scripting and Methodology

I conducted both moderated and unmoderated remote usability studies. I developed three primary user flows that I evaluated based on situational applicability.

I also conducted unmoderated usability studies, instructing three participants to create and upload Zoom recordings to a user-specific Dropbox folder for my review and analysis.

Research Analysis

Primary app functionality was intuitive, and participants were able to complete the tasks without issue. The user journey allowed for flexibility, however some users bumped against the prototype’s interaction limitations.

I was able to apply several participant suggestions into the next phase of refinement, including a more robust confirmation screen and refinement of the interactions.

High Fidelity Design Iteration

Developing the prototype allowed me to refine the visual hierarchy and ultimately create a consistent, engaging interface to guide users to important functions.

The initial figma assets were styled and refined to reduce interface complexity and to streamline design iteration by reducing variant and asset count. 

High-Fidelity Prototype