ic_loader
Interactive Experience
Don't Drive High
Interactive website supporting a nationwide public awareness campaign.

Interactive web experience supporting nationwide 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.

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.

Services

Frontend Development / Backend Development / UI/UX Design

Tech

React JS + Node.js + WebGL + ThreeJS + Amazon Web Services

Scope of work

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.

The Tech

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.

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.

Don't Drive High - credits

Creative Treatment
Zbigniew Czarnecki
Tech Lead
Michał Kleszcz
Frontend Developer
Rafał Gruszecki
Frontend Developer
Tymoteusz Bleja
Frontend Developer
Wojciech Panek
Frontend Developer
Daniel Capeletti
Frontend Developer
Martin Kmieciak
Frontend Developer
Michał Kubiak
Junior Frontend Developer
Michał Plebański
UI/UX Designer
Jakub Paniączyk
Project Manager
Jan Rasiński
Project Manager
Aleksandra Leończyk
Production Support
Dominika Stefańska
Production Support
Tobiasz Jankowski
QA Manager
Dorota Zabielska
Junior QA Specialist
Olga Kamińska
Junior QA Specialist
Arkadiusz Buchholz
Senior DevOps Engineer
Mateusz Kubaczyk
DevOps Engineer
Mikołaj Młodzikowski

Agency: Cossette - credits

Global Chief Creative Officer
Peter Ignazi
Senior Art Director
Natasha Michalowska
Senior Writer
Cooper Evoy
Vice President, Client Lead
Michelle Perez
Vice President, Strategy
Paul Lawton
Group Account Director
Melissa Levenberg
Account Director
Shane Deen
Account Supervisor
Carleigh Sisson
Account Executive
Kimi Dang

Media Company: Cossette Media - credits

Chief Strategy Officer
Wes Wolsh
Vice President, Digital Solutions
Janice Liu
Senior Digital Manager
Sadie Simon
Media Supervisor
Mandi Koenigsberg
Senior Digital Planner
Andrew Cresswell
Senior Digital Manager
Paul Frickleton
Senior Platforms Manager
Erum Tayyab
Senior Insights Analyst
Carrie Bisnath
Programmatic Strategist
Howard Shaw

Clients​: Canopy Growth - credits

Chief Commercial Officer
David Bigoni
VP Brand Marketing and Innovation
Amy Wasserman
Creative Director
Jessica Hay
Senior Brand Manager
Eric Williams
Brand Manager
Gillian Henry

Clients​: Uber - credits

Head of Marketing, Canada
Lindsay Liptok
Senior Marketing Manager, CRM and Content
Erica Edwards
Marketing Manager, Campaigns
Ceili Hubbard
Marketing Manager, Canada
Melanie Boudreau
Unsupported browser
We recommend that you use one of these browsers. You can go to https://whatbrowser.org/ to update your browser.
Chrome 55+
Firefox 46+
Microsoft Explorer 11+
Microsoft Edge 13+
Safari 10+
This website require javascript in order to work properly.
Please enable JavaScript