top of page
1-FRONT PAGE – 1.png

Mid-movie snack ordering responsive 

The Coliseum Cinema

website for a luxury cinema

UX/UI Case study (dark mode)

2-SUM UP – 1.png
The Coliseum Cinema
A mid-movie snack ordering responsive website for a luxury cinema 
London (UK)
Responsive website
Google UX project
Project overview

The Coliseum is a luxurious cinema that provides an elevated movie experience with a unique 

offering of mid-movie snacks. The target audience is primarily composed of professionals who 

appreciate the cinematic art form and are seeking a high-quality movie experience.


The goal of this website is to make the process of ordering mid-movie snacks as effortless and 

enjoyable as possible. If the user is at home, they can use the pre-order feature to arrange their food to arrive at a specific time of their screening. If the user is in the cinema, the order process is designed to be as convenient as possible. The user can choose in-seat delivery or counter collection. If the user has created an account, they can order and re-order their food in just a few clicks. 

UX & UI Design, Branding
December - January 2023
3-WHY – 1_edited.jpg
Why this project ?

I chose a cinema-focused project because it gave me an opportunity to design a responsive website that also required a dark mode interface. I couldn’t find many examples of a mid-movie snack ordering website with a high-quality user experience; I saw designing one as an exciting challenge. 

3-WHY2 – 1.png
Design thinking






Notable comments
NB: Due to the small sample size, and without interviews and in-context primary research (ie. service safari) the insights were limited, and further research on a larger sample group would be needed to verify.

1.    How many people do you typically go with  to the cinema?

2.    What snacks or drinks do you take with you into the movie ? 

3.    What do you like and dislike about getting snacks at the movie?

4.    What challenges do you face when ordering a snack in the cinema?

5.    How often do you order snack during movie time? Why?

6.    Have you ever been late to the cinema and entered with no snack?

7.    Is there any way you could think of to improve the snack ordering process at the cinema?

8.    Would you prefer to order from the app or go to the bar and order? 

9.    If you had a choice what type of food and snack would you like to have in the cinema? 

10.    Is there any feature on the website you would like to have?

11.    When the food is ready, would you rather collect your order, or have it delivered at your seat?  

12.    If you’re a regular, would you like to have recommendation based on what on what you order? 

I conducted a qualitative survey with 15 people to get an understanding of people’s habits around snacking at the cinema and the common pain points they associate with mid-movie snack orders. 

User research - Survey
Survey outcome
Participants don’t stay long in front of an art piece due to lack of informations
Participants would like
to have more informations
about the art piece
Participants are choosing an exhibition because they already know the artist
Participants think the art world is not accessible
Participants would
use an art
guide app if it was free
The problem 

When ordering snacks during a movie, users are faced with cluttered and confusing website designs, limited and unhealthy food options, and long and frustrating checkout processes. This detracts from the overall movie-going experience and can lead to user dissatisfaction and reduced revenue for cinemas. Through additional resources and time, more insights could be discovered.

The solution 

 The Coliseum Cinema website offers a seamless luxury 

snack-ordering experience pre or mid-movie. This experience is 

based on a clear and intuitive navigation, a healthier and more 

diverse  food offering, and a streamlined checkout process. 

Competitive analysis
Competitive analysis key points

What needs  improvement

I analysed three cinema websites and their apps, particularly focusing on the snack-ordering user journey, the checkout flow, and UI design. 


I started by studying both positive and negative app review comments on the Apple App Store and Google Play Store to identify patterns and gain insight into users thoughts about these apps. I then looked at the websites, explored them, and used their features to form my own user understanding.


 I summarised the findings on a Excel sheet divided into five major categories: general information, first impressions, interaction, visual design, and content.

  • Filters in the snack offers are not present and/or too vague

  • Missing breadcrumbs

  • Snack options are limited to junk food

  • Checkout process is too long and cumbersome

  • UI design isn’t up to date, layout text and imagery feels obsolete

  • Mobile website is not responsive

What works

  • Choice of guest checkout or user account checkout

  • High-quality imagery with food options and orders

  • Overall navigation is clear and easy to use

7- HMW – 1.png
How might we?

How might we simplify the checkout flow to minimise movie interruption and maximise viewing time?


How might we create a personalised platform that presents relevant food options based on the user’s diet and preferences?


How might we propose an adaptive ordering system for both 

pre-order and in-seat delivery options? 

8- User Personas – 1.png
User journey - Current State

Persona: Nadia   Goal: Order mid-movie snacks

10-IA – 1.png
Information architecture 
11- Task flow – 1.png
Task flow - Order a mid-movie snack 

Scenario: Nadia, a healthy eater, wants to order a snack at the cinema during her movie. 

12- User flow – 1.png
User flow - Buy a movie ticket with snacks 

Scenario: Liam wants to go a see a three-hour movie and wants to pre-order mid-movie snacks. 

14-Low-fi prototypes – 1.png
Low-fidelity prototypes
17-High fidelity prototypes – 1.png
High-fidelity prototypes
Usability study 

I conducted a small unmoderated usability study with 5 users. The goal of the study was to test the general app clarity and the mid-movie snack 

ordering flow in order to identify any pain points or opportunities for improvement.

  • Type: Unmoderated usability study
  • Duration: 10-15 minutes
  • Date: January 2023
  • Locations: London, Remote
  • Time on task
  • Drop off rate
  • Conversion rate
Research questions
  • Is the website’s purpose clear to users and easy to understand?
  • Do the users find the flow clear and easy to use?
  • How long does it take the user to complete the order ?
  • Are there any parts of the flow that the users find complex?
  • Would the users change anything about the flow?
Usability Study 2 – 2.png



Usability study - Iterations 

 In my first prototype the user was presented with two choices on the main page: 

- A pre-movie option (i.e. at home)

- A mid-movie option

This was shown regardless of whether the user was at the cinema, at home, or somewhere else.

Understanding the initial page was a recurring pain point; users were confused about what each option meant. I realised I was trying to create a single solution for two different sets of user needs. With Jacob’s Law in mind, I reconsidered my initial approach and decided to simplify.


The solution was to create two different flows.

Users ordering from home or elsewhere could book a ticket and also pre-order snacks. Users in the cinema could scan a QR code from their seat and directly enter the food-ordering flow. 

Usability Study 2 – 3.png
Usability study - Iterations 



Some users mentioned that  

a search box, in addition to the filters, would make 

It much quicker to find their preferred food choices.  



I added a search box above the filters to help users find the food options they want easily and efficiently. 

Several users expressed frustration that the radio buttons were too small, making them difficult to click. 

I increased the button size to provide a larger touch target and improve the selection experience for users. 

19 - Spacing – 1.png
Card spacing
Card Fonts

Grid used: 8 points

Typeface: Lato

High-fidelity prototypes
21 - Next steps and what I’ve learnt – 1.png
What I’ve learned and next steps

The power of Jacob’s Law


The initial prototypes were too focused on creating a new concept; the result confused users. The effectiveness of reworking the prototypes in a more simple way made me realise the importance of respecting users’ habits.

Designing for dark mode


Dark mode can help to create a luxurious and immersive experience, particularly for an entertainment platform. Despite dark mode being visually striking, conducting an accessibility audit is necessary to help ensure that the website is usable for everyone.

Going mobile


Although the project was focused on creating a responsive website, Coliseum Cinema could benefit from a mobile app in order to increase personalisation and user engagement, improve performance, and make the product more functional. 

bottom of page