Benjamin Britten

Benjamin Britten was one of the twentieth century’s great composers. He is particularly known for his operas, but also for choral works and many song cycles.

SERVICES:

// UX design
// Creative design
// HTML 5 interactives

OUR APPROACH

We have worked with the Britten Pears Foundation on a variety of digital projects since 2012. The opportunity to design the new Britten website and create three HTML5 interactives alongside technical partner System Simulation came in 2014.

 

Working in collaboration with System Simulation we led the user experience design for the project that included defining a site map, user profiles, user journeys and wireframes. The creative design involved the identification of 20 templates that would be optimised for desktop, tablet and mobile. Finally the creation of three HTML5 interactives brought the site to life with an interactive timeline of Britten’s life, a music sampler and an interactive map of Britten’s Red House.
britten-approach-v2

Mega menu
The mega menu allows users of the website to see at a glance the main pages within each top level section. By using a simple rollover they could see visual images and descriptions about each page without having to click into it to read the content. This has resulted in an improved user experience.

News grid
The creation of a bold grid of news allowed the audience eye to scan visually across the updates of Britten’s legacy from around the world.

Default page
The CMS built on a series of 20 templates allowed for various layouts on different pages. The default template included a banner design, breadcrumb navigation, expandable side navigation, introductory and body text plus associated image styles.

Modular home page design
The home page was designed in flexible modules to enable fresh content updates. With careful attention paid to information hierarchy, the audience is guided through the website experience using clearly defined signposts.

Optimised for mobile
Both the content and the layout was optimised for mobile devices. A reduced selection of content was presented for mobile audiences, making it easier and more efficient to use. This meant the mobile audience could get to all of the content types without having to scroll through all of the content available on desktop.

Mobile menu
A sliding menu designed specifically for the mobile audience means the content heavy site can use a simple navigational structure.

Responsive design
The entire website was designed with desktop, tablet and mobile audiences in mind. You can see from this home page how the content is enhanced for larger screens, and more refined for the smaller ones. This increases the usability and overall user experience for every device.

HTML5 interactives
The design and production of three HTML5 interactives brought the website to life. Optimising these interactives to work on desktop and tablet, the interactive timeline, music sampler and 360 degree map enhanced audience engagement on the site.

Interactive timeline
This HTML5 interactive timeline documented the birth of Benjamin Britten all the way to his death in 1976. 

Browse in decades
The timeline operated on a horizontal scroll that could be browsed in decades. Every key event was represented by a title and thumbnail that could be expanded upon with a simple click or press on touch-sensitive devices. 

Lightbox 
Every event on the Interactive Britten Timeline could be expanded by viewing information in a lightbox. This focussed the audience attention on the information being presented, enhancing the user experience of the timeline.

Interactive music sampler
This interactive music sampler was created to help an uneducated audience to experience the best of Benjamin Britten’s music using a playful variety of different filters for the music. The audience could filter on: top 10, mood, genre, instrument, writers, speed, date and text search. The visual pictured above is the “speed” filter where the audience could drag the slider on the metronome to browse the different Britten tracks that matched the specified speed.

Filter on writers
Britten wrote many songs that were inspired by literature. The songs could be filtered by selecting a book by an author from the interactive book shelf.

Filter on instrument
The animated instrument grid enabled the audience to select a particular instrument that returned songs that featured that particular musical accompaniment.

Song details revealed
Every time the songs were filtered they returned a summarised list of matches. At any point a song could be explored in more detail, revealing a description, recording credits, matching metadata and the ability to listen to the music sample.

Interactive map
The HTML5 interactive map explored Britten’s Aldeburgh as well as a 360-degree tour of the rooms inside The Red House. The design involved the creation of original water scenes for the bird’s eye view of Aldeburgh in Suffolk. 

Multilayered floor diagrams
Once inside The Red House, floor plans for each building could be explored. Interactive rollovers enabled the audience to navigate around the complex.

360-degree tours
Once inside a room of The Red House, every room could be explored in a 360-degree immersive experience. Each room contained interactive objects that could be clicked and explored in more detail.

Additional functionality
The entire website contained hundreds of pages of content and functionality. Some key highlights included the ability to send e-cards to friends, to create your own gallery of Britten images that could be easily embedded on your own website or blog using a simple piece of auto-generated code and an ever-expanding global events database.

This website and HTML5 interactives are no longer live. We continue our digital partnership with the Britten Pears Foundation as we create digital projects for the organisation to help promote Britten’s work across the globe.