Campaign Case Study.


CAMPAIGN IDEA:

Clever Buoy is the world's first smart ocean buoy that detects sharks through sonar, and sends instant alerts to lifeguards via the Optus Network.


OBJECTIVE / GOAL:

The online objective was simple - create a destination that communicates what the Clever Buoy project is, which generates positive sentiment and social support for this revolutionary initiative.


EXECUTION:

The Clever Buoy parallax site takes the user on a unique fly-through experience designed to create an engaging narrative that encourages absorption and further interaction. This approach allowed the site to visually represent both the natural benefits and high-tech components coherently.

-1.gif

The Clever Buoy project is highly innovative. With this in mind it wasn’t enough to simply adopt a generic mobile first approach. What we created was a mobile, tablet and desktop experience that pushed the boundaries of every available technology.


THE BUILD:

The site is built with HTML5 technologies with a strong reliance on CSS3. Animations and transitions are rendered on the GPU to maximise performance on mobile and desktop. Browsers that had no support for HTML5 and CSS3 would revert to more traditional animation techniques with JavaScript to increase the reach of viewers. SVG animations are also utilised to add extra functionality where not possible with regular HTML techniques. An adaptive approach was taken over a responsive design as to not compromise on functionality for each platform and legacy browsers. A Node.js-powered backend detects browser capabilities and renders the best experience possible to the user.


MOBILE FIRST:

Given Optus is a mobile network provider we knew the mobile platform was really important. Rather than adapt the site from desktop with reduced functionality, we took a mobile-first approach. This ensured the experience on mobile was as rich and as engaging as it's desktop counterpart.

Mobile Walkthrough Film.


INTEGRATED VIDEO:

The Clever Buoy launch video expands from the sites fly-through storytelling. It showcases the Art Direction through animation, and offers an alternate method to absorb the information about Clever Buoy project.



MOBILE RESULTS:

CAMPAIGN RESULTS:

INNOVATION MILESTONES: