Raghav Viswanathan
Case Study
Cinewatch: Cinema & Snack Booking App
Exploring the development of a snack ordering app for a cinema chain
Overview
Cinewatch, a small chain of cinemas, wishes to update and simplify their process of letting users order tickets and snacks in advance. The current system of using a website for this process is cumbersome and has not been optimised for the smartphone age.
This case study follows the visual design process behind the development of an app which will help customers carry out this task.
My Role
Research, User Flows, Information Architecture, Sketching, Wireframing, Visual Design, Prototyping & User Testing
Project Duration
November 2022 to February 2023
The Challenge
Over two thirds of all cinema tickets and snacks are now ordered using a smartphone. The current system of Cinewatch cinemas uses a website designed for a computer screen, and has not been adapted for smaller devices such as phones.
The goal is to create an app that allows users to pre-order snacks and tickets using their phones in a streamlined and streamlined manner.
Research
My User Research involved conducting interviews with a sample of 4 people from a range of background and circumstances, who frequented cinemas and purchased snacks to varying degrees. A series open ended questions were asked in relation to their habits around purchasing tickets and snacks for the movies, as well as their thoughts and motivations surrounding the task. Analysing these answers helped me derive a set of common pain points experienced in this process.
Pain Points
Lack of Translations
The app is only available in English, which is a hindrance for people who are not fluent at reading it.
Allergen Advice
Allergen advice isn’t clear and can only be found under close scrutiny. Highlighting this will save time and assure safety.
Blocks of Text
The app is full of blocks of text and has little images, making it hard for people navigation and selection
Screen Reader Limitations
A lack of screen reader capability in the app limits use for those with visual or learning disabilities.
To visualise these pain points and how they could be experienced by the user, I created a Persona. This person would portray an idea of the product's target market and the problems they face.
Problem Statement
Perez is an immigrant with difficulties reading English who needs a better way of ordering snacks at the cinema because the current app is too text heavy and image light.
Creating a User Journey map for Perez helped narrow down and prioritise the features that needed to be implemented in the product. The goal for Perez here is to select a movie and order snacks for a trip to the cinema.
Action | Task List | Emotions | Improvement Opportunities |
|---|---|---|---|
Collect Order | Task 1: Go to snack counter. Task 2: Give receipt to employee. Task 3: Collect items. Task 4: Enjoy film & snacks.
| Looking forward to the film. Happy to be there after the wait. | Provide way of favouriting details or referring to order history to make re-order process easier for next time. |
Pick up Tickets | Task 1: Go to ticket collecting machine at cinema. Task 2: Input order details using order number. Task 3: Print tickets and receipts. | Annoyed at having to input the order details manually. Anxious that he might miss the show. | Have QR Code on ticket that can be scanned directly at each counter without having to print or input details. |
Compete Order | Task 1: Pay for items. Task 2: Save order details through email. Task 3: Set reminder on phone. | Annoyed at having to enter card details and having to save details himself. | Save card details or use native payment method like Apple Pay. Have option to add ticket to phone’s native Wallet app. |
Choose snacks | Task 1: Browse menu. Task 2: Select items. Task 3: Go to checkout. | Irritated by small number of images vs lots of text. | Provide better images and reduce text. Improve screen reading software on app. |
Pick film | Task 1: Go to film app. Task 2: Choose location, film and showtime. Task 3: Select seats. | Excited to watch a new film. Intimidated by quantity of choices. | Have filters to make process easier, like defaulting to closest locations. |
Competitor Analysis
We looked at the experience of visiting the App or Website of two direct and three indirect competitors and analysed their strengths and weaknesses under these categories:
First Impressions
Whilst all had a website, only 3/5 had a an appealing and intuitive look that didn't feel dated.
The other 2 had not been adapted well for the mobile experience.
3 had an app, but only 1 had easy and smooth navigation.
Visual Design
2/5 had a clear, strong brand identity that had a constant theme of colours, fonts and graphics.
3/5 had bland or distracting pages that could cause confusion to the user.
Interaction
2/5 had a good user flow that was easy to follow through, as well as good accessibility features such as screen reader adaptability.
All 5 had the option of creating an account to order tickets, but only 2 had the option of preordering food.
Content
4/5 showed the food menu options, even if only 2 allowed the ability to order food. all 4 had allergen advice for the food, but 2 were laid out in a dense and hard to read manner that could cause hesitancy and concern.
3/5 had adverts that could cause distraction.
Following the analysis, it was clear that the app would need to meet the following criteria to stand out from the others:
The user should be able to order tickets and snacks in the app, with the ability to save and view their order after purchase in the app.
The app should be intuitive and easy to navigate, with a consistent colour and graphics theme.
There should be good adaptation for screen reader technology, as well as clear display of key information such as allergen advice for food items.
Wireframing
Before sketching wireframes, a flow chart was created to show the user journey map for ordering snacks and tickets. This was helpful in clarifying which pages would need to be wireframed.
Paper wireframes were then produced through sketching, with frames for the Homepage, Snack Selections, Confirmation and Payment Pages drawn. Multiple sketches of each were made and the elements that were liked were combined to create a new frame.
Using Figma, these sketches were recreated to produce digital wireframes. With some minor alterations and adjustments, these were combined to create a Low Fidelity Prototype.
Please try out the Lo-Fi prototype yourself by following the cues.
See if you can figure out the navigation process for booking a movie.
Please note that this prototype is optimised for viewing on desktop or tablet. If your are viewing this site on a phone, please visit using a tablet or computer.
Usability Testing - Round 1
5 participants took part in an unmoderated usability study. They were asked to carry out 5 prompts with follow up tasks in relation to the functionality of the prototype. Based on the results of the study, the following 3 key insights were derived:
1. Users find it difficult to exit the booking, an insight is: a cancel button should be included.
2. Users were frustrated when trying to go back to the previous page, an insight is: the “X” button should be re-labelled “back” when it is going to be used as such.
3. Users were curious about the lack of the food order being shown in the “My Bookings” section, an insight is: each past and present booking should show clearly what the film and the food order is.
Mockups
The results from the usability study were incorporated to the design, following which realistic mock-ups of each page were created. This would show the design as it is meant to be viewed on a mobile phone. Here are some of the example of the changes made following the study.
Once the pages were made, they were linked to create a High Fidelity Prototype. Animations and interactions were incorporated to simulate how the app would behave in everyday use. The user is able to book a film as well as select their preferred snacks before checkout. Below is a screenshot of the full High Fidelity Prototype.
Usability Testing - Round 2
Following the development of the Hi-Fi prototype, a second round of the unmoderated usability study was carried out with 5 participants. They were asked to carry out 4 prompts, more complicated than last time due the ability to now conduct complex testing with the Hi-Fi prototype. Based on the results, the following 3 key insights were derived:
1. Users had difficulty reading the inactive icons in the navigation menu at the bottom, an insight is: the colours of the inactive icons should be changed to give better contrast.
2. Users were confused to go to the food menu after selecting the seats, an insight is: a popup or page should ask them if they want to order food, allowing them to skip it.
3. Users tried incorrectly to select the Popcorn directly when asked to select the popcorn combo, an insight is: the 2 products should be more clearly differentiated in colour and placement of page.
Final Prototype
Please try out the final version of the Hi-Fi prototype yourself.
See if you can figure out the navigation process for booking a movie, ordering the snacks and saving the ticket to your account.
(Hint: You really want to see the new Avatar movie!)
Please note that this prototype is optimised for viewing on desktop or tablet. If your are viewing this site on a phone, please visit using a tablet or computer.
Test User 3
“The app is fun and easy to use. I wouldn’t change anything about it. I can see myself using it to book movies and snacks”