Luxury Cinema

Responsive Web Design

WHO

  • Jason Cairati
    Lead Designer, Researcher

WHAT

  • A responsive website for Luxury Cinema

WHEN

  • July 2022 to August 2022

WHY

  • Users needed an efficient way to order movie tickets online
A hero image of the GalleryScan being used on an iphone
THE GOAL

Designing a dynamic website for both desktop and mobile to efficiently order movie tickets. 
THE PROCESS
‍
Initial research included a competitive audit of existing movie theater websites as well as interviews with the user base. Persona and user journeys maps were created to help better understand and empathize with the users potential pain points and define the problem.


PROBLEM STATEMENT
‍Greg is a busy professional and father who needs an efficient and easy way to view which seats are available because he wants to save time on buying tickets

PERSONA - GREG


"I love getting to experience new movies in a theater. It's always more exciting than watching at home." 
GOALS
Wants a comfortable high-end experience when going to the movie theater
‍
Wants options for both date nights and family nights out
‍

Age: 38
Education: Undergrad
Hometown: San Francisco, CA
Family: Married, 1 kid
Occupation: Financial Adviser
‍
FRUSTRATIONS
Isn't sure what a theater will look like or how big the screen is until he gets there

Is frustrated when it says seats available but only in the front row
‍
pain points


TOO MANY STEPS
‍

Users felt frustrated if they had to go through too many steps in the booking or check out process


UNNECCESARY CLICKS
‍

Users felt like they were often wasting time to learn the information they needed to make an informed decision
‍
Research revealed that often times users are frustrated when they are required to click on a showtime to see how many seats are available. Finding a solution to this was a top priority.
JOURNEY MAP
STARTING THE DESIGN
After determining the main problem users would be facing, it was time to move into creating a site map, wireframes, and prototypes. My main focus was finding an easy way to view the selection screen for seats that helped cut down on unnecessary clicks for the user.
SITE MAP
PAPER WIREFRAMES

It was important to develop a clean flow for the homepage to highlight the most important aspects. As well as streamline the layout of checking showtimes to minimize unnecessary clicks.
DIGITAL WIREFRAMES

Based on testing, users desired a way to quickly see both the day and date they were searching for. It was also helpful to add a way for users to see how many seats were available before clicking on a showtime for seat selection.
LOW-FIDELITY PROTOTYPES
This low-fidelity prototype followed the main ticket ordering flow for the website. A primary goal was minimizing the number of screens to make a ticket purchase while still having clarity about the process.
‍
USABALITY STUDIES
A series of usability studies were conducted at both the low and high-fidelity level. After reviewing the data, a number of insights were discovered through this process.
Users were happy to be able to view available seats for a showtime before clicking but wanted a clearer way to view day/date of show.


AVAILABLE SEATS
‍

Users felt seeing available seats helped them avoid unnecessary clicks and let them avoid having to backtrack when navigating through the ticketing process


DATE MARKERS
‍

Users wanted more detailed options to view both day and date of available showings
REFINING THE DESIGN

After reviewing the data from the case study, a more intuitive and streamlined ticketing order flow was created. It was important that users felt they had all information needed and never felt lost or confused in the ordering process.
MOCKUPS
A clearer date marker was utilized to help orient the user and provide guidance
BEFORE USABILITY STUDY
‍
AFTER USABILITY STUDY
‍

Homepage movie card selection screen was changed to a grid system to cut down on user clicks
BEFORE USABILITY STUDY
‍
AFTER USABILITY STUDY
‍
FINAL DESIGN
The high-fidelity prototype followed the same user flow as the low-fidelity prototype with visual changes and a clear color relationship between buttons and actions for the user
‍
DESIGNING FOR ACCESSIBILITY
‍

Colors were altered to meet accessibility standards

Different size headings were used to help illustrate hierarchy and be compatible with screen readers
‍

Alt text for images and icons have been added 
FINAL THOUGHTS

IMPACT

Our target users shared that they enjoyed having the option to view the number of seats before clicking on a showtime and also found the user flow quick and efficient.

“What's enjoyable is how clear it was."

‍

WHAT I LEARNED

I learned about cutting out the features that weren’t necessary and how to leave only what was necessary for the user to complete the desired task
GalleryScan
Mobile App (UX/UI)
PRESERV
Mobile App/Responsive Web Design (UX/UI)
LINKEDINEMAIL
a link to my email address