MovieSnacks App

An ongoing project to design a snack ordering app for a local movie theater

Overview

Duration: 4 months (in progress)

Role: UX Practice Project - Design & Research

Users

User interviews: I recruited people between 18-70 years old who live in the area of the movie theater and go to the movies at least quarterly. These users varied in gender, disability status, native language, race and family status. I asked questions around their dining habits at the theater, frustrations in this process, and areas they might see room for improvement. The following points arose after summarizing and affinity mapping:

  • Interviewees liked eating at the movie theater, but generally stuck to familiar foods.

  • Limitations at the theater (time, attention, reading issues, etc.) kept users from looking over the menu and branching out.

  • The ability to pre-order food would increase overall satisfaction.

User personas: I created two distinct user personas from the interview information gathered. I then created succinct stories for each. It was important to me that one of the user profiles addressed the needs of an individual with dyslexia, as a number of my interviewees mentioned frustrations surrounding the condition and digital, fast-changing movie menus.

Research

Competitive analysis: I ran an audit of the apps from three competing movie chains - Cinemark, AMC Theaters, and Alamo Drafthouse. After using the apps to both order tickets and research or order food, a few obvious gaps stood out.

  • None of the competitors’ apps took into consideration the needs of people who might want or need to view an interactive menu.

  • The food menu was almost never accessible until tickets were selected, and then time was limited before the tickets were released.

  • In apps that allowed the user to order food, the orders were unable to be edited once placed.

Value Proposition: After reviewing the information in the competitive audit report, I created the following value proposition. It specifically addresses which of the user personas would benefit from the app’s features.

The Movie Snacks App allows users to view an accessible version of the theater's menu, decide on, order, and pay for snacks before stepping foot in the theater. The food can either be ready and waiting when you walk in to the complex, or you can choose to have the app notify you when it's ready (or delivered in to the theater where available). This can also allow users to get refills without wasting time and missing parts of the movie.

This adds the following benefits:

  • Saves time standing in line or waiting for food (Amanda, Miguel)

  • Alleviates frustration of getting/holding seats vs. getting food (Miguel)

  • Allows for menu accessibility (Miguel)

  • Allows time for decision making / budgeting (Amanda, Miguel)

  • Keeps users from missing parts of the movie (Amanda, Miguel)

  • Relieves stress for those responsible for others (Amanda)

User Flow

Narrative Documents: I took information from the value proposition and mapped the path of an ideal user (Miguel) using a user journey spreadsheet and story boards.

User Flow: After producing the above narrative documents, I next created a formal user flow showing actions, screens, and decision points.

Wire Frames

Paper Wireframing: Using the road map provided by the user flow document, I drew multiple versions of paper wireframes for each needed screen. I starred the most promising design elements from the versions and combined them into a final iteration.

Digital Wireframing: I used Figma to layout a full set of digital wireframes. I built both the various pages of the app as well as the connections so as to have a functional frame prototype.

Usability Testing & Prototype Refining

I ran a usability study to gain insight to user opinions and issues. I used the feedback to gain insights which were used to refine the flow and layout of the low-fidelity prototype.

Usability Study: I ran a moderated usability study on the low-fidelity prototype. I recruited five participants between the ages of 35-73, all of whom regularly attend movies in theaters. I asked them to execute a series of tasks, observed the steps they took while, and noted anything that the said. I also administered a survey to determine how easy they found the app to use.

Research Plan: I created a research plan which laid out the research questions, KPIs, methodology and the study script.

Affinity Mapping: I transferred notes and quotes from usability study to sticky notes. I grouped notes that addressed similar issues together to uncover common themes.

Research Insights and Recommendations: I refined the themes derived from the affinity mapping activity into a set of insights. From these, I derived recommendations for ways to improve the application. These recommendations were then prioritized to determine which were most pressing.

Refining the Prototype: I used the recommendations from the usability study to make improvements to the low-fidelity prototype. I summarized the entire process in a presentation deck. To read the deck, click HERE

High Fidelity Mockup

After incorporating user feedback into the wireframes, I added visual elements to the app design.

High Fidelity Mockup: The full layout of pages from the MovieSnacks app.

Color and Font: I chose the red, white, and marigold color scheme in order to invoke the playful colors of an old fashioned carnival popcorn box. Likewise, I chose the font Outfit for its easy legibility and movie marquee feel.

Action Indicators: Throughout the app, all action areas are indicated by a drop shadow. Those highlighted with red are food, location, or personal preference choices. The buttons filled or outlined with marigold indicate actions within the app (i.e. back, submit, or checkout).

Sticker Sheet: In order to maintain consistency throughout the app, I created a sticker sheet in Figma which gives an overview of the key components of the visual design.

Next Steps

As this project continues, I will move forward with prototyping and a final round of user testing.