Cinema

PROJECT
PROJECT: Cinema responsive websiteROLE
ROLE: Branding, UX Design, UX ResearcherDURATION
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
- 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?
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.

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 bakerGoals
– Pre-order availability
– Provide offer/discounts
– Group ordersFrustrations
– Long lines
– Sold-out showsMatthew 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 BankerGoals
– Easy to use online ordering
– Finding family friendly options for my grandkidsFrustrations
– Strollers are hard to navigate through with crowds of peopleA 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.

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.

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.


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 websiteNext Step 02
Identify any additional areas of need and ideate on new features












































































