Kew Gardens

Clearleft created a responsive pilot, helping bring information about visiting Kew Gardens to its rapidly growing mobile audience.

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


Related Projects

Royal Borough of Kensington and Chelsea

Royal Borough of Kensington and Chelsea

Clearleft worked with the London council to fundamentally change their approach to digital publishing, resulting in hugely increased user satisfaction and a much easier internal workflow.

Code For America

Code For America

We created digital brand consistency with a detailed front-end style guide.

UNICEF UK

UNICEF UK

Clearleft helped this children’s charity bring its content to a mobile audience.

Matter

Matter

Ev Williams (cofounder of Twitter) loved this long-form content site so much, he bought it.