Réalisation / La Maison Saint-Gobain
Tunnel de chiffrage : convertir les visiteurs en clients qualifiés
Comment nous avons aidé un leader du bâtiment à automatiser l'intermédiation entre particuliers et professionnels grâce à un algorithme de calcul robuste et une interface ultra-fluide.
Contexte
Le tunnel de chiffrage est né d'un prototype de simulateur de travaux qui avait fait collaborer les équipes métier de PIA-Production et Homly-You. Il a d'abord été développé pour l'enseigne Homly-You, puis repris par la marque La Maison Saint-Gobain, qui nous a challengés pour la réalisation de la partie chiffrage travaux de son nouveau funnel de mise en relation.
Ce changement de marque a été l'occasion d'une refonte du front Vue.js seulement : le backoffice et l'API Symfony ont été conservés et restructurés pour coller à la nouvelle direction du projet, sans repartir de zéro. C'est le trajet type d'une première version qui devient un logiciel stable.
L'objectif était d'avoir un parcours plus simple pour l'utilisateur afin de pouvoir le guider dans sa réflexion tout en récoltant l'ensemble des informations nécessaires à la réalisation d'un chiffrage par un professionnel.
Ce projet ambitieux a été réalisé en collaboration avec les équipes de PIA-Production.
- Fournir des estimations de travaux et des aides financières fiables.
- Concevoir un logiciel suffisamment flexible pour répondre aux besoins de l'équipe marketing et acquisition tout en ayant une structure de calcul robuste.
- Tenir les délais et le niveau de qualité demandés par un client exigeant.
- Gérer le run quotidien et la montée en charge lors de spots télé sur TF1, M6...
Première version réalisé en 2019, toujours en ligne
130 parcours
avec questions dynamiques adaptées au projet de l'utilisateur
3 refontes
complètes du tunnel depuis le lancement
7 ans
de collaboration active avec La Maison Saint-Gobain
Notre point de départ
Créer une expérience utilisateur simple et efficace
Ce projet ayant pour objectif d'être fortement mis en avant sur le site de La Maison Saint-Gobain, le challenge était de trouver le bon équilibre entre un parcours utilisateur simple tout en permettant de récolter les éléments nécessaires au chiffrage des travaux par un professionnel.
Adaptabilité
Un parcours dynamique
Créer un parcours dont les questions s'adaptent en permanence au choix de l'utilisateur.
Ainsi, l'outil ne présente que les questions nécessaires et adaptées au projet du client afin de maximiser le taux de finalisation des questionnaires.
Ce type de simulateur interactif sur mesure qualifie le visiteur avant même le premier contact commercial, avec un résultat chiffré en temps réel.
Interface
Un parcours plus visuel
Intégrer un grand nombre de visuels dans le parcours afin que l'utilisateur puisse se projeter plus simplement dans le choix des éléments de son projet (équipements, matériaux, techniques de pose...).
Mobile first
Un outil optimisé pour l'utilisation sur smartphone
Afin que chaque utilisateur puisse réaliser des simulations le plus simplement possible, l'outil a été développé en mobile first : une interface d'abord pensée pour le smartphone avec une amélioration progressive pour le desktop.
Connexion
Un outil qui s'intègre dans un écosystème
Nous devions créer un outil qui s'intègre facilement au site de La Maison Saint-Gobain mais également dans son SI afin de pouvoir transférer des données vers leur CRM et interroger leur base géographique.
Le tout en gardant un maximum d'autonomie afin de pouvoir réaliser des déploiements quotidiens en toute transparence.
Cette intégration repose sur une API sur mesure développée en Symfony, exposant les endpoints nécessaires à la synchronisation avec le CRM et les bases de données géographiques.
Choix techniques
Être fiable et réactif
L'un des enjeux majeurs du projet est de fournir à l'utilisateur des informations fiables afin qu'il puisse se projeter dans son projet dans les meilleures conditions. Nous devons également être réactifs sur les demandes d'amélioration de l'outil.
Technologie
Symfony + VueJs
Un front en VueJs afin d'obtenir une interface utilisateur fluide et réactive, combiné avec un backend en PHP Symfony pour disposer d'une API robuste et performante.
L'intégralité de la chaîne de déploiement a été automatisée grâce à Docker et GitLab CI afin d'être capable de réaliser de multiples déploiements quotidiens en toute sérénité.
Le chargement des pages a été optimisé grâce à Varnish, et les erreurs en production sont monitorées en temps réel via Sentry pour garantir une réactivité maximale.
Fiabilité
Des calculs robustes et fiables
L'un des enjeux majeurs du projet est de fournir à l'utilisateur des informations fiables afin qu'il puisse se projeter dans son projet dans les meilleures conditions.
Les parcours dynamiques offrent un grand nombre de possibilités aux utilisateurs, ce qui rend la phase de validation particulièrement complexe.
La fiabilité des calculs et la non-régression lors du déploiement d'évolutions ont été assurées par la mise en place de tests automatisés sur l'ensemble des méthodes de calcul de prix des travaux, de montant d'aides financières et sur les fonctions d'export de données.
Avant chaque livraison, l'ensemble de ce jeu de tests est relancé et bloque le déploiement en cas d'erreur.
Ces tests ont été développés initialement avec Jest, puis migrés vers Vitest pour bénéficier d'une meilleure intégration avec l'écosystème Vue 3 et de temps d'exécution réduits.
Migration
De Vue 2 à Vue 3 sans arrêter le tunnel
Le front est né sur Vue 2. Quand la branche est arrivée en fin de vie, il a été migré vers Vue 3 en quatre phases, chacune mise en production séparément : mise à jour de Node et suppression des polyfills, nettoyage du code mort, bascule sur Vue 3 avec @vue/compat, puis sortie du mode de compatibilité composant par composant.
Le tunnel n'a jamais cessé de recevoir des évolutions pendant ce temps, ni d'encaisser les pics des spots TV. L'API Symfony n'a pas bougé.
Cette migration est le terrain de notre article Migration Vue 2 vers Vue 3 avec Claude Code, qui en détaille la méthode phase par phase.
Intégration
Web component
Nous avons construit notre outil comme un widget indépendant pouvant être intégré simplement dans différentes pages du site.
Cette architecture permet également de définir un ensemble de paramètres afin de configurer le rendu souhaité lors du premier affichage.
L'intégralité des composants est documentée avec Storybook, ce qui facilite le développement en isolation et la validation visuelle de chaque élément d'interface.
Ce que nous ne savions pas en arrivant
Ce qu'un professionnel doit savoir pour chiffrer, et ce qu'un particulier accepte de dire
Nous savions construire un formulaire dynamique. Nous ne savions pas ce qu'un artisan a besoin de connaître pour chiffrer une isolation, une toiture ou un chauffage sans se déplacer : quelles mesures, quels matériaux, quelles contraintes de pose changent le prix, et lesquelles ne le changent pas. Ce savoir est venu des équipes métier de PIA-Production et de Homly-You, puis de La Maison Saint-Gobain, et il est devenu cent trente parcours.
L'autre métier appris est celui du marketing d'un grand groupe : des campagnes TV qui envoient des milliers de visiteurs en quelques minutes, des équipes acquisition qui mesurent chaque étape, une marque qui change de nom en cours de route. Un outil de chiffrage y sert autant l'acquisition que le métier, et il doit se déployer tous les jours sans jamais être arrêté.
La question qui a changé la conception : « à partir de quelle question le particulier s'en va ? »
Un chiffrage juste demande beaucoup d'informations ; un particulier, qui n'est pas du métier, n'en donne qu'un nombre limité avant d'abandonner. Le compromis entre la précision du chiffrage et la quantité de questions posées est la décision de conception du projet, et elle se reprend à chaque refonte. Les parcours dynamiques en sont la réponse : ne poser que les questions que le projet de ce visiteur rend nécessaires, et faire porter le reste au professionnel qui le rappelle.
Ce que nous avons cessé de construire : le backoffice des règles d'aides
Les aides à la rénovation dépendent de décisions gouvernementales, et nous avons tenté plusieurs fois de construire un backoffice pour que les équipes métier les paramètrent elles-mêmes. Chaque tentative a buté sur la même chose : il y aura toujours une condition alambiquée que l'interface ne prévoit pas. Ces règles se codent, avec un historique des modifications et des tests automatisés sur chaque calcul. C'est moins séduisant qu'un écran de paramétrage, et c'est ce qui tient depuis sept ans.
Le fichier Excel pendant la conception
Les calculs de travaux et d'aides ont d'abord été posés dans Excel avec les équipes métier, avant d'être codés. Le fichier n'a pas été recopié : il est devenu le jeu de données de référence contre lequel chaque méthode de calcul est testée avant chaque livraison.
Sur le tunnel de chiffrage, la vraie question n'a jamais été technique. C'était : jusqu'où peut-on interroger quelqu'un qui n'est pas du métier avant qu'il s'en aille, et que doit-on savoir malgré tout pour que le chiffrage tienne ? Nous la reposons à chaque refonte.
Et nous avons appris à ne pas construire certaines choses. Un backoffice pour paramétrer les aides de l'État, nous l'avons tenté plusieurs fois. Des règles codées, testées, avec leur historique, c'est ce qui tient depuis sept ans.
Avis clients
Ce que pensent nos clients
Chez SmartBooster, nous mettons toutes notre énergie et notre créativité au service de nos clients, voici les retours de notre prestation pour La Maison Saint-Gobain : Tunnel de chiffrage en ligne.
« Nous collaborons avec l'équipe Smartbooster depuis 3 ans sur un projet stratégique pour notre activité.
Nous avons largement dépassé la relation « client/prestataire », l'équipe Smartbooster nous accompagne au quotidien dans le développement de nos outils digitaux.
Une équipe experte, réactive et à l'écoute… Je recommande évidemment ! »
« Nicolas est très réactif et à l'écoute des besoins.
Grâce à son implication et son adaptabilité, nous travaillons dans une très bonne dynamique et faisons avancer nos projets, malgré les contraintes liées au confinement ! »
« Je recommande vivement Nicolas ! Il a cette grande qualité de structuration des projets qui permet d'avancer toujours de manière positive. En outre il est force de proposition et fait preuve d'une grande créativité.
Vous pouvez compter sur Nicolas ! »
« Nicolas est un vrai professionnel dans son domaine. Il va au fond des choses et est force de proposition. La qualité est au rendez-vous et les délais maîtrisés.
C'est un gage de sérénité que de travailler avec lui et son équipe. Je le recommande donc tout naturellement. »
« Tout au long de notre collaboration, Nicolas a toujours su être un professionnel exemplaire. En tant que project manager, il sait prendre tous les sujets à bras-le-corps et les prioriser avec intelligence.
Il sait aussi donner la visibilité suffisante et rassurante sur les avancées de ses équipes. Nicolas se révèle être un interlocuteur crédible et efficace autant sur le plan technique que sur le plan de la gestion projet. »
Résultats
Un aperçu en images
Parce qu'une capture d'écran vaut mieux qu'une longue description, voici un aperçu concret de ce qui a été réalisé.
Vous avez un projet similaire ?
Vous souhaitez qualifier vos visiteurs avec un tunnel de chiffrage en ligne ?
Comme La Maison Saint-Gobain, vous avez besoin de proposer une estimation fiable avant d'impliquer un professionnel ? Décrivez votre projet à Nicolas : parcours dynamique, algorithme de calcul, intégration avec votre SI. On vous dit concrètement si et comment on peut le construire.
Appel de 30 min → Analyse gratuite → Proposition sous 5 jours
Exemples de réalisation
Ce que nous avons construit avec VueJs
D'autres projets réalisés dans l'univers de la rénovation et du bâtiment.
CAPRENOV+
Refonte d'un simulateur de travaux de rénovation énergétique
Refonte d'un simulateur de rénovation énergétique : algorithme de calcul des aides, parcours dynamique et robustesse à l'échelle nationale.
Point P
Application de formation et d'entraînement à l'examen RGE
Application permettant aux artisans de s'entraîner à l'examen RGE : quiz dynamique sur +600 questions, calcul de score, connexion SSO et gestion des sessions d'examens.
Digitalisation Excel
Logiciel de suivi de chantier et calcul de commissions
Digitalisation d'une gestion Excel pour un réseau de 3 entreprises de construction : 8 points de vente, +30 commerciaux, suivi des chantiers et calcul automatique des commissions.
Nous travaillons avec et pour nos clients
Ces 10 dernières années, nous avons développé des dizaines de logiciels sur mesure pour nos clients.
SmartBooster est une entreprise qui place la relation client au cœur de son activité. Nous travaillons en étroite collaboration avec nos clients pour comprendre et répondre à leurs besoins.
Notre expertise ne se limite pas au développement technique. Nous accompagnons nos clients dans la réflexion et la mise en place de solutions sur mesure qui s'adaptent parfaitement à leurs processus métiers.
En choisissant SmartBooster, vous bénéficiez d'un partenaire qui s'engage à vos côtés pour concevoir et développer les fonctionnalités dont vous avez besoin.
Équipe française
Vous pourrez communiquer avec nous en français et sans décalage horaire, c'est l'idéal pour être sûr de se comprendre !
Socle technique moderne
Nous travaillons avec des outils professionnels implémentant les meilleurs standards de qualité et de sécurité.
Personnalisation
Le sur mesure vous offre toutes les possibilités de personnalisation qu'il vous faut pour adapter votre logiciel à votre vocabulaire et à vos usages.
Vous avez un projet ?
Contactez-nous pour savoir comment nous pouvons vous aider.