top of page

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

andrew-neel-cckf4TsHAuw-unsplash.jpg

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

Screen Shot 2022-05-20 at 6.01.24 PM.png

User Journey Map

Mapping Aaron’s user journey using the Cinépolis website revealed possible pain points and opportunities to improve the user experience. 

Screen Shot 2022-05-20 at 6.03.24 PM.png

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. 

Screen Shot 2022-05-20 at 6.06.57 PM.png

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.  

Screen Shot 2022-05-20 at 6.10.25 PM.png

* 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

Screen Shot 2022-05-20 at 6.14.40 PM.png

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

Screen Shot 2022-05-20 at 6.22.52 PM.png

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

Screen Shot 2022-05-20 at 6.26.58 PM.png

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.

Screen Shot 2022-05-20 at 6.32.01 PM.png

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

Screen Shot 2022-05-20 at 6.46.53 PM.png

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

bottom of page