British Film Institute Website Redesign

Aims and Objectives

I’ve had a long relationship with the BFI, working initially with them on the first iteration of the Beta site, the connected TV app and most recently redesigning the Explore section which was the next version building on the work we did on the first Beta site.

The overarching project goal was to present to the user an engaging experience which shows off the knowledge BFI has around films and the people behind them using data drawn from multiple sources. These sources include:

  • 1 million film metadata records (Title, year, country, genre, subject terms, cast and crew)
  • 800 video Interviews and clips
  • 80,000 stills and Posters
  • 1000 articles and reviews

In the first iteration of the website the Explore section was a heavily curated selection of around 800 films. Going forward the ambition for the website was too expose it to a lot more data. More than a million records exist in the main database which, going by the current work rate, would take the content team nearly 27 years to complete! Clearly we’d need a new approach.

We’d already spent a lot of time conducting user research for the first beta site so we were in a good position to dive straight in to the next iteration building upon our knowledge. I started by stripping the original designs right back to the bare essentials and using the mobile first approach to design started again. I began by sketching out ideas for mobile, tablet and desktop versions of the site paying special attention to the differing needs of each user. These designs formed the basis of the responsive version of the website.

I worked closely with the in house developers at the BFI and we iterated on my sketches. Fitting in with the Agile Scrum methodology I’d previously helped them with we were able to start building early in the project using high level sketches and wireframes to prototype in the browser rather than on paper. Using this flexible approach enabled us to change and adapt as the project progressed.

The film and people templates have been designed in such a way as to encourage the user to explore more of the BFI content by surfacing the richer records more often that the more incomplete ones. This is achieved by making the See Also suggestions ‘intelligent’ based on a balance of related records to the things the user has previously seen, records which match the current records year, genre, subject and country and records which the BFI may want to surface more regularly.

One of the failings of the previous 2 column Beta design is that the pages don’t really accommodate gaps in the data all that well leading to slightly lop sided layouts on certain pages. There was also an issue with content being hidden behind the tabs.

The solution to the problem was to drop the tabs and use a simple two column layout. Everything in the main first column is directly related to the film. The second column is purely to encourage the user to explore further in the site. Data gaps are accommodated by shuffling the existing data further up the page and there should always be richer records for the user to explore should they find themselves in a position where they are looking at a particularly sparse page.


Explore Homepage

The Explore Homepage was tackled last and had its own unique set of challenges. The home page we used in the Beta site only had to deal with 800 films  and around 60 genre classifications so a traditional faceted navigation was perfect for the job. The new site would have over 1 million records and over 80,000 subject and genre classifications so we’d need a differing approach. The other criticism of the previous page was that it was a little dry and didn’t engage users.

The thinking behind the Explore home page is that it should inspire the users to jump in by offering to them a selection of content which should encourage them to start exploring. Experience from previous projects I’ve worked on has shown that when visiting a site for the first time the majority of users head straight for the Search page and those visit the Explore landing page tend to be either curious, lost or confused or more likely a combination of all three!

After some initial requirements gathering exercises I set about sketching several versions of the homepage. In the end we settled for the one with the most visual impact to encourage users to start exploring. The page repeats pools of images drawn from richer content pages at differing sizes which gives the illusion there is a lot more content than actually exists. Content is also weighted so if there is a need to promote a certain film or director (like the recent Hitchcock season) these appear more often.


Date of Completion:

June 2012

Project Duration:

2 years

Project Type:

Website Redesign


Key Challenges

  • How do you present partial records to a user who is used to rich experiences?
  • What is the best way to use data to make it appear to the user that they are in a curated set of pages?
  • What is best practice when integrating UX and Agile?
  • Year on year mobile usage is growing on the site, especially the uptake in second screen browsing. How do we accommodate these users?
  • One of the core objectives of the BFI is to broaden users appreciation of film and the people behind it. How can the site best achieve this goal?