UI/UX Design for a mobile ticketing app for movie theaters

Image alt tag

The Product

Vue Movies is a digital ticketing app for movie theaters around the globe. With Vue Movies, going to the cinema is simple. Within the app, you can search for movies, read reviews, watch trailers, and purchase tickets. Additionally, Vue Movies pricing is transparent and does not include added convenience fees.

The Problem

People want to go to the movies, but unfortunately, they find the process of picking movies, finding showtimes, and purchasing tickets too cumbersome.

The Solution

Design an online ticketing app that makes buying movie tickets accessible and affordable.

My Role

UX Research, UX Design, UI Design

Project Duration

September 2022 - November 2023 (~8 Weeks)


Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the User

User Research

In order to understand future users I conducted interviews and created empathy maps. A primary user group identified through research was people aged 18-65 who regularly or semi-regularly go to the movies. This user group confirmed many initial assumptions about future Vue customers, but research also added some new valuable insights. Some examples include, users who wanted information about theater location prior to purchase (i.e. where to park) and users who wanted to know about movie quality (i.e. reviews) prior to purchase.

User Pain Points


Users find themselves confused about what movies to see or what movies they would enjoy.


Users find the cost of online ticketing apps to be confusing and misleading as fees are often tacked on at the end of a purchase.


Users find that ticketing apps are not 100% clear about all relevant information such as, what time the movie actually begins, or how to get to the theater.


Cinema Sam's User Journey Map


Problem statement: Cinema Sam is a busy IT Consultant who needs to find movie showtimes that fit around his hectic schedule because he loves going to the movies and his time is limited.


Cinema Sam's User Journey

User Journey

Mapping Sam’s user journey revealed how helpful it would be to have an app for ordering movie tickets.


A competitive analysis of rival movie apps.

Competitive Analysis

In order to better understand the world of online ticketing, I conducted a competitive analysis of rival companies. This included direct competitors like Fandango and Atom Tickets (i.e. services that act as third parties for purchasing tickets) and indirect competitors like AMC and Regal (i.e. proprietary apps for major theater chains).

The final results were synthesized into a competitive audit report.

Starting the Design
UX Storyboards
Image alt tag

Big Picture

Image alt tag

Up Close


Vue Paper Wireframes

Paper Wireframes

I took ample time to draft iterations of each screen for the VUE app. I began on paper, as this ensured that the elements that eventually made it into the final designs were well-equipped to tackle user-pain points.

Image alt tag

Finding the Movie

For the initial design phase, I wanted to build an experience with multiple entry points for the user to start their movie journey.

Image alt tag

Picking the Movie

Another important design component was to provide the user with ample information about the films, so they can make an informed choice about what they end up seeing.

Low-Fidelity Prototype

Low Fidelity Prototype

Usability Study: Findings

I conducted two rounds of usability studies. The first usability study used a low-fidelity prototype and helped guide the user through the process. The second usability study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

  • Users want personalization

  • Users want to order multiple tickets with friends.

  • Users were confused by the confirmation page.

Round 2 Findings

  • Users were confused with the seating map.

  • Users wanted a way to share tickets with friends.

Refining the Design

Style Guide

Design System

For the design system, I wanted to keep things clean & simple, given that the focal point for this app is the movies and their respective artwork. For the typography, I went with a single sans-serif font, Roboto. For the colors, I stuck with a dark theme, using cool blues and purples to evoke the regal and luxurious quality a movie theater should evoke.

Image alt tag

Buying Multiples Tickets

Early designs were built without considering a user who wanted to purchase multiple online tickets. I added an additional page so people can select how many tickets they wanted. I also added a feature during the seat selection process, where users can increase the number of tickets they want to purchase.

Image alt tag

Sharing with your Friends

Upon the second set of usability studies, we found that users wanted a way to share their tickets with their friends. To resolve this issue I added a button that allows users to share said ticket.

High Fidelity Prototype

Vue's High Fidelity Prototype

Want to See the App in Action? Click Here!

Accessibility Considerations

Handicap Details

Ensure all movie theater locations have adequate details for handicapped persons and movie descriptions have details for hearing and visions impaired persons.

Assistance for Vision-Impaired

Provided access to users who are vision impaired, by adding alt text to all images; thus making the app compatible with screen readers.


Used icons throughout the prototype to help make navigation easier for people not completely fluent in the English language.

Going Forward


The app provides a new way to look up showtimes and buy tickets for movies.

One quote from peer feedback:

“The app made buying movie tickets so easy and fun. I love that it provides me recommendations and that I can share my ticket with friends.”

What I Learned

While designing the Vue Movies App, I learned that it’s important to be flexible on your initial ideas and assumptions as new feedback and critiques will force you to rethink many of your initial designs.

Next Steps

  1. Conduct more user research to determine any new areas of need.

  2. Continue iterating on the designs to see if there are new features that can be implemented to enhance the movie-going experience.

  3. Consult with an engineering team to see if the app can be built out for real-world use.

Let's Connect

Thank you for your time reviewing my work on the Vue Movie App! If you’d like to see more or get in touch, my email is