Ontario, Canada       paul@uncubeddesigns.com
cinema logo
PROJECT: Cinema responsive website
ROLE: Branding, UX Design, UX Researcher
DURATION: November 2022 (50 hours)

PROJECT VISION

Conducting user research, scripts, accumulate data, perform competitive audits, create wireframes, branding style sheets, testing, prototyping and iterations.

CHALLENGES

  1. Bulk ticket ordering
  2. Design a site that is easy to navigate for all platforms
  3. Provide a seamless & linear user flow between devices

Kickoff

Increase efficiency for customers to order remotely and avoid line-ups.

Our goal was to design a website which provides users an error-free, easy ordering flow with quick and accurate conversion times.
What is the product and who is it for?
How do we simplify the user experience?
Is there a way to keep the user flow consistent between device sizes?
What challenges could we face moving forward?
Who do we see as our biggest competitors?
What ways can we bring confidence to users after conversion?
Usability research was conducted to determine how much time this saves patrons.

Unmoderated research was conducted where participants were given tasks to perform remotely and detail their feelings, thoughts, and processes. We assumed some aspects would be difficult and some would be easy. We were pleased with our results amongst participants.
first aid affinity map
Affinity Map

Meet the Users

Persona 1: Matthew
“Movies are a great way to spend time with friends who like to be out of the house.”
Name: Matthew Cristie
Age: 16
Education: High-School Student
Hometown: Toronto
Family: 1 sister, 2 parents
Occupation: P/T baker

Goals
– Pre-order availability
– Provide offer/discounts
– Group orders

Frustrations
– Long lines
– Sold-out shows

Matthew is a 16 year old high school student who wants a quick way of pre-ordering movie tickets for him and his friends before the shows sell out on fridays as well as to skip the lines.
Persona 2: Millani
“Taking my grandkids to the movies is ideal for baby sitting”
Name: Millani Truss
Age: 54
Education: U of T, MBA
Hometown: Toronto
Family: husband, 3 grown kids
Occupation: Retired Banker

Goals
– Easy to use online ordering
– Finding family friendly options for my grandkids

Frustrations
– Strollers are hard to navigate through with crowds of people

A grandmother of a young children who wants a way to choose seating, order movie tickets and easy to read options available to her via online navigation.

Competitive Audit

We looked at several direct and indirect competitors and this provided direction on gaps and opportunities to address with the Cinema website.

The majority of competitors had similar options when checking out tickets online. However navigation through all competitors’ websites proved to be difficult. These are the opportunities we’ve noticed.
  • Simpler navigation
  • Offer seating choices

Preparing the Journey

Overwhelming list of options was a pain point for users, using that knowledge a site map was created.

The goal was to limit the amount of options per page and make them more digestible with the use of layout and flow.

Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs for the Cinema website. These designs focused on delivering personalized guidance to make easier choices amoungst all the movies available.
To prepare for usability testing, I created a lo-fi prototype that connected user flow to purchasing tickets.
View the Lo-Fi app here
first aid affinity map

Iterations

These were the main findings uncovered by the usability study:

  • Deciding what option to order in a simpler format
  • Those with vision impairments found some elements too small
  • Creating a user was a little extensive

Mockups 1

Based on the insights from the usability study, I made a change to improve the visibility of the cart when items populate the basket. This allowed users to better see and goto their cart easily.

Mockups 2

To make the user experience less overwhelming, the number of options were reduced on the home page and later added as options in the checkout portion.

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the lo-fi prototype, including design changes made after the usability study.

View the Hi-Fi app here
first aid affinity map

Responsive Design

The designs for screen variation include mobile and desktop. I optimized designs to fit specific user needs of each device and screen size.

first aid affinity map

Style Guide

Dark colours to create a mood movie patrons are familiar with and a complimentary palette came from wanting to express to users the tone of the theatre going experience. AODA compliance with high contrast, labels for interactive elements and an initial focus on the home screen with recommendations to help defind primary tasks for user actions.

First Aid style guide

Takeaways

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next Step 01

Conduct follow-up usability testing of the new website

Next Step 02

Identify any additional areas of need and ideate on new features
Thank you for reviewing the Cinema case study.
For more in-depth analysis you can view the process deck below.

Web UI / UX

We strive to create sites with that WOW factor, making them functional for you and your end users.

Print

Complete and comprehensive ability to print both digitally and offset for large sizes and quantities to small, customized runs.

Branding

Full range of services for creating a brand. Naming, logo design, corporate identity, full graphic design.

Contact Us

    What are you interested in:

    Logo

    Business Stationery

    Website

    Website Hosting

    Website Hosting

    Brief description of project (required)