Mid-movie snack ordering responsive
The Coliseum Cinema
website for a luxury cinema
UX/UI Case study (dark mode)
The Coliseum Cinema
A mid-movie snack ordering responsive website for a luxury cinema
Where
London (UK)
What
Responsive website
Why
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.
Role
UX & UI Design, Branding
Category
Entertainement
When
December - January 2023
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.
Design thinking
EMPATHISE
DEFINE
IDEATE
PROTOTYPE
TEST
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
65%
Participants don’t stay long in front of an art piece due to lack of informations
80%
Participants would like
to have more informations
about the art piece
45%
Participants are choosing an exhibition because they already know the artist
90%
Participants think the art world is not accessible
75%
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
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?
User journey - Current State
Persona: Nadia Goal: Order mid-movie snacks
Information architecture
Task flow - Order a mid-movie snack
Scenario: Nadia, a healthy eater, wants to order a snack at the cinema during her movie.
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.
Low-fidelity prototypes
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.
Methodology
-
Type: Unmoderated usability study
-
Duration: 10-15 minutes
-
Date: January 2023
-
Locations: London, Remote
KPI
-
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?
Before
After
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 - Iterations
Before
After
Some users mentioned that
a search box, in addition to the filters, would make
It much quicker to find their preferred food choices.
Before
After
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.
Card spacing
Card Fonts
Grid used: 8 points
Typeface: Lato
High-fidelity prototypes
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.