top of page

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

Image by Felix Mooneeram
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.

(See prototype)

Read on to find out more.

Image by Billy Aboulkheir

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


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.


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.


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 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.

picture of older woman with white hair

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


  • Age: 62

  • Education: MLA

  • Retired

  • Moderately comfortable with technology.


  • 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. 


  • 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 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


  • Age: 31

  • Education: College

  • Teacher, Bilingual Education

  • Uses apps a lot. Translates apps into Spanish when he can.


  • 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.


  • 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.

look up theater. improve by having an easy downloadable app
check shows: improve by link to calendar, events, settings. location info
select seats, times: improve by device reservation
purchase tickets: improve by showing fees, available in app ticket
go to the theater. Improve by location parking info

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.

terrible wireframe drawings
ticket selection drawing
Creating the Flow

The "top task": buy tickets for a movie.

more wireframe drawings
Paper to Wireframes

Editing as I go along. This was my first project, be kind.

paper and digital wireframes
The First Few Frames

Key Features

ticket holder LO FI
  • The in-app ticket holder for QR tickets​

  • Prominent map link on every page

seat selectionLOFI
  • 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.

main flow lo fi prototype
lofi prototype with noodle connectors
lofi images
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


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.


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.

main flow.png
See the Figma prototype here.
design system
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


Next Steps


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!"

"I don't usually like to buy tickets online, but I really like this experience!"

"I'm so glad you have Closed Captioning device reservation, I have friends who need it"

"Love the parking and restaurant info."

Next Steps

Create a way to skip the line with snack purchase online.


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!

White Wall with Stairs
Abstract Futuristic Background

Thank you for reading this whole thing!

Please contact me if you want to work together.

Case Studies
bottom of page