Postman Pat the movie case study - cover image

Case Study: Postman Pat the Movie

Client: Lionsgate
Role: UI/UX designer and complete build
Brief: Create a responsive website, that includes games to celebrate the release of Lionsgate's Postman Pat: the Movie.

The Website

A responsive website was created to engage the audience and promote the upcoming release of Lionsgate’s Postman Pat: the Movie. The site features games and activities aimed at a wide age range of children parallel with the film’s target audience.

Postman Pat: the Movie Website - desktop
Postman Pat: the Movie Website - tablet
Postman Pat: the Movie Website - mobile
Responsive layouts for desktop, tablet and mobile devices

Brief Constraints

It was important that the site was responsive and designed particularly with tablet in mind as the core audience would be young children. Research shows many as (62%) of parents entertain their children with handheld devices at home.

Lionsgate set a strict deadline to coincide with the release date of the movie, this in turn set a very tight development time resulting in the use of existing touch friendly jQuery games which were modified to fit our needs.

The site was also built to adhere to the small budget set.

Postman Pat: the Movie Website - Puzzle
Postman Pat: the Movie Website - Pairs
Postman Pat: the Movie Website - Spot the Difference
Postman Pat: the Movie Website - Downloads
Postman Pat: the Movie Website - Gallery
Postman Pat: the Movie Website - Synopsis
Landscape tablet screenshots: Games - Puzzle, Games - Pairs, Games - Spot the difference, Downloads, Gallery, Synopsis

The Journey

A big challenge from the onset of the project was that the movie key art had not been approved and was undergoing complete changes in direction as well as several rounds of amends once a route was chosen. Therefore the layout could not be fully realised with the design concept in mind as the deadline was pressing.

The project progressed with provisional artwork in place, the site structure along with prototypes of the games and navigation mechanic were approved. A ‘reveal’ style navigation menu was proposed, when activated the menu bar expands open and the page content is ‘pushed’ using a sliding transition to the right. This style of navigation was used on all devices and desktops 1024px wide and under.

The most time consuming and unforeseen part of the build came when the client decided they wanted to use not only the movie quad sheet but also 3 teaser ‘one sheet’ posters, featuring the three main characters, all in different positions within the ‘Pat’ landscape. As a result of this each poster had to be adapted, sliced into various pngs and on occasion extended to work responsively. The main characters also had to be well considered in prime positions to work in and around the page content as well as at various orientations.

Postman Pat: the Movie Teaser Poster - Pat
Postman Pat: the Movie Teaser Poster - Jess
Postman Pat: the Movie Teaser Poster - Pat Bot
Postman Pat: the Movie Teaser Posters - Pat, Jess & Pat Bot
Games Page - landscape view
Games Page - portrait view
Art directing background images for screen size and orientation
Postman Pat the Movie insitu website