You may have heard by now that we recently launched a new website for the Plaza Community Cinema in Waterloo near Liverpool. We try to fit one charity project in a year at Interconnect to give ourselves a challenge that wouldn’t normally come up. I should come clean that part of the reason for doing this project is that we were hoping to be selected to design and build the new website for FACT however after making it to the shortlist there were two other agencies that pipped us to the post. Grrr.
It would have been a shame to waste the ideas we had and the planning we’d done so I got in touch with local artist and teacher Sam Meech who I met at one our SWIG events. Sam had put together the existing Plaza website using an off the shelf theme but it had its fair share of problems when it came to maintaining film times and organising content.
Background
The Plaza cinema has had a few different owners over the years. When I was little it was an Odeon cinema and being just around the corner from my home it was always where I went to see films throughout my childhood, the first one I remember being The Rescuers, then not long after that I remember being utterly petrified by the ‘giant’ scorpion in Honey I shrunk the Kids!
After closure and reopening as the Apollo cinema, the old art deco building eventually came under threat of demolition. This did not go over well with the community in Waterloo and the surrounding areas! Happily, the cinema was reopened as a charity and is run by its fantastic volunteers so it really does belong to the community. I was only too pleased when Dave gave the nod to spend the time that was booked for FACT to create a new website for the Plaza, a place that was very much a part of my formative years.
Getting Started
We met up with Sam, James and Martin who were the volunteers responsible for managing the website to find out what their thoughts were and to share our ideas. the response was very positive and as it turned out I had (almost) complete freedom to get creating.
There were some branding guidelines and a logo in place developed by students at the John Moores University Art and Design Academy under the guidance of Sam, some photos by Mark McNulty and Michael Sheerin and a plethora of printed material to start from.
Automatic for the People
Before I could get too engrossed in designing the website there was one pretty crucial technical aspect that I wanted to address – streamlining the process of gathering data about the films.
I created a plugin to integrate themoviedb.org’s API with WordPress and you can see it in action on this dodgy screen cast Dave put together.
The nice thing is with the approach I took to writing the plugin its functionality can be added to any post type using the built-in WordPress method:
add_post_type_support( 'post_type', 'movie' );
That line on its own adds all the custom taxonomies for actors, genres, directors etc… and the meta box for searching the db and populating the post data and gallery.
You can grab the movie db plugin from github.
Recurrence, recurrence, recurrence…
That word starts to look funny written multiple times… This is the technical issue that caused me the most sleep deprivation due to the regularly shifting schedules of the movies. The events management plugin we’ve been developing already had a means of creating repeating events but for movie listings the game changes in a subtly significant way. I had to make it possible for an event to happen multiple times within a single day, but also at different times within the day over the course of the repeating event. For example, a film might be on at a fixed time every weekday with extra showings on the weekends and one day of the week where it was not on at all.
While the implementation I came up with may not be the best, especially in terms of the data structure the guys were able to get on with the UI without too many problems.
Research
The Plaza has a few unique points that set it apart from the likes of the Odeon and other chain multiplexes. There are midnight screenings for new and classic movies, family screen events, charity or film festival events, film club events, autism and disability friendly screenings as well as community outreach projects.
Autism
Most of the above would be covered by providing a means of categorising the movies however one notable element of the design was that the site would be catering to people on the Autism spectrum. Cue the hive mind! I asked for some advice from my followers about any experience or knowledge they had of design considerations that I should be aware of for the project. I received a slew of very useful tips and links from Paul Timney, Anthony Casey, Andy Chesters and a few others whose tweets I forgot to archive (sorry!).
In summary, some of the main considerations to make are:
- Yellow type on black is easier to read (same goes for visually impaired users)
- Avoid having too much on the page – multiple columns or too many boxes of info could lead to confusion
- The spacing of type is crucial, in particular, the use of generous leading
- Simple or clear fonts at a slightly larger size than on a normal website
- Consider using PECS symbols (Picture Exchange Communication System) which a lot of people on the autistic spectrum use, often their reading is not too great and PECS is a universal system
Andy got his information from his partner who works at Landgate School in Wigan who specialise in educating young people on the autism spectrum. He went on to ask about the use of movement in web design eg. animated type or images or flashing for example. The response was a little unexpected:
Moving type or animations could actually engage them as long as they’re not too random, complicated or chaotic
Good to know!
So the question is – did I follow all of this advice? Well, no, not all of it. Although people on the autism spectrum make up part of the audience I was still designing for everyone else too (and partly for myself as a punter of the cinema).
I did heed the advice given to me in a few key areas though:
- Plenty of white space
- Use of icons for the main menu items
- Simple and familiar font
- Only 2 columns in the main content areas
- Avoided information overload by leaving out excerpts and sticking to a minimum of content on each page while still having a site that was easy to get around and discover content in
- The site can be linearised and further simplified by reducing the width of the window or browsing on a mobile
- The animations are used when appropriate and are quite subtle (in my opinion of course)
If you want to find out more there is a lot of information to be found on autism.org.uk
ART DECO
The cinema building is a classic example of art deco architecture as you can see from the photos. Given this heritage I began looking into the art deco style, in particular, the vehicle designs of Harley Earl piqued my attention. My favourite find was this 1930 Henderson motorbike (not by Harley Earl) that looks like something out of Sky Captain and the World of Tomorrow.
It echoed part of the branding already in place for the plaza in the shape of the horizontal stripes common to art deco design. The polished solid colours influenced the decision to make the header into a band of bright colour rather than to have the movie backdrop behind it as in some early mockups.
Other common features of the art deco style are the geometric arrangements, pleating and fanned lines, I experimented with bringing this detailing in at a few points but none of it felt right. I don’t feel that it’s a huge loss, however.
I opted to stick to the simple 3 lines motif in only a handful of places and also mirrored the architecture of the building itself in a more subtle way to carry the design through. The grid I adopted was a 5 column fluid grid. By working from a width of 1000px it was easy to calculate relative percentages for my columns and sub-elements. By making the design fluid it meant that it would still work when shrunk down up until the breakpoint where the site becomes linear on an iPad held portrait-way.
Why a 5 column grid? If you look at the photo of the front of the cinema at the beginning of this post there are 5 columns punctuating the facade. I felt this was a perfect way to marry the physical object and its digital representation.
Rounding off
Hopefully, you’ve gained some insight into the approach I took and the considerations behind the end result from you see below. Of course, I should mention the contributions and suggestions from my colleagues Dave, Tom & James that helped to improve the experience and also the feedback I received from industry peers. Thanks to input and feedback from Jon Grant, Nick Toye, Cole Henley and numerous others (I love Twitter!).
After a very iterative design process and many many meetings with Sam to squash bugs and to tidy up and simplify the display of the film times, my first real foray into responsive web design has been well received by the cinema, it’s volunteers and customers. It’s always a good sign when a client has been happily updating their site with very little in the way of support from us after the initial training session.
As for me, I’ll never be truly satisfied with anything I do, although the movie times section is damn tasty if I do say so myself!
