Screening Room Cinemas Websites
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.