Ça roule Raoul
Ça roule Raoul
Services
WordPress
Application web
2026
mandat
On a été mandaté pour concevoir et développer l’entièreté du microsite, en collaboration étroite avec le studio Bifurk, qui a pris en charge la direction artistique, les illustrations et les animations. Notre rôle couvrait le développement front-end et back-end, l’intégration des assets animés, la logique interactive du quiz-avatar, la mise en place du formulaire de concours conforme à la Loi 25, ainsi que l’hébergement et le déploiement de la plateforme.
Objectifs
- Sensibiliser les jeunes aux règles de sécurité liées aux ATPM de façon engageante et mémorable
- Créer une expérience 100 % mobile-first adaptée aux habitudes de la cible
- Collecter des données utilisateurs de manière sécurisée dans le cadre d’un concours
- Livrer une plateforme performante, accessible et conforme aux exigences légales québécoises
Éduquer sans faire la morale
Le défi central de ce mandat était pédagogique autant que créatif : comment transmettre de l’information réglementaire à des jeunes sans tomber dans le panneau du « message de prévention » qu’on fait semblant de lire ? La réponse, c’est de faire du contenu éducatif le moteur même du jeu.
Chaque choix dans le quiz : personnage, véhicule, casque, vitesse, parcours est porteur d’une règle réelle. Une bonne réponse est célébrée et expliquée. Une mauvaise réponse est corrigée, toujours avec humour et sans jugement. L’utilisateur apprend les règles sur les ATPM sans jamais avoir l’impression qu’on lui fait la leçon.
Côté développement, ça s’est traduit par une logique de quiz à états multiples où chaque choix est typé (bonne ou mauvaise réponse) et déclenche un feedback différent. On a construit un système de gestion d’état qui suit le parcours complet de l’utilisateur à travers les cinq étapes, mémorise ses sélections et assemble dynamiquement l’avatar final en fonction des combinaisons choisies. Chaque réponse incorrecte bloque la progression et affiche l’explication avant de permettre à l’utilisateur de sélectionner à nouveau. Une mécanique simple en apparence, mais qui demandait une architecture de flux rigoureuse pour éviter tout court-circuit dans le parcours.
Une expérience construite sur la motion
L’un des éléments les plus distinctifs du projet est son univers visuel : des dizaines de stickers animés, des personnages hauts en couleur, des transitions dynamiques qui donnent au microsite l’énergie d’une app grand public plutôt que d’un site institutionnel. L’expérience devait être festive, spontanée, vivante. C’est l’identité visuelle de Bifurk qui donne le ton, et c’est cette énergie-là qu’on devait absolument préserver dans le navigateur.
Côté développement, intégrer autant d’assets animés sans nuire à la performance de la plateforme ET à l’expérience utilisateur était un vrai enjeu technique. On a travaillé avec des GIFs optimisés et des formats WebM là où c’était pertinent, en appliquant du lazy loading pour que les ressources ne se chargent qu’au moment où elles entrent en compte. L’ensemble tourne sur un plan d’hébergement avec CDN activé, ce qui assure des temps de chargement stables peu importe d’où l’utilisateur accède au site. Le résultat : une expérience visuellement dense qui reste légère et fluide sur mobile, même sur des connexions variables.
Une collaboration créative à son meilleur
Ça roule, Raoul est aussi un beau cas de collaboration entre deux expertises complémentaires. Bifurk apportait la vision artistique et le storytelling visuel; TREIZE apportait l’architecture technique et la capacité à donner vie à cette vision dans un navigateur.
Ce type de mandat, où le design pilote les décisions techniques et non l’inverse, demande une communication serrée et une grande confiance mutuelle entre les équipes. Le résultat prouve qu’on peut faire de la sensibilisation publique avec autant de soin et d’ambition qu’un produit commercial.
Côté développement, travailler à partir des wireframes et des assets livrés par Bifurk impliquait une intégration pixel-perfect dans un environnement qu’on construisait en parallèle. On a développé le microsite sous WordPress avec un thème sur mesure. Aucun constructeur de page et aucun compromis sur la structure du code pour garder un contrôle total sur le rendu et les performances. La collecte de données du concours a été sécurisée via Gravity Forms avec chiffrement des champs, reCAPTCHA et gestion explicite du consentement, le tout conforme aux exigences de la Loi 25.
