Cinema Sam's User Journey Map
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)
Responsibilities
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
Confusion
Users find themselves confused about what movies to see or what movies they would enjoy.
Confusion
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.
Clarity
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.
Personas
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
Big Picture
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.
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.
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.
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.
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.
Iconography
Used icons throughout the prototype to help make navigation easier for people not completely fluent in the English language.
Going Forward
Takeaways
Impact
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
Conduct more user research to determine any new areas of need.
Continue iterating on the designs to see if there are new features that can be implemented to enhance the movie-going experience.
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 emrahmey@gmail.com