É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.
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é solide
Une direction artistique sobre, marine et rouge, qui inspire la confiance mécanique plutôt que le low-cost.
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 inspire la confiance mécanique
La page d'accueil affiche immédiatement l'expérience de l'atelier (23 ans), la note moyenne des avis clients et les deux actions attendues par un automobiliste : prendre rendez-vous ou demander un devis.
Le visiteur comprend en quelques secondes le sérieux du garage, avant même d'avoir défilé la page.
Les prestations
Douze services, avec un tarif affiché sans détour
Vidange, révision, freinage, distribution, embrayage, carrosserie... chaque prestation affiche sa durée moyenne et son tarif de départ. Un clic ouvre une fiche détaillée listant précisément ce qui est inclus.
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
Le détail qui rassure avant de prendre rendez-vous
Sur la fiche vidange par exemple, le contenu exact de l'intervention est listé (huile, filtre, contrôle des niveaux, remise à zéro de l'indicateur d'entretien), avec la durée moyenne et le tarif de départ.
Aucune ambiguïté sur ce qui est réellement fait pour le prix annoncé.
Véhicules d'occasion
Une vraie marketplace, pas une simple liste
Recherche par marque et modèle, filtres par carburant et boîte de vitesses, tri par prix ou kilométrage : chaque véhicule affiche son statut (disponible, réservé, vendu) et un badge « coup de cœur » pour les meilleures affaires.
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, plus la réservation d'essai
Année, kilométrage, puissance, équipements, galerie photo : chaque fiche véhicule est aussi complète qu'une annonce professionnelle. Un formulaire permet de réserver directement un essai à une date souhaitée.
Le client sérieux passe à l'action sans décrocher le téléphone, y compris en dehors des horaires d'ouverture.
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
Contrairement à un planning figé, un atelier mécanique gère des créneaux qui dépendent des interventions en cours. Plutôt qu'un système de réservation rigide, le site privilégie un formulaire court suivi d'une confirmation par téléphone sous 48h — une approche plus honnête pour ce métier.
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. Confirmation sous 48h
L'équipe rappelle pour caler l'horaire exact — une approche volontairement humaine, adaptée à un atelier où les créneaux dépendent des interventions en cours.
4. Rendez-vous en atelier
Le client se présente à l'heure confirmée, sans surprise sur la prestation ni sur le tarif de départ annoncé.
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
Chaque lien, bouton et champ de formulaire reste accessible et visible au clavier, sans piège de focus.
Contrastes et lisibilité
Les textes conservent un contraste suffisant sur tous les fonds, y compris sur le hero marine et les badges colorés.
Zones de clic généreuses
Boutons et filtres dimensionnés pour rester confortables à utiliser sur mobile comme au clavier.
Animations respectueuses
Les apparitions au défilement se désactivent automatiquement 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 optimisées
Chaque photo de véhicule ou d'atelier est servie au bon format et à la bonne taille selon 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 repli automatique sur des données de démonstration si Supabase est injoignable.
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 e-mail et 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.
Base de données sécurisée
Chaque rôle n'accède qu'aux données autorisées, grâce à des règles de sécurité au niveau de la base.
Connexion sécurisée par e-mail et 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.
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é marine et rouge, pensée pour la confiance mécanique
Un bleu marine profond en structure, un rouge signal en accent, une typographie à fort caractère : la palette évoque le sérieux d'un atelier plutôt que le low-cost impersonnel.
Bleu marine
Structure, hero et confiance mécanique
Rouge signal
Accent principal, boutons et éléments d'action
Encre profonde
Texte principal et lisibilité
Photographies libres de droit (Unsplash), utilisées à titre d'ambiance pour illustrer l'univers visuel du projet — elles ne représentent pas le garage Horizon Auto.
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.
Supabase
Base de données Postgres sécurisée, avec un mode démonstration local si aucune base n'est connectée.
React Hook Form & Zod
Des formulaires fiables : chaque champ est validé avant d'atteindre la base de données.
Tailwind CSS
Un design system cohérent, avec une palette marine et rouge maîtrisée sur tout le site.
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
Un mélange de vraies captures du site et de l'administration, et de photographies d'ambiance pour donner corps au concept.
Le devis, accessible en un clic depuis chaque prestation.
Coordonnées, horaires et itinéraire réunis sur une seule page.
Ambiance atelier évoquée par la direction artistique.
Univers visuel évoqué par la direction artistique.
Vous 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.
Parler de mon projet