Creating a Theater Ticketing App
Duration: 1/22-5/22
My Role: Student project: Research, ideation, user journeys, User personas, wireframing, prototyping, usability testing, high-fidelity prototype
This is a fictitious project using a prompt, created for Google's UX Certification course.
The Problem
Zola Cinema is a beloved local movie theater, that values the community it's in.
Zola's ticketing site is outdated and difficult to navigate, especially for their patrons.
-
some older
-
some who don't speak English as a first language
-
and some who find it difficult to travel to the theater at all.
The Goal
This ticketing app will positively affect Zola’s patronage by drawing the community in.
-
self-service will eliminate touch points
-
accessibility functions will create ease-of-use
-
theater information allows patrons to be more confident in going to the theater
Executive Summary
*Spoiler alert*
Research found that prioritizing a tracked ticketing progress and ticket delivery, emphasis on location specific information, and accessibility options were key in creating a successful user experience.
Key features:
-
process tracker
-
ability to reserve seating and accessibility devices
-
social and theater engagement features.
Read on to find out more.
ACT 1:
Understanding the User
-
Meet the Stakeholders
-
Research: a Few Surprises
-
Personas: Terry and Ramon
-
User Journey: Buying Tickets
Meet the Stakeholders
The Business: Zola Cinema
Zola* is a local movie theater that puts community first. Think midnight movies, showing the basketball championship live in the main theater, hosting premieres by independent filmmakers in a restored art deco theater. Zola wants to refresh their patronage with the help of their new app design.
*Zola is a fictitious business, but based on some local movie theaters who fit this profile such as: Grand Lake Cinema, Alameda Cinema, The New Parkway.
Many theaters like Zola choose not to use large ticketing apps such as Fandango, because they find their patrons don't get the full experience a dedicated app can give. Plus the fees for a small theater are too high!
Research: a few surprises
Interviews
Competitive Analysis
Secondary Research
Interviews with the Users
I started out interviewing five movie lovers about their ticketing experiences to explore their thoughts about going to the movies (users go to movies at least once a month, pre-pandemic).
Many folks I spoke with had a lack of enthusiasm about buying tickets online. As much as they enjoy going out to see movies, they don't have a lot of confidence or patience in apps, or willingness to print tickets out.
Hidden fees added too much to the price, unclear processes made it confusing to purchase, and typing in credit card information caused frustrations, and users found it all too easy to make a mistake.
Here are the details:
Where's the Theater?
Users had concerns about logistics surrounding the location, such as parking, concessions, and Covid-19 protocols.
Screen after screen...
Users want confidence when they buy tickets, and they want to know how to access them once at the theater.
Accessibility
The interface is too small, buttons are too close to one another, or users find it a hassle to get tickets online if you aren’t tech savvy.
Buying tickets on the way to the theater when you're in a dark car is no fun. You can't see anything, you're trying to figure out where to go.
Donna, Des Moines, Iowa
User interview
Sizing up the Competition
Competitive Analysis
Independent local theaters similar to Zola Cinema generally have functional, but outdated interfaces that don't always meet current accessibility standards. Oftentimes links were broken, the typeface was too small to read, or the screens were cluttered.
Larger ticketing sites, like Fandango and Atom, focused on lots of high-end features: reviews, trailers, social media sharing, snack pre-ordering... nice to have for sure!
But for Zola's purposes, a more community-focused approach might be more in line with the user's needs-- a dedicated app can support the needs of patrons by supplying information about the theater and it’s offerings.
Direct Competitors
-
Information about events and theater community
-
Personal feel
-
Poor legibility in design
-
Tap targets too close to one another
-
Outdated
Indirect Competitors
-
Features: Links to reviews, theater comparison
-
Ability to share ticket buying via social media
-
Simple, effective UI
-
High fees
-
Impersonal/ not local
-
Not enough information about the theater
Secondary Research: Surprising-Seats!
Secondary research showed that more moviegoers buying their tickets online are choosing reserved seating, recliners and premium seating.
60.4% of online ticket buyers purchased premium seats as opposed to 37.9% for those who bought their tickets at the cinema.
28% of online ticket shoppers said they picked the theater because of reserved seating, while 7.6% of those who bought at the theater listed that as a reason.
36% of moviegoers surveyed picked their theater because of comfort, compared to only 25.9% of offline buyers.
For more information, see this article from Forbes.
Personas
Terry and Ramon represent users based on interview subjects I spoke with.
A couple of reviewers on this project asked why I chose someone older as a persona. The reason is simple-- she is based on real people, and the concerns they brought up!
Terry
Terry represents a Zola Cinema movie patron, based on user interviews performed at the beginning of the research process. She is curious about the theater, interested in buying tickets beforehand, but not a power user.
Terry wants to see her favorite old movies with her new friend. She's new to town and wants to get out and about, but isn't familiar with the theater location.
Problem Statement
Stats:
-
Age: 62
-
Education: MLA
-
Retired
-
Moderately comfortable with technology.
Goals
-
Hopes to see more movies now that she's retired.
-
Wants to have a connection with the theater-- she hopes to see her favorite films.
Frustrations
-
Is afraid she might buy the wrong tickets- her vision isn't great.
-
Has concerns about accommodations, such as seating, Covid requirements, or is it upstairs?
Ramon
Ramon represents a Zola Cinema movie regular: the theater is close by so he goes when he can. He's a busy father of a young kid who values his free time when he can get it! As a native Spanish speaker, he might use a translation feature (user settings), or need to find information on parking or restaurants nearby.
Ramon wants to catch the latest thriller movie with his buddy on one of his rare nights off. Hopefully he can get a seat and grab some food before the show. It's opening night!
Problem Statement
Stats:
-
Age: 31
-
Education: College
-
Teacher, Bilingual Education
-
Uses apps a lot. Translates apps into Spanish when he can.
Goals
-
With a busy social and work life, he wants to get to the movie without any hassle.
-
Wants to check out the area beforehand for a bite to eat.
Frustrations
-
Parking around the theater is so tight! Hope he can find a spot.
-
Last time he didn't buy tickets early. The movie was sold out!
Buying tickets
User Journey
This journey shows Terry completing the main task-- purchasing two tickets for a movie. Here are some opportunities for potential design features that might aid Terry and Ramon.
ACT 2:
Starting the Designs
-
Paper First
-
The First Few Frames
-
Prototype: Lo-Fi Flow
-
Usability Studies: Findings
Paper First
I iterated several ideas on paper, highlighting features we wanted to include in the final version.
Quantity selector placement, CTA buttons and structural elements like icon bars needed a place to go.
I learned a lot by borrowing good ideas from food ordering apps.
Creating the Flow
The "top task": buy tickets for a movie.
Paper to Wireframes
Editing as I go along. This was my first project, be kind.
The First Few Frames
Key Features
-
The in-app ticket holder for QR tickets
-
Prominent map link on every page
-
Icon-based seat selectors
-
Accessibility device reservation available.
Prototype: Lo-Fi Flow
This prototype, created in Figma, shows connections and user flow between screens. First and foremost was creating a clean process to purchase a pair of tickets. Nothing too groundbreaking here, but I made sure to address pain points:
-
all fees are upfront
-
text and tap targets are given enough space to breathe
-
seat selection
In line with our community building vision, I also wanted to mock up a calendar, profile, and location page which will give users lots of great info for planning their next visit, and give the theater repeat customers.
Usability Studies
I tested the prototype with 10 users:
-
5 for the low-fidelity prototype
-
5 for the high-fidelity prototype
-
moderated Zoom session (I was available to answer questions)
I selected three main prompts:
-
Purchase a ticket and reserve an accessibility device. (main flow)
-
Find the location of the theater
-
Find where to change the app settings such as font size.
Low-fidelity testing
Mid-fidelity testing
Act 3:
Refining the Designs
-
Mockups: Shaping the Details
-
High-Fidelity Prototype
-
Accessibility
Mockups: Shaping the Details
I added a ticket wallet, so users could be sure they have access to their purchases easily, as well as any other promotions or purchases.
Ticket Wallet
Before usability study
Tracker
A purchase tracker shows progress in the process, giving users more confidence.
After usability study
Device Reservation
An option to reserve a device was moved to the earliest point in the process.
Location, Location
The map link shows how far away the theater is, and links to the location page
Settings Access
I added an accessibility button in line with new standards, so users can easily adjust settings to their preferences. Previously users went through the profile setting.
Engagement
Users wanted to see more offerings such as special events, so engaging cards and carousels linking to the theater calendar were added on the home page.
High Fidelity Prototype
This is it! Check out the screens, the flow, the whole look and feel.
See the Figma prototype here.
Red Velvet and the Design System.
A note on some of the design choices: I went with a color scheme that evokes traditional red velvet theater seats. I chose a font that evokes noir films of the silver age.
My next steps are to make this again in a dark theme.
A Word on Accessibility
It should be clear I took "a11y" considerations very seriously in my design. This was my goal from the beginning.
Part of it is because I've worked closely with the community here in Oakland, which is known for being one of the most diverse cities in America. With diversity comes a variety of needs: from wheelchair access to translation to font size.
But another reason is that offering accessibility accomodations to people, we all can benefit!
I believe my fictitous theater should reflect the needs of the community by creating a universally comfortable experience, both in-person and online.
Roll Credits
Takeaways
Next Steps
Takeaways
This was my very first journey through the UX process from beginning to end.
I learned that a huge portion of creating a great user experience is REASEARCH. Which is great because I love doing it!
I got a couple of nice quotes from users, but since this is a student project. The whole point is to learn! Glad I had the chance to do so.
"This was super easy to use! Each screen told me where to go!"
-Jose
"I don't usually like to buy tickets online, but I really like this experience!"
-Edward
"I'm so glad you have Closed Captioning device reservation, I have friends who need it"
-Sam
"Love the parking and restaurant info."
-Kelly
Next Steps
Snacks
Create a way to skip the line with snack purchase online.
Simplifiy
This was my first project, and I need to continue to work on making processes easier.
Dark Mode
It looks great and is easier to see. I would love to try it out!
Thank you for reading this whole thing!
Please contact me if you want to work together.
