Étude de cas
Maison Duval
Un site vitrine dont l'accueil est une coupe de maison cliquable, un estimateur de chantier, un simulateur d'aides, un back-office de conducteur de travaux et un espace où le client suit ses travaux semaine après semaine.
Envie d'essayer l'espace d'administration ? Mot de passe démo : duval2026
Vitrine + administration + espace client
1 semaine
11 pages + 20 é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
Maison Duval, entreprise générale de rénovation à Rennes
Pour cette étude de cas, nous avons imaginé une entreprise créée en 1998 par Thierry Duval, maçon : neuf compagnons salariés, huit corps d'état internalisés, une conductrice de travaux, et une zone d'intervention limitée à quarante kilomètres autour de Rennes.
C'est le profil d'entreprise le plus courant du secteur, et le plus mal servi par le web : assez structurée pour gérer des chantiers à cent mille euros, mais dont le site se résume souvent à trois pages et un formulaire qui ne dit rien du travail réel.
Ce qu'une entreprise de rénovation attend vraiment d'un site
Six besoins identifiés en observant ce que font — et ce que ne font pas — les sites du secteur.
Se distinguer de la concurrence
Les sites d'entreprises de rénovation se ressemblent tous : bandeau photo, liste de services, formulaire. Il fallait une page d'accueil qu'on reconnaisse au premier coup d'œil.
Désamorcer la peur du devis
Le premier frein d'un particulier n'est pas le prix, c'est de ne pas savoir dans quel ordre de grandeur il se situe avant d'appeler qui que ce soit.
Prouver les chantiers, pas les promettre
Montrer des réalisations avec budget réellement facturé, durée réelle et lots engagés, plutôt que des photos de catalogue sans contexte.
Rassurer pendant les travaux
Un chantier de trois mois se joue autant sur l'information donnée au client que sur la qualité du travail. Le silence est la première cause de litige.
Piloter sans tableur
Suivre les affaires, les plannings d'équipe, les devis et les factures depuis un seul écran, au lieu de trois classeurs et d'un tableur partagé.
Placer les compagnons sans conflit
Une entreprise à huit corps d'état passe son temps à arbitrer qui va où : il fallait voir les chevauchements avant qu'ils ne bloquent un chantier.
Ce que le projet devait accomplir
Sept objectifs ont guidé les décisions de design et de développement.
Une navigation par la maison
L'accueil est une coupe de maison en dessin vectoriel : on clique sur la pièce à rénover plutôt que dans un menu de services.
Identité chaleureuse
Noyer, terre cuite et argile, une serif éditoriale pour les titres : l'univers du bâti soigné, sans le jaune fluo et le casque de chantier obligatoires.
Navigation en dock
Un dock flottant en bas d'écran remplace l'en-tête horizontal — le même geste sur ordinateur et sur téléphone, toujours à portée de pouce.
Estimation immédiate
Une fourchette de budget affichée en direct, sans laisser ses coordonnées : le visiteur décide en connaissance de cause s'il va plus loin.
Aides calculées, pas évoquées
Un simulateur MaPrimeRénov' et CEE avec les plafonds de revenus, qui affiche le reste à charge plutôt qu'un vague « aides possibles ».
Back-office de conducteur de travaux
Vingt écrans : pipeline d'affaires, planning des équipes, devis, factures, catalogue de prix et contenu du site.
Espace client de suivi
Chaque chantier a son accès : avancement par lot, photos hebdomadaires, documents, factures et fil de messages avec l'équipe.
Le parti pris
Une page d'accueil qui ne ressemble à aucune autre du secteur
Les sites de rénovation empilent tous les mêmes blocs : bandeau photo, liste de services, quelques chiffres, formulaire. Ici, l'accueil est un plan de coupe dessiné en SVG, avec un point chaud par pièce. Survoler ou cliquer une pièce met à jour la fiche de droite ; la navigation principale, elle, est un dock flottant en bas d'écran plutôt qu'un en-tête horizontal.
- Le dessin est du SVG, pas une image : il reste net à tous les écrans et pèse quelques kilo-octets
- Chaque point chaud est un bouton accessible au clavier, avec son libellé lisible par un lecteur d'écran
- Les positions des points se règlent à la souris depuis l'administration, sans toucher au code
- Sur mobile, la coupe se double d'une liste de pastilles : personne ne dépend d'un point de 10 pixels
Une visite guidée du site
De la coupe de maison au simulateur d'aides, chaque page a un rôle précis. Les captures ci-dessous proviennent directement de la démonstration en ligne.
Première impression
On clique sur la pièce à rénover, pas dans un menu
L'accueil affiche une coupe de maison dessinée en SVG : séjour, cuisine, salle de bain, chambres, combles, entrée, façade. Chaque point chaud alimente la fiche de droite — budget moyen, durée, lots engagés, nombre de chantiers livrés — sans recharger la page.
Le visiteur entre par son projet réel (« je refais ma salle de bain ») au lieu de traduire son besoin en vocabulaire d'entreprise du bâtiment.
La preuve d'abord
Trois chantiers récents, chiffres à l'appui
Sous la maison, les derniers chantiers affichent le budget réellement facturé, la durée réelle et le nombre de lots engagés. Les chiffres clés de l'entreprise — 42 chantiers, 9 compagnons salariés, 4,9/5 sur 87 avis — tiennent sur une seule ligne.
Un particulier compare des montants concrets au lieu de deviner si son projet entre dans les cordes de l'entreprise.
La méthode
Cinq étapes, et ce qui se passe pendant le chantier
Visite technique gratuite, devis lot par lot, planning signé avant le démarrage, photos tous les vendredis, réserves levées sous quinze jours. La promesse est datée, donc vérifiable.
L'engagement sur le planning transforme une inquiétude diffuse en calendrier que le client peut opposer à l'entreprise.
Fiche pièce
Sept pièces, chacune avec ses points techniques
La fiche d'une pièce détaille ce qui est réellement compris — étanchéité sous carrelage, circuits dédiés, VMC hygroréglable — puis les chantiers déjà livrés pour cette pièce.
Le client comprend ce qu'il achète avant de comparer deux devis dont l'un aura « oublié » l'étanchéité.
Transparence
Des prix unitaires affichés, à l'unité près
Chaque pièce publie son tableau de prix : dépose de cuisine, création de circuits dédiés, pose du mobilier, avec l'unité et le taux de TVA applicable. Ces prix viennent du catalogue tenu dans l'administration.
Publier un prix unitaire coûte moins cher qu'un appel où l'on répète le même ordre de grandeur dix fois par semaine.
Réalisations
Filtrables par pièce, par commune et par budget
Les chantiers se filtrent sur trois axes, et le compteur annonce le volume de travaux cumulé correspondant à la sélection. Rien n'est masqué derrière un formulaire.
Un visiteur de Cesson qui cherche une salle de bain trouve trois chantiers comparables en deux clics.
Fiche chantier
Un comparateur avant/après, puis le déroulé lot par lot
La photo d'ouverture est un comparateur à curseur. En dessous, chaque lot affiche ses dates et son pourcentage d'avancement, et le carnet de chantier reprend les photos publiées semaine après semaine.
Le prospect voit exactement ce que le client a vu pendant les travaux : c'est l'argument de vente de l'espace client, avant même d'en parler.
Estimateur
Une fourchette en deux minutes, sans laisser ses coordonnées
Type de bien, surface, pièces concernées, année de construction, niveau de finition : la fourchette se recalcule à chaque réglage. Les coordonnées ne sont demandées qu'après, pour recevoir le devis détaillé.
Le formulaire ne se remplit plus par curiosité : les demandes qui arrivent sont déjà cadrées, avec la fourchette acceptée.
Aides à la rénovation
MaPrimeRénov' calculée, reste à charge affiché
Composition du foyer, revenu fiscal, travaux envisagés : le simulateur classe le foyer dans son profil de ressources, additionne MaPrimeRénov' et les CEE, et affiche le reste à charge. Les plafonds sont publiés en clair sous le simulateur.
Une entreprise mandataire qui avance les aides a tout intérêt à le prouver par le calcul plutôt que par un logo.
Le chantier vu du salon du client
C'est la fonctionnalité qui distingue le plus cette démonstration : le client se connecte avec son email et un code remis au démarrage des travaux, et retrouve tout ce qui concerne son chantier.
Avancement par lot
Chaque corps d'état affiche ses dates et son pourcentage. Le total en tête indique la semaine en cours sur la durée annoncée.
Photos du vendredi
Le carnet de chantier publié par l'équipe, daté et légendé, phase par phase — avant, pendant, après.
Documents et factures
Devis signé, planning, attestation décennale, PV de réception, situations de travaux avec leur statut de règlement.
Fil de messages
Les questions du client et les réponses de la conductrice de travaux au même endroit, visibles des deux côtés.
L'avancement global en tête, puis chaque lot avec ses dates. À droite, la conductrice de travaux, les situations de travaux et les dates clés.
Le carnet de chantier : photos datées, légendées, classées par semaine.
Le fil de messages, visible à l'identique depuis la fiche chantier du back-office.
lemoine@example.com et le code COMBLES26— un chantier de combles en cours, à 62 % d'avancement.Vingt écrans pensés pour un conducteur de travaux
Pas un panneau de configuration générique : les écrans reprennent le vocabulaire du métier — lots, situations, réserves, compagnons.
Tableau de bord
Chiffre d'affaires facturé, valeur du pipeline, marge moyenne sur les chantiers livrés et factures en retard, calculés en direct.
Pipeline en kanban
Huit étapes de prospect à SAV, cartes déplaçables à la souris. Passer une affaire en « livré » la publie sur le site.
Planning des équipes
Douze semaines, un compagnon par ligne, une barre par affectation — et les chevauchements signalés en hachuré avant qu'ils ne posent problème.
Devis et facturation
Lignes tirées du catalogue de prix, TVA 5,5 / 10 / 20 ventilée, remise, aides déduites, acompte, et un aperçu prêt à imprimer en PDF.
Contenu du site
Les pièces de la maison, y compris la position des points chauds sur la coupe, se modifient à la souris. Textes, méthode, avis et barèmes d'aides suivent.
Accès protégé
Un mot de passe unique côté entreprise, un code d'accès par chantier côté client, tous deux vérifiés avant l'affichage de la moindre page.
Le tableau de bord : facturé, pipeline, marge moyenne et impayés, puis les chantiers en cours et les dernières demandes.
Le pipeline : huit colonnes, la valeur cumulée par étape, et des cartes qu'on déplace à la souris pour faire avancer une affaire.
Le planning : douze semaines, un compagnon par ligne, une couleur par corps d'état. Les barres hachurées signalent un compagnon affecté à deux chantiers la même semaine.
L'avancement se règle au curseur, lot par lot : le pourcentage global et l'espace client se mettent à jour immédiatement.
L'aperçu du devis, prêt à imprimer : TVA ventilée par taux, aides déduites, acompte et mentions légales du bâtiment.
Les points chauds de la coupe se déplacent à la souris — le plan de l'accueil se redessine sans une ligne de code.
Les demandes envoyées par l'estimateur arrivent ici, avec la fourchette que le visiteur avait sous les yeux.
Testez le back-office vous-même
Par principe, nous ne nous connectons jamais nous-mêmes à l'administration devant un prospect : c'est à vous de manipuler, et de juger si vous vous y retrouveriez. Mot de passe démo — duval2026
Ce qui fait tenir l'ensemble
Next.js, React et Tailwind, sans base de données à héberger : la démonstration fonctionne entièrement dans le navigateur.
Pages pré-rendues
Les fiches pièce et chantier sont générées à l'avance au moment du build : elles s'affichent sans attendre le moindre appel réseau.
Pensé pour le pouce
Le dock reste à portée en bas d'écran, la coupe de maison se replie en liste de pastilles, et les tableaux d'administration défilent horizontalement plutôt que de déborder.
Référencement structuré
Métadonnées propres à chaque page, titres hiérarchisés et adresses lisibles — « /pieces/salle-de-bain » plutôt qu'un identifiant.
TypeScript de bout en bout
Modèle de données typé du back-office jusqu'aux pages publiques : une faute de frappe sur un champ arrête le build, pas le client.
À noter : pour cette démonstration, les données vivent dans le navigateur du visiteur — chacun peut donc tout modifier sans gêner personne, et un bouton remet la démonstration à zéro. Sur un site réel, ces mêmes écrans écrivent dans une base de données, avec des comptes nominatifs et des sauvegardes.
Le projet en images
Six écrans supplémentaires, pris directement sur la démonstration en ligne.
Sur mobile, la coupe reste lisible et les pastilles de pièces prennent le relais du pointage fin.
Le déroulé public d'un chantier en cours, lot par lot, avec les dates réelles.
L'estimateur en mobile : la fourchette reste visible pendant qu'on règle les critères.
La méthode en cinq étapes datées, du relevé sur place à la levée des réserves.
Les neuf compagnons, avec leur métier et leurs années d'expérience.
En bas de chaque page, une bande donne les deux accès de démonstration — back-office et espace client.
L'espace client en mobile — celui que le propriétaire consulte réellement, souvent le vendredi soir.
Le back-office en mobile : la barre latérale se replie, les indicateurs passent en colonne.
Le simulateur d'aides, avec le reste à charge recalculé à chaque réglage.
Le contact : coordonnées, horaires, zone d'intervention et formulaire qualifié par pièce.
Les filtres de chantiers restent utilisables au pouce, sans menu déroulant imbriqué.
Les factures : encaissé, en attente et en retard, modifiables directement dans le tableau.
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 une entreprise du bâtiment ?
Capo Studio conçoit des sites qui montrent vos chantiers, chiffrent vos travaux et vous font gagner les allers-retours que vous passez aujourd'hui au téléphone.
- Devis gratuit
- Sans engagement
- Réponse sous 24h ouvrées