Rendre simples les parcours les plus complexes, et les mener jusqu’en production.

Les états du chat, dans l’ordre du parcours. Ceux en production forment la base ; les autres sont des réponses enrichies que je propose : quand une information manque, Noov IA la demande avec un élément d’interface plutôt qu’en texte : c’est ce qu’on appelle l’interface générative (generative UI).

Les états en production sont en ligne sur le site de Noovimo. Les autres ont été présentés au client : ils demandent des réponses que l’API ne renvoie pas encore, et attendent une évolution de l’outil.

Une réponse enrichie n’apparaît que lorsqu’une information manque et que la recherche serait trop large, et jamais plus d’une carte à la fois. Les mêmes cartes servent au mode guidé, lancé depuis la carte d’accueil.

Accueil

En production

Noov IA s’ouvre sur un message d’accueil et un champ libre : on décrit le bien qu’on cherche, avec ses propres mots.

Annonces

En production

Les annonces arrivent par cinq, en grille de deux : photo, type de bien, ville, surface et prix. « Voir plus » indique combien il en reste et charge les suivantes.

Aucun résultat

En production

Quand rien ne correspond, Noov IA répond en texte et invite à élargir la recherche : un budget plus large, un autre secteur ou un autre type de bien.

Des pistes restent à explorer, sans visuel pour l’instant :

• L’hybride : garder la recherche par filtres, avec Noov IA à côté ; les filtres et le chat partagent les mêmes critères.
• Une mémoire éditable : « Ce que j’ai retenu », pour corriger d’un clic ce que Noov IA a compris.
• Une alerte discrète : sous les résultats, « Me prévenir des nouvelles annonces ».

C’est l’idée qui relie ces écrans : discuter avec un LLM ne doit pas faire perdre ce qu’une interface sait déjà faire, comme choisir, comparer ou revenir en arrière.

Les états de base sont en ligne sur noovimo.fr depuis février 2026, intégrés au site Webflow. Les réponses enrichies ont été présentées au client : elles attendent que l’outil renvoie les informations qu’elles demandent. Sans suivi d’usage, il n’y a pas de chiffres à montrer.

Près de 10 millions de visiteurs par mois, et des pages catégorie et produit qui ne servaient ni le référencement ni l’acheteur : contenus pauvres et mal ordonnés, vendeurs affichés avant le produit. L’agence a repris ces pages de bout en bout, pendant quatre mois puis au fil des missions suivantes.

Côté agence, je travaillais avec une cheffe de projet SEO et une cheffe de projet e-commerce ; côté client, avec son équipe SEO et marketing, en ateliers dans un FigJam partagé. J’y portais la conception UX, sur ordinateur et mobile, et mon expérience du référencement me permettait de prendre moi-même les décisions SEO et d’en parler d’égal à égal avec l’équipe du client.

Cette équipe était notre seul interlocuteur, et la mission servait ses idées et ses besoins. Elle présentait ensuite nos propositions à ses équipes design et développement, lors de points où l’agence n’était pas conviée : chaque proposition devait la convaincre, puis lui donner de quoi la défendre seule.

Sans accès aux statistiques du client, clause de confidentialité oblige, il fallait trancher autrement : comparer, prioriser, et construire chaque choix avec l’équipe qui allait le défendre.

Chaque choix reposait sur une preuve que l’équipe SEO pouvait reprendre à son compte : le benchmark, les bonnes pratiques, l’atelier.

1. AuditerPasser les pages produit et catégorie au crible de l’ergonomie et du référencement : hiérarchie, lisibilité, ordre des blocs, contenu indexable, usage sur mobile.
2. ComparerDécortiquer les pages de plusieurs marketplaces, dont Amazon, Cdiscount, Fnac, Back Market et ManoMano : produit, prix et offres, réassurance, contenu.
3. PrioriserArbitrer entre les demandes du client, les gains rapides, les besoins de l’entreprise et, surtout, les priorités SEO et UX.
4. Co-construireBâtir les wireframes en atelier avec l’équipe SEO et marketing, dans un FigJam partagé : chaque demande discutée, chaque arbitrage annoté.
5. Doser la fidélitéRester en wireframe, par choix : le client avait ses équipes design, et ce n’était ni notre rôle ni celui de l’équipe SEO de prendre la main. La fidélité ne montait que pour clarifier une idée, jusqu’à la page produit en haute fidélité.

L’audit a relevé des problèmes sur chaque type de page. Quelques-uns parmi les plus parlants :

• Page produit : les offres des vendeurs occupaient le haut de l’écran, avant même la description du produit.
• Listes de produits : six produits par ligne, des cartes trop chargées pour être lues d’un coup d’œil, et des filtres qui disparaissaient dès qu’on faisait défiler.
• Textes des catégories : en bas de page, les textes écrits pour le référencement s’étalaient bien au-delà des 70 caractères par ligne d’une lecture confortable, dans un corps trop petit.
• Mobile : sous l’en-tête, la navigation entre catégories, horizontale sur ordinateur, devenait une longue liste verticale de liens et repoussait la catégorie que l’acheteur venait voir.
• Pertinence : des produits sponsorisés s’invitaient dans les listes, sans lien avec la catégorie ni avec la recherche.

Deux exemples concrets suivent : la page produit, puis les pages catégorie.

Comparer les vendeurs fait partie de l’ADN de la marketplace : offres neuves, d’occasion ou reconditionnées, de professionnels comme de particuliers. Pas question de l’effacer. Mais au chargement, ces offres occupaient plus d’un tiers de l’écran, avant même la description : on comparait des vendeurs avant de savoir ce qu’on achetait.

Chez les concurrents qui comparent plusieurs offres, le bloc « Autres vendeurs » tient en un lien sous l’offre principale : moins de 2 % de l’écran.

Reconstitution simplifiée

Écran anonymisé

J’ai repensé la page produit de bout en bout, en atelier avec l’équipe SEO et marketing, pour rétablir l’ordre de la décision : comprendre le produit, voir la meilleure offre, puis comparer si besoin.

• L’ordre de la page : la fiche et la meilleure offre en tête, avec le bouton d’achat ; les autres vendeurs dans leur propre section, plus bas.
• Les cartes d’offres : « Découvrir d’autres vendeurs » rappelle le prix de départ et se filtre par état. Chaque carte se lit d’un coup d’œil : prix, paiement en plusieurs fois, état et garantie, vendeur et note, livraison, et l’on peut contacter le vendeur ou lui faire une offre.
• Le référencement : la description et les caractéristiques, le contenu que les moteurs indexent, remontent dans la page.

Les pages catégorie avaient besoin de contenu pour être comprises et classées par les moteurs. Mais ce contenu était empilé en bas de page, pour les robots : des blocs en pleine largeur, bien au-delà des 70 caractères par ligne, dans un corps trop petit. Il n’était pas écrit pour être lu, et ce bourrage de mots-clés est justement ce que les moteurs sanctionnent.

Reconstitution simplifiée

L’équipe SEO tenait à ce contenu, à raison : il portait son référencement. Elle ne s’opposait pas au changement, mais ne voyait pas pourquoi un texte en pleine largeur posait problème. Ma mission : intégrer ce contenu à la page sans retomber dans ce travers, et d’abord le faire comprendre.

1. ExpliquerLes règles de lisibilité : trop longue, une ligne fait perdre le fil ; trop courte, elle hache la lecture ; autour de 70 caractères, l’œil suit sans effort.
2. MontrerDes démonstrations et des exemples, pour voir la différence plutôt que la croire.
3. ProjeterLe wireframe de la page avec le contenu en FAQ, pour que l’équipe se projette sur ses propres catégories.
4. TransmettreLes règles écrites dans le FigJam, à côté des wireframes (questions, longueur des réponses, largeur du texte), pour avancer en asynchrone et rédiger sans nous.

Ce qui a changé sur la page

Reconstitution de nos wireframes

Wireframes

L’équipe SEO et marketing a présenté la refonte à son équipe design produit, avec nos wireframes et nos arguments. La mission s’est poursuivie en 2025, mais le contexte avait changé : décisions plus lentes, départs parmi nos interlocuteurs, priorités qui se déplaçaient. La marketplace a cessé son activité en 2026, avant la mise en ligne.

