Étude de cas
Garage Horizon Auto
Un site vitrine complet, une marketplace de véhicules d'occasion et un espace d'administration pensés pour un garage automobile — conçus par Capo Studio pour démontrer ce qu'une solution sur mesure peut apporter à votre atelier.
mot de passe garage2026
aucun identifiant — le lien reçu par le client
Ouvrez les deux : le devis envoyé depuis l'atelier apparaît côté client, et sa réponse revient aussitôt dans la gestion.
Marketplace + administration
1 semaine
14 pages + 15 écrans admin
Sur devis gratuit
Délai de conception et de développement, contenus fournis. Sur un projet client, il faut y ajouter la collecte des textes et photos et les allers-retours de validation — comptez de quelques jours à 1 à 2 semaines selon le projet. Voir le détail des délais
Garage Horizon Auto, un atelier multimarque à Villeurbanne
Pour cette étude de cas, nous avons imaginé un garage fondé en 2003 par Julien Moreau : cinq professionnels certifiés, un pôle carrosserie, une activité de vente de véhicules d'occasion depuis 2019, et une réputation bâtie sur la transparence des devis.
Comme beaucoup d'ateliers indépendants, Garage Horizon Auto gérait encore l'essentiel de son activité par téléphone et un site vieillissant, sans lien avec le sérieux réel de son atelier ni avec son stock de véhicules révisés.
Être trouvé localement
Apparaître en tête des recherches lorsqu'un automobiliste de Villeurbanne cherche un garage de confiance.
Rassurer sur les prix
La peur du devis surprise est le premier frein en mécanique : chaque prestation doit afficher un tarif clair dès l'accueil.
Désengorger le standard
Réduire les appels pour de simples demandes de créneau ou de devis, souvent reçus pendant les heures d'atelier.
Vendre les véhicules d'occasion
Donner une vitrine sérieuse au stock de véhicules révisés, avec fiches détaillées et essai réservable en ligne.
Valoriser l'équipe et l'atelier
Montrer un vrai atelier et de vrais mécaniciens certifiés, pas une simple liste de prestations anonymes.
Piloter l'activité au quotidien
Centraliser rendez-vous, demandes, stock de véhicules et contenu du site sans jongler entre plusieurs outils.
Ce que le projet devait accomplir
Sept objectifs clairs ont guidé chaque décision de design et de développement.
Identité éditoriale
Une direction artistique chaleureuse — ivoire, bleu nuit, terre cuite — qui évoque l’atelier indépendant où l’on explique, ni concession froide ni univers tuning.
Parcours clair
Accueil, services, véhicules, à propos, galerie, avis, contact — chaque page a un objectif précis.
Rapidité
Des pages rendues à l'avance et régénérées automatiquement, y compris le stock de véhicules.
Responsive
Un automobiliste cherche souvent un garage depuis son téléphone, parfois en panne : le site doit y être irréprochable.
SEO local structuré
Métadonnées, données structurées Schema.org et sitemap pour un bon référencement à Villeurbanne.
Marketplace véhicules
Un catalogue filtrable et triable, avec fiches détaillées et réservation d'essai en ligne.
Administration complète
Un espace pour gérer véhicules, services, rendez-vous, demandes et contenu éditorial du site.
Une visite guidée du site
Du premier clic à la réservation d'un essai, chaque page a un rôle précis. Les captures ci-dessous proviennent directement de la démonstration en ligne.
Première impression
Un accueil qui promet des réponses, pas des superlatifs
Le titre annonce la façon de travailler de l'atelier — « Votre voiture mérite des réponses claires » — suivi des trois réassurances qui pèsent réellement (devis expliqué, garantie 12 mois, note clients) et des deux actions attendues : obtenir un devis ou prendre rendez-vous.
Le visiteur comprend en quelques secondes comment le garage travaille, avant même d'avoir défilé la page.
Le parcours d'entrée
On entre par le symptôme, pas par le catalogue
Un automobiliste sait ce qu'il constate — un voyant, un bruit, une échéance — rarement ce qu'il faut réparer. Trois portes d'entrée le redirigent vers le bon service, puis une méthode en quatre temps (contrôler, expliquer, intervenir, vérifier) pose la règle du jeu : rien n'est engagé sans son accord.
Le visiteur n'a pas à traduire son problème en vocabulaire de mécanicien pour savoir quoi faire.
Les prestations
Douze prestations, classées par catégorie et tarifées
Entretien, sécurité, mécanique, confort, pneus, carrosserie : les douze prestations sont regroupées par catégorie avec un sommaire ancré, et chacune affiche sa durée moyenne et son tarif de départ. Un clic ouvre la fiche détaillée.
Le client arrive en rendez-vous déjà informé sur le prix, ce qui désamorce la méfiance classique envers un garage.
Fiche prestation
Les symptômes qui doivent alerter, avant même le tarif
Chaque fiche s'ouvre sur les signes concrets qui justifient l'intervention — « la pédale s'enfonce plus bas », « la voiture tire d'un côté » — puis détaille ce qui est inclus, la durée moyenne, le tarif de départ et la garantie de 12 mois.
Le client sait s'il est concerné avant de regarder le prix, et arrive avec une demande déjà qualifiée.
Véhicules d'occasion
Une vraie marketplace, pas une simple liste
Recherche par marque et modèle, filtres par carburant et boîte, tri par prix ou kilométrage : chaque véhicule affiche son statut (disponible, réservé, vendu) et un badge « coup de cœur ». Sous le stock, trois preuves rappellent ce qui est vérifié avant toute mise en vente.
Un visiteur retrouve en quelques secondes le véhicule qui correspond à son budget et son usage, sans appeler pour vérifier la disponibilité.
Fiche véhicule
Toutes les informations, y compris ce qui fâche
Contrôle atelier en 92 points, historique et documentation présentés, garantie mécanique, équipements — et un bloc de transparence qui annonce les points d'usure relevés plutôt que de les taire. Quand un véhicule n'a qu'une photo, le site le dit au lieu de dupliquer le même cliché.
Annoncer les défauts connus avant la visite installe une confiance qu'aucun argumentaire ne remplace.
L'histoire et l'équipe
Une équipe de cinq professionnels, pas un logo anonyme
Une frise chronologique retrace 20 ans de croissance (ouverture, agrément Bosch Car Service, pôle carrosserie, vente de véhicules, habilitation électrique/hybride), suivie des fiches de chaque mécanicien avec ses certifications.
La confiance se construit avant même le premier appel, sur la base de vraies compétences vérifiables.
Galerie
Des avant/après qui parlent plus que des mots
Réparations de carrosserie, atelier équipé, équipe au travail, véhicules d'exposition : une galerie filtrable par catégorie qui montre le savoir-faire plutôt que de le décrire.
Un curseur avant/après sur une réparation de carrosserie convainc mieux qu'un long paragraphe.
Avis clients
La preuve sociale mise en avant, pas cachée dans un coin
Seize avis vérifiés, une note moyenne affichée dès la page d'accueil, et une page dédiée qui détaille chaque témoignage avec la prestation concernée et sa date. Rien n'est laissé au hasard pour rassurer un nouveau client avant son premier contact.
UX — rendez-vous & devis
Un formulaire simple, une confirmation humaine
Le formulaire calcule les créneaux réellement disponibles à partir des horaires d'ouverture de l'atelier et des rendez-vous déjà enregistrés, et refuse les chevauchements. La confirmation, elle, reste humaine : sur un métier où une intervention peut déborder, l'équipe rappelle sous 48h plutôt que de figer un planning à la minute.
1. Choisir la prestation
Le client sélectionne le service concerné, déjà présélectionné s'il vient d'une fiche prestation.
2. Décrire son besoin
Coordonnées, véhicule concerné et disponibilités : un formulaire court plutôt qu'un appel obligatoire.
3. Choisir un créneau réellement libre
Les horaires proposés sont calculés à partir des heures d'ouverture de l'atelier et des rendez-vous déjà pris, avec détection des chevauchements — pas une liste d'horaires théoriques.
4. Confirmation par l'atelier
L'équipe confirme sous 48h : sur un métier où une intervention peut déborder, une validation humaine reste plus honnête qu'un planning figé à la minute.
Une expérience soignée sur tous les écrans
Un automobiliste cherche souvent un garage depuis son téléphone, parfois en panne sur le bord de la route. Le site doit y être aussi clair et rapide que sur desktop.
Desktop
Tablette
Mobile
Les services
Les véhicules
La prise de rendez-vous
Le contact
Un site utilisable par le plus grand nombre
La clientèle d'un garage automobile est large et variée : le site doit rester utilisable au clavier, avec un lecteur d'écran, ou par un visiteur sensible aux animations.
Navigation clavier complète
Le menu mobile est un vrai dialogue : focus piégé tant qu'il est ouvert, fermeture à la touche Échap, focus rendu au bouton d'ouverture — et absent du DOM lorsqu'il est fermé.
Contrastes mesurés, pas estimés
Chaque couple texte/fond a été calculé. Trois combinaisons sous le seuil AA ont été corrigées, dont le bouton d'action principal, passé de 4,27 à 4,89 pour 1.
Formulaires reliés à leurs erreurs
Chaque message d'erreur est rattaché à son champ, les champs portent le bon autocomplete, et les confirmations d'envoi sont annoncées aux lecteurs d'écran.
Contenu visible sans JavaScript
En-tête, titres de section et bloc de conversion final ne dépendent d'aucune animation pour s'afficher — et les apparitions au défilement se coupent si le visiteur a réglé « mouvement réduit ».
Rapide dès la première visite
Un automobiliste qui attend qu'une page de véhicules d'occasion charge passe au site concurrent. La vitesse fait partie de l'expérience de vente.
Rendu incrémental (ISR)
Les pages de contenu et le stock de véhicules sont pré-calculés puis régénérés automatiquement : rapides à charger, toujours à jour.
Images converties en WebP
Les 31 photos du site ont été converties en WebP : le dossier servi passe de 63 Mo à 2,8 Mo, sans perte visible à l'écran.
SEO structuré
Données Schema.org, sitemap généré automatiquement et métadonnées dédiées à chaque page pour un bon référencement local.
Fiabilité du code
TypeScript de bout en bout et tests automatisés sur les fonctions critiques du site (validations, utilitaires).
Un espace d'administration pensé pour le quotidien d'un garage
Pas de jargon technique, pas de complexité inutile : juste ce qu'il faut pour que l'équipe retrouve en un coup d'œil tout ce qui concerne ses véhicules, ses rendez-vous et ses demandes.
Dès la connexion, l'équipe retrouve les chiffres clés du garage — véhicules disponibles, services actifs, rendez-vous à venir, nouvelles demandes — ainsi que le planning du jour, sans avoir à naviguer entre plusieurs écrans.
Connexion sécurisée
Un accès protégé par mot de passe, réservé à l'équipe du garage.
Gestion des véhicules
Ajout, modification et changement de statut (disponible, réservé, vendu) du stock de véhicules d'occasion.
Catalogue de services
Tarifs, durées et descriptions des prestations modifiables sans intervention technique.
Demandes centralisées
Contacts, devis, rendez-vous et réservations d'essai regroupés dans une seule liste filtrable par statut.
Suivi des rendez-vous
Le planning du jour et des jours suivants, visible d'un coup d'œil dès la connexion.
Vue d'ensemble
Véhicules, services, rendez-vous à venir et nouvelles demandes, résumés dès l'arrivée sur le tableau de bord.
Contenu éditorial
Équipe, avis clients, FAQ et galerie modifiables directement depuis l'administration, sans toucher au code.
Données en local
Véhicules, services, rendez-vous et demandes sont gérés directement par l'application, sans base de données distincte à héberger.
Connexion sécurisée par mot de passe, réservée à l'équipe du garage.
La même page, aussi lisible et rapide à utiliser depuis un mobile.
Gestion des véhicules
Le stock à jour en quelques clics
Chaque véhicule affiche son année, son kilométrage, son prix et son statut. Passer une voiture de « disponible » à « vendue » se fait instantanément, et disparaît aussitôt du site public si nécessaire.
Plus aucun véhicule déjà vendu ne reste affiché par erreur sur le site public.
Demandes centralisées
Contact, devis, rendez-vous et essais dans une seule liste
Filtrage par statut (nouveau, en cours, traité, archivé) : l'équipe traite les demandes en attente sans en oublier une seule, quel que soit le formulaire d'origine.
Plus aucune demande ne se perd entre les e-mails et les appels manqués.
Contenu éditorial
Modifier le site public sans toucher au code
L'équipe, les avis clients, la FAQ et la galerie se modifient depuis un simple formulaire — jusqu'à l'arrivée d'un nouveau mécanicien ou d'un nouvel avis Google à mettre en avant.
Une mise à jour de contenu ne nécessite plus jamais l'intervention d'un développeur.
Services, rendez-vous et paramètres, toujours à jour
Trois écrans complémentaires pour piloter l'activité du garage sans jongler entre plusieurs outils.
Tarifs et durées de chaque prestation.
Planning et statut de chaque rendez-vous.
Coordonnées, horaires et chiffres clés centralisés.
Le devis complémentaire, validé en deux minutes au lieu de deux heures
La voiture est sur le pont, le mécanicien découvre une pièce à changer, et il lui faut l'accord du client pour continuer. C'est le point de friction le plus coûteux d'un atelier — et il ne se règle pas au téléphone.
Côté client
Des photos, un montant, deux boutons
Le devis passe avant tout le reste : c'est la seule chose qui demande une action. Le constat du mécanicien est écrit comme il serait dit au téléphone, les photos de la pièce s'agrandissent — un défaut mécanique se juge mal sur une vignette quand la décision porte sur plusieurs centaines d'euros. En dessous seulement, l'avancement en cinq étapes.
Un refus ne laisse pas le dossier en suspens : l'atelier repart sur la réparation initialement convenue, et le pont se libère.
Côté atelier
Trois champs, un lien à coller dans un SMS
L'étape se change d'un clic, le devis s'envoie en trois champs, et le lien du client se copie pour être collé dans un SMS. Rien à installer, rien à apprendre.
Le nombre de devis sans réponse est affiché en tête de page. C'est le seul chiffre qui compte ici : chacun correspond à un pont occupé par un véhicule qui n'avance pas.
Pensé pour être ouvert depuis un SMS
C'est le seul contexte d'usage réel : le client reçoit une notification au travail, tape le lien, regarde les photos et répond. La page est conçue pour cet écran d'abord, et exclue de l'indexation — son adresse n'a de sens que pour son destinataire.
Ce qui existe déjà sur le projet
Cette solution peut évoluer selon vos besoins
Voici des exemples d'évolutions courantes pour ce type de projet.
Une identité d'atelier indépendant, chaleureuse et lisible
Fond ivoire, structure bleu nuit, terre cuite pour les actions, sauge pour les états validés : la palette évoque l'atelier de quartier où l'on prend le temps d'expliquer — ni concession froide, ni garage tuning.
Ivoire
Fond général, lumière chaude d'atelier
Bleu nuit
Structure : en-tête, méthode et pied de page
Terre cuite
Accent et appels à l'action
Sauge
États positifs et points de contrôle validés
Ces trois photographies sont celles réellement utilisées sur le site : même atelier, même équipe, même lumière naturelle et même colorimétrie mate et chaude. Elles ont été générées pour le projet et donnent la règle photographique à suivre pour les visuels à venir.
Une stack moderne, choisie pour la fiabilité
Chaque technologie a été choisie pour un bénéfice concret, pas pour suivre une tendance.
Next.js
Rendu hybride et régénération automatique pour un site rapide et bien référencé, y compris pour le stock de véhicules.
Stockage local
Véhicules, services et rendez-vous vivent directement dans le navigateur : aucune base de données à héberger ni à maintenir pour cette démonstration.
React Hook Form & Zod
Des formulaires fiables : chaque champ est validé avant d'être enregistré.
Tailwind CSS
Un design system centralisé : couleurs, rayons et typographies vivent dans un seul fichier de tokens, réutilisés par le site public et l’administration.
Framer Motion
Des animations discrètes au défilement, désactivées automatiquement si le visiteur préfère moins de mouvement.
Vercel
Un hébergement rapide et fiable, avec un déploiement continu à chaque mise à jour.
Le projet en images
Quatre écrans supplémentaires, pris directement sur la démonstration en ligne.
Le devis en mobile, avec sa colonne de réassurance ramenée sous le formulaire.
Coordonnées, horaires et itinéraire réunis sur une seule page.
Dix-sept questions classées par thème, avec un sommaire ancré.
Sur mobile, le prix et la réservation d'essai remontent sous le résumé plutôt que dans une seconde barre fixe qui masquerait le contenu.
D'autres projets à explorer
Chaque étude de cas correspond à un site réellement en ligne, que vous pouvez visiter en un clic.
Votre secteur n'est pas représenté ?
Ces projets servent de démonstration, pas de catalogue : chaque site est conçu à partir de votre métier, pas décliné d'un modèle existant.
Voir toutes les réalisationsVous dirigez un garage ou une activité commerciale ?
Capo Studio conçoit des sites modernes, rapides et administrables, adaptés à votre activité — garage, concession ou tout autre commerce avec un catalogue à présenter.
- Devis gratuit
- Sans engagement
- Réponse sous 24h ouvrées