TOP

UX Design for a Movie Concessions Ordering App

Mission Taphouse Cinemas App
Homepage mockup displayed on laptop screen

For many years, my favorite way to see movies has been to enjoy them at a table-service movie theater, with a glass of wine and a delicious burger while I watch. So this is a project that I'm very passionate about on a personal level! The Mission Taphouse Cinemas app allows movie theater customers to order concessions from the same app that they purchase movie tickets. Mission Taphouse Cinemas is a fictional table-service theater chain based on real dine-in theaters I frequent, where customers traditionally order with a waiter to get snacks, drinks, or even a full restaurant meal brought to their seats. I set out to design an app that would help customers with a complete movie theater experience, focusing specifically on how the process of ordering and paying for concessions could be made more convenient and less distracting.

Overview

My Role

UX Designer | UX Researcher | UI Designer

Timeline
July → August 2022
Client
The Team
Tools Used

Figma | Figjam

Onboarding screens with movie theater imagery and explanation of order and checkout process
Onboarding screens for first-time users

Concessions menu, and item page showing detailed options for a hamburger
A mouth-watering menu

The Problem

Table-service movie theater customers need a way to order and pay for concessions without being distracted from enjoying their movie. Customers want their food and drinks to be brought to their table promptly, and they want to minimize the time that waiters walk in front of them or that they have to look at a bill.

Research & Insights

I conducted foundational user interviews with three frequent movie-goers to understand common challenges in the concessions ordering process. Key insights emerged:

  • Concessions are essential to the movie experience for many customers
  • Customers want fresh food and drinks delivered quickly
  • Frequent waiter interruptions are distracting during movies
  • Paying bills in the dark theater is stressful and takes attention away from the film
  • Pre-ordering appeals to customers if it means faster service

Main Pain Points:

  • Servers walking past and blocking the screen
  • Paying the check during the movie in the dark
  • Long waits for food when kitchen gets backed up
  • Uncertainty about when servers will collect written orders

Mobile app screens showing order confirmation, price details, and items added to home screen
Order confirmation and details

Check-in screens showing QR code scanner and confirmation
Checking in tells the kitchen to get cooking!

The Solution

The Mission Taphouse Cinemas app lets users order food and drinks to be delivered to their seats during a movie screening, with payment handled after the movie ends. This allows movie-goers to relax and stay focused on the movie instead of dealing with bills in the dark, while minimizing waiter interruptions.

Key Features:

  • Pre-order concessions linked to movie tickets
  • QR code check-in system to trigger order preparation
  • Post-movie payment to eliminate mid-film distractions
  • Integration with in-person ordering for seamless experience

Design Process

I created user flows and wireframes to map the ordering experience, then built and tested low-fidelity prototypes. After initial usability testing with 5 participants, I refined the design to address confusion around order timing and movie ticket integration.

A second round of testing with high-fidelity prototypes confirmed the design was intuitive and easy to navigate. The final visual design uses a dark, cinematic theme with warm yellow accents that evoke both movie theaters and buttered popcorn.

All onboarding screens explaining how to buy tickets, order concessions, and check out
The full onboarding flow

GIF of the onboarding flow

All main screens of the mobile app, including home, concessions menu, and check-in
Main screens of the full user flow

GIF showing exploring the menu sections and ordering from the item details page
Ordering a burger from the item details page

GIF showing selecting items from the overall menu page
Ordering right from the menu page

GIF showing concessions order confirmation and details
Confirm the order to see it added to the ticket on the home page

Screens showing the check-in process including home screen, QR code scan, and confirmation
The check-in process

Impact

This design successfully addresses key pain points for table-service theater customers by reducing distractions during movies and streamlining the ordering process. The app could improve customer satisfaction while increasing theater efficiency and loyalty through an enhanced all-in-one movie experience.

Future Considerations

This project highlighted several interesting design challenges that would be exciting to explore further, such as: How would group ordering work to ensure items reach the right seats? What happens if users try to access the app during the movie? How would the experience scale for users with multiple upcoming tickets? These considerations demonstrate the real-world complexity of designing for established service industries.

Mobile views of many pages including home, Our Work, About, and Updates,

More Case Studies