Project Overview

Duration

2021 Q4

My Role

UX Designer designing the Cineplex app from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Tools

Figma

Miro

Why redesign the app?

The movie theatre industry has been one sector that had been hit the hardest by the covid19 pandemic. One major change during Ontario's reopening phase is the way we order our tickets. Reserving seats in advance to ensure social distancing has been crucial to install confidence in the user's safety. Sadly the current system only supports individual ticket order.

Problems

Movie watchers are currently discouraged to buy their own individual ticket when they are part of a group because the system automatically blocks seats next to reserved seating as part of each purchase due to covid pandemic social distancing protocols. This prevents customers from selecting seats next to their friends. In order to sit together as a group, one selected individual must purchase a ticket for the entire group. This not only puts pressure on the individual to select seats for the entire group, but it also causes an unfair collection of SCENE loyalty points as only the individual purchaser is awarded the points.

Solutions

A person using Cineplex app's group reservation feature

A mock up of a phone to show how the new feature can simplify the ticker ordering process

Group Reservation

An app feature that encourages collaborative reservation and fair distribution of SCENE loyalty points to each participant.

Simplify the user flow process in group setting

The group reservation feature helps simplify the user flow process in a group setting by eliminating the need to distribute tickets and payment collection from your group.

Product Showcase

A Collaborative Group Reservation

Watch in real time for your friend's preferred seat selection. Users receive SCENE points based on the ticket type. With the group reservation feature selected, the system won't auto block the seats next to your friends.

A gif animation of Cineplex app starting a group reservation

Easier Seat Selection

Reduce frustrating misclicking by zooming in on the seat selection.

A gif animation of Cineplex seat selection zoomed in

Exit Warning

Reporting an incident helps alert other users of any situation that happens on the streets. It also helps improve the recommendations of safer routes for other users.

Define & Discover

Understanding

Current App

Cineplex currently has a mobile app available in Google Play and Apple Store. In Google Play, the app has a low rating of 2.4 out of 5 stars. Its counterpart in the Apple store fares even worse with a rating of 2 out of 5 stars. I looked into the recent reviews to get a better understanding of the issues that resulted in the low ratings.

Users review on the current Cineplex mobile app on Google Play and Apple Store

Interviews

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 was people who tend to go to the movies with their friends. This user group confirmed initial assumptions about Cineplex customers, but research also revealed user problems such as constraint of coordinating group activities, deciding on who buys the ticket, covid19 fear, and finding everyone’s preferred seat makes it a lengthy purchase.

An image of Cineplex Persona for a young adult that loves to go to the movies with her friends

An image of Cineplex Persona for an adult that goes to the movie by himself as a stress reliever

Personas

Using the information gained from the research, I was able to create personas that represent the key target segment.

User Journey

Mapping Jessica’s user journey revealed how helpful it would be for users to have an app that can help organize group coordination activities as part of the movie theater experience. Mapping out this process also showed me areas where I could help simplify the user journey.

Low-Medium Fidelity Design

Digital Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For seat selection, I prioritized a quick, simple and also familiar process to the current App to reduce the learning curve of a new feature.

Inspired by the UberEats group order feature, I wanted to introduce a similar group reservation concept.

A low fidelity image of Cineplex app movie selection screen.

A low fidelity image of Cineplex app seat selection zoomed in upon clicking a seat.

A low fidelity image of Cineplex app showing the theatre nearby, movie time showing, and dates.

A low fidelity image of Cineplex app for defining the movie tickets. Ranging from general adult, senior (65+) and child.

A low fidelity image of Cineplex app seat selection process.

A low fidelity image of Cineplex app review screen before finalizing a purchase. Shows total price, taxes, and payment options (gift cards, credit card)

Validation & Iteration

Usability Studies

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. I used a high-fidelity prototype for the second study which revealed aspects of the mockups that needed refining. A copy of my usability study plan can be accessed here.

Key data from the usability studies were organized into an affinity diagram. An affinity diagram allowed me to identify common themes and patterns which were then used to support my insights.

Key findings & Changes

I extracted all the data from the usability studies into an affinity diagram to allow me to find common themes and patterns from the participants. Turning these observations into insights allowed to discover some key findings:

Users want to be informed about the feature benefits

Early designs allowed for some customization, but after the usability studies, I created mock ups to more closely resemble the final product. In addition, I made adjustments based on the insights findings such as providing additional information to explain the benefits of the new feature.

High fidelity mock up of Cineplex's group reservation, included a short onboarding on reasons to use the feature

Low fidelity image of group reservation start point

Before

After

Users want notifications or alerts for the actions that their group members make

During the first set of usability studies, users wanted to know when someone had joined their group. As a result, I added alerts for when a user joins their group.

Low fidelity mock up image of inviting users for Cineplex group reservation feature, included a list of users on who joins

Low fidelity image of inviting users for Cineplex group reservation feature, lacking of status on who joins

Before

After

High Fidelity Design

Design System

To keep consistency and work efficiently, I developed a design system. I combined what I learned from my low-fi prototype with the design systems to create several mockups.

A UI component page of Cineplex Design System

High Fidelity

The final high-fidelity prototype presented cleaner user flows for creating a group reservation to book your movie theater seats. It also meets user needs for informing them of feature benefits, increasing accessibility and keeping track of loyalty points.

A high fidelity image of Cineplex App seat selection

A high fidelity image of Cineplex App movie selection screen

A high fidelity image of Cineplex App movie ticket type selection screen. Ranging from Child, Adult and Senior

A high fidelity image of Cineplex App date, time and theatre selection

A high fidelity image of Cineplex App ticket successful purchase.

View High Fidelity Prototype

Accessibility Consideration

To ensure the app would be accessible to everyone, I:

Made the seat selection easier to select through a zoom-in feature.
Used icons and imagery to help make navigation easier. Included alt text for screen readers.
Included seats specified only for individual with motion disability for ease of access.

Going Forward

What I learned

While designing the app, I learned that my initial ideas for the app was only the beginning of the process. Through usability studies and peer feedback, I uncovered more opportunities that influenced each iteration of the app’s designs.
Also, being an innovative concept, users were unfamiliar with a group reservation feature. Therefore, it is beneficial to consider onboarding steps to help introduce new ideas and reduce the learning curve for the user.

Next Steps

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Measure whether the new feature has increased the usage of the Cineplex app and improved user app ratings