Don't Drive High
Frontend Development
Backend Development
UI/UX Design
Node.js
Amazon Web Services
React
WebGL
Three.js
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.
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.
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.5 months.
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.
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.
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.
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.
