Role
UI Designer
Goal
Coherent redesign of the UCI app
Company
UCI is the largest cinema operator in Europe, offering a diverse selection of films, pioneering event cinema programs, and innovative services such as the Unlimited Card.
Status Quo
As a frequent moviegoer, I prefer booking my tickets online for the convenience of checking availability in real time. However, the current UCI app presents several usability challenges that impact the overall user experience:
- The movie overview is cluttered with ads and overwhelming amounts of information.
- Navigation is overly complex and lacks intuitive structure.
- The booking process is lengthy and buried under multiple layers.
- Managing the Movie Points card is unnecessarily complicated.
- In overall, the UI design feels outdated and lacks visual and functional consistency.
Challenge
As a self-initiated project, my goal was to simplify the ticket booking process and the management of Movie Points. I set out to redesign the app by introducing a „Quick Access“ button for faster access to tickets and loyalty points, streamlining the overall navigation, and modernizing the UI design for a more consistent and user-friendly experience.
Discovery
App Store Review
To gain an objective understanding of the user perspective, I analyzed App Store reviews as a starting point for identifying common pain points and usability issues. Upon reviewing customer feedback in the App Store, I found the following:
- A total of 74 users have rated the UCI app. As of November 2024, it holds an average rating of just 1.4 out of 5 stars.
- Many users express frustration over the lack of meaningful improvements.
- When updates do occur, they often fail to resolve core issues and, in some cases, make the app even harder to use.
These findings clearly highlight the need for a user-centered redesign—one focused on reducing drop-offs, increasing conversion rates, and improving overall usability.
Competitive Analysis
To gain a nuanced understanding of the UCI Cinema app, I conducted a competitive analysis aimed at answering the following questions:
- What UX standards are common in the cinema industry?
- What steps do users go through within the app?
UX Audit
To do this, I first performed a UX audit based on Nielsen’s 10 heuristics on the cinema apps Cineplex, CinemaxX, and UCI. At the time of my case study, these three providers were the largest cinema chains in Hamburg and the surrounding area, each with its own cinema app.
- Cineplex: Clear and straightforward booking process with a functional, utilitarian design approach. App usage is only possible after registration.
- CinemaxX: Nested structure and extensive sidebar navigation, with the actual booking process handled externally. The design lacks consistency with the website. App usage is possible as a guest.
- UCI: Complex and nested booking process combined with a cluttered sidebar navigation, further overloaded by ads. The design is not consistent with the website. App usage is possible as a guest.
User Flow
Despite limited resources, it was important for me to map user flows to gain a deeper understanding of user needs and potential pain points. Using user flows, I compared three key user scenarios across the three apps from a technical perspective: ticket purchase, loyalty programs, as well as cinema tickets and loyalty card management.
Ticket Purchase Process at Cineplex, CinemaxX, and UCI
- Focused and linear ticket purchase process at Cineplex.
- Booking as a guest is possible at both CinemaxX and UCI.
- CinemaxX users are redirected to the website, where login occurs later in the process.
- At UCI, login happens quite early in the process. The payment options are nested and not immediately visible.
- Users only learn about available payment methods towards the end of the booking process at both CinemaxX and UCI.
Loyalty programs at Cineplex and UCI
- Only Cineplex and UCI offer loyalty programs—Cineplex Plus and Movie Points, respectively.
- Both cinema chains have a linear process for these programs.
- The main difference lies in the information delivery: Cineplex provides brief and concise details, while UCI offers more detailed information about benefits, earning points, and rewards, which could be presented more visually.
Cinema tickets and loyalty card management at Cineplex, CinemaxX, and UCI
- In all three cinema chains, the card display can be accessed with a single click within their respective categories.
- Cineplex offers two entry points for the Cineplex Plus card: as an icon in the header, on the home screen, and under the profile section.
- UCI also provides two entry points for cinema tickets and Movie Points, but as separate categories: cinema tickets under „Bookings“ and Movie Points under the „Movie Points“ category. On the dashboard, users can find both the cinema ticket and the Movie Points card together.
Information Architecture
The biggest core issue with UCI’s information architecture is its extensive and detailed navigation, which is modeled after the website rather than being adapted for the app. Additionally, the “My UCI” category features its own separate navigation, further complicating the app’s overall information architecture.
Based on articles about common navigation patterns in mobile apps, I determined that the navigation should be divided into main and subcategories, with the main categories reduced to five. Through card sorting exercise with three participants I identified which of the current categories should serve as main and subcategories.
- The app focuses on ticket sales, current film programs, and the profile section, which serves as user management.
- Discount offers are consolidated under the profile: Movie Points, Unlimited Card, and Family.
- Vouchers are placed under the Shop category.
- Duplicate categories are removed to create a clearer and more functional navigation.
Develop
How might we - Question
How can we simplify the booking process to reduce user frustration?
- New header layout: Logo centered, location selector below cinema info, and search function in the top right corner.
- Legend appears only at movie selection: To maintain homepage clarity, the legend is shown only when selecting movies.
- No more expandable movie list: Instead, selecting a movie leads directly to a new page—providing greater clarity.
- Visual redesign: The design is updated to align with the website’s corporate identity and modernized overall.
How can we design the app navigation so that users can navigate intuitively and quickly?
Bottom navigation: The main navigation will be placed at the bottom of the screen for better reachability and ease of use.
No more sidebar navigation: The traditional sidebar will be replaced by a more intuitive navigation model.
Optimising the User Flow
Building on the previous UX research and the analyzed user flows, I developed optimized workflows aimed at reducing unnecessary steps, eliminating existing pain points, and creating a consistently intuitive user experience.
Purchasing a cinema ticket
Information about Movie Points and the registration
View & Display Cinema Ticket and Movie Points Card
Wireframe
Purchasing a cinema ticket
Information about Movie Points and the registration
View & Display Cinema Ticket and Movie Points Card
Prototype
High-Fidelity-Prototype (Before the Usability-Test)
Puchasing a cinema ticket
Information about Movie Points and the registration
View & Display Cinema Ticket and Movie Points Card
Usability Test
For the study, I recruited five participants who took part both on-site and remotely via Discord, using a link to the prototype. The following three scenarios and tasks were conducted.
Scenario 1
You’ve heard that the new Joker movie is coming out soon. See if you can arrange to purchase a ticket through the app.
Goal 1
Evaluate the ticket purchase process in the app and understand how users perceive the structure and placement of the cinema ticket purchase feature.
Scenario 2
You really enjoyed the Joker movie at the cinema. Since you live nearby and visit regularly, you want to find out if there are ways for loyal customers to save money on tickets.
Goal 2
Evaluate the registration process for Movie Points and determine whether users feel well-informed about Movie Points and are able to register successfully.
Scenario 3
You are third in line to enter the cinema, and staff ask you to show your cinema ticket and loyalty card. Before it’s your turn, find both in your app.
Goal 3
Evaluate the usability of the Quick Access button for the cinema ticket and Movie Points card. Determine whether users find the Quick Access button intuitive to use.
Evaluation of the Ticket Purchase in the App
- Participants expected to be able to click on movie posters instead of the time button.
- Price information for seat selection was missing.
- The color contrast between seat categories needs to be stronger.
- During payment, participants wanted a clear overview of available payment methods—including vouchers, Movie Points, and the Unlimited Card—with corresponding icons and explanations.
- After successful payment and ticket purchase, a summary showing the movie, seat, and purchase details should appear, along with a note about the Quick Access feature that indicates where to find cinema tickets and, later, the Movie Points card.
Evaluation of Movie Points Registration
- Participants found the Movie Points registration unclear, as it is only accessible via the profile section.
- A dedicated scrollable page explaining Movie Points with all relevant information and benefits is needed.
- Rewards should be visually presented along with clear explanations.
- Include a note about the Quick Access feature for cinema tickets and the Movie Points card.
Evaluation of the Quick Access Feature for Cinema and Movie Points Cards
- The Quick Access feature is immediately noticeable, as a brightly colored button appears after registration.
- The Movie Points card should include more than just icons and allow users to list multiple cinema tickets.
General UI Design Feedback
- Text size and line spacing are too small.
- Hover effect needed on the close (X) button.
- Use yellow consistently as a button color throughout the design.
- Avoid greying out buttons, as this makes them appear inactive.
- Pay more attention to the baseline grid.
- Include icons for Movie Points, 3D, iSense, Unlimited Card, and vouchers.
- Modernize the UI further: incorporate dark mode elements, transparency, interaction, and animation.
Prototype Iteration
Consider Corporate Design, but Modernize
Some design components appeared visually outdated, so I created a moodboard showcasing ideas for modernizing the user interface.
Moodboard – Design Concepts Overview:
- Dark appearance: UI inspirations in a dark mode style
- Line-based icons that fill with color upon interaction
- Rounded corners for a softer, more modern look
- Bright, eye-catching buttons
- Customer cards with a transparent effect for a premium, contemporary feel
Final Design
Purchasing cinema ticket
Information about Movie Points and the registration
View & Display Cinema Ticket and Movie Points Card
