The Cinema App
For everyone!
Research and design by:
Akande Nusirudeen K.
UI/UX Designer
Links: Digital Wireframe | User testing prototype
The product
The Cine7 Cinema app is an app designed for cinema owners to allow their customers to book tickets online and at the same time, able to choose where to seat in the hall during the booking process.
Project duration
December 2022 to April 2023.
Project Overview
The Problem
Users find it difficult to book a movie ticket for their friends and family and are also unable to get a suitable seat for themselves in a row.
The Goal
Design an app that will allow a user to book cinema ticket(s) and able to select a seat number(s) in the process.
My Role
UX designer designing a cinema app
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Persona
User research: summary
I conducted interviews and created empathy maps to understand the user I’m designing for and their needs. A primary user group identified through research was working adults who love going to the cinema to watch the latest movies
This user group confirmed the initial assumption about the movie app but research also revealed that choosing a seat when buying a ticket was limited to the user. Other user problems include being unable to watch a movie trailer and other challenges that make it difficult to achieve their goals.
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to the digital wireframe would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy way for users to find upcoming movies.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes
As the initial design phase continued, I make sure to base screen designs on feedback and findings from the user research.
This screen satisfies the user’s pain point
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of selecting a movie and booking a ticket while at the same time choosing a seat number on the app. So the prototype could be used in a usability study with users.
View the Cinema app
Usability study: findings
I created two rounds of usability studies. Findings from the first study help guide the designs from wireframes to mockups. The second study uses a high-fidelity prototype and revealed what aspect of the mockup needed refining.
Round 1 findings
- Users find it easy to use the app.
Users need more adjustments to the typography.
Users are able to book ticket
Round 2 findings
- Users find it easy to use the app.
Users suggested an adjustment to the navigation menus.
Users are able to complete a checkout process but the seat number buttons are not clickable and interactive.
Mockups
Early designs allowed for some customization, but after the usability studies, the seat number screen was redesigned to make the number button more interactive. And also, users can be able to click on a link to see the interior of the hall.
At the payment screen before the usability study, the Pay button is active even when no entry was found. A correction was made after usability study 2 by making the Pay button to be inactive until an entry is made.
Screenshorts
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for booking a movie ticket and checkout. It also met the user’s need to select seat numbers during the booking checkout.
View the Cine7 Cinema app high-fidelity prototype
Final solution
