Paradiso Kino

cinema ticket booking app — UI design case study

introduction

Imagine wanting to quickly book a ticket for the cinema, but instead of navigating a slow website or waiting in line, you open the new Paradiso Kino app. It’s designed specifically for cinema-goers, making it simple to choose a showtime, pick your favourite seat, and book a ticket - all in just a few taps. A native application designed for both Android and iOS platforms.

Key Deliverables

UI/UX, Android and iOS design, user research, user interviews, user flows, usability testing, style guide, iconography, wireframing, prototyping.

Tools

Figma

problem

Booking movie tickets often requires a trip to the cinema or using a computer, which can be time-consuming and inconvenient. Paradiso Kino recognises this need and wants to provide their visitors with an efficient ticketing experience.

solution

The design cycle

01 Empathise, define, ideate, prototype, test

Continuous communication with users led to frequent iterations. I kept the design process flexible and non-linear, staying open to learning and making adjustments along the way.

Process

01 user research

Key insights and priorities identified from user interviews revealed the most important user needs. These findings highlight the core requirements and preferences that guided the design.

02 key Users notes

“As a user, I want to quickly and easily book tickets for upcoming movies.” Samantha Johnson, aged 31

“As a user, I’d like to browse through the latest releases and upcoming films.” Emma Lee, aged 42

“As a user, I want to choose my preferred seat in the cinema.”
James Osborne, aged 35

Next steps

01 User Flow Diagram

A user flow diagram was created to map out the step-by-step process a user follows to select a showtime, choose a seat, and book a ticket. This digital version was developed after several sketches, iterations, and prototyping the flow.

User testing

01 Wireframes

Low, mid, and high fidelity designs were created for both native iOS and Android apps, with specific attention to each platform's unique specifications. These designs were then used for prototyping and user testing.

Style

01 Style Guide

A selection of grey tones with a bright yellow reflect the simplicity of the app. Maintaining a minimal colour palette has ensured the design feels light and airy, reducing the cognitive load on the user.

02 Typography

Based on the iOS Human Interface and Android Material Design guidelines, I have selected SF Display and Roboto.

03 Icons

Simple, clean icons have been chosen to aid navigation and communicate results. Curved corners mimic other design elements and serve to create an approachable, friendly and playful user interface.

Prototyping

Challenges

01 design

During the prototype phase, two key UI issues emerged. Users thought the primary button was disabled due to its grey colour, and they couldn’t easily tell which page they were on. These problems created confusion and affected usability. Based on user feedback and style guide references, I tested different solutions. I decided to use filled icons to clearly show the current page and chose a more contrasting colour for the primary button while staying within the colour scheme. These simple changes made the interface much clearer and easier for users to navigate.

02 Iterations

New icons and primary button vs the old. When in the menu bar, the icons really makes a difference. Users can now clearly see which page they’re on, thanks to the filled icons, and the primary buttons stand out more with the higher contrast colour. These updates significantly improve navigation and overall usability during additional prototyping.

UI

01 screens

The user flow from login to ticket purchase is smooth and straightforward. After logging in, users browse movies, select a showtime, choose tickets, and pick their seats. They then proceed to a quick checkout and complete the payment. Additionally, if users click to view their bookings but have none, an empty state screen will be displayed.