Économie sociale · Mobilité durable

Cyclochrome 

Conception d'un site WordPress pour une école-entreprise d'économie sociale — architecture multi-audience pour des formations professionnelles, des services de réparation et une mission d'insertion socioprofessionnelle des jeunes.
Client
Cyclochrome
Secteur
Économie sociale · Mobilité durable
Services rendus
Conception de site web · Hébergement
Technologies
WordPress · Booxi · GTM · Mailchimp
Année
2017 à aujourd'hui
Le client

Le client

Atelier de réparation, école de formation et acteur d'insertion socioprofessionnelle, une organisation à vocation triple, établie sur le Plateau Mont-Royal depuis plus de 16 ans.

CycloChrome est une école-entreprise d’économie sociale établie sur le Plateau Mont-Royal à Montréal, au 160 rue Saint-Viateur Est. Depuis plus de 16 ans, l’organisation allie deux vocations indissociables : un atelier de réparation de vélos ouvert au public, et un centre de formation professionnelle en mécanique vélo. Elle détient notamment le premier programme d’attestation d’études professionnelles (AEP) en mécanique vélo au Canada — une certification reconnue par le marché du travail.

Sa mission sociale est au cœur de tout : lutter contre le décrochage scolaire, favoriser la persévérance et accompagner l’insertion socioprofessionnelle des jeunes. CycloChrome sert simultanément les cyclistes montréalais qui cherchent une réparation rapide ou une mise au point, les particuliers qui veulent apprendre la mécanique vélo, les entreprises qui organisent des journées bien-être avec unité mobile, et les étudiants qui visent une certification professionnelle reconnue.

Le mandat

Le mandat

Concevoir un site pour une école-entreprise d’économie sociale, c’est concevoir pour plusieurs organisations à la fois. CycloChrome est simultanément un atelier de vélo (réparations, diagnostics, reconditionnement de moteurs électriques), une école (formations individuelles, AEP certifiante, cours en entreprise), une boutique et un acteur de mobilité durable avec des unités mobiles. Chaque volet a ses propres audiences, ses propres appels à l’action et sa propre logique de navigation.

Le défi central était de créer une architecture d’information qui reflète cette complexité sans la projeter sur le visiteur — chaque personne qui arrive sur le site doit trouver son chemin rapidement, qu’elle cherche à faire réparer son vélo, à s’inscrire à une formation ou à organiser une journée corporative. En parallèle, la mission sociale de l’organisation devait être lisible et crédible dès les premières secondes, sans noyer les informations pratiques.

Priorité 01
Structurer la navigation par audience, pas par département

Organiser le contenu selon les intentions de visite réelles — formations, réparations, services aux entreprises — plutôt que selon la structure interne de l’organisation, pour que chaque visiteur trouve son chemin en moins de deux clics.

Priorité 02
Intégrer les réservations en ligne pour les formations et les services

Connecter la plateforme de réservation Booxi directement dans le parcours de l’utilisateur, pour qu’un cycliste puisse réserver une réparation ou qu’un étudiant puisse s’inscrire à une formation sans quitter le site ni envoyer un courriel.

Priorité 03
Rendre la mission sociale visible et crédible

Présenter l’ADN d’économie sociale de CycloChrome — lutte contre le décrochage, insertion socioprofessionnelle, mobilité durable — de façon à inspirer confiance chez les partenaires institutionnels et à différencier CycloChrome d’un simple atelier de vélo commercial.

Résultats

Le site, en chiffres.

01
3
audiences distinctes servies
cyclistes, étudiants et entreprises — chacun trouve son chemin en une navigation
02
1er
programme AEP en mécanique vélo au Canada
une certification professionnelle reconnue par le marché du travail
03
9 ans
de partenariat continu avec l'agence
conception, hébergement et maintenance depuis 2017
04
1
intégration Booxi sans friction
réservations et inscriptions directement dans le parcours utilisateur
Design & UX

Design et architecture d'un site multi-audience

Une organisation, quatre vocations, trois types de visiteurs. Une architecture qui guide chacun vers son chemin sans lui faire porter la complexité de l'organisation.

Concevoir pour CycloChrome, c’est concevoir pour plusieurs organisations à la fois : un atelier de réparation, une école certifiante, un service aux entreprises et un acteur de mobilité durable. Le défi central était d’organiser cette complexité selon les intentions de visite réelles plutôt que selon la structure interne de l’organisation. Un cycliste du Plateau qui veut une mise au point, un directeur RH qui évalue une journée bien-être mobile et un jeune qui explore la certification AEP ne partagent pas le même parcours — et le site ne devait pas les forcer à se croiser.

Infrastructure

Infrastructure haute performance.

Le site de CycloChrome est un outil opérationnel du quotidien : les inscriptions aux formations, les réservations de réparation et les demandes de services aux entreprises y transitent en continu via l’intégration Booxi. L’infrastructure doit être fiable et disponible en tout temps, particulièrement en début de saison vélo lorsque la demande pour les formations et les réparations est à son pic.

Google Tag Manager est également en place pour permettre le suivi des conversions et l’optimisation des parcours utilisateurs au fil du temps.

Couche 01
Hébergement WordPress haute performance

Serveurs canadiens — temps de réponse rapides sous charge élevée. Latence minimale pour les visiteurs du Québec et du reste du Canada.

Couche 02
CDN Cloudflare

Le contenu statique est distribué depuis des serveurs proches de chaque visiteur, partout au Canada. Réduction massive de la charge serveur sur les pics.

Couche 03
LiteSpeed Cache

Service de milliers de pages simultanément sans solliciter WordPress à chaque requête. Performance constante même en plein rush médiatique.

Couche 04
Google Tag Manager

Déploiement centralisé de tous les scripts de suivi sans intervention développeur. Gestion des conversions et des balises marketing en autonomie.

Stack technique :
WordPress ACF Pro Booxi Mailchimp Google Tag Manager LiteSpeed Serveurs canadiens