Challenge

The British Film Institute (BFI) is the UK’s leading organisation for film, television and the moving image. As part of a digital transformation programme, BFI wanted to improve revenue, business sustainability and cultural impact by upgrading its digital presence. We’ve supported the delivery of this transformation by redesigning and rebuilding from the ground up the BFI website, introducing new digital technology and new ways of working.

Approach

The primary digital channel for BFI to engage with its audience is its website. Through a website redesign, we wanted to improve the way BFI services are communicated and accessed, focusing on truly understanding their different users and the way they engage with film.

BFI offers offline and online services for many different types of film enthusiasts ranging from the IMAX and cinema venues to BFI Player (their on-demand streaming platform) and significant editorial content. However, users found the existing websites complex and difficult to navigate.

We conducted guerrilla research at BFI venues and spent 30+ hours researching with a variety of different users to understand their diverse needs, journeys and goals, in order to explore the opportunities that digital could bring. Having also delivered a previous discovery phase, we used customer segmentation to define the 85 different reasons people came to the BFI, categorising these into three distinct user groups, each with specific needs and journeys:

• people who consume film: those who watch film, visit venues, buy tickets or read content

• people who make films: those from the film industry who want to access grants, book venues, apply for funding or get certification

• film learners or teachers: those who want to study film-related material, participate in courses or who teach film-related courses

Over four months, we ran four Alphas focused on working with particular parts of the BFI to build a deep understanding of user groups and journeys. We worked alongside BFI teams and engaged with users to map and understand their needs, test ideas and validate concepts. These included:

• Film Academy: young people aged 16-25 who want to learn about film

• support the BFI: how BFI engages with and builds their member base

• film page: for those wanting to watch or know more about a specific film

• get funding: for filmmakers who want to access financial support

We were then able to determine feature prioritisation and progress into an eight-month product design and build phase, working alongside our sister company Deeson, who provided back-end development support.

Alongside our deeper dives into individual services within the BFI, we mapped every page and microsite that the current site contained and ran workshops and card sorting exercises. This was done both internally and externally with users to completely redesign the site's information architecture, structuring it around our three new user groups. We helped focus on making the content more accessible, condensing the many pages of content, focusing on being data led by utilising the years of analytical data from the old BFI site.

The final five months of our partnership including the product design, build phase, all user testing and successful live product launch was done entirely remotely at the height of the COVID-19 crisis. We used remote collaboration tools such as Miro and Figma to build and iterate, ensuring continued stakeholder engagement (including BFI’s branding, marketing, comms and PR teams) with sign off by the CEO and Board.

Building a digitally-enabled BFI

Mapping all the threads and pages across the existing site helped us understand the complexity of something that was built using a bolt-on structure. We focused on how we could declutter, organise and structure existing pages and content differently.

We built the new website with Drupal as a headless content management system, specifically to accommodate a variety of data sources, and recognise BFI’s many different services. This tech stack was chosen to simplify the architecture from many fragmented sites and monolithic structures. Choosing a decoupled approach offered small pieces of loosely joined tech, allowing for greater reuse, resilience and flexibility.

This meant the website remained the central source for all things BFI, with the ability to bring together content that had never before been joined up.

When building the design system for the website, we wanted to allow staff a certain number of parameters in which they could amend content. We developed and built a custom WYSIWYG editor, which allows users to design the page utilising custom-built components, making it easy to rearrange elements and preview the page. Having a design system library built in this way ensures consistency in the future, as staff will always have a need to develop new pages as they expand their services.

The design system also allows for consistency of design in future websites and products, as all of the design components are built independent of the new website’s back-end, they can be reused easily or kept in the future if technology is changed.

Accessibility for different users

Optimising the website for users with different types of visual impairments was essential. Every decision we made was tested along the way to avoid duplication and production ahead of meeting level AA of the Web Content Accessibility Guidelines (WCAG 2.2).

We built a site that included modern accessible-by-default features, such as hidden skip to main content buttons, focus outlines & tooltips. We tested with real users who had accessibility needs and used tools and automated testing such as WebAIM contrast checking, Google Lighthouse, linting tools to optimise accessibility. Our site meets and exceeds the AA WCAG 2.2 standard as a minimum.

Impact

The new BFI.org.uk website went live at the end of August 2020 to support the launch of the BFI's autumn programme which attracts millions of page views each year. Users can now experience and access updated services and tools, co-designed with them, including new front-end, design system, information architecture, and overall look & feel. Now fully accessible, enjoyable and sustainable through the use of fresh visual language, a component-led product design system and common digital standards.

Improving core digital capabilities

Throughout the discovery and four alphas, we engaged with hundreds of BFI staff, including the D20 Board with representatives from the executive team and BFI board. We introduced user-centred design, agile ways of working as part of a capability transfer to all the teams involved. Supporting staff with developing new skills and participating in agile project rituals such as sprint planning, retros and show and tells.

We also supported BFI to recruit a Product Manager who shadowed our Delivery Manager for three months before taking on the delivery management role as part of our blended team during the design and build phase.

Alongside the website, we redesigned the services BFI users need, improving technology tools and architecture to support service delivery. This is an ongoing process of changing the way BFI works through paired working with design, delivery and technology specialists alongside investment in skills. New governance standards will be introduced to support the ongoing development of service, product, technology and content.