Responses by Pier-Luc Cossette, designer and creative developer, Locomotive; and Thien Vu Dang, founder and artistic director, MAPP_MTL.

Background: “Welcome to the immersive site dedicated to the visual identity of the ninth edition of the MAPP_MTL 2024 festival, a collaborative effort by Baillat Studio and Locomotive, held from September 24 to 28, 2024,” says Dang. “Immerse yourself in the world of Montréal’s international projection mapping festival, returning for its ninth edition under the theme of ‘perspectives.’ Get ready for an eclectic program combining innovative projection mapping, captivating electronic music performances, food kiosks and creative workshops in a neighborhood festival atmosphere.

“Perspectives is an invitation to dive into the complex intertwinings of multiple perceptions of reality, in a world where advancements in artificial intelligence are shaking up our paradigms,” Dang continues. “Our perspectives intertwine, overlap and sometimes clash, forming a tumultuous kaleidoscope of subjective truths.”

Design core: “The core of the website lies in its intuitive navigation throughout the experience, featuring microinteractions that guide users in exploring the 81 available combinations,” says Pier-Luc Cossette. “We effectively balanced a more ‘brutalist’ design style with thoughtful microinteractions to create an engaging experience.”

Favorite details: “We take pride in how the team achieved a seamless flow on both desktop and mobile devices, especially since the majority of users will likely merge images on their phones,” Cossette explains. “This responsiveness ensures that the site is accessible and enjoyable, regardless of the device being used. The combination of design elements and user-centric functionality enhances the overall experience.”

Challenges: “Creating an engaging and intuitive interface for users to select and merge images, displaying the resulting image,” says Cossette. “This feature involved a complex two-column scrolling system, where each column moved independently at different speeds and directions. The goal was to let users easily browse images, view image previews and make selections to create their own unique fusion. Developing this asynchronous scrolling mechanism while ensuring fluidity and responsiveness presented a significant technical challenge. Achieving seamless synchronization between the columns while maintaining a smooth user experience was essential, as this feature became central to the site’s visual appeal and usability.”

Time constraints: “Time constraints were another critical factor,” says Cossette. “We had only fourteen days to complete the entire project—from concept to design and development—to meet the festival’s deadline. The team collaborated effectively across all areas to generate ideas and solutions that allowed us to deliver the project on time.”

Navigation structure: “The site’s navigation was designed to be simple, fast, and efficient,” Cossette explains. “Our primary focus was on creating an experience centered around image selection and fusion. The navigation structure guides users through selecting images and viewing the fusion results, which are displayed in a modal window where they can explore the details of each merged image. Users can then quickly return to make another fusion, encouraging them to explore the 81 possible combinations stored in a dedicated results page.

“Additionally, we placed a separate call to action for the Information section, where users can access essential details about the festival,” adds Cossette. “This structure keeps the focus on the interactive experience while ensuring that practical festival information remains easily accessible.”

Technology: “The front end of the site was developed using Astro, GSAP, Locomotive Scroll and Tailwind CSS; these tools allowed us to create smooth animations that add depth and dynamism to interactions while maintaining optimal performance across devices,” says Cossette. “For the back end, we used Sanity as our CMS, which enabled flexible content management and seamless integration with our front-end framework. The final site was deployed on Vercel, ensuring efficient performance and scalability.”