CinematiX
CinematiX
Introducing CinematiX
My first UX design project!
Get ready to explore the world of seamless seat reservations and ticket booking for cinemas. Lights, camera, action - let's make movie-going fun, quick and simple, for everyone.
~ Created with Figma ~
The main user flow is complete, however there are a few more updates and iterations needed to perfect the experience.
Project Overview
The Product:
CinematiX is an app made for dedicated cinemas. Users can easily select their desired location and see what movies are playing on specific dates. They can reserve seats and even order snacks for pickup. CinematiX also presents movies to users, that are based on their personality and favorite movie genres.
Project Duration:
January 2023 - April 2023
Understanding the user
User Research: Journey Map
Mapping Pierre’s user journey revealed how useful it would be for users with different needs and abilities to have access to a dedicated Cinema Ticket Booking App like CinematiX.
The Problem:
Users having trouble reserving cinema seats and tickets online: lack of language options, lack of movie and critics’ information, no possibility of pre-ordering snacks, and no possibility of printing tickets.
The Goal:
A fun, clear, and simple app design that allows users to quickly order and reserve tickets and seats to their favorite movies. Additionally, their recommended movies are based on their interests.
User Research: Summary
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research were teenagers and adults over 15 years old, who are either studying or working, but want to spend quality time with their loved ones at a cinema every few months.
Research revealed that users in this group are looking for a fast, convenient, and environmentally—friendly way to book the tickets to the cinema. The encounter frustration such as: language barriers, pop-up ads, lack of payment options, and the app itself looking quite off putting, making it less enjoyable for them to book the tickets.
Other user problems included problems with the quality of the app: its lack of information about a specific movie, critic ratings and reviews.
Persona 1: Pierre Dupont
Problem statement:
Josh is a final year university student, who just moved to the U.S from Paris. He likes going to the cinema every 3-4 months. He wants to be able to quickly reserve a ticket to the cinema in an eco-friendly way, because he wants to take time off from studying and have some fun with his friends.
User Research: Pain Points
The inability to use different payment methods, such as PayPal, Mobile Pay etc.
Too much pop-up ads, such as adding movie snacks, slowing the process of reserving tickets. Colour themes are often dull, making it less enjoyable for the user to see the movie.
Some apps lack in movie information such as: plot of the movie, critic ratings, reviews. Users are forced to exit the app and research the movie.
Many apps are over-crowded with text, using small fonts - making it harder to read for the user. Lack of language options, need of screen reader for dyslexic users.
Persona 2: Angelica Anderson
Problem statement:
Angelica is a mother of two, who like to balance work with her hobbies. Her problem is that she likes to collect tickets from events, which is why she never orders tickets to venues online. She wants a clear, simple-to-use app, that will allow her to fulfill her desires.
Starting The Design
Paper Wireframes
The goal of drafting and iterating each individual screen of the app, was to ensure that all different options are taken into account and consideration. This would also allow for the digital wireframes to address the user pain points clearly. For the Homepage I prioritized an easy way to select date & time of desired movie, or select a movie from the “Playing Tonight” section.
Pierre really wanted an all-in movie app, where he can stay up to date releases, directors’ cuts etc. With the “My Cinematix option, they can now easily access these movie materials and information without having to search online.
Because Pierre is an exchange student in the U.S and is still learning the English language, I have implemented language options within the app. Easy to navigate in the upper menu bar.
In the low bar menu, I have implemented the “My Tickets” button, where users can easy navigate their purchased movie tickets.
Considering a larger group of users and their different abilities, I have implemented an accessibility feature for users with vision disabilities - a screen reader.
Low Fidelity Prototype
The main user flow of this low-fidelity prototype is for the user to quickly and efficiently complete a purchase of a cinema ticket with seat reservation.
After reviewing the movie and its information, the user enters an interactive seat map where they can select their seats.
Next, they are asked if they want an addition of snacks and are taken to the order summary where they can select their payment type.
Lastly they are left with an order confirmation and an E ticket which is also stored in the “My Tickets” section of the app.
Round 1 Findings
Some users want the snack section to be re-organized.
Some users think adding a list of movies connected with date and time would be beneficial.
Some users think adding another place in the app for finding e-tickets would be helpful.
Digital Wireframes
The goal of creating digital wireframes was to consider all options and address user pain points effectively. On the Homepage, priority was given to enabling easy selection of movie dates and times or choosing from the "Playing Tonight" section.
Usability Study Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 2 Findings
Some users think the colour scheme could be more dark and cinema friendly.
Some users think having the same kind of animations (swipe left to go next, or swipe right to go back) would be helpful.
Some users think the seat map should be more clear.
Refining the Design
Mockups
After each usability study I have iterated on my designs, based on the insights, feelings and thoughts of the participants. I have completely redesigned the Snack Selection screen, making it easier to use. The call-to-action buttons have also been changed and I have added an animation of swiping back and forth is now consistent (swipe left to go next, or swipe right to go back).
Before
Before
Provided a screen reader on each screen of the app for users with impaired vision or blindness.
I have added a second option of finding users’ tickets. Before the study it was only located in low bar menu. Now it is also easily navigable through the user’s Profile Page.
Before
Just a few mockups…
After
High Fidelity Prototype
The High-Fidelity Prototype presented a clearer and quicker user flow. The animations make it easy for the user to move through the app. There is also more customization options.
Before
After
I have updated the colour scheme by making the background dark, to enhance the “cinema feel”. I have also added a calendar and corresponding list of movies connected with that date and time.
After
Lastly, after the second usability study, I have decided to redesign the Seat Selection Map. Now there is no confusing triangles and the ‘selected seats’ are clearly indicated with the light green colour.
Accessibility Considerations
Provided a colour scheme that is accessible, by checking the WCAG guidelines.
After
Used icons, images and consistent animations for easy navigation and for users to better understand the app.
Going Forward…
Takeaways:
Impact:
The app really makes the user journey of purchasing cinema tickets, seats and snacks extremely enjoyable, simple and clear. It has personalized features that meets the needs of any modern day user.
What I learned:
Through this project I learnt the need of constant testing and iteration to enhance the user experience as much as possible. But I also learnt when to finalize my project and end the iteration process. As much as being a perfectionist in UX Design is an advantage it can also lead to overcomplicating things.
.
Next Steps:
Continue with another round of usability studies, with the focus on users with disabilities.
Experiment with logo design for the app, perhaps try out new typography and colour schemes.
Conduct more user and competitor research, to determine of any new needed features.