B&B Theatres

Project description

As an existing client, this project was a complete update, re-platforming and re design for one of the larger chains in the US with around 50 cinemas across 8 states.

The look and feel for the site was largely based on photographs of their primary location interior and exteriors, using colours, patterns and textures seen in their grand foyer areas to try and create an online experience that feels consistent with what it’s like to actually go to a B&B theatre.

This site needed to account for users being able to clearly select and understand the currently selected theatre, as well as creating a focus on the wealth of different experiences available – all of which form filtering attributes for movies. Finally, they wanted to movie to a Seat First process for the ticketing/checkout process.

This site was also designed using a variety of flexible component content sections that allows the client much greater flexibility with content for not just the movies, but also the theatres, promotions, and any other content needs.

Project details

Client: B&B Theatres
Category: UX, UI
Data Created: August, 2019

View Site

Home Page

Below the main carousel, the home page present the key UI for the site, with page options, location selection and filters presented above a row of movie posters.

As the user scrolls a mini version of the location selector sticks below the header to give constant visibility over the currently selected location, as well as a way to easily update their option.

The lower half of the page allows the client to add as much or as little promotional content using larger image based areas, or swappable call-out banners.

Showtimes Listing

A place to see all showtime listings for the selected location. Showtimes reduce to a 3 column layout on mobile screens, so all readily legible and big enough too be comfortably interactive.

The same experiences filter options are selectable on this page too.

The location selector again minifies and sticks as the user scrolls. The second screen here shows the opened location selector.

Movie Detail

Again, the core UI is reused to present the where, when and what options before the showtime listings and after any movie details.

The page was designed to work with or without the hero banner image at the top, as these aren’t always available for each movie, and these pages are created dynamically from content and date sourced through the platform’s API.

Each date’s showtimes are broken into blocks of grouped attributes – something the client can control in the CMS.

Theatre Listing

A list of all theatres, filterable by region is displayed. On touch, a brief summary with key details is shown in an overlay, allowing the user to either see Showtimes or more information on that theatre.

Theatre Detail pages

Each theatre has it’s own content page, showing a combination of movie/dynamic content and theatre specific CMS-able content blocks.

Seat First Ticketing

A ticketing process designed around the user selecting their seat first. The UI allows the user to always have clear sight over what’s required of them at each step. The idea was to also allow them to quickly change the date/showtime for their selected movie if a desired seat isn’t available.

The appropriate amount of tickets can then be selected (as well as any vouchers) before going on to a final review and payment section.