Screening Room Cinemas Website
The Screening Room Cinemas website provides potential movie goers the ideal trailer viewing experience in the context of shopping for tickets on a trendy movie theater’s website.
Individual Project (UX Design, UX Research, UI Design)
2 week sprint (April ‘22)
Pen & Paper, Figma, XD, Notion, Mural
Overview
Movie preview experience.
My Role
Individual Project (UX Design, UX Research, UI Design)
Platform
Web (Desktop and Mobile)
Key Challenges/ Constraints
2 week timeframe
Project Goal
Design a movie preview experience
for a trendy movie theater.
I used this prompt as a brief to develop a responsive website flow prioritizing design for the desktop and mobile versions of the site.
I used sharpen.design to create the following design prompt:
Problem
"YouTube... ever heard of it?"
Movie theater website experiences are typically difficult to navigate and finding a movie or type of movie you are interested in can be a challenge. These websites are not the primary source of movie trailers with services like youtube readily available. How do we provide value in a different way?
Opportunity
How do we build a preview viewing experience that seamlessly supplements the ticket shopping experience?
Foundational Research
What’s out there?
I completed a competitive audit to understand what movie theater website experiences are available to users and understand their unique value propositions.
I looked at direct competitors (other trendy theaters), indirect competitors (services like Flixter), and very indirect competitors (services like Netflix).
Key Takeaways
-
Not a lot of strong competitors in terms of web presence.
-
Mobile was even more poorly organized than desktop in a lot of cases.
-
Images were not formatted correctly for banners and other elements.
-
Movies were laid out in a variety of ways, most of them were unintuitive and disorganized.
Discover
Research Objectives
What do I need to learn?
Following the competitive audit, I identified the questions that I needed answered to start to define the problem and ultimately find a solution:
-
Understand how and in what different scenarios users watch trailers today.
-
Understand how users interact with trailers when they are actively looking to purchase tickets to a theater.
-
Specifically in the scenario(s) where they might end up on movie theaters website.
-
-
How do they feel about the existing processes in which they might look at a trailer on a theater’s website?
-
Would they look at the trailer in the website?
-
Would they rather it linked to youtube?
-
-
What are existing pain points in the trailer viewing process on a cinema website?
-
What are the existing pain points in the movie selection process?
-
How does trailer viewing figure into this process?
-
Surveys and Interviews
How do users interact with competitive websites?
I conducted primary research in the form of a qualitative interviews and usability study on a selection of competitive sites.
I asked each user some background questions to understand their demographic information, habits, and interests regarding movies.
Each user was asked to perform a couple of tasks on 4 competitive websites, and associated mobile experience, including navigating to a particular movie and playing the trailer (from various locations if possible). Users were then asked a variety of questions about each experience.
Ideal Approach
Ideally I would be able to conduct this type of research with a larger base size qual test (~n>10) or a large size quant survey (n=50-100)
Practical Approach
Given time and budget constraints I did a small qualitative study with 4 respondents (I was aiming to get 5; nn group link]).
Key Quotes
-
“It could be nice if you could [view] the trailer... and still scroll around on the rest of the website”
-
“It feels more natural to just be able to scroll down than to have to use the mouse to hit a button to scroll side to side.”
-
“If I hit a video to play I shouldn’t have to unmute it.”
-
“If I was trying to decide whether I wanted to go see a [certain] movie I would look it up on another site, but if I was sure I wanted to see a movie but didn’t know which one I would do it like this [scroll through a movie theatre website].”
Key Takeaways
-
Not having to search for the movie is paramount (the quicker and fewer clicks you can use to find it the better).
-
Sorting movies needs to be easy and intuitive and needs to be easily done with different constraints.
-
Side scrolling on desktop was a surprisingly unintuitive design pattern for some users.
-
Most respondents don’t use movie theater websites as their primary means for viewing trailers.
-
But all respondents said that when purchasing tickets to a movie there were cases when they would play some of the trailers on the site.
-
-
All respondents indicated that ratings were one of the biggest reasons they would select whether or not they wanted to watch a movie; they wanted ratings to be immediately available.
-
Hard stops to input information before you can view anything motivates deselection.
-
Banner image/ trailer preview image formatting has to be done correctly to keep everything in the screen.
Define
Concept Spaces & Ideation/ Sketches
Empathize, Synthesize, Conceptualize.
After synthesizing takeaways from the foundational qualitative interviews I created the following concepts to explore different ways of addressing the high rising pain points, patterns, and features. I also tried to meaningfully pair homepage and movie page concepts together in an intuitive way.
UX Design
Concept Spaces & Ideation
Wireframes
I further refined the concept ideation through a round of editing and iteration. Then built wireframes for concepts in Figma. These wireframes were also prototyped to enable a typical user flow that could be used in testing.
Concept 3: Sidebar Nav & Title Card Focus
Sidebar Nav Homepage
Sidebar Nav Homepage Mobile
Title Card Focus Movie Page
Title Card Focus Movie Page Mobile
Why this concept?
Homepage (Desktop): Has a sidebar navigation menu that is sticky as the user scrolls. It has all three of the movie categories viewable at one time (two are above the fold), in horizontal scrolling collections.
Homepage (Mobile): Has a traditional hamburger menu navigation pattern with horizontal scrolling collections of movie title cards.
Movie Page (Desktop & Mobile): The movie page features a large title card with a call to action below and information to the side. Trailer is viewed as an overlay and accessed through a button.
Main concept objectives:
Homepage (Desktop & Mobile): Test whether users prefer a sidebar navigation menu and side scrolling movie cards.
Movie page (Desktop & Mobile): Test whether users better engage with a static movie title image card and call to action. Isolate a variable between concepts 3 and 4.
Concept 2: Wide Card Homepage & Autoplay Banner
Wide Card Homepage
Wide Card Homepage Mobile
Autoplay Banner Movie Page
Autoplay Banner Movie Page Mobile
Why this concept?
Homepage (Desktop): Title cards are organized like those of streaming services and are sorted into 3 categories accessible on different pages.
Homepage (Mobile): Title cards are organized as screen width and stacked vertically. Titles are categorized by tabs in a sub menu (all on the same page)
Movie Page (Desktop & Mobile): The movie page has an autoplay trailer that is located in the banner; information and call to action are either overlaid to the side (desktop) or underneath (mobile) the autoplay trailer
Main concept objectives:
Homepage (Desktop & Mobile): Test whether users prefer a large images that are on categorized on different pages.
Movie page (Desktop & Mobile): Test whether users better engage with an autoplaying trailer where the additional information is somewhat subordinate.
Concept 1: Infinite Sorted Scroll Homepage & Large Banner Movie Page
Infinite Sorted Scroll Homepage
Infinite Sorted Scroll Homepage Mobile
Large Banner Movie Page
Large Banner Movie Page Mobile
Why this concept?
Homepage (Desktop & Mobile): Allows users to scroll down as far as needed to view all titles and allows them to sort the titles using intuitive categories via dropdown menus.
Movie Page (Desktop & Mobile): Movie banner image is displayed at the top with a call to action that allows the user to jump to ticket selection. Trailer is displayed underneath the banner and title as an embed thumbnail.
Main concept objectives:
Homepage (Desktop & Mobile): Test whether users prefer a sortable infinitely scrolling array of movie title cards.
Movie page (Desktop & Mobile): Test whether users prefer a large static banner and would engage with a trailer that is subordinate to the image and information.
Concept 4: Top Nav Simple Search & Title Card Focus
Simple Search Homepage
Simple Search Homepage Mobile
Title Card Focus Movie Page
Title Card Focus Movie Page Mobile
Why this concept?
Homepage (Desktop): Has a sidebar navigation menu that is sticky as the user scrolls. It has all three of the movie categories viewable at one time (two are above the fold), in horizontal scrolling collections.
Homepage (Mobile): Has a traditional hamburger menu navigation pattern with horizontal scrolling collections of movie title cards.
Movie Page (Desktop & Mobile): The movie page features a large title card with a call to action below and information to the side. Trailer is viewed as an overlay and accessed through a button.
Main concept objectives:
Homepage (Desktop & Mobile): Test whether users prefer a sidebar navigation menu and side scrolling movie cards.
Movie page (Desktop & Mobile): Test whether users better engage with a static movie title image card and call to action. Isolate a variable between concepts 3 and 4.
User Testing/ Feedback and Design Implications
Clear high risers.
High Risers
Desktop: Concept 1 (Selected by 4/4 respondents)
Mobile: Concept 4 (Selected by 3/4 respondents; Concept 1 was also notable for mobile).
Desktop Home Page
-
The banner carousel was, surprisingly, preferred as it added credibility and gave the cue to users that this was a professional site. (But it is just important to users how it is executed)
-
Filters were well liked as an easy way to refine selection if needed. Although most respondents liked that they didn’t need to use them.
Mobile Home Page
-
Users liked concept 1 the most, but felt the dropdown menus occupied too much space on the screen, which led to deselection of this concept. Concepts 3 & 4 were selected because they allowed users to see more title cards above the fold, despite the fact that side scrolling was not preferred.
Desktop Movie Page
-
Being able to watch the trailer and some of the information at the same time was very useful to users and well liked.
-
Movie description, ratings, etc. and trailer layout were well liked
-
The static banner images were preferred both on desktop and mobile to the title card and autoplay trailers.
-
Youtube embeds actually lended credibility to users. Other video players were discovered to have been a detractor during foundational research.
Mobile Movie Page
-
Users were nearly split in preference between concept 1 and 4 movie pages but slightly preferred the banner image used in concept 1.
Using the wireframe prototypes, I conducted the same style of task based usability interviews I did during foundational research, with the same respondents.
Again, each user was asked to navigate to a particular movie and play the trailer (from various locations if possible) on each of the 4 concepts. Users were then asked a variety of questions about each experience.
Evaluate
Design Considerations and Wireframe Refinement
Glow Up! Before and After
Dropdown Menus [Desktop Homepage]
Before
After
-
Users felt that the drop down menu’s could be more easily understood if they had a title saying what they were for.
-
Having “any kind” in each filter by default would make it seem intuitive that you could use each filter individually to sort.
-
Having the ability to clear filters all at once could speed things up.
Coming Soon Section [Desktop Homepage]
-
Users felt that a coming soon section would be nice to have separately in order to simplify the filtering of now playing movies and make coming soon movies easier to find.
After
Movie Cards and Dropdown Menus [Mobile Homepage]
Before
After
-
Feedback about side scrolling collections (due to being able to see more) and filtered content organization were in conflict.
-
Upon further probing, card size on concept 1 was seen as parity preference to card size on concept 3, as long as more of the cards were visible above the fold.
-
Filters need to take up less screen real estate.
-
Movie titles must get smaller, because they should not be cut off, especially since titles on move title images is more difficult to read on mobile.
Movie Cards [Desktop Homepage]
Before
After
-
Being able to see information in each movie card about how it is categorized could make it easier to browse and navigate
Ticket Breadcrumbs [Desktop Movie Page]
Before
After
-
Being able to see progress of your flow through the ticket buying process would make it easier to know what steps you still have left to complete
Trailer Thumbnail [Mobile Movie Page]
Before
After
-
Users looked for trailer thumbnail, to get same credibility from YouTube embed that they got on desktop
Refinement
Sticker Sheet and Accessibility
UI Starting Point
After consolidating feedback that wasn’t addressed in the refined wireframes (aesthetics) I created the sticker sheet, as a starting point for final designs and prototypes, with an immersive and cinematic look, tone, and feel in mind.
I selected a predominantly dark color palette to capture the feel of dark theater and used reds to echo the iconic visual imagery of theater red carpets and curtains. Poppins was selected because of its versatility, allowing for light visually differentiated body text and impactful headers.
(These color selections were made strategically, since there was no existing brand or brand identity design language/ system.)
All color combinations pass at least AA accessibility standards (shown below at 12pt regular weight type); most elements pass AAA accessibility standards.
Scroll to see more >
UI Design
Final Concepts
Assemble!
Final designs were drafted with focus on desktop and mobile breakpoints first, as bookends for element and type sizes. These were then extrapolated into the tablet breakpoints.
Final Designs
I saved you a little time, here's my other work:
Pee/ Poo Analyzer 1
UX/ UI Design and Strategy
Pampers x Snap
AR & UX Design and Strategy
Pee/ Poo Analyzer 2
UX/ UI Design and Strategy
Design System
UI Kit
I iterated through some design options using the assets in the sticker sheet and then created design system below to drive consistency across Desktop, Tablet, & Mobile... and ultimately facilitate handoff.
