PROJECT VISION
CHALLENGES
- Bulk ticket ordering
- Design a site that is easy to navigate for all platforms
- Provide a seamless & linear user flow between devices
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
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.
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.
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:
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.
