Flix Brewhouse Cinemas

Project description

A complete re design for this Cinema/Brewery hybrid, located across the U.S.

Currently with 8 theatres across 8 states, Flix needed an update and redesign of their site. This was combined with an update in whole platform and ticketing process to a new seat first booking experience.

The platform update allowed me the opportunity to change the underlying process of designing and building cinema sites, by creating a component based UI system from which all of the pages were built. Using a design system hugely streamlined the production process between design and front end, but also meant the CMS needed to be updated to allow clients to take advantage of the greater flexibility in content types and layout the component approach allowed them.

Flix Brewhouse have a strong visual identity they were keen to see better reflected on the new site, with a strong focus on dark wood with the contrast yellow. Another important issue was clearly communicating the selected theatre, with the most common complaint previously being that bookings were being made for the wrong theatre.

They also make, sell and serve a variety of beers and other food & drink, so the flexible content page components were used here to create location specific, editable menu and listing pages with nested hierarchy.

Project details

  • Client: Flix Brewhouse Cinemas
  • Category: UX, UI
  • Data Created: November, 2018

Home Page with Quick-Buy

Quick-Buy gives an always accessible way to find movies at any location or date. Movie specific, experience and feature based filters can also be used to more quickly find the desired movie. The UI for this is identical to that used across the rest of the site, where users can also edit location, date and filter options to create a simple and consistent experience.

Selecting a film takes you the 2nd step where you can scroll through pre filtered showtimes.

Home Page Cont.

The rest of the home page contains location specific movie listings as editable promotional content areas made from a call-out carousel and as many larger image based promo areas, with different layout options available for overlaid copy.

Movie Details

The movie detail template allows for an optional extra hero image to be used as well as the standard poster image. The same location selection and filtering options are present here as elsewhere on the site, that can be used to better refine and find a showtime.

Beer/Content Listing page

Listing pages built out of content components used elsewhere to create location specific pages with detailed menus of the beers available. Alternate versions of this template was also used for other listing pages, such as in the food section, where sub navigation and 3 tier hierarchy was also used.

Theatre Details

Each theatre/location has it’s own detail page with information about that theatre’s features, contact location, movies on and any relevant promotions. Again, these pages are fully customisable by the client using various content blocks that mean flexibility for the client, and retains a strong visual look and feel.

Mobile Seat First Ticketing

Desktop pages

Home Page

Quick-Buy tool

Movie Detail

Beer Listing

Theatre Detail

Desktop Booking

The layout on desktop allows for more space for certain elements, while any areas of interaction remain much the same here as on mobile. The summary and interaction area on the right slides in and out as required between steps so it’s always super clear to the user what they should be doing, and where their focus should be.