DESIGN & PROTOTYPING

VUE CINEMAS APP DESIGN.

Designing and building an end-to-end prototype for Vue cinemas to bring the Big Screen to the small screen - an app that customers want to have on their phone and keep coming back to.

VIEW PROTOTYPE

Click here


ART DIRECTION

Dan Bradshaw


UX

Matt Theakston


THE CHALLENGE.

Having undergone a rebrand, Vue cinemas wanted to bring their iOS app in line with all of their other touch-points. Positioned as a mid to high end cinema chain at the forefront of projection and audio technology, Vue’s new digital assets were tasked with making booking as quick as possible whilst helping to build a ‘single view’ of each customer to eventually deliver personalised deals, news and recommendations.

vue_App_overview

THE DESIGN.

Following the lead of the website redesign, the new app looked to make use of iOS features such as location detection, Apple Pay, Apple Wallet, calendar integration and more.

vue_app_first_use

First use
In order to use the app, customers first select up to three of their favourite cinemas - either manually or by using location detection.

vue_app_homescreens

Homescreen
Having chosen their local Vue, users are presented with a series of panels to quickly link them in to the what’s on listings for the days ahead. The striking, cinematic imagery is partnered with a pared back interface and animation moving the panels in and out of darkness.

vue_carousel_2

Quick Book
Aimed at the customer who knows exactly what they want to see and when, Quick Book looks to use the language of conversational interfaces to quickly get you in to the seat selection process.

vue_app_whats_on

What's On
A listings screen, the date selector anchors to the top of the screen on scroll. Clicking on the ’Next showings’ button exposes the times available on the selected the day, again speeding up progress to seat selection.

vue_app_film_detail

Film listing
Housing the trailer and synopsis, the film detail page uses animation on the title, play and share icons to keep the user orientated whilst de-cluttering the interface.

vue_carousel_5

Order summary
The order summary screen attempts to expedite the order process by defaulting to 2 adult attendees (Vue’s modal order value) and picking the two best remaining seats. Up-selling to VIP seating is woven throughout the screens.

vue_app_tickets

Tickets
Vue’s cinemas are gradually moving over to paperless ticketing. After purchase, customers are asked if they wish to share their ticket to Apple Wallet. In app, using the stunning artwork of the films, the customer’s QR code and seat information appear on the front, whilst non-essential information is stored to the back.

vue_micro_interaction

THE PROTOTYPE.

Using Principle, I put together an end-to-end prototype that took us from the home screen all the way through to completed purchase.

Building a comprehensive prototype had several advantages. Being able to hand the client something that was moving and responding helped them understand how quickly the app could move customers through the booking process - particularly on return visits. It was also beneficial to the development team who had a clear direction on how the transitions between screens and within components should work.

THE REFINEMENT.

Taking the lead from feedback and analytics of the website relaunch, we made a series of changes to the prototype interface and took these in to lab testing.

The homepage was removed and the customer immediately dropped in to the what’s on listing and closest available times were pre-exposed to help speed along the journey to the booking flow.

Coming soon films were moved from the end of the day selector to their own panel at the foot of the listings to aid discoverability.

vue_app_refinement vue_app_Refinement