Royal Opera House: Design Challenge 2016 Interactive – Functional, yet sexy

Author: Daniel Alcorn

“A project working with the Royal Opera House”
“It’s a stand-alone mini-site to help them promote their wealth of content”
“It will need to be manually populated in its first phase”
“It needs to be striking, yet easy to use”
“Oh, and it can only display on one page within the Royal Opera House website”

No pressure then…

This week, the Royal Opera House’s first Education Interactive went live and it’s something we’re ruddy proud to have worked on. I thought I’d jot down a few approaches we’ve taken during the project which allowed us to overcome some of the challenges listed above.

The Royal Opera House has a wealth of digital content that is gathered onto channels such as youtube, flickr, and within the site itself. Every year it launches incredible education and community projects which often don’t receive as much publicity as the organisation’s main productions. Our task was to take this content and provide a vehicle in which it could be marketed, promoted and generally shouted about more widely.

This year, the Design Challenge (an annual education project) is focused on Madama Butterfly. The interactive we’ve created allows users to explore three productions of Butterfly that the ROH has staged over the years by focusing on the design of the; sets, costumes, hair and makeup, and the marketing materials.

There were a number of challenges we’ve needed to overcome to finish the project:

Content would be created in tandem with designs

At the project kick-off meeting in July  we were given an overview of the project itself and the structure it would take. At this stage we were aware that the interactive would consist of the 4 design sections (set, costume, hair and makeup, and marketing).

The bulk of the interactive content would be created in tandem with the design and build stages. Because of this it was important that we began working on designs which provided a solid structure for the content, while allowing for the flexibility and growth that comes with most projects which are content-rich.

Solution: Blocks & Modals

From the off we knew that the bulk of the interactive would be split into the 4 main design themes. From there we took the decision to split each theme into content blocks which could be grouped, discussed, highlighted or added to a carousel amongst other blocks. These blocks would contain an image, title, description, and read more link. From there, they would lead to a more in depth ‘modal’ (a modal box is a scripted effect that allows you to overlay a small element over a website. The primary benefit of modal boxes it that they avoid the need to use of conventional window pop-ups or page reloads).

Modals would then allow us to show the main meat of the content. Modals could contain a single image, a gallery of images, a video, a large amount of copy etc. This approach gave us a huge amount of flexibility which would handle the vast majority of content one could throw at it.


An example of how content blocks and modals work together

An example of how content blocks and modals work together

It needed to look sexy

Functional and reliable content blocks are great (like Homer Simpson), but the design needed to have impact and style (like Jacques, the bowling instructor Marge falls in love with). It also needed to do justice to a really varied suite of content. We were aware that we couldn’t (and didn’t want to) alter the content itself, so the ‘bells and whistles’ (design-wise) were handled by the wrappings that the content resided in. We also didn’t want to make anything that placed style over substance; the content needed to work, and there was no benefit in making something that looked lovely, if it was difficult to view, or edit moving forward. We achieved this with a couple of tricks which instantly make robust, reliable content blocks into awesome powerhouses of cool.


Fixed Background Image

The first was a fixed background image – this has been used to great effect on sites such as the V&A and The Design Museum and we felt it would be a good fit for the ROH interactive – It has the impact a more traditional hero image has, but it has less of an impact on the content within the page itself as it sits nice and quietly (yet strapping) behind the content. It also allowed us to showcase the beautiful interior of the opera house itself, which is never a bad thing!

The fixed background image

Full-width carousel

The second trick to turn the humble content blocks in to style icons was to utilise a full width carousel. The bulk of the page content sits nicely within the site grid, being all easy to read and consume, but every so often a carousel comes along to shake it up. This was a neat display option which kept the flexibility of a carousel, (carousels allow a user to add as many content blocks as possible without affecting a page height, or usability – 15 blocks in the carousel will look the same as 3 blocks in the same carousel). Allowing the carousel items to break out of the grid, we add that element of interest to the visuals that we’re after while keeping usability at the forefront of the build.

The full width carousel

Vertical Menu

The big hitter in the interactive, from a visual perspective, is the menu . We felt the menu gave us an opportunity to explore some nifty tricks and give us the impact we were after. We were aware there would be 4 sections and no more at this stage so there wasn’t a restriction in needing a menu which could grow as more items are added. After this decision was made the animation, background images, and overlaid text were a no-brainer. This gives us the impact we are after, while leaving the functional content blocks to be all reliable and flexible.

The vertical menu

A few UI extras

Animated Buttons

The animated buttons came about predominantly as a UI consideration as we felt the content blocks needed a signpost to indicate what type of content they feature. We then had the idea that this indicator could be displayed on hover of the buttons. End result: instant style upgrade

Loading Spinners

Loading Spinners

Due to the complex build of the interactive (all the pages being on one page calls for a lot of ajax…calls), a simple solution to the problem of content being loaded in to a page is to add loading spinners. We aimed to avoid all nasty instances of images loading slowly so we hid these instances behind a loading screen. It’s a simple solution which has a minimal impact on the user experience whilst providing enough useful feedback to the user that they understand what’s happening during the short wait.

Loading Spinners


You can probably tell we’re incredibly proud of this little project. We’re hoping to work with the Royal Opera House to develop this through a second phase in which we plan to integrate a CMS to more efficiently handle the content. Keep your eyes out for an update in the coming months.