Cas d'étude № 03
→ Voir la démo navigable Atelier Berthier
« Quand quelqu'un nous appelle à 2h du matin parce qu'il a une fuite, c'est qu'il a un problème là, maintenant. Il nous trouve sur Google, sort son téléphone, et il doit pouvoir appeler en deux secondes. Le site actuel — il faut scroller, fermer un bandeau cookies, chercher le numéro… à 2h du matin avec un dégât des eaux, on perd le client. »
Phase de cadrage très courte (deux entretiens, audit du site existant, comportement Google My Business). Une seule conviction structurante : pour ce métier — urgence 24/7 sur mobile — chaque seconde de friction entre l'arrivée sur le site et le bouton d'appel est un client perdu. Tout le reste de la refonte découle de ça.
Le site est construit autour d'un seul vrai CTA : un bouton d'appel jaune, énorme, présent en hero ET en dock flottant sticky qui suit l'utilisateur dans tout le scroll. Tout le reste — zone d'intervention sur carte Leaflet, garanties, timeline d'intervention, avis Google synchronisés en live, portrait de l'artisan — est conçu comme une réassurance qui pousse vers l'appel, pas comme une distraction. Direction artistique éditoriale : papier crème + ink charbon + un seul accent jaune signalétique réservé exclusivement au bouton d'appel d'urgence. Le parcours "devis projet" est différencié uniquement par layout, poids et position — jamais par couleur — pour que l'œil ne confonde jamais l'urgence avec l'optionnel. Typographie Urbanist (display) + JetBrains Mono (méta) pour un ton à la fois moderne et utilitaire.
Carte flottante en bas d'écran, présente en permanence quel que soit le scroll. Bouton d'appel jaune dominant à gauche, bouton devis discret à droite. Le background bascule automatiquement clair/sombre selon la section qui passe derrière (IntersectionObserver), pour un contraste toujours optimal sans déteindre.
Avant même de décrocher, le visiteur veut savoir : "tu viens chez moi ?". Carte interactive Leaflet + tiles CARTO Positron (légère, sans token Mapbox), atelier marqué d'un pin pulsant jaune, cercle de couverture en pointillés, et chips cliquables (Lyon, Villeurbanne, Caluire, Vénissieux…) qui font fly-to la map sur la commune choisie.
RGPD respecté sans masquer le contenu critique. Le bandeau apparaît en bas d'écran avec un fond ink semi-transparent + backdrop-filter blur, refusable d'un tap, croix cream lisible. Le numéro de téléphone reste visible derrière en permanence.
Les avis sont une réassurance, pas une accroche. Module placé après l'action principale (appel) et après la réassurance technique (zone, garanties, timeline). Affichage des vrais avis avec leur badge "vérifié Google", date relative, et un dot "nouveau" sur les plus récents — au lieu d'un carrousel marketing déshumanisé.
Section ink dédiée qui raconte un cas type concret (fuite cuisine signalée à 22h47, Lyon 3e). Quatre étapes horodatées : 00:00 décrochage, 00:02 diagnostic au tel, 00:06 départ atelier, 00:38 sur place. Le rythme court martèle la promesse de rapidité bien mieux qu'un argumentaire abstrait.
Naviguez la maquette interactive comme un vrai visiteur.