Movie Concessions App

The Brief

Design a movie theater
concessions ordering app

Prompt Generated by https://sharpen.design for Google Certification Coursework

Problem Statement

Current food ordering within movie theater apps require an excessive number of taps in and out of menus, frustrating users and reducing sales 

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

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.

Food is a Differentiator

Theaters have been adding premium food and beverage options as a way to entice customers back to theaters. Ensuring users can quickly order increases food revenue.

User expectations 

In-theater deliveries are available for some high-end theaters but has significant staffing costs, out of reach for many theaters. Offering order pick-up allows a broad cross section of theaters to accept mobile orders.

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

“This 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 reduction in steps in the user journey or time on task compared to competitor’s apps.

Features within Reach

I located primary app features and buttons within typical reach zones for left and right handed users,

I also verified shifted-grip reach zones allow for confident selection of all high-frequency features and menu items.

Everything you need in one screen

I wanted the home screen to include important information about users’ ticketed movie, specials, and immediate access to popcorn, drinks, and candy.

A menu thats tailored for you

I studied ways to provide quick access to primary menu features such as Favorites, Specials and Combo Deals while keeping the full menu close at hand.

Check out without frustration

I considered how the cart design could present a clear, actionable list of items to speed order completion rather than a tedious sequential checkout experience.

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. 

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

0:00
0:00