Designing a Movie Theater Ticketing Website
Problem: Existing movie ticket booking platforms have limited features and functionality and inefficient systems for browsing movies and purchasing tickets.
Solution: Cinépolis is a chain of luxury movie theaters that offer customers the option to purchase tickets and reserve seats from the comfort of anywhere. Typical users include working professionals who desire the convenience of advance ticketing.
Cinépolis aims to make the ticketing experience fast and easy for all types of users.
Understanding the User
User Research: Summary
I conducted interviews and created empathy maps to understand the needs, behaviors,
and motivations of the users I’m designing for. I discovered that many target users treat a trip to the movies as a fun and relaxing way to unwind from work.
This user group confirmed initial assumptions about movie theater customers, but research
also revealed challenges. Movie ticket booking websites are difficult to navigate, inaccurately represent theatre screen-to-seat distance, and sometimes lack reserved seating options. This caused a normally enjoyable experience to become challenging for users, negating their goals to unwind and relax.
Pain Points
Amenities
Theater features and facility details often missing from movie ticketing platforms
Experience
Movie ticketing websites lack an engaging browsing experience
IA
Inadequate theater dimensions may make it difficult to make informed seating selections
Persona: Aaron
User Journey Map
Mapping Aaron’s user journey using the Cinépolis website revealed possible pain points and opportunities to improve the user experience.
Starting the Design
Sitemap
Website navigation was a primary pain point for users. I used that knowledge to create a sitemap.
My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to flow, making things simple and easy.
Wireframes
Taking the time to draft iterations of each screen of the app using paper wireframes ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized optimizing the users browsing experience.
* Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
Features:
-
User flows to purchase movie tickets and select seats
-
Simple & consistent navigation to help users flow through the website seamlessly
-
Accessible transitions
** View the Cinépolis low-fidelity prototype V2 **
Usability Study: Findings
I conducted one round of a usability study. My findings helped guide my designs from wireframes to low-fidelity prototype.
1
Call to Action
Users want visual cues to direct them to purchase their tickets
2
Theater Offerings
Users were confused by images used to represent theater amenities
3
Movie Details
Users did not have a clear way to navigate to the movie details page
Refining the Design
Mockups
Early designs lacked clarity on how users can proceed from the homepage to the showtime page. After conducting a usability study, I added CTA buttons to provide cues for users to initiate ‘get ticket’ or ‘advance ticket’ tasks.
Before Usability Study
After Usability Study
Users expressed confusion while browsing the ‘Showtimes’ page because of the utilization of images to represent theater amenities. They also lacked a clear way to navigate to the ‘movie details’ page. I updated the theater offerings section to include text in addition to the graphics. I added a ‘movie info’ link to redirect users the movie details page.
Before Usability Study
After Usability Study
Mockups: Screen Size Variations
Since users purchase movie tickets from a variety of devices, I decided to create wireframes for additional screen sizes
to ensure I created a fully responsive web browsing experience. I included considerations for additional screen sizes in my mockups based on my wireframes.
Web
Mobile
High-Fidelity Prototype
The final high-fidelity prototype addresses the main user pain points by providing an easy to use design that is inclusive and accessible.
Features:
-
Simple & consistent UI to aid user navigation
-
Detailed text and graphics help users make informed seating selections
-
Meets user needs for describing theater amenities
** View the Cinépolis high-fidelity prototype **
Accessibility Considerations
1
Visual Heirarchy
I used headings with different sized text to ensure content readability for everyone
2
Landmarks
I programmatically identified page sections to help users, including those who rely on assistive technologies, navigate the site
3
Alt Text
I designed the site with alt text available on each page to ensure sitewide screen reader access
2
Going Forward
Next Steps
Since this was a project for a certificate program, there were many design constraints. If given the opportunity to work on a similar project, I would:
2
Conduct another round of usability studies to determine whether the current design effectively addresses the users’ pain points
1
Test the design with a screen reader to ensure an optimal user experience for users with screen readers
2
Conduct additional user research to determine new areas of need or enhancement
3