Interactive website supporting a nationwide public awareness campaign
A week before the legalization of cannabis in Canada, Tweed, Uber and MADD Canada launched a nationwide “Don’t drive high” campaign, urging the public to never drive high, and suggesting 101 things to do instead. The campaign used a humorous tone to convey the “don’t drive high” message.
An immersive web experience was the central hub of the campaign. On the website users could find a list of 101 things to do instead of driving high, but also an interactive bubbles game where they could blow and pop bubbles, and of course educational content. It also had to offer a limited amount of Uber promo codes which users could redeem upon visiting the site.
Implementing a purposeful web experience Cossette, an innovative Marketing & Communications Agency, approached us looking for a technical partner capable of developing the engaging state-of-art web experience. The experience was to serve as the central hub of the campaign. Our role as Cossette's technical partner was to implement the campaign design and handle the execution of the UX.
Meeting tight deadlines with Agile management As the campaign had a hard launch date, we faced an aggressive development timeline. To meet the tight time frame, and manage ongoing conceptual changes, we incorporated Agile management to assist, allowing us to manage extensive changes and project dependencies. Working together as a team, we successfully developed and launched the website in only 1.
Key feature – an interactive bubble game An important feature of the website, aimed to occupy users’ attention and give them something to do instead of driving high, is a bubble game. It’s an interactive experience using a device’s microphone (WebAudio API) and motion graphics (WebGL and ThreeJS). Every time a user blows into their microphone, new bubbles appear on the screen and, if their heart desires, they can click to pop them.
Quick, high quality code with a React boilerplate To develop the project quickly without compromising the quality of the code base, we used our own, production-ready React boilerplate. For building the frontend, we chose React JS, with Babel as the JavaScript (ES6) compiler. This would ensure the website was still fast despite having numerous components, including the interactive bubble experience.
Preparing for heavy spikes of traffic with AWS To prepare for increased traffic expected right after campaign launch we used Amazon Web Services, such as Lambda and Relational Database Service (RDS). Both services assured scalability of the database’s compute and storage resources in response to current capacity. An immersive experience reaches thousands of Canadians In the end, we delivered an immersive interactive experience under an incredibly tight timeline, and helped Canadians realize there are 101 better things to do when they’re high instead of driving.
__> Technologies & Expertise
_> See how we've applied our expertise
