Digital Cinema kiosk

Digital kiosk
for movie tickets

  • Screen
  • 1080x1920 px
  • Year
  • 2024

A digital product that allows users to explore available movie listings for cinema ticket purchases. Through a few simple steps, it enables the entire process to be completed quickly, intuitively, and efficiently.

Kinepolis Mataró Parc Cinema

RESEARCH

For data collection, surveys and interviews were conducted with previously defined potential profiles, as well as direct observation of user behavior (shadowing) to gain a better understanding of the needs and expectations to be addressed.

UX research for a digital cinema kiosk
UX research for a digital cinema kiosk
UX research for a digital cinema kiosk

The problem

Several critical insights were identified, such as unintuitive navigation, unclear structure of information, buttons and text content that were visually too small. Additionally, essential functionalities like filters for genre, age, or language were missing, as well as the absence of a progress bar, and the inability to add additional products like popcorn or drinks. These deficiencies result in a long and confusing purchase process, which ultimately harms the overall user experience.

The solution

A new structure has been designed to facilitate access to all content along two axes: a progress bar that provides a better understanding of the entire purchase process, and a main navigation system that gives users control over their actions. Visual elements, such as buttons, icons, and text, have been adjusted to be larger and more readable. Additionally, users are provided with information about the new 'Screen X' technology. Finally, new functionalities have been incorporated, such as filters to improve movie searches by genre, language, and age, along with the option to purchase popcorn and drinks directly.

ARCHITECTURE

All content is organized into two clear phases: the selection options for the available movies and the execution of the entire purchase process.

UX architecture for a digital cinema kiosk

WIREFRAMES

Considering the various insights gathered during the research phase, different content structures have been explored through wireframes (both low and mid fidelity) to generate several viable solutions.

Wireframes for a digital cinema kiosk
Wireframes for a digital cinema kiosk

Throughout the entire navigation, the available content is visible from a single structure: a progress bar that guides the user through the purchase process, a space that summarizes the previously selected options, the selection area, and a bottom navigation menu that allows the execution of the proposed actions.

UI assets for a digital cinema kiosk
UI assets for a digital cinema kiosk

DIGITAL
PRODUCT

From the very beginning, the list of available movies is presented as a visual attraction to capture the user's attention and invite them to use the kiosk to purchase their cinema tickets.

UI design for a cinema digital kiosk

With the touch activation, the platform provides all the information needed to select a movie from the homepage: showtimes, sessions, filters, promotions, and other details of interest, in a clear and accessible manner.

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

Once the movie is selected, the purchasing process is activated automatically. The kiosk guides the user through each step, offering options to choose the session, ticket type, seats, and payment method, facilitating a quick and intuitive purchase.

Sessions

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

TICKETS

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

Seats

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

Extras

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

Confirm
& pay

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

MODALS

UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk
UI design for a cinema digital kiosk

UI KIT

Finally, the visual resources used to maintain aesthetic coherence throughout the digital product are presented, along with the components and page structures created to achieve a complete user experience.

UI colors for a cinema digital kiosk
Typography for a cinema digital kiosk UI grid design for a cinema digital kiosk UI components for a cinema digital kiosk UI design for a cinema digital kiosk