top of page

Cineplex Mobile App 

Redesign  Jun 2022 - Sep 2022

CineplexBanner.png

INTRO

As a personal learning project, I improved the general user experience and usability of the Cineplex Mobile Application by modernizing the overall aesthetics of the interface, eradicating user pain points uncovered from user research, and finding solutions for heuristic evaluation breaches.

As my first personal design case study, I followed the iterative process of design thinking from Empathize to Testing. Initial user research involved usability testings on the existing Cineplex App, user interviews with users, a heuristic evaluation, and a card sorting activity to create an information architecture that matches the users mental model. 

Data was collected within Empathy and Affinity Maps and User Personas to output a problem statement. Low Fidelity sketches and wireframes was used to explore solutions and the prototype was tested on real users based on key metrics to gauge the success of my case study. 

ORGANIZATION

Cineplex

PLATFORM

Mobile Application

TYPE

Personal Learning Project

TEAM

N/A Sole Designer

TIMELINE

Jun 2022 - Sep 2022

RESPONSIBILITIES

Usability Testing

User Interviews

Card Sorting

Heuristic Evaluation

Empathy + Affinity Mapping

User Personas

Wireframing

Prototyping

poqw.png
zxx.png

THE PROBLEM

The current Cineplex Mobile Application currently does not reflect the Cineplex branding and is riddled with many usability issues that it leaves customers resorting to buying tickets on their website instead.

As a long standing customer of Cineplex, all these years I couldn't help but notice how dated the Cineplex App looked and felt. For a nation-wide monopoly with annual revenue of over 100 million dollars, there is a clear mismatch between their official interface and customer's expectations. 

THE SOLUTION

sloww.png
sloww2.png
slow3.png

UX RESEARCH

EMPATHIZE

emp.png

There is a multitude of user experience research methods that ranges diversely in the type of information gathered. Since this is a redesign, I decided that qualitative research methods that generate data about behaviours and attitudes by directly observing and listening to users would be better suited to my case study as they tend to answer questions about why a problem is happening and how to fix it. 

 

The Nielsen Norman Group recommends 5 participants of a single user group for a typical qualitative usability study. If given the opportunity to revisit this case study, a more diverse user group might ensure a more inclusive solution.

Web search-rafiki.png

Usability Testing ( 5 ) 

Behavioural · Qualitative

I gave the participants a list of scenarios and tasks to perform using the existing interface while I observed their behaviour and recorded any observations.

The goal was to : 

b1.png

Uncover Problems in the Design

Group 1218.png

Discover Areas of Improvement

b3.png

Learn about user's behaviours 

3661727.jpg

User Interview ( 5 ) 

Attitudunal · Qualitative

The same 5 participants were asked a series of open ended questions in order to uncover user behaviours, motivations and concerns ensuring my redesign was designed for real people. 

The goal was to : 

bl1.png

Reveal Mental Models from User

bl2.png

Gives insights about our users

bl3.png

Ground our Design Decisions

Usability testing-rafiki.png

Card Sorting ( 5 ) 

Attitudunal · Qualitative

Participants were then asked to categorize different components of the interface into groups based on what they thought belonged together and then give each group a name. 

The goal was to : 

bbb1.png

Create an Information Architecture

bbb2.png

Categorize Content based on user

bbb3.png

Label categories in a way that makes sense

You want to watch the new Top Gun as soon as possible. Try to find a showtime at the Scotiabank Theatre Vancouver that would work for you given your real life availability and schedule.

Can you think of a time when a purchase flow of a product or service made you particularly frustrated. How did that make you feel ? What would you like to see happen ? 

Moderated User Research . 

IMG_0928_edited_edited.jpg

During the Usability Testing, a mobile device running the Cineplex Mobile Application was mirrored onto a laptop in which a screen recording application recorded all actions made by the user. 

Remote Moderated User Research . 

Untitled_Artwork 228.png

During the Remote Usability Testing, particpants were told to share their screen on discord while a screen recording tool was running. 

DATA ANALYSIS

DEFINE

po.png
yesisr.png

Heuristic Evaluation 

I thoroughly examined the interface and judge its compliance with a set of usability principles. I classified each heuristic breaches and ranked them in terms of severity. 
 

mid.png

Empathy Map

After reviewing the recording and transcript from the user interview and usability testing, I recorded each idea onto sticky notes. It gave me a visualization of user attitudes and behaviours as well as a holistic view of my users.
 

beta.png

Affinity Map

I then organized the large set of sticky notes into smaller clusters whenever they fell into the same category. This categorizing of my data gave me a collective understanding of user pain points but more importantly potential areas of improvement for my redesign. 

KEY INSIGHTS

DEFINE

Although there are components of the existing app that users appreciates, the general negative UX users are experiencing is coming from 3 main factors, Branding, Usability Issues and Flexibility of Use. 

Based on the trends I've uncovered from the Affinity Map, I can categorize most issues that are contributing to a negative user experiecne witht he existing app into 3 categories. Branding where users have a problem with the aesthetic, Usability Issues where certain functionalities and behaviours frustrates the users, and lastly Flexibiltiy of use where users want more functionalities that can help them with their user journey. 

mnb.png

USER PERSONAS

DEFINE

