Cinema Booking Experience
Designing a clearer, faster booking flow for cinema customers
PROJECT TYPE
UX / Interaction Design / Wireframing / Prototyping
METHODS
User Flow Mapping · Sketching · Wireframing · Interaction Design · Prototyping
Overview
A popular cinema chain identified that a significant number of users were abandoning their ticket purchases at the checkout stage. To address this, the business planned to introduce an express checkout feature designed to make the booking process faster and more convenient for returning users, particularly those with saved payment details and booking preferences.
My task was to map the user flow for this streamlined experience and define how users should move from film and seat selection through to payment and ticket confirmation. The focus was not simply on reducing the number of screens, but on removing unnecessary friction while still giving users enough control to review and modify their booking before completing payment.
Key business goals:
-
Reduce cart abandonment by minimising friction during checkout.
-
Create a seamless experience for logged-in users with saved payment and booking preferences.
-
Allow users to quickly modify their seat selection before confirming payment.
-
Provide a clear payment confirmation with easy access to purchased tickets.
UX Problem
The main UX challenge was balancing speed and control.
Returning users should be able to complete a booking quickly, but the process still needs to make important information easy to review and change before payment. If the journey becomes too long or repetitive, users may abandon checkout. However, removing too many steps can also create uncertainty, particularly when selecting seats, reviewing booking details or confirming payment.
How might we create an express cinema checkout experience that reduces friction for users while still giving them confidence and control over their booking?
Project Objective
The objective of the project was to design a clear user flow that would support a faster booking experience from film selection through to confirmation.
Mapping the Booking Flow
Before working on individual screens, I mapped the complete booking journey.
The flow was structured around four main stages:
Select Film → Choose Seats → Review Cart → Payment
Rather than treating the journey as a completely linear process, I also included routes that allow users to return to earlier stages. For example, users can add another film from either the seat-selection or cart screens without losing the bookings already stored in their cart. This was important because it gives users greater control and prevents them from having to restart the entire booking process.
Low Fidelity Wireframes
Once the booking flow had been defined, I created Low Fidelity Wireframes for the main screens.
Working at low fidelity allowed me to focus on structure, hierarchy and navigation without becoming distracted by visual styling.
The wireframes explored three key areas:
Film selection
The film-selection screen grouped theatre location, ticket quantity and date controls together above the available films. This reduces the need to move through multiple setup screens before browsing available screenings.
Seat selection
The seat-selection sketch used a familiar cinema seating layout to make the interaction immediately understandable. The screen also included a price summary and routes to either continue to the cart or add another film.
Cart review
The cart screen was designed as a clear checkpoint before payment. Each booking could be reviewed or removed individually, while the total remained visible at the bottom of the summary.
At this stage, the main focus was establishing the information architecture rather than visual design.
Testing the Low-Fidelity Wireframes
The low-fidelity wireframes were tested with users using a simple task-based usability test. Participants were asked to move through the booking journey from selecting a film and seats through to reviewing their cart and progressing towards payment. The aim was to understand whether the structure of the flow felt logical and whether users could easily identify what they needed to do at each stage.
One recurring issue was that users could complete the individual screens, but were not always clear about where they were within the overall booking process or how many stages remained before payment.
Based on this feedback, I introduced a progress indicator at the top of each screen showing the main stages of the journey: Select Film → Choose Seats → Review Cart → Payment
This gave users a clearer sense of location and progression, helping them understand what they had already completed, their current step, and what would happen next.The finding directly informed the refined wireframes and became one of the key improvements carried forward into the final prototype.
Refined Wireframes
After defining the core structure, I developed the initial concepts into more detailed wireframes.
The refined designs introduced a much stronger hierarchy, clearer interaction states and a consistent visual system across the entire booking journey. The interface uses a dark cinema-inspired theme with restrained yellow accents to highlight important actions and active states.
Film Selection
The film-selection screen acts as the main entry point into the booking journey. A four-stage progress indicator immediately communicates where the user is within the overall process, while the large See What's On heading establishes the purpose of the page.
The selection controls for theatre location, ticket quantity, month and day are grouped together before the film listings, allowing users to refine availability from a single area.
Film cards then present the key information required to make a decision:
-
film title
-
genre
-
age rating
-
runtime
-
short synopsis
-
available screening times
-
starting price
Available screening times are presented as individual controls so users can quickly scan and compare options. The yellow accent is reserved for important calls to action and system states, helping guide attention without overwhelming the interface.
Design decision
Rather than separating film search and film results into different screens, I kept them together. This reduces navigation and allows users to quickly adjust their search criteria while still viewing the available films.
Seat Selection
The refined seat-selection screen keeps the interaction deliberately focused. The selected film, screening time and ticket quantity are shown directly beneath the page heading so users can verify their current booking before choosing seats.
A simple legend distinguishes between:
Available · Selected · Taken
The seat map is arranged using clearly labelled rows and seat numbers, reflecting the physical layout users expect from a cinema. A live counter shows how many seats have been selected compared with the number required.
For example: 0 / 2 selected.
This gives users immediate feedback and makes the task requirement clear.
The price summary updates alongside the seat selection, while the primary button remains disabled until the correct number of seats has been chosen.
UX rationale
This applies both error prevention and visibility of system status.
Instead of allowing users to continue with an incomplete selection and displaying an error later, the interface makes the requirement visible and prevents progression until it has been completed.
Cart Summary
The cart screen acts as the final review stage before payment. Bookings are organised into a structured summary displaying: Film & time · Selected seats · Price · Action
Users can remove individual bookings without affecting the rest of the cart. The overall total is clearly separated from the individual items, making the final cost easy to identify before payment.
Two actions are then provided:
-
Add More Films allows the user to return to film selection while retaining their existing bookings.
-
Enter Payment moves the user forward into checkout.
Design decision
I visually differentiated the two actions so that Enter Payment is clearly the primary next step, while Add More Films remains available as a secondary action. This maintains flexibility without giving both actions equal visual priority.
Creating a Consistent Interface
Across the refined wireframes, I introduced several elements that help the screens feel like one connected product. The persistent progress tracker establishes continuity between stages, while repeated typography, spacing, borders and button treatments create predictable interaction patterns.
The visual design also supports the cinema context. The predominantly black interface creates a darker, theatrical feel, while the muted yellow accent provides contrast for selections, prices and primary actions. Most importantly, the visual styling supports rather than replaces the underlying UX structure established during the wireframing stage.
Interactive Prototype
After refining the screens, I connected them into an interactive prototype representing the full booking journey.
The prototype demonstrates how a user can move through the experience from browsing available films through seat selection and cart review before progressing towards payment.
Interactions include:
-
selecting screening times
-
progressing between booking stages
-
selecting individual cinema seats
-
receiving immediate feedback when seats are selected
-
dynamically updating the selected-seat count
-
updating price information
-
adding additional films to the booking
-
reviewing multiple bookings in the cart
-
removing individual bookings
-
preserving cart items when moving backwards through the journey
The prototype also introduces hover, selected, disabled and active states to provide visual feedback throughout the experience. These micro-interactions help reinforce the relationship between user actions and system responses.
UX heuristics
Several of the prototype behaviours directly support established usability principles.
Visibility of system status
The progress tracker, selected-seat counter and highlighted controls show the current state of the booking.
User control and freedom
Users can add films, remove bookings and return to previous stages.
Error prevention
Progression from seat selection is restricted until the required number of seats has been chosen.
Consistency and standards
Buttons, selection states and navigation behave consistently across the experience.
How the Design Meets the Business Objectives
The final prototype was designed to respond directly to the business goals identified at the start of the project. Each stage of the booking flow was refined to reduce friction, support faster decision-making and give returning users greater confidence before completing payment.
Reduce cart abandonment ✓
The booking journey was simplified into four clearly defined stages:
Select Film → Choose Seats → Review Cart → Payment
A persistent progress indicator helps users understand where they are in the process and how much remains, reducing uncertainty during checkout. Important actions are prioritised visually, while unnecessary steps are kept to a minimum.
Support a faster experience for returning users ✓
The flow is designed around an express checkout model, where returning users can move quickly through booking using saved preferences and payment details. By keeping film selection, seat selection, cart review and payment tightly connected, the experience avoids repeated data entry and unnecessary navigation.
Make seat changes quick and easy ✓
Seat selection remains editable before payment, allowing users to change their choice without restarting the booking. The seat-selection interface also provides clear available, selected and unavailable states, alongside immediate feedback showing how many seats have been chosen.
Provide a clear final review ✓
Before payment, users are given a dedicated cart summary showing the film, screening time, selected seats and price.This creates a clear checkpoint where users can verify their booking, remove items or add another film before committing to payment.
Reinforce confidence after payment ✓
The final stage of the flow is designed to provide an unmistakable payment confirmation, followed by easy access to the user's tickets and booking information. This reassures users that the transaction has been completed successfully and gives them a clear next action.
Overall outcome
By combining a shorter checkout journey with clear system feedback, editable booking details and a structured review stage, the design supports both the user need for a simple, controllable booking experience and the business objective of reducing abandonment at checkout.
Next Step: More Usability Testing
The next stage would be to validate the prototype with users through moderated usability testing.
I would give participants realistic booking scenarios rather than explaining how the interface works.
For example:
“You want to see Neon Protocol at 18:30 with a friend. Book two seats and continue until you reach payment.”
-
During each session I would observe whether users can:
-
understand the overall booking sequence
-
select the correct screening
-
identify available and unavailable seats
-
understand how many seats are required
-
add another film without losing their existing booking
-
review and edit their cart
-
identify the primary payment action
I would also record task completion, errors, hesitation, backtracking and any points where assistance was required. The findings could then be grouped into recurring usability issues and prioritised before another round of design iteration.
Conclusion & Reflection
This project demonstrated how a relatively familiar transaction such as booking cinema tickets can still contain several opportunities for friction. One of the most important lessons was the value of designing the overall flow before individual screens. Mapping the booking journey first made it easier to understand where users needed flexibility, where information should persist and where system feedback was most important. The refined wireframes also showed how visual hierarchy can strengthen an existing UX structure. The progress indicator, clearer action hierarchy and interaction states all make the journey easier to understand without adding unnecessary steps. The prototype allowed these decisions to be tested as a connected experience rather than as isolated screens.
If I continued the project, the next priority would be moderated usability testing. This would allow me to validate whether the simplified booking structure genuinely reduces friction and identify areas that still require refinement before moving towards a production-ready interface.