Overview
Introduction
As part of the Google UX Design course, I was given a prompt generated by sharpen.design: Design a snack ordering app for a movie theatre. I got to work on this prompt, and spent the next few weeks working on this mobile application: Movie Munchies.
Problem
A movie theatre has seen a significant dip in sales for its snacks and drinks. They believe people are less likely to queue for food before a movie now than they used to be. They want to create a mobile application to help their customers.
Goals
Create an app that will allow movie-goers to order their snacks and drinks without having to queue at the concession stand before the movie, by allowing them to order in advance and to have their order delivered to their seat.
Process
User Research
Research Goals
I wanted to interview movie-goers to understand what their pain points about ordering from the cinema’s concession are, and why they are not ordering snacks and drinks. I also wanted to know if they would rather use a mobile application to order, instead of queuing at the concession stand.
I interviewed 5 participants in total, aged 18-40, all of them living in metropolitan areas. All participants are active movie-goers, with at least one visit per month, and all from different socio-economic backgrounds.
The interviews allowed me to understand their pain points and to create two user personas that best encompass the target audience for Movie Munchies.
User Persona
Lorraine
Thomas
User Pain Points
Cinema food can be expensive for movie-goers, and they are not always aware of promotional deals going on at a certain point in time.
Movie-goers want to order in advance or on the go, instead of having to queue at the concession stand, to accommodate their busy lifestyle.
Movie-goers are reluctant to wait in line, either because of medical concerns, or they are worried they will miss the beginning of their movie if the queue is too long.
Movie-goers want quick and easy access to the concession stand’s menu and offers, with key information like allergens and nutritional information.
Our snack ordering app will allow users to order snacks and drinks for their movie screening, which will affect all movie-goers by allowing them to order ahead of time and to get their order delivered to their seat.
Ideation
Information Architecture
With a clear goal statement in mind, I started working on Movie Munchies’ information architecture. I was careful to keep the process as simple and efficient as possible for the movie-goers, while ensuring that they had all the tools available to complete orders that would match their budgets and lifestyles.
Paper Wireframe
I started the wireframing process with pen and paper, as this allowed me to quickly convey ideas I had for the look of the app. I created several versions of certain screens, like the home page and the item card, before settling on the final drafts for my low-fidelity wireframes.
Low-Fidelity Wireframe
Then I moved to Figma to create low-fidelity wireframes of Movie Munchies. I used them to create a prototype of the application, so I could later use it during the usability study.
Usability Test
The same users that were interviewed during the user research part of the process were then asked to perform a usability test of the application’s prototype. Notes taken during the usability study were taken in a Google Sheet spreadsheet, to ensure notes were taken in a consistent manner and the same observations were recorded for each participant.
Once all the interviews were recorded, observations and quotes were organised in a board in Miro to extract insights from them. Those insights were then organised by themes to draw statistics and conclusions that would inform how to edit the current version of the application’s prototype based on the feedback received.
Test Outcomes
of user felt confident about the payment process of the app
100%
of users had positive comments on the process of adding items to the basket
80%
of users had issues with the bottom menu bar and with accessing specific pages
60%
Text labels were added to the bottom menu bar for better accessibility.
of users expressed frustration or confusion about the way to enter the time of delivery or the seat numbers
60%
Seat and time selections were changed from text input to dropdown for better usability
Furthermore, the layout for the basket screen was modified to make it look less cluttered and to add vital buttons that were missing.
UI Kit
High-Fidelity Screen
Next Steps
Although this is a conceptual project, here are a few things I would keep in mind after the launch of Movie Munchies to the public:
Order Volume, especially in comparison to orders made in person at the concession counter.
Conversion and Retention Rates, to ensure the application is used effectively by customers.
Revenue Growth, to calculate the impact the application has on the concession stand’s revenue.