Marc Tessier

PROJECT NAME

Cineplex app –

Heuristic Evaluation + Re-Design


ROLE

Heuristic Evaluation

Sketching + Ideation

Presentation Layout


DATE

2 weeks – 2020


TEAM

Christina Chen

Phoebe Solomon

My team and I were challenged to conduct a heuristic evaluation and re-design of an app of our choosing. The evaluation followed the "10 Heuristics for User Interface Design" guidelines by Jakob Nielsen.


For this challenge we chose the Cineplex app. After reading through the reviews, and playing around with the app ourselves, we noticed usability issues that could be tackled.


We did a walkthrough of a specific task (selecting a movie and buying a ticket), and found several heuristic violations within 7 categories.

Original Task Flow

Task: Select a Movie and Purchase a Ticket

Rating Scale

  1. Heuristic Evaluation + Re-Design
  1. 1A. Flexibility and Efficiency of Use

Task: Exploring Movies on Homepage

Score: 3

The homepage has a long, unorganized scroll down movie list which is difficult to navigate. Separating them into different sections with a side scroll (similar to the popular Netflix app), helps the user easily explore the selection.

  1. 1B. Flexibility and Efficiency of Use

Task: Exploring Movies on Homepage

Score: 3

In the original app, the user has no ability to filter movies. They can either flip trough a large list, or search the exact movie title. The more popular and newest titles will be placed at the top, but that is simply a handful out of the 240+ titles available.


We added the ability for a more advanced user to refine their search in order to explore the large title selection by genre, rating, or duration. This makes the search process faster and more efficient.

  1. 1C. Flexibility and Efficiency of Use

Task: Selecting Movie Start Time

Score: 2

Not having a tab bar on every page makes it time consuming to navigate the app smoothly, and may confuse the user about their location. For this specific task, we added a tab bar at the bottom of the movie time selection page for quick access to other parts of the app without having to continuously tap the back arrow.

  1. Aesthetic and Minimalist Design

Task: Adding a Ticket to Cart

Score: 2

The original ticket selection page was cluttered, messy, and filled with inconsistent UI. By creating a visual hierarchy, strategically sectioning information, and implementing similar UI elements throughout, it became much easier for the user to understand what was on the page.

  1. Error Prevention + User Control and Freedom

Task: Payment

This was the final, and worst page of all. If the user made it this far, they had no choice but to either close the purchase process and restart from scratch without saved information, or complete the purchase. Therefore, if they wanted to change a detail from a previous page, they had to completely restart. A back button, as well as saving inputted information, alleviates this pain point.

We also added a pop up that allowed a way out of this confusing issue if they accidentally tapped the close button.

  1. Visibility of System Status + Consistency & Standards

Task: Review Order Before Confirmation

Originally, the “input payment information” and “review your order” pages were the same page. This made it confusing for the user because how can you review the order without having gone through all the steps. For me personally, I thought it would be structured similar to other apps where there would be another page after the payment information where I can actually review my order. Instead, once you tap confirm, it does not let you review, but simply purchases the tickets. I accidentally bought a ticket to Sonic the Hedgehog that had already started playing at that moment. Not cool.


So, to make this process similar to other apps and websites, we separated the payment information and review pages. We then added a status bar at the top to indicate the user’s position in the process. Once on the review page, you know for sure that you are about to purchase the ticket if you tap confirm. No more accidents!

  1. Final Task Flow