Client

British Museum

UX/UI DESIGN
WEB DEVELOPMENT




THE CONTEXT

The Admonitions Scroll, a series of court scenes painted on silk, is one of the earliest examples of Chinese narrative painting: scholars estimate the artefact dates from the 5th-7th century. Due to the fragility of its condition, the scroll has to be stored in particular conditions that control humidity, temperature and light levels. To further ensure it is not damaged, the scroll is only publicly exhibited for eight weeks a year.

The difficulty was that, if visitors and academics didn’t visit during these eight weeks, they simply couldn’t see it. Furthermore, the Museum needed a digital solution that was not merely a copy, but one that allowed users to interact fully with the scroll: its meaning, its provenance and its historical significance. This solution would be hosted on a 32” monitor in the Museum. The Museum partnered up with us and Google Cultural Institute to develop a solution.

THE CHALLENGES

We took the brief apart, examining it from every angle. Above all else, the essential thought was to create a simple UX, whereby users forgot the digital platform to instead focus on the unique and beautiful qualities of the scroll. This, in turn, required a need for quality: when users zoomed in, they wouldn’t want the image to pixelate.

One concern – both of ours and the British Museum – was that users might regard the digitised version as a consolation prize to seeing the real thing. So we asked ourselves if we could add something to the experience of interacting with the scroll. We then discovered that the scroll was made up of 12 scenes of which the first three were missing – however, we know what they looked like as they had been copied in a black-and-white 12th century painting. So the question was “Could we bring these images to life as part of this scroll”? They wouldn’t replace the missing images but, at the very least, they would give some idea as to the missing panels.

The final concern was how to fully annotate the scroll. Given the wealth of scholarship on the artwork, there seemed to be a vast amount of knowledge to draw on. We needed to give users insights into the scroll without bombarding them with information. Furthermore, we had to cater for both the layperson, casually browsing the British Museum’s site, and the more specialist academic.

THE APPROACH

The British Museum, working with Google, digitised the scroll then passed on the images to us. This, in itself, presented a problem: the images soaked up vast amount of memory: the largest was an astounding 4GB. A file of that size simply can’t be added to a webpage.

british-museum-photo-3

Rosina and Karolina discussing the wireframes

british-museum-flow

A wireframe Karolina designed to help the dev team

The next step, then, was to cut up the images into a mosaic of smaller pieces. These were then entered into a JavaScript library which “layered” the pictures, allowing the user to focus in on immense detail, the closer that s/he zooms. As there were so many layers, we pre-loaded all of them, when the user opens the browser.

We also explored the possibilities of touchscreen technology. Using the Windows 7 platform, we developed a hyper-sensitive experience, one that allows the viewer to go from 1x focal length to 20x focal length. This is the equivalent from going from a long-shot overview of a court scene to a close up of one of the princess’s eyes.

british-museum-photo-4

Discussing the UI gesture hints

THE SOLUTION

The finished product is a fully interactive product, hosted in both English and Chinese. Moreover, the product gives the user two options: if they want to find out more about the scroll, before exploring it, there is a Discover option. If, however, they just want to experience the beauty of it in more depth, they can click the Zoom option. In short, it caters to both target audiences of the British Museum: the layperson and the expert. In so doing, it extends the accessibility of this extraordinary and priceless artefact.

british-museum-discover

The final UI for The Admonitions Scroll



“The Scroll was such a treasured relic that only very small audiences would ever have been given access to it - and that's true now as well, but for a different reason: the silk that this is painted on suffers greatly if exposed to light, and it's too delicate to be put on display except very rarely. But thanks to digital imagery everyone can now share this pleasure, which was once the preserve of the few.”


by Neil MacGregor, broadcaster and Former Director of the British Museum


You might also like




Client

Unilever

Unilever invited us to take part in their 2-day hackathon. A brief was pretty broad: how do we influence the purchasing decisions of a personal care shopper to buy Unilever products before they reach a store? We played around with a number of ideas and ended up winning, leaving 18 teams behind.


Client

Aiwip

Aiwip is a unique platform allowing students to print documents for free at their university, and gives advertisers an innovative way of connecting with students.


Client

StandTall

StandTall is an amazing service commissioned by Unilever to help people suffering from abuse to find charitable help and advice.