In October, we announced the winner of Adobe's Cutting Edge Award Project of the Year 2014, after a four week public vote.
My thoughts when we awarded this site the Project of the Week in July 2014:
"I've always said that the simplest ideas have the greatest impact. This project certainly does convey the frightening reality of global warming in a way that everyone can finally relate to as every visitor to this site has the option to input their own address and see what global warming could create on their own doorstep. A unique, brilliantly executed and unforgettable project." Rob Ford, FWA Founder.
I caught up with the winning team and asked them for a few insights...
What did you want to accomplish with the site?
We thought that the only way to make people care about an issue that’s far away from their everyday reality was to bring it right to their doorstep.
By combining Web GL and Google Street View, we wanted to bring the visitors the psychological punch of this frightening reality.
They would type any location, even their own home, and see the catastrophic effects of climate change made personal.
What technical challenges did you encounter (and how did you solve them?
World Under Water looks like Street View, but this is technically not Street View for the simple reason that we cannot do that kind of hack on the official Street View experience.
That was the first challenge, and we solved it by using Three.js to create a 3D sphere in which we stitched together the images composing the original Street View panorama experience.
What did winning the Adobe Cutting Edge Award, Project of the Year mean to the team and also the client?
“The team has been on a high since we launched the campaign. This success is the result of a huge effort across all disciplines in the agency, so we are delighted to have won this prestigious accolade. This is the ultimate proof that collaboration is key. There was also a lot of instinct involved in building the site, proving that spontaneity and agility can result in outstanding work that matches the needs of the world today.” – Laurent Thevenet, Technology Director, BBDO and Proximity SingaporeTools used
Beyond the UI that was conceptualised in Photoshop, we built World Under Water with our hands, a few terminal windows and our respective code editors (Sublime Text and Atom).
World Under Water lives on Amazon Web Services S3 and deployment was automated via Grunt, GIT and DeployHQ. Scaling was a no-brainer with Amazon Web Services global CDN.Three hot facts
- 1 week is the time it took to put a working version together. There was no proper UI yet and we had to manually enter GPS coordinates to test it. After design, the amount of code remains at a low 5,000 lines.
- Android devices and Oculus Rift! It is not well known but World Under Water had a working mobile web version at launch (with only the 12 main presets available). It is also now working on iOS 8 in which Apple has activated WebGL. For Spikes Asia 2014, we also made a special version of World Under Water that works with Oculus Rift DK2 (only on Chromium that has early support for VR headsets).
- We have achieved 3.5M pageviews and 1M custom locations worldwide under water.