Don't Drive High

Interactive website supporting a nationwide public awareness campaign

CATEGORY

Interactive Experience

CLIENT
Uber
YEAR

2018

SERVICES

Frontend Development
Backend Development
UI/UX Design

BACKEND

Node.js
Amazon Web Services

FRONTEND

React
WebGL
Three.js

An engaging campaign to raise public awareness

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.5 months.

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.

See also

Hyper - Mixed reality spatial design platform