Based on the trends I've uncovered from the Affinity Map, I can categorize most issues that are contributing to a negative user experiecne witht he existing app into 3 categories. Branding where users have a problem with the aesthetic, Usability Issues where certain functionalities and behaviours frustrates the users, and lastly Flexibiltiy of use where users want more functionalities that can help them with their user journey. 

missintext.png
43.png
ideatee.png

SKETCHES

IDEATE

After brainstorming a range of possible solutions that may address the user's needs identified in the define phase, I first sketched out my ideas on paper and then developed low fidelity wireframes on Figma of what a possible solution would look like. 
 

Homescreen

Theatres

Untitled_Artwork 222.png
Untitled_Artwork 223.png

Selecting Showtime

Untitled_Artwork 225.png

Seat Preview

Untitled_Artwork 226.png

Movies

Untitled_Artwork 224.png

Order Summary

Untitled_Artwork 227.png
313.png
protoooo.png

DESIGN

PROTOTYPE

Homescreen

The Homepage is one of the most important screens for any user interface. It is the first interface users will see and interact with the most in order to navigate throughout the application and achieve their user goals. 

uyy.png

Theatres

The Theatres tab is an interface that allows users to sort by nearby Cineplex Locations instead of movies. The list contains the name and address of each location ordered by distance.

kern.png
Screen Shot 2022-11-04 at 10.25.13 AM.png

Movies

The movie interface contains a video player that shows the trailer as well as general information such as PG Rating, duration and summary. The user is first prompted to select a date from the date dropdown, then their desired Cineplex location ordered by distance, then their seat type, and finally their showtime. "Seat Preview" also gives the users the opportunity to preview the available seats from a seating map before deciding on a time. 

iopp.png

Checkout

Checkout is categorized into 3 main steps :

Under Tickets, users can review the date, time, location, and choose the number of tickets they would like to purchase. Under Seating, users are able to pick their desired seats. Finally, in Payment, An order summary is shown and users can either proceed to payment options or input a gift card. 

asdkkjh.png

INTERACTIVE PROTOTYPE

EXPERIENCE THE REDESIGN

STYLE GUIDE

REFERENCE

blurrr.png
Test.png

METRICS

TEST

IMG_0967.HEIC

After the high fidelity prototype was completed on Figma, I wanted to gauge how successful my redesign was based on a set of predefined usability metrics specifically time taken to complete a task and average CSAT scores. 

I downloaded the Figma Mobile App on my phone so I could run the prototype on an actual mobile device and my users was able to test it just like how they tested the current app during the usability testing. 

Time a Task Requires 

Time to find a less popular movie title from the long list of movie given its full name spelled out. 

- 46.6 %

Current : 10.25 Sec

Redesign : 5.47 Sec

Time to find the closest Ultra AVX showtime to 2:00 PM in the duration of 4 days. 

- 39.9 %

Current : 57.34 Sec

Redesign : 34.41 Sec

Time to find a user's favorite Cineplex location on second login after using the favourite function. 

- 93.3 %

Current : 6.47 Sec

Redesign : 0.43 Sec

Running through the checkout flow process while making sure all selections are correct. 

- 32.9 %

Current : 40.48 Sec

Redesign : 27.15 Sec

Average CSAT Scores

+ 45.9 % 

Increase in average CSAT Scores across all screens from the redesign. 

Group 1219.png
98133.png

TAKEAWAYS

CONCLUSION

Overall, I was very satisfied with how the redesign turned out, as well as the process and steps I took to get there. I beleive the redesign was a success as reflected from the 45.9% increase in CSAT score. It was particularly rewarding finding a solution for a problem that I had first hand experience with as a Cineplex Mobile App user myself. 

What I've learned ... 

Don't fully invest into an idea just yet, iterate, iterate, iterate 

During the ideation phase, I made the mistake of investing too much time in a solution that didn't fully meet user needs.

In the span of a 2 hour brainstorming session, I came up with a possible solution to the logic flow for how users will select the perfect combination of date, time and location. I spent the next 2 days iterating over the same idea, increasing my fidelity of my sketches and even created a semi high fidelity prototype to see how it may look just to realize that there was a better way to do handle the problem.

Use Data ! Its part of the process for a reason.

There were often times where I was at a crossroads making a design decision and by going back to the data helped me back up my decisions.  

Whether it is going back to the Empathy or Affinity Map to check whether my solutions were solving a problem or back to my user personas to put my myself into the users shoes and think " hmm what would I want if I was Jasmine or Hassan ? ".

What I'd do differently next time ... 

More Success Metrics

It would be interesting to see more quantifiable results from more success metrics to better gauge the redesign. 

Decrease in Abandonment and increase in conversion would be two very interesting metrics to see how users feel about the overall user flow of the interface. A lot of new functionalities were also added and it would be very useful to see how effective these new implementations are by seeing how often these functionlaities are used. 

More Diverse User Groups

User research on a more diverse set of user groups may uncover more user needs and room for improvement. 

The 5 participants that I conducted research on were all generally students aged 20-25. The Nielsen Norman Group recommends 5 participants of a single user group for a typical qualitative usability study. Given the opportunity, a more diverse set of users might expose more flaws or introduce more functionalities that will result in a more inclusive solution. 

Previous Project

Prosper Vancouver @UBC

Back to Top

Cineplex Redesign

Next Project

Interface UX Designer @Nokia

Let's Talk ! 

Shoot me a message to know more about me and my projects !

rocket_1f680.png
bottom of page