Étude de cas, projet client

Espace Conduite

Quatre agences, un seul site, et un gérant qui le tient à jour sans moi.

Refonte complète de la vitrine d’une auto-école nantaise en train de quitter son ancien réseau. Thème WordPress écrit de zéro, sans constructeur de pages, avec une administration taillée pour son métier : tarifs, horaires, équipe, offres et pièces à fournir se changent sans écrire une ligne de code.

Un projet similaire ?

En clair

Une auto-école nantaise avait besoin d’un site pour ses quatre agences, chacune avec ses horaires, ses tarifs et ses avis. J’ai fait le site, et une administration sur mesure derrière : le gérant y change ce qu’il veut sans avoir à me rappeler.

La suite rentre dans le détail technique.

Le point de départ

Espace Conduite appartenait à un ensemble dont le site hébergeait aussi ses agences. En s’en séparant, l’auto-école perdait du même coup sa vitrine, ses tarifs en ligne et le formulaire par lequel arrivaient ses inscriptions. Il fallait tout reconstruire, et vite.

La difficulté ne tenait pas au site d’auto-école en lui-même, mais aux quatre agences qui ne se ressemblent pas : horaires différents, séances de code en salle propres à chacune, numéro d’agrément préfectoral distinct, une seule qui propose la handi-conduite, et quatre fiches Google Business avec quatre notes. Il fallait pourtant que l’ensemble se lise comme une seule marque, sans donner l’impression de quatre sites collés ensemble.

Avant de chiffrer quoi que ce soit, j’ai mené un entretien guidé avec le gérant pour faire sortir ses attentes réelles, et épluché l’ancien site pour lister ce qui méritait d’être gardé. Le devis est arrivé une fois ce travail fait.

Les contraintes posées

Trois règles posées au démarrage, tenues jusqu’à la livraison.

Trois couleurs au total Le blanc, le rouge de la marque et le noir. Toute la hiérarchie visuelle devait tenir avec ces trois-là, y compris sur les sections sombres où chaque élément doit rester lisible.
Aucun constructeur de pages Un éditeur visuel aurait donné au client la liberté de tout casser, et à moi une dette de maintenance. Le thème est écrit à la main, et l’administration lui pose des questions de son métier au lieu de lui présenter des colonnes vides à remplir.
Zéro donnée en dur Pas un tarif, pas un horaire, pas une adresse écrits dans le code. Toute information visible sur le site se modifie depuis l’administration.

Le détail du chantier

Quatre pièces valent d’être détaillées, parce que ce sont celles qui ont demandé des arbitrages.

Catalogue

Un catalogue à deux niveaux

Une auto-école ne vend pas « le permis B ». Elle vend le permis B en boîte manuelle, en boîte automatique, en conduite accompagnée, en conduite supervisée, la régularisation d’une boîte auto vers la manuelle, et le quadricycle. Côté moto, c’est pareil, du BSR à la passerelle A2 vers A.

Chaque page de permis contient donc une liste de sous-types, et chaque sous-type porte son propre parcours, ses tarifs et ses pièces à fournir. À l’écran, ça donne des onglets : le visiteur compare sans jamais changer de page.

Tarifs

Un calcul, plutôt qu’un tableau de prix figé

Les frais d’évaluation, de dossier et de code sont identiques dans les quatre agences. Ils se saisissent une seule fois dans les informations communes, puis se cochent dans chaque formation qui les inclut. Le reste tient dans des lignes libres, propres à chaque sous-type.

Le jour où le prix de l’évaluation change, le gérant le corrige à un seul endroit et tous les totaux concernés suivent.

Arbitrage

J’étais parti sur des champs de prix fixes, un par type de frais. Plus simple à coder, plus rapide à remplir.

J’ai basculé sur des cases à cocher et des lignes libres au troisième cas particulier. Un champ fixe suppose qu’on a prévu tous les cas à l’avance ; dès qu’une formation porte une ligne que les autres n’ont pas, il faut retoucher le code. La structure ouverte a coûté une heure de plus, et m’évite d’être rappelé à chaque nouvelle offre.

Preuve sociale

Rassembler les avis Google des quatre agences

Chaque agence a sa fiche Google, sa note et ses avis. Le site les réunit dans un seul carrousel, où chaque avis reste rattaché à l’agence qui l’a reçu. La note globale et le nombre total d’avis viennent de Google sans être retouchés.

Arbitrage

Interroger l’API à chaque visite était exclu : c’est lent pour le visiteur, et surtout inutile, puisque les avis bougent de quelques unités par semaine. Les résultats restent donc en cache 24 heures, avec un bouton de purge dans l’administration pour ne pas avoir à attendre quand on veut vérifier quelque chose.

Selon la configuration, le carrousel peut par ailleurs se remplir depuis plusieurs sources, et jusqu’à une liste de secours saisie à la main si l’API n’est pas branchée. Toutes passent par le même traitement : sans ça, l’affichage changerait au gré d’un réglage que le client ne voit pas.

Conversion

Un formulaire écrit dans les mots de l’auto-école

Le visiteur choisit sa formation dans le vocabulaire du métier, puis son agence, avec une option « peu importe, je ne sais pas encore » pour ne bloquer personne. Le téléphone est obligatoire, l’e-mail non : sur cette clientèle, l’appel aboutit là où le courriel se perd.

La demande part ensuite par e-mail ou par WhatsApp, au choix. Le second bouton a été ajouté après une remarque du gérant, qui reçoit déjà l’essentiel de ses contacts par là.

Le site

Trois vues, dont celle qui compte le plus pour un client : l’administration.

Page d’accueil du site Espace Conduite — L’accueil et ses formations.

Page d’une formation, ses sous-types et le détail des tarifs — Une page de permis, avec ses sous-types.

Interface d’administration du thème, côté client — Le back-office, là où se joue l’autonomie du gérant.

Le résultat

Le site est livré et il tourne. Il attend son domaine définitif, et le lien public arrivera avec lui. Autant l’écrire que de laisser croire à une mise en ligne qui n’a pas eu lieu.

Ce que je regarde est ailleurs : depuis la recette, le gérant a ajouté ses offres du moment, ses partenaires et ses photos d’agences sans m’appeler une seule fois. C’était l’objectif du projet, bien avant le rendu visuel.

Le chantier suivant est déjà cadré : la mise en ligne sur le domaine, les redirections depuis l’ancienne adresse, et le référencement local des quatre agences.

← Tous les travaux Projet suivant : Argentique