Conducting user research, scripts, accumulate data, perform competitive audits, create wireframes, branding style sheets, testing, prototyping and iterations.
CHALLENGES
Bulk ticket ordering
Design a site that is easy to navigate for all platforms
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.
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.
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.
The designs for screen variation include mobile and desktop. I optimized designs to fit specific user needs of each device and screen size.
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.
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.