Cineplex app –
Heuristic Evaluation + Re-Design
Sketching + Ideation
2 weeks – 2020
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.
Task: Select a Movie and Purchase a Ticket
Task: Exploring Movies on Homepage
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.
Task: Exploring Movies on Homepage
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.
Task: Selecting Movie Start Time
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.
Task: Adding a Ticket to Cart
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.
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.
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!