Reimagining a world-class exhibition for a global digital audience

How do you align a project team to a shared ambition?

Concepts, features and functionality in the launched website can be traced back to sparks of insight generated in initial phases of discovery research and design exploration.

The project started with a period of deep immersion. Talking to stakeholders and subject matter experts, running workshops, analysing data, reviewing competitors and carrying out research interviews with competition entrants, exhibition visitors, amateur wildlife photographers and people with a keen interest in wildlife and nature.

These myriad research inputs were synthesised and articulated into a set of guiding design principles, audience goals, and organisational objectives. This provided a shared understanding and a North Star vision giving direction and focus for the project.

An important approach for the project was to work as a single team with a shared purpose. The digital team at the Natural History Museum would be developing and enhancing the website beyond the period of the project so it was essential for them to be involved at every step in shaping the digital strategy and crafting the product.

Having a multi-disciplined team being active participants in workshops, co-presenting at playback sessions, pair programming and collaboratively designing in a single Figma file created a shared sense of product ownership across the team.

Throughout the project we were designing in the open. To provide maximum visibility we held regular demos of work in progress, had team-wide critiques and took the approach of prototyping in the browser as early as possible. This showing and sharing helped avoid any misunderstandings and gave the team a tangible sense of progress.

How can you make your content stand out?

We took an inspirational cue from spending time in the physical exhibition. Described by people in research interviews as being a meditative and cathedral-like experience, we wanted to help the online viewer spend time with individual images and become enthralled and involved in each captured moment.

Our overarching mantra was to make the photograph the star, with contextual information and data taking a supporting role.

There’s an irony that making something that’s both elegant and simple takes a huge amount of effort and application. Over many rounds of design iterations, the interface and design language were refined to get out of the way of the content while having just enough subtle clues to be noticeable when needed.

We put a huge amount of effort into the typography and spacing but I’d prefer visitors to spend their attention on the photographs. The interface serves the content: it’s there when you need it but it keeps quiet when the photographs are talking.

Here are a handful of ways we used design to create an immersive experience

Find out more about our new approach to fluid responsive design and try it out for yourself at utopia.fyi.

How do you make navigating a dataset delightful?

If ever we started to feel that interacting with the website felt like interrogating a database we’d stop and rethink what we were doing. Although powered by an API — collaboratively designed and developed by the team at the Natural History Museum as part of this project — we didn’t want the technology to dictate the experience.

The power and flexibility in the API enabled the data to be used to provide an alternative yet complementary experience to the physical exhibition. Although defaulting to show the current competition winners, the use of facetted data enables a user to filter the collection around their interests, creating infinite possibilities. As the collection grows with the addition of future competitions and the inclusion of photographs from the archive, the number of nodes for discovery also increase.

Prototyping is a key tool in any project. Getting the design into the browser quickly is an effective way of stress testing its limits. An early prototype proved it was possible to performantly load 1000+ images from the catalogue into the browser, but also showed that too many images in one viewport cheapened the experience. Using Flickr's MIT licensed algorithm, we efficiently packed the image grid, respecting the crop, quality and competition rank of the imagery.

The project was full of interesting technical challenges. How do you display images with multiple aspect ratios in an order you are not controlling? How do you make it lightning fast to explore over a thousand (and rising) high quality images? How do you make sure the website is performant for a global audience with the range of devices and connection speeds this entails? However, putting the experience ahead of the technology allowed us to create a rich collection of connected objects rather than a database.

Here are some of the ways we programmatically create flow through the system

How do you build a product not a project?

The end of a project is the start of the next phase of product development. As an agency it’s always sad to stop working on something that’s been enjoyable, challenging and rewarding to be a part of.

This is why setting up the foundations and design systems for teams to achieve future growth is part of our approach.

Behind the microsite is a living pattern library, code repository and a powerful future-proofed API. These all provide exciting opportunities to extend the microsite and develop new initiatives with speed and efficiency.

The digital team at the Natural History Museum have an exciting product roadmap for launching new features and functionality to enhance the microsite.

Expect to see a growing collection as new editions and additional metadata is added to the API. There are some neat ideas for new ways to allow the photographers and the museum’s scientists to tell the stories behind the images. Also look out for initiatives for public engagement as the microsite morphs from a publication of the world’s best wildlife photography to a platform delivering the museum’s mission of creating advocates for the planet.

We’ll be looking on with interest to see how the NHM team expand and develop the microsite in future.

You can hear more about this project in episode three of the Clearleft podcast.