MOVIE SNACKR

Movie Snackr is an app designed to let moviegoers skip long lines at the concession stand by giving the opportunity to order and pay for snacks ahead of time.

Overview

Project Duration

August 2021 - December 2021

The Problem

People dislike waiting in long lines at the movie theater, especially at concession stands.

The Goal

To make the snack ordering experience an easier and more enjoyable for moviegoers by providing them with an app that lets them order and pay for their snacks ahead of time. (Plus they can make it in time to see previews!)

My Role

UX designer for the Movie Snackr app from project conception to delivery. I carried out user research, created paper and digital low and high-fidelity wireframes, conducted usability studies, then iterated on designs based on feedback.

Tools Used

Figma, Miro

User Research

Summary

I conducted online surveys and interviews with five participants in the 18-60 age range to understand exactly what users needed and wanted in a movie theater snack ordering app.

One insight the research showed was that most of the participants were comfortable with the idea of ordering ahead and paying through the app, and welcomed the idea of avoiding long lines at concession stands. Some expressed feeling overwhelmed when ordering through an app in general, and wanted a way to narrow down choices.

Another insight research showed was that they wanted to be able to earn and redeem points on their purchases instead of feeling like they were always wasting money on each outing.

Pain Points

Time

• Users don’t want to spend all of the time at the movie theater in lines. They want to be able to enjoy the outing instead of feeling rushed and annoyed.

Price

• Snacks at the movie theater can be pricey, especially if you’re paying for multiple people.

Navigation

• The app needs to be straightforward and easy to navigate when short on time.

User Personas

Based on my research, I created two user personas and a corresponding user journey map for one of them to guide me along with the next steps in the process.

Starting the Design

Paper Wireframes

The first step was to make paper wireframes. Taking the time to put pen to paper to get out ideas for how I wanted to the user flow to look and feel was hands down on the most important steps of this process.

I spent a lot of time reviewing how I order and pay ahead using apps, and noticing what worked well from what didn’t.

Digital Wireframes

My thought process during this point was mainly “How do I make this ordering process less overwhelming for users?”

It’s easy to sort of get caught up in all of the features we think users would want, and I really wanted to focus on making it easy to not only find information on it, but to also navigate through it.

I created the list of popular snacks section for easy selection as well as the section for nearby concession stands. My first thought was that users shouldn’t have to search high and low to be able to find places that are closest to their current location. No one wants order from a place they think is nearby, only to find out that it’s not even remotely close to them.

I realized that a common wish that users expressed was to be able to earn and redeem points for free items on their orders.

This order preview screen shows a breakdown of items added to cart along with the price. The section below shows the amount of points a user currently has and provides options for redeeming items.

And of course, there is an option to go back and make any changes to an order before a user checks out.

The low-fidelity prototype is available to view at the link included.

Usability Study Findings

I conducted two rounds of usability studies. The first round helped to guide me from the wireframes to mockups stage and users tested out the low-fidelity prototype. In the second round users tested out the high-fidelity prototype and I then went through a second round of iterations based on feedback received.

After the first round, I created an affinity diagram in Miro to find common insights from participants. This was my first time using a tool like Miro after hearing bits about it here and there, and it was a good way to organize findings.

My findings for Round 1:

• Users want to redeem free points for items

• Users want to be able to favourite menu items and concession stands

• Users couldn’t find the profile icon

My findings for Round 2:

• Checkout process is “too wordy” for some users. (I chose to not change this as I wanted to make sure that all information was available on the page, but hey - you can’t please everyone.)

• Font sizes needed to be increased for better readability

Refining the Design

Before the usability study

A link was included on the menu to the user profile as well as a placeholder shape in the top right corner. 

After the usability study

I saw that participants didn’t know how to access the profile or found it after much searching, which was my fault for not making it clear by including a profile icon. To fix this, I added in an image to represent a user’s profile picture.

Before the usability study

I received feedback after the second usability study that the font was too small for some to read, even when the prototype was viewed in full screen mode.

After the usability study

I increased the font sizes, the sizes of various screens, and buttons, as well as spaced out the sections on the concession stand menu to provide more white space.

Be sure to view the high-fidelity prototype in full screen mode!

Accessibility Considerations and Next Steps

1. Added text labels with icons on menu and bottom navigation bar for screen reader use. 

2. Used the A11y - Color Contrast Checker plugin in Figma throughout the entire process to ensure that all visible text met AAA colour contrast requirements.

3. Increased the size of text during second round of iterations to be easier to read.

I’m aware that this is a drop in the bucket when it comes to all of the ways to making designs accessible. My goal is to continue iterating and learning better ways to make these designs and my future designs better going forward.

As for next steps, I’d like to:

1. Continue with making this more accessible. Towards the end, I found a great Figma plugin that lets you see what your screens look like to those with low vision. I would like to explore that more.

2. Fully flesh out this project to be a more well-rounded prototype with settings screens connected, etc.

3. Add in the snack delivery feature that I mentioned in my second research presentation. Due to lack of time (and out of fear that I was already doing way too much), I didn’t end up doing this.

Takeaways

This was the first time I have started and completed a project entirely in Figma, and I enjoyed it! I love that it’s web based, and while I had previously only used Figma strictly for prototyping screens that I had imported from Adobe XD for various DailyUI challenges, it was easy for me to pick up.

I’ve spend the last three to four years learning about UX/UI largely on my own, with the exception of taking an Intro to UI/UX course at OCAD U when I recreated the Green Thumb project, so this was my first time really seeing (and being a part of) the entire user experience process. I wasn’t sure that I would like doing user research (or would even been good at it) since I have mainly focused on the UI end of things, but it was a great learning experience.