Responses by Rob Sweetman, executive creative director, Kate Roland, associate creative director/copywriter and Andrea Tam, digital director, One Twenty Three West

Background: Canada Media Fund (CMF) launched a new campaign, MADE | NOUS, to change the way the world sees Canadian content and give the country’s amazing talent the credit they deserve. The campaign kicked off with TV spots that drove to the website, where Canadians could explore how much world-class content is made right here at home. The interactive MADE Map populates Canadian content landmarks based on the user’s coordinates; each piece of content is carefully curated to represent the best of the industry.

Highlights: An Interactive map that detects the user’s location and presents relevant Canadian film, TV and digital content in the area. Users are able to browse through interesting factoids on Canadian productions across Canada. Another feature is a tightly curated Content section, where we hand picked and researched top productions to provide a deeper look at what makes it Canadian.

Challenges: The site is heavy with images and transitional effects, so we used ShortPixel.com to compress all images and Webpack to combine the site CSS and Javascript, and lazy load on images. This way, the image size and load time would not compromise the user interaction with the site. Another challenge was curating the right content. Canada is home to some of today’s biggest film, TV and digital productions, and we wanted to ensure the information presented was interesting, and evoked a strong sense of Canadian pride.

Favorite details: We injected animation throughout the site’s transitions to bring a level of interest and finesse to the experience. We made sure the user interaction through desktop and mobile was optimized and focused on ease of use, as well as quick information consumption. We also showcased our national TV spot on the homepage, narrated by Christopher Plummer (EN) and Karine Vanasse (FR). The spots were launched during the 2019 Academy Awards broadcast.

Navigational structure: We wanted to challenge traditional navigation design for both desktop and mobile. For desktop, instead of fixing the navigation menu at one spot for all pages, we designed the menu so that it makes sense for each section. We added progress headlines for each section on the homepage as users scroll through, and also moved the menu access down to the bottom right so that users can quickly access other sections of the site without having to tap on top of the screen or go back to the top of page.

Technical features: This was a highly customized Wordpress site with a custom theme using Laravel Blade templates, PHP, SASS, Bootstrap 4 and extensive use of the Google Maps API. We used Barba.js for smooth page transitions and handled all page animations with the GSAP animation library.