Cinema Booking
A mobile cinema-booking experience that helps moviegoers discover films, select a showtime and seat, and access their ticket in one place.
- Role
- Sole designer — visual system, screen design, booking flow
- Discipline
- UI design · Interaction design
- Platform
- Mobile app
- Tools
- Figma, Auto Layout, Component variants
A concept project. It has not been released, and no user testing has been carried out on it.
Film posters and stills in these screens are third-party promotional imagery used as placeholder reference content. They are not original artwork, and would be replaced with licensed or original assets in any released product.
projects/cinema/cover.pngOverview
Context
Booking a cinema seat is a short, high-intent task with a surprising amount of friction: browsing happens in one place, showtimes in another, and the ticket usually ends up as a screenshot in a camera roll.
Problem
The steps are simple individually, but they are rarely designed as one continuous experience — so the moment of anticipation between choosing a film and sitting down gets spent on admin.
Objective
Design a single, cohesive flow from discovery through to a ticket that actually belongs in the app.
What I did
- Designed the end-to-end booking flow and its screen states
- Built the cinematic visual system: type scale, colour, elevation, and component variants
- Designed the seat-selection interface and its selected and unavailable states
- Designed the mobile ticket as a distinct, recognisable component
The challenge
Content-heavy discovery, then a precision task, in the same app.
The two halves of this product pull in opposite directions. Discovery wants to be immersive — large artwork, atmosphere, a reason to be excited. Seat selection wants to be the exact opposite: dense, precise, and completely unambiguous, because picking the wrong seat is a real cost.
A single visual system has to serve both. The interesting question was not how to make either screen look good on its own, but how to move between them without the app feeling like two different products stitched together.
The thinking behind it
Design positions taken deliberately — these are arguments, not findings.
- 01
Let the artwork carry the atmosphere
Film imagery is already the most expressive element on screen. The interface stays dark and quiet so the posters supply the mood, instead of competing with them.
- 02
Selected states must be unmistakable
In a booking flow the user is repeatedly asked to commit — a date, a time, a seat. Every one of those uses the same clear selected treatment, so the pattern is learned once.
- 03
The ticket is the product’s memory
It is the one screen reopened later, in a queue, in low light. It was designed as its own component with its own hierarchy rather than as a receipt.
- 04
Density belongs only where it is needed
The seat map is the single dense screen in the app. Everywhere else stays spacious, which makes the shift in rhythm feel intentional.
The booking flow
Four commitments, each one clearly confirmed before the next.
- 01
Discover
Browse what is showing, led by artwork, with enough metadata to decide without opening every title.
- 02
Choose
Open a film for detail, synopsis, and the information that decides whether to book at all.
- 03
Schedule
Pick a date and a showtime, with the selected state making the current choice obvious at a glance.
- 04
Seat
Select from a seat map that distinguishes available, taken, and selected without relying on colour alone.
- 05
Ticket
The booking becomes a ticket that lives in the app — designed to be read quickly, in the dark.
The screens
Discovery, film detail, showtime selection, seat map, and ticket.
projects/cinema/discovery.pngprojects/cinema/film-detail.pngprojects/cinema/showtime-selected.pngprojects/cinema/seat-selection.pngThe mobile ticket
The component the whole flow exists to produce.
projects/cinema/ticket.pngprojects/cinema/flow-overview.pngVisual system
A dark, cinematic direction built to sit underneath other people’s artwork.
Typography
- A single sans-serif family, with weight carrying hierarchy on dense screens
- Film titles set large; supporting metadata held small and consistent
- Numerals — times, seat numbers, row letters — kept tabular so they align
Colour
- A deep purple base that recedes behind poster artwork rather than fighting it
- One accent, reserved exclusively for the current selection and primary actions
- Seat states distinguished by fill, border, and label — never by hue alone
Components
- Film card: poster, title, and the minimum metadata needed to choose
- Time chip: default, selected, and unavailable variants
- Seat: available, selected, taken, and unavailable variants
- Ticket: a distinct surface with its own elevation and internal hierarchy
Interaction states
- Selected states share one treatment across dates, times, and seats
- The primary action stays disabled until the current step is actually complete
- Unavailable options remain visible rather than hidden, so the layout stays stable
Concept project
What has and has not been validated
This is a concept. It has not been built or released, and no usability testing, interviews, or analytics exist for it.
There is deliberately no checkout, payment, or purchase-confirmation screen shown here, because those screens have not been designed. The flow presented ends at seat selection and the resulting ticket — showing anything more would misrepresent the work.
The film posters and stills are third-party promotional imagery used as reference content while designing. They are not original artwork and would be replaced with licensed or original assets before any real use.
Outcome and reflection
What this project demonstrates is interface craft: a coherent dark visual system, a genuinely distinctive ticket component, and selected states that stay consistent across three different kinds of choice.
What it is missing, honestly, is the front half of a UX case study. There is no research here, and no validation — the decisions are reasoned rather than tested.
If I took it further, the first step would not be more screens. It would be putting the seat-selection map in front of people to find out whether the available, taken, and selected states are as unambiguous as they look to me — and designing the payment and confirmation steps that the flow currently stops short of.
Contact
Have a product idea worth shaping?
I’m open to UI/UX and product design roles, and to freelance design and frontend projects. Tell me what you’re working on.