Il en reste un travail complet : un audit de chaque type de page, un benchmark mesuré, des wireframes construits avec l’équipe qui devait les défendre, et une page produit repensée de bout en bout.

En juin 2026, avec une autre cheffe de projet, je pilote deux missions d’agence liées, prévues sur tout l’été : des congés des deux côtés, des rendus qui conditionnent la facturation, des sujets qui dépendent les uns des autres. Le rétroplanning change jusqu’à deux fois par jour, au fil des retours des différents clients, et chaque version se débat en interne. Dans Notion, itérer vite sur un tableau est difficile, les durées ne se comptent pas en jours ouvrés, et aucune version précédente n’est gardée : pas d’historique pour comparer, ni pour revenir en arrière. Je décide donc de construire un outil pour visualiser le planning, l’ajuster vite et en garder chaque version.

En juin, un premier agent Claude Code me sert à prototyper et à chercher, vite et sur tous les sujets : sept versions, jusqu’à une application, qui explorent :

• Le glisser-déposer : déplacer, redimensionner, entrer dans un groupe ou en sortir, déplacer un groupe entier.
• Les animations : l’inclinaison en mouvement, la résistance avant d’entrer dans un groupe, le ressort au dépôt.
• Les outils : créer, sélectionner, couper, lier, déplacer, chacun avec son raccourci.
• Les versions : publier, comparer deux versions en superposition, proposer des plannings alternatifs.
• L’équipe : membres, équipes, types de phases, notifications.
• La technique : une seule source de vérité pour l’affichage et l’enregistrement.

Ces prototypes deviennent le cahier des charges de la V2 : ce qui fonctionne, ce qu’il faut vraiment, et ce qui peut attendre.

En juillet, je construis la V2, celle que je veux essayer avec l’équipe. Un agent coordinateur, que j’appelle Maestro, fait circuler mes consignes vers trois agents spécialisés (design, code, vérification) et me rapporte leurs retours. Je donne la vision et les briefs, je valide chaque palier, je tranche chaque choix.

Mes règles pour construire avec des agents

L’IA ne remplace pas le designer : elle étend ce qu’il peut produire, tester et prototyper, à condition qu’on lui donne un cadre. Pour Crayno, ce cadre tient en quelques règles, appliquées avant, pendant et après chaque palier.

Avant : cadrer

• Écrire avant de faire construire : une vision tenue sujet par sujet (décidé, ouvert, planifié) et un brief pour chaque point dur.
• Un agent, un rôle : design, code, vérification ; chacun reçoit des consignes à sa mesure.
• Découper en paliers : un palier à la fois, validé avant le suivant.

Pendant : garder la main

• Expliquer avant d’agir : un agent présente son choix et ce qu’il implique avant que je le valide.
• Rien d’écrit sans mon accord : chaque ajout à la vision m’est présenté d’abord, et c’est moi qui décide quand on sauvegarde.
• Préférer retirer à ajouter : quand une solution se complique, la remettre en question avant d’empiler du mécanisme.

Après : vérifier

• Chercher la cause avant de corriger : comprendre d’où vient un problème ; une correction qui déborde du cas visé est refusée.
• Tester pour de vrai : à chaque palier, des captures et une API de test qui pilote le moteur directement, plutôt que des clics simulés.

Un planning se construit à la main : chaque geste doit faire ce qu’on attend, sans y penser. Trois principes guident chaque détail.

Un geste, une intention

L’outil n’hésite jamais sur ce qu’on veut faire.

Voir avant d’agir

On sait toujours où la phase va tomber, et ce qu’elle représente.

Ne jamais surprendre

Aucun saut, aucun clignotement.

Avec la V2, nous planifions les deux projets : un planning se monte en quelques minutes et se présente à la direction dans la foulée. Pour ma direction, c’est exactement ce qu’il faut pour se projeter. Une fois validés, les plannings sont reportés dans le Notion du client.

La suite est déjà prototypée : un traducteur qui passe de la vue Gantt à un vrai calendrier. Crayno n’a pas vocation à être vendu : à terme, je veux le mettre en ligne, gratuit et sans connexion.

Construire avec l’IA

Le glisser-déposer