Ça roule, Raoul
All good, Raoul
Education
WordPress
Application web
2026
Mandate
We were mandated to design and develop the entire microsite, in close collaboration with the studio Bifurk, which handled art direction, illustrations, and animations. Our role covered front-end and back-end development, integration of animated assets, the interactive quiz-avatar logic, implementation of the Law 25-compliant contest form, as well as hosting and deployment of the platform.
Objectives
- Raise young people’s awareness of ATPM safety rules in an engaging, memorable way
- Create a 100% mobile-first experience aligned with the target audience’s habits
- Collect user data securely as part of a contest
- Deliver a high-performing, accessible platform that complies with Quebec legal requirements
Educate without preaching
The central challenge of this mandate was as much educational as it was creative: how do you convey regulatory information to young people without falling into the trap of the “prevention message” everyone pretends to read? The answer was to make educational content the very engine of the game.
Every choice in the quiz—character, vehicle, helmet, speed, route—carries a real rule. A correct answer is celebrated and explained. An incorrect answer is corrected, always with humour and without judgment. Users learn the rules for ATPM without ever feeling like they are being lectured.
From a development standpoint, this translated into a multi-state quiz logic where each choice is typed (correct or incorrect) and triggers different feedback. We built a state-management system that tracks the user’s full journey across the five steps, stores their selections, and dynamically assembles the final avatar based on the combinations chosen. Each incorrect answer blocks progress and displays the explanation before allowing the user to select again. A mechanism that seems simple on the surface, but required rigorous flow architecture to avoid any short-circuit in the journey.
An experience built on motion
One of the project’s most distinctive elements is its visual world: dozens of animated stickers, colourful characters, and dynamic transitions that give the microsite the energy of a consumer app rather than an institutional website. The experience needed to feel festive, spontaneous, and alive. It is Bifurk’s visual identity that sets the tone, and it is that energy we absolutely had to preserve in the browser.
From a development standpoint, integrating that many animated assets without compromising platform performance AND the user experience was a real technical challenge. We worked with optimized GIFs and WebM formats where relevant, applying lazy loading so resources load only when they come into play. Everything runs on a hosting plan with a CDN enabled, ensuring stable load times regardless of where users access the site from. The result: a visually rich experience that remains light and smooth on mobile, even on variable connections.
Creative collaboration at its best
All good, Raoul is also a strong example of collaboration between two complementary areas of expertise. Bifurk brought the artistic vision and visual storytelling; TREIZE brought the technical architecture and the ability to bring that vision to life in a browser.
This type of mandate—where design drives technical decisions, not the other way around—requires tight communication and strong mutual trust between teams. The result proves that public awareness can be delivered with as much care and ambition as a commercial product.
From a development standpoint, working from the wireframes and assets delivered by Bifurk meant pixel-perfect integration in an environment we were building in parallel. We developed the microsite in WordPress with a custom theme. No page builder and no compromises on code structure, to maintain full control over rendering and performance. Contest data collection was secured via Gravity Forms with field encryption, reCAPTCHA, and explicit consent management, all compliant with Law 25 requirements.
