With nearly 50,000 entries received each year from 100 countries, the Natural History Museum’s Wildlife Photographer of the Year competition is the largest of its type in the world. Having run annually since 1964 its integrity, history and popularity mean wildlife photographers view it as the career-defining competition to be included in.

Once the entries are judged the top 100 images are exhibited – initially in the Museum’s London home in South Kensington before going on tour. The physical display is seen each year by over 5 million visitors.

The exhibition had a companion microsite. Stifled by legacy technology it proved time-consuming to update. As a result it largely acted as a dusty repository of apologetically-sized images from the last 10 years of content, with messaging to promote an in-person visit.

It was clear to the digital team there was untapped potential and an opportunity to think afresh how digital could be used to celebrate and connect a global audience with such an incredible collection of photographs.

There was also trepidation about creating a digital destination that was worthy of an esteemed institution, with high expectations from a large, loyal and discerning audience of nature and photography enthusiasts.

We needed to build a new way to help distribute the world’s most amazing collection of wildlife photography with a small team and a tight timeframe.

The Results

Improved engagement

117k page views in 3 weeks of a soft launch, a 230% increase (Year-over-Year) with a 50% reduction in bounce rate.


Small screen success

450% increase in mobile page views (Year-over-Year) and 45.3% reduction in bounce rate in the first month after going live.


Greater efficiency to evolve the product

Including introducing a modular pattern library and a re-platformed tech stack.


The Full Story

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.

A grup huddled around a table at the discovery workshop

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.
Jg
James Gilyead Visual Designer

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

Type and space scale elegantly without using breakpoints. The website uses Utopia, a fluid responsive design system devised by James and Trys, the lead designer and senior developer on this project.

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

The default view of the image takes centre stage with minimal distraction from interface elements. The image is automatically sized to provide maximum coverage to a user’s viewport.

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.
Trys Mudford Sm
Trys Mudford Web Developer

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

Driven by a handwritten API any new images added to the data source instantly become part of the filterable collection.

Filters allow a user to explore the collection in ways they find interesting with editorial and data-driven suggestions adding some serendipity. Controls allow the user to traverse any set they have created with the filters and for these combinations to be easily shared on social media.

Tags are used on images to provide both contextual signposting but also one-click routes for onward exploration.

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.

We introduced a digital style guide documenting the fluid typographic scales and spacing units
We introduced a digital style guide documenting the fluid typographic scales and spacing units

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.

A2Dominion A2Dominion