Jonno Witts

Menu

Documentary Film Website "So, Which Band is your Boyfriend In?"

The homepage for the documentary website displayed on a browser window The homepage for the documentary website displayed on a mobile device

Background

Filmmaker Suzy Harrison was creating a documentary about gender in DIY & underground UK music scenes. When Suzy and I first met she was raising funds through an IndieGoGo campaign. I worked with Suzy to create a website that would complement and go beyond the crowdfunding page.

Brief

Suzy wanted a website that would help promote the film to people and give a professional look when applying for film festivals. It would be a central place to have updates on the project, photos and other interesting content all in one place (including the trailer).

Research

Discover

The first stage was to meet with Suzy and work together to complete a user requirements specification. This is a document I have refined over time and I use it to ensure that I ask the right questions at the beginning of a project. I asked Suzy that she bring some examples of websites, documentaries, posters or books that she liked and what she liked about them. During the discovery meeting we discussed the target demographics for the documentary and the website. The website had to be easily updatable for the latest news and progress of the project and have the ability to upload pictures for a gallery.

From our discovery meeting it became clear that the important things to Suzy were that looked professional and in-line with the graphics used in the documentary. The website would be used beyond the IndieGoGo campaign and would be the main point of news once the documentary had been released. It had to include the trailer and be easy for her to update.

In order to make the website easy to use a content management system would be required. We discussed the idea of using WordPress, which Suzy was happy with.

Suzy was hosting the trailer with Vimeo and we decided to simply embed this into the website. This meant that she was able to keep the analytics from Vimeo and it would be easily shareable for visitors to the website.

Information Architecture and wireframes

With a completed requirements specification I was able to design the information architecture for the website. Although only a simple website it is still important to consider how the website will be structured and how certain aspects are going to work. With these questions initially answered I was able to begin sketching wireframe ideas for the home and content pages.

Using the provided examples of media Suzy liked and some photos from the project I generated a mood board of the direction of the website's design. Suzy and I met again to discuss the ideas I had come up with so far, from here I began to design the high fidelity user interface using Adobe Illustrator.

Samples from the design process including colour scheme ideas

Design and Development

With the ideas for the design fleshed out in Illustrator I built out a UI kit with HTML and CSS. To keep the development process and subsequently the website, streamlined, I carried out a mini audit of the required building blocks of the website from the mock-ups. This helps me to follow D-R-Y (Don't-Repeat-Yourself) coding principles.

A key part of the website is the full screen background video on the homepage. I asked Suzy to put together a short video that could be looped for this purpose (removing sound and compressing as much as possible). Using the HTML5 video tag and some basic CSS it was easy to drop this into the page. In order to keep the page size down, I made the decision to not include this background video for smaller (mobile) devices and present these users with a static image. Additionally, the trailer linked from the homepage and navigation is loaded in only when the user needs it. Some simple JavaScript provides this, again to keep page size low.

As many of the pages follow a similar structure, once I had the key pages I was able to develop a custom WordPress theme.

Testing

As with any responsive website it is important to test it on as many devices as possible. Based on the initial research some of the use cases would be event organisers and attendees of events. So a full range of devices would be required with mobile and laptop/desktop sizes being the most likely to be used. Testing can be a long, arduous process. It is always important to go in with a plan and a checklist of things to test in order to maintain focus.

I carried out usability testing with several people, asking them to do certain tasks - find the latest news, watch the trailer, etc. This ensured that the website was fit for purpose in a real-world environment. Design and building the website, I was very close so it was important to get an outside perspective.

Outcomes

The website was launched prior to the premier. Suzy was delighted with the site and has been updating it with the latest news from the project as well as back-dated updates from the IndieGoGo page. The feedback from Suzy was that WordPress has been easy to use, which is good to hear.