The Yooj Film Center
Redefine going to the movies with The Yooj by tailoring the viewing experience to your liking for effortless viewing every time without the hassle.
Role
UX Designer & Researcher
Responsibilities
User research, wireframing, prototyping, user testing, design iteration, and accounting for accessibility.
Project Duration
April - June 2022
Tools
The Problem
Most movie theater websites fail to recognize that movie showtimes and available seating are interdependent factors in a user’s decision to purchase movie tickets. Users are typically expected to select a movie, then a showtime, then seating. This often leads to users wasting time backtracking to find a showtime that matches all of their needs. Additionally, movie theater websites are frequently cluttered with advertisements that can overwhelm the user and complicate progression through the ticket purchase flow.
The Goal
Create a simple and clean website for The Yooj Film Center that streamlines online ticket purchasing by requiring concurrent selection of showtime and seating options or by storing the user’s preferences for automated selection.
Key Challenges and Constraints
Given the time constraint imposed by the Google UX certificate program, sourcing participants for user research and user testing was a consistent challenge throughout the project. Additionally, as I continue to write research study plans and scripts, I find that creating effective questions for user testing that encourage open and constructive feedback is particularly challenging. There is certainly a balance to strike between open-ended questions that invite thoughtful feedback and questions that are focused enough to produce actionable feedback.
Understanding the User
I began my research by conducting user interviews to learn user expectations and pain points associated with online ticket purchasing. Users’ decision to purchase tickets online rather than at the box office is primarily dependent on convenience, specifically with regard to seat security. Users also expressed frustration when they committed to purchasing a movie ticket only to be informed right before checkout that seating isn’t available, thus forcing them to restart the process.
Personas
After compiling my user interviews into single and aggregated empathy maps, I focused the data into several personas to provide a consolidated source of user empathy.
Journey Maps
Walking my users through a basic ticket reservation flow made it easier to isolate potential snags that I could explore further and address in my designs later down the road. This exercise reinforced the presence of friction between showtime selection and seat reservation, particularly since the standard flow staggers the two steps despite their interdependent nature to users.
Competitive Audit
Channeling the user’s needs and frustrations, I analyzed several direct market competitors to identify strengths and weaknesses regarding navigation, user flow, and other key factors. Notably, Alamo Drafthouse lessened the burden on users by presenting showtime and seat selection side-by-side, making it easier to switch between showtimes to find preferred seating without hopping to and from entire screens. However, as suggested by initial user interviews, most of the websites required users to select a specific showtime before viewing seat availability.
On another note, the competitive audit was also a great opportunity to build awareness of any design conventions that I could leverage in my own designs to fulfill a simple and intuitive flow.
Defining the Problem
Pain Points
💺 Hiding seat availability behind showtimes — Users become frustrated when they are forced to waste time jumping from showtime to showtime in order to find their preferred seating.
💰 Excessive advertising harms navigation — Oversaturation of advertisements stirs confusion, distracting users from the core flow and complicating progression.
👨👩👧👦 Lack of group accommodation — Users who are purchasing tickets for a group are embittered when required to scour showings not only for a sufficient number of seats but a sufficient number of adjacent (or otherwise connected) seats.
⏱️ No time saved — Users generally don’t feel like they save time when they purchase tickets online compared to buying tickets at the box office.
Problem Statements
I created two problem statements as a way to narrow the focus of and define the key goals to prioritize with my design solutions moving forward that address the users’ needs. These goals centered around providing the user with the information they require in order to make a confident decision surrounding showtimes and seat availability.
Raul is a busy employee with an active social life who needs to quickly & easily find showtimes that can accommodate his group of friends because he wants to enjoy the movies with his friends without the hassle of scouring showtimes for available seating.
Dani is a busy freelancer and passionate cinephile who needs to find movie showtimes that work with her busy schedule and offer ideal seating because she wants to enjoy the films she’s interesting in without having to sacrifice time and comfort.
Ideation with “How might we?”
Asking “how might we?” questions allowed me to explore concrete solutions to the users’ problems and better understand the scope necessary to craft those solutions. Ultimately, how might we create a positive user experience for the user that addresses all of their needs?
⬆️ How might we amp up the good?
As discussed earlier, most users expressed frustration over the fact that most ticket purchase flows ignore the interdependent nature between showtimes and seat availability for ticket purchases. Unnecessary compromises to either factor harms the movie-going experience, which led me to ask these questions:
How might we ensure the best possible seating for users at the most convenient times for them?
How might we make the ticket/seat reservation process fun, easy to use, and engaging?
🔄 How might we change the status quo?
The typical online ticket purchase flow closely resembles the process of purchasing tickets at the box office. The common pain points I identified during user research also closely mirrors the frustrations a customer might encounter when ordering tickets physically at the movie theater. Because of that relationship, I asked these questions:
How might we address the pre-existing seat reservation flow for most theaters?
How might we minimize the amount of time users spend reserving tickets?
How might we balance the preferred seating with preferred showtimes?
🎦 How might we break the POV into pieces?
After I started brainstorming design solutions, I realized that they assumed the perspective of a returning user who may have already completed initial processes that make the solutions possible. Furthermore, I had yet to consider cases where the user is required to make some sort of compromise. For example, what happens if there are no available seats for any of the user’s chosen showtimes? These considerations led me to shift and ask:
How might we improve the seat reservation process for new users?
How might we acquire new users’ preferences for seats and showtimes?
How might we address conflicts w/ showtime and seat preference?
How might we simplify the navigation and UI to appear clearer?
Sitemap
Laying out a sitemap before diving right into wireframes guaranteed structure and acted as an organized skeleton to build my designs around. I was able to roughly determine the number of screens for my flow and the content for each. I also began brainstorming a preference system for seating and showtime selection, creating a basic flowchart to illustrate its function.
Giving Form to Ideas with Prototyping
My first goal with paper wireframes was to lay out a reservation flow that, at its core, is simple to use and navigate. My second goal was to create a system that could help users easily find showtimes that can accommodate their seating needs and preferences.
Digital Wireframes
Taking the ideas that seemed to most effectively connect with the user’s goals, I fleshed them out with digital wireframes. The preference system is a feature that allows users to individually toggle and save their preferred number of guests, favorite showtimes, and ideal seating. The system will then take that information when users pick a specific movie and use it to automatically pick a showtime and seating.
Low-Fidelity Prototype
I stitched together the screens of my digital wireframe, making sure that each screen contains interactive elements for progressing forward and backward in the flow, to create a prototype that was ready for user testing.
Collecting Feedback with User Testing
The first round of user testing was a moderated study consisting of five participants that were assigned multiple tasks to complete within the prototype and asked to provide feedback throughout. The study revealed several snags in the core flow, especially at the landing page and showtime selection screen.
Affinity Diagramming
Listing out the observations from user testing, I sorted them to identify patterns and common pain points which I then developed into insights that I could address in later design iterations.
Usability Study Findings
Iterating on Designs
After iterating on my low-fidelity wireframe and prototype with close regard to findings from user testing, I was ready to dive into mockups and a high-fidelity prototype that incorporates visual elements such as color, typography, iconography, and branding. At this point I had fleshed out the preference system to help users streamline ticket purchases. However, I also implemented a convenient--albeit limited--alternative that is available to guest users on the showtime selection screen. Users can designate their party size to filter showtimes with proper seat accommodations. My reason for implementing this is similar to the reason most e-commerce sites allow users to complete purchases as “guests.” Most users want to buy tickets as quickly as possible, which, as first-time users especially, means they’re probably not going to want to create an account to set preferences first. All in all, this mockup and matching hi-fi prototype represents a clean and easy ticket purchase flow with an optional feature that allows users to toggle on and off their preferences for showtimes, seating, and party size for automatic ticket reservation.
The Preferences System
The preference system allows users to designate and toggle their preferences for showtimes, party size, and seating. That way, when the user picks a movie they want to watch, the tool will automatically try to find a showtime that suits the user’s preferences as closely as possible. If the user doesn’t like the result, they can manually select with the click of a button.
Accessibility Considerations
Ensured that the color palette complied with WCAG color contrast standards for maximum legibility among the vision impaired.
Large font sizes for heading text clearly signal and distinguish prominent areas on the website, allowing for more easy navigation for assistive technologies.
Focused on regulating the information load on each screen so as to avoid overwhelming users and muddling information for screen readers.
Conclusion 🏁
What I Learned
Generative user research lays a strong foundation that informs effective design decisions that are rooted in user empathy. However, further research—such as usability studies—is necessary to develop a truly effective product. Taking an iterative approach enables you to address pain points and determine whether your solutions are truly solving the user’s problems. Furthermore, the effectiveness of an iterative design approach is contingent on how you interpret and synthesize data from your research. Your research will ultimately define the product you create, so you must conduct effective research that produces effective results!
Next Steps
Perform additional usability studies to continue refining the product.
Determine whether the core flow and additional features truly address and solve the pain points I extracted and identified from initial user research.
Continue to iterate and incorporate new research findings.