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.
Cossette, an innovative Marketing & Communications Agency, approached us to collaborate on a web experience to serve as the central hub of the campaign: DontDriveHigh.ca. Our role as their technical partner was to implement the campaign design, and handle the execution of the UX.
The campaign used a humorous tone to convey the “don’t drive high” message. The website had to incorporate this tone, and perform well under heavy spikes of traffic coming in after its launch.
On the website users could find a list of 101 things to do instead of driving high, including a game where you could pop some 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.
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.
As the website was a part of a nationwide public awareness campaign linked to cannabis legalization in Canada, it has to handle increased traffic. For that, 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.