Responses by Romain Avalle, technical lead and senior front-end developer, digital experience; and Marc-André Dandurand, creative director, digital experience, LG2.

Background: Environmental organization Canopy hopes to eliminate 1.3 billion tons of greenhouse gas emissions within the next ten years. The British Columbia–based organization, our first partner in the province, asked us to create a microsite and video to showcase its green initiative NEXT GEN SOLUTIONS. This initiative aims to use waste instead of forests to produce packaging and textiles. Recently, the initiative received a $60 million grant from TED Talk’s ‘Audacious Project’ to launch its operations.

Design core: “The site has been designed in two main sections,” says Marc-André Dandurand. “The first is a long page divided into subsections, starting with the mission, explaining the initiative and demonstrating the impact and the way to achieve it—all enhanced by rich, animated visual content. The second section uses an interactive map of a 3-D globe to show the data and discover the content in a more functional, factual way.”

Favorite details: “To have succeeded in explaining a complex project in a digestible way, especially the visual translation of a completely unintelligible data map into a 3-D globe in a simple, effective manner for users,” Dandurand says.

Challenges: “Time,” Dandurand states. “We decided to take a risk with the client and jump into this project on a very tight schedule. We had to go online at the same time as the TED Talk, which left us just two months to get everything done from creation to development. Not only that, but all our expertise groups had to work and advanced simultaneously to achieve this. From the creation of the overall idea and the message, through development, right up to going online.”

Navigation structure: “In order to optimize the user experience and improve search engine visibility, we developed a comprehensive navigation system for our 3-D map module,” says Romain Avalle. “Each distinct feature now has its own dedicated route, enabling seamless access and ensuring the best possible SEO. This thoughtful approach not only enhances the overall usability of our 3-D map but also increases the chances of our content being discovered and ranked higher in search engine results. By prioritizing SEO in our navigation design, we have taken a proactive step toward maximizing our online presence and providing an exceptional user experience for our audience.”

Technology: “This website has been meticulously crafted using Nuxt 3, a powerful framework that offers a seamless development experience,” Avalle says. “Leveraging DatoCMS, a headless CMS, we have seamlessly integrated dynamic content management, enabling easy updates and flexibility. By hosting the site on Netlify, we ensure reliable performance, scalability and efficient deployment. Moreover, the website’s 3-D component has been expertly built with three.js, a popular JavaScript library for creating immersive and interactive 3-D experiences.”

Special technical features: “During development, we extensively utilized CSS clip-path techniques to achieve stunning visual effects through masking,” says Avalle. “By leveraging this powerful feature, we created intricate and dynamic shapes, adding a touch of creativity and uniqueness to the design. Additionally, to optimize performance and reduce HTTP requests, we employed a texture-packer tool that efficiently packed all frame-by-frame image textures into a single binary object (bin OBJ) format. This approach not only minimizes the number of requests but also enhances loading times. Furthermore, we have integrated a GPS position management system into the CMS. By utilizing GPS coordinates, we ensure accurate and precise positioning of map elements, enhancing the overall functionality and usability of the website.

“To further enhance the website’s aesthetics, we implemented a custom Phong material that incorporates a shader. The shader lets us manipulate the map texture creatively, introducing captivating visual effects and adding depth to the overall design. We also integrated essential properties such as bump mapping and emissive mapping into the material. The bump mapping feature creates the illusion of texture and surface details, adding realism to the rendered objects. The emissive mapping enables certain elements to emit light for a dynamic visual experience. By combining these advanced material properties with our custom shader, we succeeded in creating a visually stunning, engaging website that surpasses traditional mapping techniques.”