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.
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.
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.
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.
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.