Metropolitan Theatres

Project description

A re-platform/build and complete redesign for this cinema chain based across 4 states, with the majority of it’s theatres across California.

As is very common with cinema clients, the branding tends to be a little out-dated and lacking in much detail. The film, black, orange and white motifs were really the only visual direction I had for this project, which allowed me to create something with clear, simple and bold styling and typography.

This site was built using the same flexible component based platform as other projects featured on this site, so although it shares things in common with the types of content blocks available, I took a very different visual approach to them for Metro.

Project details

Client: Metropolitan Theatres
Category: UX, UI
Data Created: May, 2019

View Site

Home Page

Metro asked for some additional space for optional promotional space on the home page, so some space is set aside below the main carousel. Unfortunately, this pushes some of the key information and UI a little further down the page than I would like, but as always, this is all about striking a balance between usability for the client and the end-user. The ad space was intended to have an image and CMS-able text (with optional CTAs) displayed over the top to ensure legibility.

Otherwise, the key UI area of where and what are introduced above a row of movie posters, before some additional space for CMS-able promotional content areas.

Showtimes Listing

The same 3 rowed UI bar of ‘where’ and ‘what’ are present above a deeper showtime listing page for the selected location.

Location specific promo content can again be displayed at the bottom of the page if needed re using content components seen across other pages.

Movie Detail

With the top area dedicated to the details of the movie, there’s also a CTA that will take users directly to the showtimes further down the page.

This template can also display a row of scrollable thumbnail images in addition to the poster.

General Content

Almost every section on each page is built from individually designed components. This approach allowed us to create general content pages the client can manage and create in the CMS out of a selection of pre built and skinned content components that can be added in any combination and order to a page. The basic idea was to give our clients much greater freedom and flexibility with their content page needs, all from one base template.

These take the form of a combination of flexible layout options covering the bulk of variations of text & image a client might need to create the various other pages needed on the site. These pages are taken from an example of the possible components.

Mobile Ticketing

I took a slightly different approach to the ticketing pages for Metro. A log-in or continue step before ticket selection, and then seats is used here. This is the more traditional method.

The styling of the rest of the site is used here to keep all the key purchase information and interactions presented in as clean and concise a way as possible.

This ticketing process has provided a large up take in completion rates since going live, and also allows customers to purchase using a variety of methods. The design of the payment section was intended to be adaptable and future proof.

Desktop Home

Showtime/Movie Listing

Movie Detail

Theatre Listing

Theatre Details

General Content template

These 3 visuals show an example of the various content block types that can be used in any order and permutation to create various content pages across the site. Simple content blocks as well as alternating left/right positioned areas, with image gallery and different ways to highlight promotional content mean that almost every content need is covered, with the benefit of content pages that actually look interesting.

Platform wires

These show just a selection of some of the wireframe visuals used to help create the new platform and content blocks/components that this and other cinema sites were designed and built in.