Bristol based artist Luke Jerram has many exciting projects that have become world renowned, perhaps none more so than his Play Me, I’m Yours installation. Since 2008, Luke has been placing pianos all over major global cities with the simple instruction ‘Play Me, I’m Yours’;  inviting the public to play them and share their experience.

We recently had the great pleasure of redesigning the Play Me, I’m Yours website www.streetpianos.com, gearing up for 8 dates across the world in 2012 including LA, London, Paris and Hangzhou, China. The site was already attracting over 1 million visitors a year, allowing people to find a specific page for pianos in their city and upload their own photos and video.

Our role was to make it more socially engaging by improving the interface, restructuring certain areas of the site and creating a more visual and interactive experience. We worked closely with the existing Watershed based developer Oliver Humpage and enlisted the great design skills of Simon Mosse. We used modern technologies such as MasonryJS, expanded Google Maps integration and wrapped it around the existing WordPress platform.

The site launched in April in time for the LA installation and the response has been amazing, with 1000′s of photos and videos uploaded over the last few months. This week London, Paris and Geneva all kick-off, so we thought we’d take you behind the scenes and give you a visual guide of how the site came together…

 

First we created hand-drawn wireframes, working closely with Simon, Luke and Oliver to discuss ideas, layouts and user journeys.

 

Next steps were to create a working prototype using wireframing tool Hotgloo. This allowed us to rapidly create a working version of the site, solving many user experience issues early. It gave Luke a great idea of how the site would work and gave Simon and Oliver a blueprint to work from.

 

Key to the design was the Google Map integration, making it easy for people to find the piano they had visited or played. On the city page above they can click an area of the city to see a list of pianos. Using some great Javascript skills Oliver enabled the map to update on the fly as users changed areas, creating a slick user experience.

 

The piano pages themselves have a very simple pop-up upload form and we used Masonry JS to automatically organise user photos, videos and tweets. We wanted to create a rich, ever-growing patchwork of content that didn’t need admin involvement for the layout.

 

Once the prototype was completed and approved, Simon started the design. He created a colour scheme, textures and other styles to produce the rich, graphic user experience that Luke wanted. We loved his approach and by collaborating with Simon we created something that looked very distinctive.

 

The visuals tied in really nicely with the Google Maps, giving the site a ‘worldly’ feel to match the artwork and not only help users find where pianos were but to also quickly upload their newly created photos and videos to the relevant page.

 

Oliver’s work on the integration was fantastic, taking Simon’s designs and our ideas into the real world. Tightly integrating Masonry JS, Google Maps and a lot of other Javascript magic with WordPress delivered a solid, slick user experience that is currently getting 1000′s of visitors a day.

We loved working on this project – it was a great collaborative effort between several Bristol creatives.

Checkout the site at www.streetpianos.com and look out for the pianos in a city near you.