Refonte site HubSpot avec des agents IA : notre méthode en 5 jours

Le nouveau site d'if/else agency est en ligne. Maquettes, design, développement, contenu, marketing, SEO, GEO : tout a été produit/revu par de l'IA mais tout a été piloté par des humains qui savent s'en servir.

La dernière refonte nous avait pris des mois, celle-ci, 5 jours.

Si on prend le temps de vous raconter comment on a fait, c'est parce que la méthode compte bien plus que le résultat. N'importe qui peut demander un site à une IA. Obtenir un site qui tient la route, qui garde son référencement et qui raconte quelque chose, c'est une autre histoire.

Monter une équipe d'agents IA, pas un simple assistant

Avant de produire quoi que ce soit, on a constitué une équipe d'agents IA. Chacun a son rôle, ses compétences et son champ d'action, exactement comme dans une vraie équipe projet.

• Le designer crée les maquettes et vérifie que les espacements, les tailles de typo et les visuels collent à notre vision.
• Le développeur applique nos bonnes pratiques et travaille avec notre thème.
• Le rédacteur reprend notre ton, corrige les fautes et raconte notre histoire.
• Le chef de projet intervient à chaque phase et contrôle que le rendu respecte nos critères.

Oui, ça consomme plus de tokens qu'un seul agent à qui on demande tout, mais c'est ce qui évite de tout revoir en permanence. Sans ça, on aurait passé nos journées devant l'écran à relire chaque ligne produite.

Un design pensé pour notre cible, pas pour nous

On a fait nos recherches et donné nos critères esthétiques mais on a basé notre design sur les préférences de notre cible au lieu de le baser sur nos goûts respectifs.

C'est le piège classique d'un site d'agence : se faire plaisir plutôt que de parler à ceux qui vont le consulter.

1. 8 pistes pour commencer : on a demandé huit directions différentes, puis on a discuté entre nous de ce que chacun aimait ou non.
   
   
2. Affiner ce qui plaît : on a retravaillé les pistes retenues, toujours avec la cible au centre.
   
   
3. Raconter une histoire, la nôtre : un beau site, c'est cool, un site qui raconte notre histoire, c'est encore mieux. On a donc demandé de mettre l'accent sur le storytelling afin que notre histoire et nos parcours soient mis en valeur.
   
   
4. Décliner partout : Une fois tout tranché, la direction a été adaptée à tous nos modèles de page existants.

Le développement HubSpot, cadré par le thème Jingle

On est partis d'un thème enfant de Jingle, notre thème HubSpot, c'était important pour nous : notre propre site doit prouver que Jingle est polyvalent, performant, personnalisable et accessible.

La règle était simple : on réutilise tout ce qu'offre Jingle nativement et on  crée de nouveaux modules seulement s'ils manquent. C'est exactement ce qu'on fait pour nos clients.

Pour aller vite sans perdre en cohérence, les sections et les templates ont été générés par des scripts Python à partir des maquettes Figma.

Résultat : une cinquantaine de sections et 14 templates développés intelligemment : un bloc qui revient sur dix pages, c'est un seul fichier à maintenir.

Enfin, on a monté un aperçu local qui imite HubL, le langage de templating d'HubSpot pour vérifier le rendu ordinateur et mobile dans Chrome avant d'envoyer quoi que ce soit sur HubSpot.

Migrer le contenu sans perdre son référencement

Une refonte qui fait perdre son SEO, c'est une refonte ratée, on a donc été très méthodiques.

L'inventaire des pages

Chaque page du site existant a été décrite dans un fichier : son URL, ses textes, ses images. Les pages ont d'abord été recréées en brouillon sur un compte de recette, aux mêmes URL, avec leurs groupes de langues.

La réécriture orientée mots-clés

On a ensuite fait revoir tout le contenu en fonction de notre ton, de notre cible, de l'histoire qu'on voulait raconter et des mots-clés à cibler.

La mise en production dans les pages existantes

C'est le point clé : en production, on n'a pas recréé les pages. On a écrit la nouvelle version dans le brouillon de chaque page existante. Même id, même URL, mêmes statistiques, mêmes balises hreflang. Chaque page a été sauvegardée avant d'être touchée, puis un audit automatique a validé le tout (56 pages sur 56 conformes) avant publication.

SEO, GEO et performances dès la mise en ligne

Le site en ligne, le travail n'était pas fini.

• Les liens : le jour même, on a crawlé les 209 URL du site. 158 liens ont été corrigés dans 91 articles, d'abord en brouillon, puis publiés après validation.
• SEO et GEO : on a ensuite créé les données structurées, des fichiers spécifiquement pensés pour les LLMs (pour être compris et cités par les IA génératives), et finalisé le SEO.
• Les performances : enfin, on a optimisé le temps de chargement du site.

Ce que l'IA a changé pour nous (ratés compris)

Notre rôle s'est résumé à trois choses : trancher les décisions stratégiques, corriger les erreurs dans le code et transmettre nos bonnes pratiques.

Est-ce qu'il y a eu des ratés ? Oui.
Ce serait mentir de dire que tout était parfait du premier coup. L'IA se trompe et c'est justement pour ça qu'il faut des humains qui savent lire ce qu'elle produit, des développeurs et des designers qui savent précisément ce qui doit être fait et qui peuvent le contrôler.

Est-ce que ça nous a fait gagner du temps ? Énormément.
Lors de la dernière refonte, on y a passé des mois. Cette fois, on y passé 5 jours.

Notre métier est en train de changer drastiquement et il faut l'accepter. Ça ne veut pas dire qu'il faut faire n'importe quoi et penser que l'IA est une solution ultime en elle-même. Il faut des experts derrière elle, des gens qui ont appris leur métier, des pros qui peuvent la contrôler et la guider.

À l'heure où l'IA peut produire n'importe quoi, ce qui compte plus que tout, c'est la vision qu'on lui apporte grâce à notre expertise et les choix qu'on lui fait faire. C'est là que se joue la différence entre un site généré "bêtement" et un site qui sert vraiment votre business.

Vous voulez qu'on en parle pour votre propre site ? Prenez rendez-vous avec Garance.