VOX cinemas

UI/UX Design

Design System

VOX Cinemas needed one connected product for the whole moviegoing journey: browsing movies, booking a cinema, seat and showtime, ordering food, paying, and getting the ticket on a phone wallet. I designed it end to end, from zero, with no existing app or design system to build on. The challenge was making discovery, booking, and food ordering feel like one product instead of three.

Client

VOX cinemas

Year

2022

Service

Product Design, UX/UI Design, Design System Built

Product Design, UX/UI Design, Design System Built

Built With

Figma

Timeline

4 months

The Problem

Queue for tickets. Queue again at the counter for popcorn. Miss the trailers. That's still how a lot of moviegoing works: food ordering gets bolted onto the booking flow as an afterthought instead of built into it. VOX needed the opposite: movie, cinema, seat, and food all handled before anyone leaves the house. Pick everything from your phone, walk in, show your ticket, sit down. No second line at the counter.

Discovery & competitive analysis

User research & personas

Problem statements & HMW questions

Information architecture & sitemap

User flows & journey maps

Wireframes & prototyping

UI design & design system

01

The Problem

Queue for tickets. Queue again at the counter for popcorn. Miss the trailers. That's still how a lot of moviegoing works: food ordering gets bolted onto the booking flow as an afterthought instead of built into it. VOX needed the opposite: movie, cinema, seat, and food all handled before anyone leaves the house. Pick everything from your phone, walk in, show your ticket, sit down. No second line at the counter.

Discovery & competitive analysis

User research & personas

Problem statements & HMW questions

Information architecture & sitemap

User flows & journey maps

Wireframes & prototyping

UI design & design system

01

01

The Problem

Queue for tickets. Queue again at the counter for popcorn. Miss the trailers. That's still how a lot of moviegoing works: food ordering gets bolted onto the booking flow as an afterthought instead of built into it. VOX needed the opposite: movie, cinema, seat, and food all handled before anyone leaves the house. Pick everything from your phone, walk in, show your ticket, sit down. No second line at the counter.

02

My Role

Sole product designer on an agency pitch for VOX Cinemas, built from zero: no existing app, no design system to plug into. I owned discovery, booking, seating, food, payment, and the full design system underneath all of it, end to end.

03

The Real Trade-off

Not everyone booking a ticket wants food with it, and forcing a food step onto someone who just wants a seat adds friction to the one thing they came to do. So inside the main flow, food is the only optional step: skippable for people who don't want it, one tap away for people who do, while ticket, cinema, and seat stay required as the core booking.

The same logic runs the other way for people who want food with no movie involved at all. Instead of squeezing that into the booking flow, it's a separate path entirely: pre-order for pickup at the cinema, or get it delivered home, both using the exact same components as the main flow.

04

The Solution

One system, not six screens pretending to be one product: a movie grid with a live "latest releases" queue, real-time cinema and showtime availability, an eight-state seat map, food for pickup or delivery, one payment step, one wallet-ready ticket. Same components, same logic, start to finish.

One system, not six screens pretending to be one product: a movie grid with a live "latest releases" queue, real-time cinema and showtime availability, an eight-state seat map, food for pickup or delivery, one payment step, one wallet-ready ticket. Same components, same logic, start to finish.

05

Step 1–2: Discover & Choose

A "Latest releases" queue, a filterable movie grid, featured rows, fully responsive from desktop down to single-column mobile. Food is reachable from here too, not hidden behind a movie choice. Cinema selection (recent locations, a searchable full list, real open/closed states) and showtime selection run on the same components as the movie grid, so nothing shifts register between browsing and choosing.

A "Latest releases" queue, a filterable movie grid, featured rows, fully responsive from desktop down to single-column mobile. Food is reachable from here too, not hidden behind a movie choice. Cinema selection (recent locations, a searchable full list, real open/closed states) and showtime selection run on the same components as the movie grid, so nothing shifts register between browsing and choosing.

A "Latest releases" queue, a filterable movie grid, featured rows, fully responsive from desktop down to single-column mobile. Food is reachable from here too, not hidden behind a movie choice. Cinema selection (recent locations, a searchable full list, real open/closed states) and showtime selection run on the same components as the movie grid, so nothing shifts register between browsing and choosing.

06

Step 3–4: Seat & Food

Eight seat states: available, hover, selected, unavailable, VIP, VIP hover, VIP selected, and suggested, a state that pushes undecided users toward a good seat instead of leaving them stuck. Built as variants with variables, not one-off screens, so the same component works for any hall. Inside booking, food is optional: skip it, or add it to collect when you arrive. Ordered on its own, with no movie involved, food splits into two paths instead: pre-order & collect at the cinema, or home delivery, both on the same cinema-selection and card components as booking.

Eight seat states: available, hover, selected, unavailable, VIP, VIP hover, VIP selected, and suggested, a state that pushes undecided users toward a good seat instead of leaving them stuck. Built as variants with variables, not one-off screens, so the same component works for any hall. Inside booking, food is optional: skip it, or add it to collect when you arrive. Ordered on its own, with no movie involved, food splits into two paths instead: pre-order & collect at the cinema, or home delivery, both on the same cinema-selection and card components as booking.

07

Step 5: Payment & Wallet

Whether ticket, seat, and food get booked together, or food gets ordered on its own, every path lands on one payment step, one confirmation screen, and one ticket straight in the phone wallet. What's playing tonight becomes seat booked and snacks paid for, before anyone leaves the house.

Whether ticket, seat, and food get booked together, or food gets ordered on its own, every path lands on one payment step, one confirmation screen, and one ticket straight in the phone wallet. What's playing tonight becomes seat booked and snacks paid for, before anyone leaves the house.

08

The Impact

The whole flow runs on one component system. Every interactive state (selected, hover, disabled, VIP, suggested) is built with Figma variables instead of duplicated screens. On top of that: a complete type scale with usage specimens, and a full color system (12+ palettes plus gradients) documented against WCAG 2.1 contrast levels. Nothing here needed a developer to guess.

09

What I Learned

Building an entire product from zero, alone, forces different decisions than adding a feature to something that already exists. There's no established pattern to follow for what a selected seat looks like, or what a movie card looks like while loading. Those calls (the color system, the type scale, what "selected" or "unavailable" means) get made once, before a single screen is finished, and have to hold up everywhere. That system-first thinking is what let discovery, booking, seating, and food end up feeling like one product instead of parts built at different times.

Building an entire product from zero, alone, forces different decisions than adding a feature to something that already exists. There's no established pattern to follow for what a selected seat looks like, or what a movie card looks like while loading. Those calls (the color system, the type scale, what "selected" or "unavailable" means) get made once, before a single screen is finished, and have to hold up everywhere. That system-first thinking is what let discovery, booking, seating, and food end up feeling like one product instead of parts built at different times.

09

Some UI Screens

Hero Section

Available for new projects

Let's Connect

Have a project in mind, or just want to say hi? I'm always happy to talk product, design, or a potential collaboration.

Book a free intro call

© Lara, 2026

Available for new projects

Let's Connect

Have a project in mind, or just want to say hi? I'm always happy to talk product, design, or a potential collaboration.

Book a free intro call

© Lara, 2026

Available for new projects

Let's Connect

Have a project in mind, or just want to say hi? I'm always happy to talk product, design, or a potential collaboration.

Book a free intro call

© Lara, 2026

Create a free website with Framer, the website builder loved by startups, designers and agencies.