A week, before cannabis was legalized in Canada, Tweed, Uber, and MADD Canada, launched a nationwide “Don’t drive high” campaign. The campaign urged the public not to drive high and suggested 101 things to do instead. It used a humorous tone to convey the 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 an 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 front end, 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 the increased traffic expected right after the 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.