Case study

Cinema Hall Creator for cinetixx

Time range
Jan2024 – Jan 2025

Time for reading
~ 20 min

Tags
UX/UI, desktop, refinements

The previous version was highly error-prone, overly complicated, and time-consuming. In this case study, I will demonstrate how I simplified the complex flow into effortless steps and optimized the settings, reducing the time required to set up a basic cinema hall by approximately 63%.

Context

What is cinetixx

Company that is creating SaaS solutions for cinema owners in Germany. This projectwas part of the migration process from desktop to web.

Project scope & goal

Migrate the functionality from the old desktop application to the new web application. The new design needed to align with the Cinetixx design system while also improving usability and clarity.

Problem statement

The old version forced users to either view all options at once, or search for specific settings in the top bar menu. Additionally, the underlying logic was not user-friendly, causing frustration even among the Cinetixx support team.

Development team

1 UI/UX designer, 2 frontend developers, 1 backend developer

Comparison between old, desktop version(top left) and new, web version (bottom left).

All materials, designs, and insights presented in this case study are the property of createctrl/cinetixx. This work is shared for portfolio purposes only, with the sole intent of demonstrating my role and contributions to the project. No unauthorized use, reproduction, or distribution is permitted.

Previous version

As part of the broader task of migrating all functionalities to the web, we also had to implement the auditorium creator. One of the biggest issues with the previous version—aside from being limited to desktop—was its overly complex user flow.

Users couldn't scroll or edit seats easily, and many essential actions were hidden, while irrelevant settings remained visible even when they couldn’t be used. Additionally, users had to remember the status of various settings to ensure it functioned correctly.

The outcome

We successfully transferred and redesigned the auditorium feature, achieving:

63% reduction in time required to create a basic auditorium.
87% reduction in time needed for complex auditorium setups.
Customers can now use this feature independently after onboarding by the Cinetixx Support Team.
Creating new auditorium elements is 56% faster.

Redesign process

Research

Contextual inquiry

We applied one of my favorite research methods — contextual inquiry. We conducted several sessions with employees responsible for creating auditoriums, gaining valuable insights into their pain points and challenges with the current system.

Current solution research

Besides conducting contextual inquiries, we also needed to uncover all hidden settings. We collaborated closely with the backend team, who guided us through the database and explained various functions. This process took considerable time but was essential—we discovered numerous settings unfamiliar to employees, as well as many unused properties.

Competitive & Market Research

We attempted to analyze similar features in competing cinema management software but found no directly comparable solutions. As a result, we explored a related market—concerts and events. We researched their processes to understand their approach and identify potential insights.

Main findings

Configurations

Multiple configurations can be associated with a single auditorium, which meant that we need to hold much more data than thought.

Seat weight — priority for automatization

It determines which seats are prioritized as suggestions during ticket purchases. This was one of many features that employees were unaware existed.

Sectors — no sectors?

Larger cinemas can be segmented into smaller sections, similar to concert halls. However, in the current system, the “sector” was treated as equivalent to the 'auditorium' in the hierarchy, leading to frequent misunderstandings.

Auditoriums configuration ≠ Seat configuration

During our research, we discovered that not only auditoriums could have multiple configurations, but also seats — by changing their price zones — to accommodate varying needs.

Connecting seats

In some German cinemas, empty seats cannot be left between selected ones. We needed to take that into consideration while designing the process itself.

Cognitive overload

As previously mentioned, the cognitive load involved in creating auditoriums was significant. This issue was consistently highlighted in all discussions and user feedback.

Research Summary Statement

The previous workflow was overly complicated, making it difficult even for employees to work with auditoriums. Many essential functions were hidden, while unused properties remained visible.

Design change process

Since the core functionalities were being transferred, our primary focus was on redesigning the overall flow, as it was the biggest pain point in the previous version. After defining the new flow, we created user flow charts and MoSCoW prioritization, which guided us in developing wireframes and final prototypes.

Ideation

We conducted multiple rounds of discussions and brainstorming sessions with current users to explore concepts and possible outcomes. Through this process, we identified several key points essential for enhancing the user experience.

We made several assumptions about the new flow, settings adjustments, and overall functionalities. Maintaining backward compatibility was crucial, so we worked closely with backend to ensure all endpoints and edge cases were covered.

To declutter the main view, we split the flow into several sections. This approach reduced the number of visible options at once, effectively decreasing cognitive load and overall complexity.

Divide into sections

Since the process of creating an auditorium involved numerous conditional scenarios (“if” and “or” situations), we automated the system to handle the most common actions, reducing manual effort.

Automatization

To assist users during the process, stakeholders approved the addition of in-app instructions, explaining the purpose of each step and providing guidance on how to complete it.

Provide extra instructions

To improve usability and recognition, we structured the page into three key sections, which were changing depending on the section and current selection.

Page blocks

Several options needed to work together seamlessly. We renamed and linked certain settings to improve clarity for users while ensuring the database received all necessary information.

