Case Study
Theater App Design
Branding / UI + UX / Visual Design
I led the design of a mobile app for a local movie theater, which allowed their users to view movie options, watch trailers, purchase tickets and select their desired seats beforehand.
Date
Role
Team
Deliverables
Nov. - Dec. 2021
Lead UX Researcher/
Designer
Yours Truly
User Research, Wireframing, Low-
Fidelity Prototyping, High-Fidelity
Prototyping & Design Iteration
Design Process
01
Define
- Define Project Goals
- Define Key components to be included
Research
02
- Research Goals
- User Interviews (5)
- Persona Creation
Design
03
- Ideation
- Sketches
- Low-Fi Wireframe
- User Feedback
- High-Fi Prototype
Evaluate
04
- Usability Testing (5)
- Survey
- Interview
Main Objectives
The Challenge:
Design an application that gives users the opportunity to book tickets and select their seats at the local cinema.
Key Components to Include:
1. Movie Selection
2. Select Seats
3. Purchase Tickets
User Research
Research Goal
To determine whether our application fits user needs, enhances their experiences and improves the convenience of the current buying process.
Methodology
I interviewed 5 Participants of different ages and backgrounds to determine the most important factors that the general public was looking for when reserving a movie ticket online. I visualized the customer journey to show the existing experience and summarized pain points and needs for all types of users.
Personas
The following personas were based off of 2 chosen interview participants. The goal of the personas is to show two contrasting agendas among movie goers.
LEA
Age: 43
Occupation: Sales
Family: Husband / 3 Kids
“Its too stressful to wait in line with 3 kids to see a movie where my oldest has to sit alone” - Lea
Bio
Lea is a busy mother of 3 who works 40 hrs a week. Her husband works the night shift, so she finds herself often taking care of the kids alone. One thing they all love to do is go see a movie at their local
theater. It's easy for Lea because she gets to relax for a few hours once the movie begins and by the time it's over, the kids are ready to be put to bed.
Goals
- Skip the ticket line at the theater
- Sit with her family
- Save some money buying online
Frustrations
- Waiting in 3 lines at the theater with 3 children to watch out for
- Not being able to sit with her whole family on a busy night
Jake
Bio
Age: 32
Occupation: Data Science
Family: Single / 1 Dog
Jake is a movie fanatic (specifically Marvel). When he goes out to the movies, he prefers to sit in the middle of the row and at the back of the theater. Jake wants to enjoy his movie going experience, so if he could avoid sitting next to people as well, that’d be ideal.
“Preferably, I’d like to get a seat where I don’t have to be next to people - Jake
Goals
- Easily see what movies are coming
out soon
- Doesn’t want to sit by anybody
- Save some money buying online
Frustrations
- Sitting next to a mother and 3 kids
- Waiting in line at the theater
Insights
Opportunity Areas
Features
After synthesizing the insights from the interviews and learning about our user needs and wishes, I identified the following opportunities areas, which serves as the inspiration for ideation and feature design.
Design
Ideation
I brainstormed potential design solutions based off of user interviews:
1. Aerial view of open seats in selected theater
2. Option to view movie trailer
3. Tab to include movies releasing soon
4. QR code to present after ticket purchase
From Paper to Prototype
With objectives in mind, I started prototyping form paper to digital designs
Testing and Iterations
I made low-fidelity prototypes on Figma for initial usability testing with 5 participants made up of the general public. Participants were able to navigate through the app, however, there was some friction and areas of improvements.
Following are the main iterations I made:
Iteration #1
Moving Movie Titles Below Their Respective Poster
During usability testing, one user had difficulty reading the film titles while they were located over the movie poster. To support the usability of the app, I moved the titles below the movie poster making them easier to read.
Iteration #2
Navigation
A bottom navigation bar was added to make navigating the app easier for the user.
I wanted to make primary actions as easy to use as possible. So, I placed them in the most recognizable place on the screen.
Iteration #3
QR Code
During usability testing, two users had asked what the following steps were after purchasing their tickets. To promote communication within the app, I included a QR Code with instructions on where to present it on the Confirmation page.
Usability Testing Results
1.
2.
3.
Moved movie titles below their respective poster to increase readability, visibility and therefore usability.
Added a navigation bar at the bottom of the application to better assist with user navigation across the application.
Included a QR code at the end of the purchasing process along with instructions for users once they arrived at the theater. This was implemented to decrease user confusion once tickets were purchased.
Final Iterations
The final iterations of the design represent the final product. The location of the iterations are meant to represent the user flow throughout the application.
Click "Get Tickets"
Choose a Time
Confirm # of seats and click "Buy Seats"
Select your date
Select and Confirm your seats
Purchase Confirmed!
Congradulations!