Sow seeds of change

The Royal Botanic Gardens, Kew, founded in 1759, is one of London’s top attractions presenting a constant changing plethora of botanical wonders, rare specimens from around the world and breathtaking displays of nature.

The challenge

Kew Gardens recognised that its online audience are increasingly using smartphones and tablets, and that its current website very poorly supported such smaller devices.

Kew turned to Clearleft to design and develop an improved experience for visitors using mobile devices. We created a ‘responsive pilot’ for the ‘Visit Kew’ section of the site, with the short term goal of serving this only to mobile devices. Because we created a responsive design, rather than a mobile-specific site, the longer term strategy of rolling about the design across the whole site to all devices could also be achieved.

Immersion and research

In order to create something truly inspiring you have to understand the client and their business, and immerse yourself in the product and their customers. For our lucky team, this began by experiencing the joy of a 300 acre park full of wondrous walks, exotic flowers, ancient trees and historical buildings.

Thereafter we interviewed stakeholders, and analysed the current site structure and content. Using a ‘Mobile First’ approach, we ran workshops with stakeholders to devise a new, optimised site structure with improved content hierarchy. In doing do we combined many pages, reduced wordy copy writing and simplified seven subsections into three.

Sketches, wireframes and design concepts

Working collaboratively as a team with the client, we quickly sketched up some page layouts, exploring early on how the responsive elements to the design might work. These were then formalised into some classic wireframes for ease of communication of hierarchy and content (but not layout).

Alongside wireframing, we started high level visual exploration. Taking the latest Kew branded print material (which was lovely), we created element collages, explored patterns, relationships between text, imagery, iconography to start to build a visual language for the pilot. Once more, working with the team at Kew we iterated these into higher level visuals and honed them in to more specific page level patterns.

Much of our design work explored how to convey the grandeur of the gardens, looking closely at imagery, displaying wide angled photography, simple contextual maps depicting location and scale.

Development and device testing

As the deadlines were tight, time could not be wasted within a graphics package. Taking the solid pattern foundation and agreed wireframes we decided all further design decisions should be taken in the browser and so we began coding up the prototype.

Getting key functions such as multi-level navigation into code early, we could quickly identify issues and within a few iterations we were able to improve the original design, dramatically reducing time to delivery.

Combining our expertise with the experience of our friends at Yiibu, and our trusty device lab, we were able to test rigorously and refine the interaction experience across a wide range of devices.

Pattern portfolio and delivery

Ultimately we delivered a pattern portfolio of pages and components which our colleagues at Code for the People worked into a Wordpress-driven CMS. This enabled a flexible editing environment for Kew content publishers and meant we could get the pilot up and running with maximum ease and speed.

We’re delighted to say the pilot site we designed achieved its long term goal of showing the way forward for a responsive design to be rolled out across the entire site and for all devices.