Predefined options

Preview of the MoSCoW method.

Preview of one of the user flows.

Summary Statement

We needed to simplify the process and make it intuitive. The auditorium is the heart of the cinema, and it must function seamlessly — without missing a beat.

Wireframes

Before finalizing the ready-to-go mockups, we developed Lo-Fi wireframes to ensure all use cases were covered and logically structured. After discussing and refining them as needed, we quickly transitioned to full Hi-Fi wireframes.

Since the main design system was already in place, we bypassed intermediate wireframes to meet the project deadline.

Example of wireframe, template overview.

Example of wireframes, the overview of settings panel.

Global changes

To simplify the complex data needed for creating seating plans, we broke the process into five steps: Auditorium Plan, Seat Plan, Zones, Connections, and Seat Priority—replacing the previous single-view approach.

On the left, users can drag and drop seats and elements into the auditorium workspace at the center. A tool menu enhances functionality, enabling efficient organization and adjustments. On the right, a dynamic settings menu adapts options based on the selected element.

Plan of auditorium

This option is only visible if we have determined that the auditorium will have sectors. It allows users to add sectors to the auditorium plan.

To streamline the process of creating auditoriums with multiple sectors, we introduced a quick copy-and-paste functionality for selected sectors. This feature significantly reduces the time needed for creating and resizing sectors.

Preview of the overall auditorium plan to create sectors in old version.

Preview of the overall auditorium plan to create sectors in new version.

Seat plan

For common auditorium layouts, we introduced a “Generate a Set of Seats” feature, allowing users to quickly create basic seat plans with rows and seats automatically added.

To simplify the process, we added tools for copying seats and rows, multi-editing, swapping seat types, and automatic renumbering based on position. These enhancements make seat plan creation faster and more efficient.

Preview of the seat plan with one element selected, with quick copy function.

Preview of the seat plan with one row selected, with quick copy function.

Preview of the "generate a set of seats" modal window.

Zones

Zones are used to differentiate the price of seats. For example, if users have a row of extra-comfortable chairs, they can assign a different price to those seats. Users can create multiple zones and assign them as needed.

We also included instructions under a link, explaining the purpose of zones and how to use them. To improve recognition, we placed instructions in the same location across all auditorium steps.

Connections

Cinema owners often prohibit leaving empty seats between selected ones. Previously, all values were provided manually, and there is not visible connections between the seats.

In new version, it is done by default with a set of rules. However, users can manually adjust this setting if needed.

Seat priority

This feature was initially called “seat weight”, leading to confusion about its purpose, even among the Cinetixx Support Team. To resolve this, we renamed it 'seat priority.' Here, users can define seat priorities for automatic selection at cash registers.

Previously, priority numbers had to be manually assigned or automatically applied in a triangle pattern. We improved this by introducing additional shape options, visualizing the focal point with maximum priority, and displaying priority density to help users understand the impact of their settings.

New seat priority preview, with instructions.

Organization and structure

We also needed to consider the storage and the path to access the auditoriums. Initially, the board proposed creating a new category called 'Auditoriums' in the main menu for quick access. However, after further research and discussion, they agreed to redesign the cinema page as well.

This redesign allowed the auditorium (which cannot exist without an associated cinema) to be directly linked to the cinema itself. It created a separate category in the menu — Cinemas.

The preview of the Cinemas and Auditorium page.

Cinema page

To meet the latest requirements, I consolidated all cinema-related information. The cinema page now includes an Overview tab for displaying cinema data, an Auditorium tab for listing auditoriums and their configurations.

Archives section to declutter the main view by storing inactive cinemas and auditoriums while ensuring they remain accessible for legal and regulatory purposes.

Example page of the cinema; example photos — cinema city in Gliwice, Forum.

Iterations & Refinements

The main challenges stemmed from the old version of the cash register software, which needed to be compatible with this feature, as well as the logic within the database. As a result, we had to perform multiple reroutes and iterations during the implementation. Some of the key issues included:

Element representation

We couldn't "draw" the elements as they were. Due to software limitations, we had to use polygons, which complicated the process of creating new elements.

Save actions

Several actions in the process required a “save” option to push changes to the backend. As a result, some solutions included an additional step to ensure no data was missed.

LoveSeats

LoveSeats (couch instead of chairs) presented a complex challenge that required close collaboration with the development team. Issues arose with properly displaying and editing them, leading to changes in their behavior and the introduction of certain limitations.

Summary

We successfully transferred the Auditorium feature, creating the new category in main menu.

The summary of this project:

The time required to create basic auditoriums (with only regular seats) was reduced by approximately 63%.
For more complex auditoriums (with different seat types and settings), the time was reduced by about 87%.
After onboarding with the Cinetixx Support Team, customers can now use this feature independently, without needing to contact Cinetixx support.
Creating new elements for auditoriums is now 56% faster than in the desktop version.