[{"data":1,"prerenderedAt":651},["ShallowReactive",2],{"featured-work-fr":3},[4,305,474],{"id":5,"title":6,"body":7,"description":266,"extension":267,"featureImage":268,"featured":21,"links":269,"meta":270,"navigation":21,"order":271,"path":272,"seo":273,"stem":274,"tags":275,"tools":279,"__hash__":304},"work_fr\u002Fwork\u002Frapport-analyse-agentique.md","Rapport d'analyse agentique",{"type":8,"value":9,"toc":254},"minimark",[10,14,24,29,32,36,43,49,55,59,62,65,76,80,83,86,91,94,97,100,104,107,110,113,121,125,128,131,134,137,144,151,155,158,161,164,171,175,181,187,193,199,206,210,213,247,251],[11,12,6],"h1",{"id":13},"rapport-danalyse-agentique",[15,16,17],"p",{},[18,19],"video",{"src":20,"controls":21,"preload":22,"muted":21,"poster":23},"\u002Fimages\u002Fagentic-analysis-report\u002Fanalysis-report.webm",true,"none","\u002Fimages\u002Fagentic-analysis-report\u002Fanalysis-report-feature.png",[25,26,28],"h2",{"id":27},"en-résumé","En résumé",[15,30,31],{},"J'ai conçu et piloté le développement frontend du Rapport d'analyse agentique, la fonctionnalité la plus ambitieuse techniquement à avoir été mise en production pendant mon passage chez Keatext. Le rapport fait passer un fichier CSV dans le pipeline NLP et un LLM pour générer une analyse écrite détaillée : un résumé global, une analyse des sujets clés, des recommandations et une feuille de route d'implémentation. Il comprenait également un workflow de filtrage, un export PDF dans le navigateur, la génération multilingue et une interface de clavardage agentique pour interroger le jeu de données. Une fonctionnalité phare qui a suscité un fort enthousiasme auprès des clients potentiels.",[25,33,35],{"id":34},"contexte","Contexte",[15,37,38,42],{},[39,40,41],"strong",{},"Mon rôle :"," Designer et principal développeur frontend, environ 50 % de l'implémentation active, avec une participation à la revue de chaque PR mis en production",[15,44,45,48],{},[39,46,47],{},"Stack :"," React, TypeScript, RTK Query, server-sent events, react-pdf",[15,50,51,54],{},[39,52,53],{},"Calendrier :"," Conception et développement à partir du T3 2025. Première mise en production T4 2025. Filtrage, PDF, panneau agentique et fonctionnalités additionnelles mis en production entre T1 et T2 2026. Support multilingue en QA",[25,56,58],{"id":57},"contexte-du-projet","Contexte du projet",[15,60,61],{},"Le Rapport d'analyse agentique était la pièce maîtresse d'une initiative plus longue visant à faire de Keatext l'analyste autonome, réduisant le travail d'interprétation qu'un professionnel CX doit effectuer en confiant davantage de travail au produit. Les étapes précédentes de cette initiative comprenaient Focus Recommendations et son module d'Actionable Insights. Le Rapport d'analyse agentique représentait un changement de dimension : un rapport écrit complet, généré par un LLM, ancré dans les résultats du pipeline NLP de la plateforme.",[15,63,64],{},"Le projet est parti de zéro, construit autour du chargement d'un seul fichier CSV contenant un nombre quelconque de champs texte et de métadonnées. Contrairement aux implémentations précédentes qui demandaient aux utilisateurs de configurer manuellement le champ de satisfaction, le Rapport d'analyse agentique le détectait automatiquement côté backend. Les utilisateurs pouvaient corriger un champ mal identifié, mais dans la plupart des cas, la configuration ne demandait rien de leur part. La question qui animait le projet était de savoir quelle partie du workflow analytique on pouvait déléguer au modèle.",[15,66,67],{},[68,69,70,71],"em",{},"Focus Recommendations, que le Rapport d'analyse agentique a largement supplanté, fait l'objet d'une ",[72,73,75],"a",{"href":74},"\u002Fwork\u002Ffocus-recommendations","étude de cas distincte ->",[25,77,79],{"id":78},"ce-que-jai-fait","Ce que j'ai fait",[15,81,82],{},"J'ai conçu la fonctionnalité de bout en bout et piloté le développement frontend, en prenant en charge l'affichage du rapport, l'intégration API, les états de chargement et d'erreur, l'implémentation des graphiques, le workflow de filtrage, la génération PDF et l'interface agentique. J'ai également proposé l'architecture pour le support multilingue et collaboré avec l'équipe NLP pour traduire l'élasticité en quelque chose de plus compréhensible pour des non-techniciens.",[15,84,85],{},"Quatre problèmes ont guidé les décisions les plus importantes et des entretiens clients lors de la phase prototype ont défini ce que la fonctionnalité allait devenir.",[87,88,90],"h3",{"id":89},"recherche-et-affinement","Recherche et affinement",[15,92,93],{},"On a impliqué des clients via des entretiens sur un prototype préliminaire, testant nos hypothèses avant de nous engager dans la construction complète. Les résultats ont modifié la fonctionnalité de manière concrète.",[15,95,96],{},"Au départ, il y avait une section « drivers » et une section « topics ». Les entretiens ont montré que les utilisateurs ne faisaient pas réellement de distinction entre eux. La séparation ajoutait de la structure sans apporter de clarté. On les a fusionnées. Une analyse de segmentation qui avait bien fonctionné lors du prototypage n'a pas répondu aux attentes des vrais clients et a été supprimée.",[15,98,99],{},"L'impact était le changement le plus important. Le prototype le présentait principalement comme un chiffre, ce qui nécessitait des explications et créait des frictions. On l'a remplacé par une visualisation de type jauge, en gardant les chiffres bruts accessibles pour les utilisateurs qui voulaient creuser plus profondément, mais en mettant le visuel de l’avant. C'est devenu le principe général : passer des chiffres aux visualisations libellées autant que possible, préservant la profondeur sans la mettre de l’avant par défaut. Les entretiens ont également permis de clarifier quelles sections du rapport avaient besoin de texte descriptif pour orienter les utilisateurs, et lesquelles pouvaient se passer d'explication, ce qui a directement influencé la façon dont le contenu généré par le LLM était structuré entre prose et données.",[87,101,103],{"id":102},"concevoir-dans-un-espace-contraint","Concevoir dans un espace contraint",[15,105,106],{},"L'application était construite autour de panneaux verticaux (navigation, filtres, données) qui s'étaient accumulés au fil du temps. L'ajout d'une interface de clavardage pour l'agent introduisait une forte pression sur l'espace horizontal, notamment à 1366x768, la plus petite fenêtre d'affichage à supporter selon nos données d'utilisateur.",[15,108,109],{},"La contrainte principale était que le panneau agentique devait être redimensionnable mais pas masquable. La navigation était déjà masquable, et on pouvait raisonnablement supposer que les utilisateurs la masqueraient pendant les workflows de rapport où elle n'est pas au cœur de la tâche. Le panneau de filtres était également masquable. Le problème venait surtout de l'écran de configuration du rapport, qui incluait un tableau de données et où l'agent serait finalement aussi intégré.",[15,111,112],{},"J'ai opté pour une disposition horizontale des filtres, positionnée au-dessus du tableau plutôt que dans un panneau latéral. Cette décision a libéré l'espace horizontal dont le tableau avait besoin, réduit le nombre total de panneaux se disputant l'espace et établi un modèle réutilisable pour les options de configuration supplémentaires dans les futurs écrans.",[15,114,115],{},[116,117],"img",{"alt":118,"src":119,"title":120},"Les filtres sont maintenant disposés au-dessus du tableau, économisant l'espace horizontal critique","\u002Fimages\u002Fagentic-analysis-report\u002Freport-creation-filters.png","Écran de configuration du rapport avec filtres horizontaux",[87,122,124],{"id":123},"communiquer-limpact","Communiquer l'impact",[15,126,127],{},"Comme pour Focus Recommendations, le Rapport d'analyse agentique présente un graphique à quatre quadrants représentant les sujets selon deux axes. La méthodologie utilise ici l'élasticité plutôt que la corrélation, une mesure plus rigoureuse de la force avec laquelle les variations d'un sujet sont liées aux variations de la satisfaction. Le défi était le même : rendre ça significatif pour des professionnels CX qui ne sont probablement pas familiers avec l'élasticité en tant que concept.",[15,129,130],{},"Je l'ai appelé « impact », évitant complètement le terme « élasticité » dans l'interface utilisateur.",[15,132,133],{},"La valeur d'élasticité nette (positive moins négative) était visualisée sous forme de jauge. La jauge pouvait être agrandie pour révéler séparément les composantes positives et négatives, offrant aux utilisateurs qui voulaient plus de détails un chemin vers cette information sans exposer cette complexité par défaut.",[15,135,136],{},"Le tri introduisait un problème plus subtil. Trier les sujets par élasticité nette seule aurait mal représenté les sujets volatils. Un sujet avec une forte élasticité positive et négative produirait une valeur nette faible et descendrait vers le bas de la liste, malgré son importance élevée. J'ai trié les sujets par l'ampleur totale (la somme absolue de l'élasticité positive et négative), faisant remonter les sujets ayant le plus d'impact et non seulement les sujets les plus polarisés. L'ampleur totale n'était pas exposée directement aux utilisateurs. Elle déterminait l'ordre sans nécessiter d'explication.",[15,138,139],{},[116,140],{"alt":141,"src":142,"title":143},"La jauge d'impact pouvait être développée pour accéder aux statistiques brutes","\u002Fimages\u002Fagentic-analysis-report\u002Fimpact-meter-states.png","Jauge d'impact, réduite et développée",[15,145,146],{},[116,147],{"alt":148,"src":149,"title":150},"Le graphique d'impact classe les sujets en points forts, points faibles ou souhaitable","\u002Fimages\u002Fagentic-analysis-report\u002Fimpact-chart.png","Graphique impact vs. satisfaction",[87,152,154],{"id":153},"linterface-agentique","L'interface agentique",[15,156,157],{},"Le panneau agentique fournit une interface de clavardage pour interroger le jeu de données et poser des questions sur le rapport après sa génération. La vision à long terme est d'intégrer l'agent dans toute l'application, pas seulement dans le rapport.",[15,159,160],{},"Le travail de conception pour l'agent portait sur les micro-interactions. Dans une application centrée sur les données où la plupart des interactions sont immédiates, une interface conversationnelle introduit un nouveau type d'attente, et la manière dont cette attente est ressentie a son importance. Des éléments de clavardage qui apparaissent sans transition sont heurtants. Ils rompent le rythme conversationnel que l'interface essaie d'établir.",[15,162,163],{},"J'ai implémenté des animations et des transitions subtiles partout : des éléments qui s'animent en douceur plutôt que d'apparaître brusquement et une animation de points en mouvement en attendant les réponses de l'agent, le même modèle que les applications de messagerie utilisent pour montrer qu'un contact est en train d'écrire. L'effet est discret mais important : il signale qu'un travail est en cours, maintient le sentiment d'un échange en direct et confère à l'interface une qualité de réactivité que la latence sous-jacente compromettrait autrement.",[15,165,166],{},[18,167],{"src":168,"style":169,"controls":21,"preload":22,"muted":21,"poster":170},"\u002Fimages\u002Fagentic-analysis-report\u002Fchat-interaction.webm","width: 380px;","\u002Fimages\u002Fagentic-analysis-report\u002Fchat-interaction.png",[25,172,174],{"id":173},"travaux-techniques-complémentaires","Travaux techniques complémentaires",[15,176,177,180],{},[39,178,179],{},"Rapports multilingues :"," L'application supportait la localisation en anglais et en français via react-i18n, mais le LLM pouvait générer des rapports dans de nombreuses langues. Ça créait un décalage : les chaînes fixes de l'application et le contenu variable du modèle devaient coexister dans le même document. J'ai proposé un modèle pour stocker tout le contenu du rapport (y compris les chaînes fixes) dans le backend, les traduire et les mettre en cache à la demande, et assembler le résultat final côté serveur. L'application n'avait donc pas à gérer le rendu linguistique arbitraire et la logique de traduction restait centralisée dans un seul endroit. Ça réduisait aussi la variabilité d'un processus intrinsèquement non déterministe : les chaînes fixes étaient traduites une fois et mises en cache plutôt que régénérées à chaque requête et le LLM n'était jamais sollicité pour les produire, seulement pour les traduire. Les descriptions clés restent cohérentes d'une exécution de rapport à l'autre, quelle que soit la langue.",[15,182,183,186],{},[39,184,185],{},"Améliorations des graphiques :"," Le graphique du rapport partageait son approche avec Focus Recommendations, mais avec une implémentation plus dynamique des limites de quadrants. J'ai ajouté une détection des collisions pour éviter que les libellés des sujets se chevauchent, une nette amélioration par rapport au graphique FR qui n'avait aucun mécanisme pour gérer ça.",[15,188,189,192],{},[39,190,191],{},"Génération PDF dans le navigateur :"," Le rapport était conçu comme un livrable final, quelque chose que les clients pouvaient remettre directement aux parties prenantes plutôt qu'un écran de travail. Le PDF était généré dans le navigateur via react-pdf, produisant un document avec du texte enrichi correctement sélectionnable plutôt qu'une image matricielle. Pour un rapport destiné à être partagé, annoté et cité, la qualité du texte n'est pas une préoccupation cosmétique.",[15,194,195,198],{},[39,196,197],{},"Développement assisté par l'IA :"," J'ai utilisé des outils IA tout au long du projet, de l'itération préalable et du prototypage jusqu'à l'implémentation. Pour une fonctionnalité de cette envergure, le gain de temps était considérable.",[15,200,201],{},[116,202],{"alt":203,"src":204,"title":205},"La qualité de la génération PDF dans le navigateur permettait de le partager facilement avec les parties prenantes","\u002Fimages\u002Fagentic-analysis-report\u002Fpdf-report-example.png","Aperçu d'une page de l'export PDF",[25,207,209],{"id":208},"mise-en-production-par-étapes","Mise en production par étapes",[15,211,212],{},"La fonctionnalité a été mise en production par phases :",[214,215,216,223,229,235,241],"ul",{},[217,218,219,222],"li",{},[39,220,221],{},"T4 2025 :"," Première version du rapport : génération, affichage, graphique, rendu Markdown, états de chargement et d'erreur",[217,224,225,228],{},[39,226,227],{},"Fin T1 2026 :"," Export PDF dans le navigateur",[217,230,231,234],{},[39,232,233],{},"T1-T2 2026 :"," Workflow de filtrage, refactorisation du composant de filtre composable",[217,236,237,240],{},[39,238,239],{},"T2 2026 :"," Panneau agentique, feuille de route pour retirer Focus Recommendations",[217,242,243,246],{},[39,244,245],{},"T2-T3 2026 :"," Support multilingue (en QA au moment de la rédaction)",[25,248,250],{"id":249},"résultat","Résultat",[15,252,253],{},"Le Rapport d'analyse agentique est devenu une fonctionnalité phare pour les démos et les événements sectoriels, générant un fort enthousiasme auprès des clients potentiels. Le cycle de vente était trop long pour attribuer des contrats signés au moment de mon départ, mais l'accueil lors de la phase bêta était le plus fort de toutes les fonctionnalités lancées pendant mon passage dans l'entreprise.",{"title":255,"searchDepth":256,"depth":257,"links":258},"",2,1,[259,260,261,262,263,264,265],{"id":27,"depth":256,"text":28},{"id":34,"depth":256,"text":35},{"id":57,"depth":256,"text":58},{"id":78,"depth":256,"text":79},{"id":173,"depth":256,"text":174},{"id":208,"depth":256,"text":209},{"id":249,"depth":256,"text":250},"Rapport CX généré par IA avec une interface de clavardage agentique","md","\u002Fimages\u002Fagentic-analysis-report\u002Fagentic-report-thumbnail.png",null,{},0,"\u002Fwork\u002Frapport-analyse-agentique",{"title":6,"description":266},"work\u002Frapport-analyse-agentique",[276,277,278],"Design","Development","AI",[280,284,288,292,296,300],{"name":281,"img":282,"href":283},"Figma","\u002Fimages\u002Ftools\u002Ffigma.svg","https:\u002F\u002Fwww.figma.com",{"name":285,"img":286,"href":287},"React","\u002Fimages\u002Ftools\u002Freact.svg","https:\u002F\u002Freact.dev",{"name":289,"img":290,"href":291},"TypeScript","\u002Fimages\u002Ftools\u002Ftypescript.svg","https:\u002F\u002Fwww.typescriptlang.org",{"name":293,"img":294,"href":295},"MUI","\u002Fimages\u002Ftools\u002Fmui.svg","https:\u002F\u002Fmui.com",{"name":297,"img":298,"href":299},"RTK Query","\u002Fimages\u002Ftools\u002Fredux.svg","https:\u002F\u002Fredux-toolkit.js.org",{"name":301,"img":302,"href":303},"react-pdf","\u002Fimages\u002Ftools\u002Freact-pdf.png","https:\u002F\u002Freact-pdf.org","m2pOkS4A6DBD6sDduCcuafmBvyvQj8-f379tmxN7IjE",{"id":306,"title":307,"body":308,"description":461,"extension":267,"featureImage":462,"featured":21,"links":269,"meta":463,"navigation":21,"order":257,"path":74,"seo":464,"stem":465,"tags":466,"tools":468,"__hash__":473},"work_fr\u002Fwork\u002Ffocus-recommendations.md","Focus Recommendations",{"type":8,"value":309,"toc":453},[310,313,320,322,325,327,332,337,341,344,347,349,352,355,359,362,369,372,379,385,388,392,395,398,405,409,412,415,418,425,429,432,435,438,448,450],[11,311,307],{"id":312},"focus-recommendations",[15,314,315],{},[116,316],{"alt":317,"src":318,"title":319},"Focus Recommendations offrait des insights clés sur ce qui nécessitait de l'attention sur le moment","\u002Fimages\u002Ffocus-recommendations\u002Ffocus-recommendations-feature.png","La page Focus Recommendations",[25,321,28],{"id":27},[15,323,324],{},"J'ai conçu de zéro Focus Recommendations, l'approche de la plateforme pour l'analyse des facteurs clés. La fonctionnalité traduisait en insights actionnables, pour les professionnels CX, les données complexes de corrélation et de satisfaction fournies par l'équipe NLP\u002Fstats : quels sujets influençaient leurs scores, et où concentrer leurs efforts. Mise en production en août 2022, elle a ensuite intégré des recommandations générées par IA et est devenue une fonctionnalité phare en démo et un facteur décisif dans la conversion de clients. À mesure que le produit évoluait, j'ai identifié qu'une fonctionnalité plus récente avait supplanté la majeure partie de ses capacités, et j'ai proposé la feuille de route pour la retirer.",[25,326,35],{"id":34},[15,328,329,331],{},[39,330,41],{}," Conception de bout en bout, tests internes et itération, contributions à l'implémentation sur le graphique FR et les widgets Actionable Insights",[15,333,334,336],{},[39,335,53],{}," Première mise en production août 2022. Actionable Insights octobre 2023",[25,338,340],{"id":339},"lopportunité","L'opportunité",[15,342,343],{},"Rien dans le produit ne ressemblait à Focus Recommendations avant son existence. La plateforme était déjà performante pour faire remonter ce que les clients disaient, mais elle n'indiquait pas aux clients quoi en faire. FR a été conçue pour combler cet écart : pas seulement de l'analyse, mais des recommandations. Un client pouvait voir quels sujets influençaient son score de satisfaction (NPS, CSAT ou autre échelle) à la hausse ou à la baisse, et où concentrer ses efforts.",[15,345,346],{},"Le concept initial venait de l'équipe NLP\u002Fstats. Mon rôle était de le traduire en quelque chose qu'un professionnel CX construisant des rapports pour ses parties prenantes pouvait réellement utiliser.",[25,348,79],{"id":78},[15,350,351],{},"J'ai piloté la conception de bout en bout, traduisant le concept statistique en quelque chose d'utilisable, testant et itérant en interne, et contribuant à l'implémentation sur le graphique FR et les widgets Actionable Insights.",[15,353,354],{},"Trois problèmes de conception ont défini le projet.",[87,356,358],{"id":357},"traduire-la-corrélation-en-visuel","Traduire la corrélation en visuel",[15,360,361],{},"Le graphique à quatre quadrants donnait la vue d'ensemble. Représenter les sujets par corrélation et score de satisfaction moyen rendait les priorités immédiatement claires. Le problème plus difficile était la vue tableau : communiquer la même information à l'échelle d'un sujet, dans une seule icône, sans que les utilisateurs aient à comprendre ce que signifie la corrélation.",[15,363,364],{},[116,365],{"alt":366,"src":367,"title":368},"Le graphique permet d'identifier rapidement ce qui nécessite réellement attention","\u002Fimages\u002Ffocus-recommendations\u002Ffocus-recommendations-chart.png","Gros plan sur le graphique",[15,370,371],{},"J'ai opté pour une icône en forme de cible : trois anneaux concentriques, où plus d'anneaux remplis indiquaient un impact plus fort. L'impact positif ou négatif était communiqué par la couleur (vert pour positif, rouge pour négatif), en rompant délibérément avec notre palette compliment\u002Fproblème, puisque cette analyse est basée sur les scores de satisfaction plutôt que sur nos catégories de sentiment. Une icône de flèche et un pourcentage de corrélation renforçaient la direction pour les utilisateurs daltoniens.",[15,373,374],{},[116,375],{"alt":376,"src":377,"title":378},"Les icônes d'impact exprimaient l'ampleur et la polarité","\u002Fimages\u002Ffocus-recommendations\u002Ftarget-icons.png","Variantes des icônes cible",[15,380,381],{},[116,382],{"alt":383,"src":384},"La vue tableau montre un peu plus de détail","\u002Fimages\u002Ffocus-recommendations\u002Ftable-view.png",[15,386,387],{},"La première version utilisait un seuil absolu pour déterminer combien d'anneaux remplir. Les tests ont révélé le problème : les jeux de données varient considérablement d'un client à l'autre, et les seuils absolus produisaient des résultats très incohérents : certains clients voyant surtout des sujets à trois anneaux, d'autres surtout à un. On est passé à un calcul relatif, en fixant les seuils par rapport à la distribution des résultats dans chaque jeu de données. L'icône est devenue stable et significative quelle que soit la nature du jeu de données. Les libellés ont suivi une itération similaire. Le langage décrivant les quadrants et les niveaux d'impact devait être précis sans nécessiter de formation en statistiques.",[87,389,391],{"id":390},"aller-au-delà-du-nps","Aller au-delà du NPS",[15,393,394],{},"La première mise en production supportait une paire notation-réponse NPS unique, le cas le plus courant mais qui excluait les clients utilisant d'autres échelles de satisfaction ou réalisant des sondages complexes avec plusieurs paires notation-réponse.",[15,396,397],{},"On a étendu la couverture par étapes. D'abord, une fenêtre modale permettant aux utilisateurs d'ordonner n'importe quel champ (numérique, ou non numérique, une échelle de Likert par exemple) du moins satisfait au plus satisfait et de l'utiliser comme variable de réponse. Puis le support de plusieurs paires notation-réponse, permettant l'analyse de sondages contenant plusieurs ensembles de questions, un déblocage majeur pour les clients entreprise réalisant des recherches complexes.",[15,399,400],{},[116,401],{"alt":402,"src":403,"title":404},"Les notes pouvaient être facilement réordonnées en termes de satisfaction","\u002Fimages\u002Ffocus-recommendations\u002Fratings-configuration.png","La fenêtre de configuration des notes",[87,406,408],{"id":407},"actionable-insights","Actionable Insights",[15,410,411],{},"En octobre 2023, on a ajouté Actionable Insights : des recommandations générées par IA sur la façon d'améliorer les sujets identifiés comme facteurs clés. Plutôt que de faire remonter des recommandations pour chaque sujet, j'ai défini des critères de sélection (les trois facteurs négatifs les plus corrélés et les trois positifs les plus corrélés), gardant les résultats ciblés et exploitables plutôt qu'exhaustifs.",[15,413,414],{},"Les recommandations apparaissaient sous forme de cartes paginées au-dessus du graphique, chacune couvrant un sujet unique avec la possibilité de développer pour plus de détails. J'ai inclus un mécanisme de rejet sur chaque carte, qui servait deux objectifs : permettre aux utilisateurs d'effacer les recommandations sur lesquelles ils avaient agi ou qu'ils trouvaient non pertinentes, et nous donner un signal de feedback implicite sur la qualité des recommandations. Un export PDF du résumé complet des recommandations soutenait le workflow des clients construisant des rapports pour les parties prenantes.",[15,416,417],{},"La liste des opinions clés dans la vue tableau a également été migrée vers un résumé généré par IA à ce moment-là, réduisant le bruit et améliorant la lisibilité.",[15,419,420],{},[116,421],{"alt":422,"src":423,"title":424},"Actionable Insights fournit de vraies recommandations pour améliorer la satisfaction","\u002Fimages\u002Ffocus-recommendations\u002Factionable-insights.png","Les cartes Actionable Insights",[25,426,428],{"id":427},"ce-qui-a-suivi","Ce qui a suivi",[15,430,431],{},"Alors que le Rapport d'analyse agentique approchait de la fin de sa bêta, j'ai constaté que les deux fonctionnalités avaient largement convergé. Le Rapport d'analyse agentique utilisait l'élasticité (présentée aux utilisateurs comme « impact » pour garder le langage accessible) et organisait ses quadrants différemment : points forts, points faibles, souhaitable, et un quatrième intentionnellement sans libellé. Il faisait presque tout ce que faisait Focus Recommendations, avec plus de détails et une meilleure méthodologie.",[15,433,434],{},"L'écart était étroit mais réel : le Rapport d'analyse agentique ne supportait pas encore les champs non-NPS ni les sondages complexes multi-paires. J'ai rédigé une feuille de route pour amener les deux fonctionnalités à parité et retirer Focus Recommendations, l'ai présentée au responsable produit, validé l'approche, et transformé les éléments en tickets de backlog priorisés. Les principales lacunes à combler étaient le support des champs non-NPS et des sondages complexes multi-paires dans le Rapport d'analyse agentique, et l'intégration de son graphique impact-satisfaction au tableau de bord. Des ensembles de filtres réutilisables et enregistrables étaient aussi sur la liste, avec une priorité moindre.",[15,436,437],{},"Ce n'était pas une décision prise dès le départ. C'était une décision produit que j'ai formulée à mesure que les deux fonctionnalités convergeaient, vers la fin de la bêta du Rapport d'analyse agentique.",[15,439,440],{},[68,441,442,443,447],{},"Le widget tableau de bord qui a intégré Focus Recommendations dans le produit plus large est décrit dans l'",[72,444,446],{"href":445},"\u002Fwork\u002Fcustomizable-dashboard","étude de cas Tableau de bord personnalisable ->",".",[25,449,250],{"id":249},[15,451,452],{},"Focus Recommendations a été mise en production en août 2022 et est devenue une fonctionnalité phare en démo et un facteur dans la conversion d'au moins un client. Elle a représenté une expansion notable de la proposition de valeur du produit, passant de faire remonter ce que les clients disaient à indiquer aux clients quoi en faire. L'approche qu'elle a validée a été reprise et améliorée dans le Rapport d'analyse agentique.",{"title":255,"searchDepth":256,"depth":257,"links":454},[455,456,457,458,459,460],{"id":27,"depth":256,"text":28},{"id":34,"depth":256,"text":35},{"id":339,"depth":256,"text":340},{"id":78,"depth":256,"text":79},{"id":427,"depth":256,"text":428},{"id":249,"depth":256,"text":250},"Outil d'analyse des facteurs clés pour les scores de satisfaction CX","\u002Fimages\u002Ffocus-recommendations\u002Ffocus-recommendations-thumbnail.png",{},{"title":307,"description":461},"work\u002Ffocus-recommendations",[276,277,467],"Data",[469,470,471,472],{"name":281,"img":282,"href":283},{"name":285,"img":286,"href":287},{"name":289,"img":290,"href":291},{"name":293,"img":294,"href":295},"gkUT8RA7xPsrEjOIea-JOWSPZzTQPI8DtfWZWgWKWCg",{"id":475,"title":476,"body":477,"description":639,"extension":267,"featureImage":487,"featured":21,"links":269,"meta":640,"navigation":21,"order":256,"path":641,"seo":642,"stem":643,"tags":644,"tools":645,"__hash__":650},"work_fr\u002Fwork\u002Ftableau-de-bord-personnalisable.md","Tableau de bord personnalisable",{"type":8,"value":478,"toc":631},[479,482,489,491,494,496,502,507,512,516,519,526,528,531,534,538,541,544,547,550,553,561,568,572,575,578,584,587,594,596,599,602,609,616,618,621,625,628],[11,480,476],{"id":481},"tableau-de-bord-personnalisable",[15,483,484],{},[116,485],{"alt":486,"src":487,"title":488},"Un tableau de bord hautement configurable permettant des insights d'un coup d'œil","\u002Fimages\u002Fcustomizable-dashboard\u002Fdashboard-feature.png","Le tableau de bord avec la fenêtre d'ajout de widget ouverte",[25,490,28],{"id":27},[15,492,493],{},"J'ai conçu et développé de zéro un tableau de bord personnalisable pour une plateforme d'analyse de texte IA dédiée au secteur CX. Responsabilité de bout en bout : recherche concurrentielle, conception UX, tests internes et implémentation frontend. Le tableau de bord est devenu le point d'entrée principal de l'application et un facteur clé dans la conversion et le renouvellement de plusieurs clients.",[25,495,35],{"id":34},[15,497,498,501],{},[39,499,500],{},"Produit :"," Une plateforme d'analyse de texte IA pour le secteur CX. Un pipeline NLP extrayait des paires sujet-opinion à partir de retours clients libres, les classifiant en compliments, problèmes, suggestions, questions ou neutre, et leur attribuait un score. La plateforme s'intégrait à de nombreuses sources de données et enrichissait l'analyse avec de l'IA générative.",[15,503,504,506],{},[39,505,41],{}," Designer et développeur frontend unique",[15,508,509,511],{},[39,510,53],{}," Première mise en production T3-T4 2021, avec des mises en production de fonctionnalités itératives jusqu'en 2025",[25,513,515],{"id":514},"le-problème","Le problème",[15,517,518],{},"La plateforme faisait remonter des insights riches et structurés à partir des retours clients (analyse de sentiment, analyse de sujets, tendances de volume, données sources) mais uniquement via des vues tableau et graphique statiques. Un tableau de bord fixe existait, mais il était totalement non personnalisable. Chaque client voyait la même chose quelle que soit la nature de ce qu'il devait réellement surveiller. Il n'y avait aucun moyen d'adapter l'interface à un cas d'usage spécifique, et la profondeur du produit n'était pas visible lors des démos commerciales. Les clients avaient peu de raisons de se connecter régulièrement.",[15,520,521],{},[116,522],{"alt":523,"src":524,"title":525},"L'ancien tableau de bord n'offrait quasiment aucune personnalisation","\u002Fimages\u002Fcustomizable-dashboard\u002Fold-dashboard.png","L'ancien tableau de bord",[25,527,79],{"id":78},[15,529,530],{},"J'ai piloté le projet depuis la recherche concurrentielle jusqu'à l'implémentation en production, concevant et développant un tableau de bord entièrement personnalisable avec un éditeur de disposition, un système de widgets configurables, plusieurs types de graphiques, le partage interne, des vues publiques non authentifiées, un sélecteur de tableau de bord et un workflow d'ajout de widget.",[15,532,533],{},"Trois problèmes ont orienté les décisions les plus importantes.",[87,535,537],{"id":536},"léditeur-de-disposition","L'éditeur de disposition",[15,539,540],{},"Le redimensionnement et le repositionnement des widgets ne se produisent qu'en mode édition dédié, une décision architecturale délibérée qui sépare les modifications de disposition de l'utilisation normale du tableau de bord. Dans ce mode, le défi restant était de rendre les interactions précises et claires : supporter le glisser-déposer, communiquer ce que les gestes de redimensionnement et de repositionnement allaient faire avant qu'un utilisateur ne le déclenche, garder la grille compacte sans écraser la disposition voulue, et s'assurer que les zones cliquables étaient suffisamment distinctes pour éviter les erreurs. C'était donc nécessaire de concevoir et de spécifier chaque état de widget explicitement (base, édition, redimensionnement X, redimensionnement Y, survol, et en cours de glissement), chacun avec ses propres affordances.",[15,542,543],{},"Compte tenu de la complexité du comportement de la grille (logique de compaction, contraintes de redimensionnement, interactions de glissement), j'ai créé des prototypes en code pour explorer et valider le ressenti des interactions avant de m'engager dans l'implémentation complète. Certains problèmes d'interaction ne se manifestent qu'à l'exécution. Prototyper en code plutôt que dans Figma signifiait que les tests qui suivaient se basaient sur un comportement réaliste.",[15,545,546],{},"Les tests avec des utilisateurs internes ont globalement validé la direction. Une exception : l'icône indiquant qu'un widget pouvait être déplacé n'était pas claire. On l'a mise à jour et ça a réglé le problème. Les autres états d'interaction et affordances ont résisté aux tests sans modifications.",[15,548,549],{},"J'ai écarté une fonctionnalité pendant le projet : les modèles de tableau de bord préconstruits. Ils n'étaient pas nécessaires. Les utilisateurs pouvaient rapidement créer un premier tableau de bord adapté, l'équipe commerciale en configurait généralement un lors de l'onboarding, et une fonctionnalité de duplication existante offrait déjà à quiconque la possibilité de réutiliser un tableau de bord comme point de départ.",[15,551,552],{},"Le tableau de bord a également introduit un nouveau modèle de filtre. Le tableau de bord statique original disposait d'un filtre global appliqué sur toute la vue. On a pris la décision délibérée de le supprimer en faveur de l'indépendance au niveau des widgets, en gardant uniquement les filtres de sentiment comme globaux. Chaque widget pouvait avoir ses propres filtres, locaux et éphémères, avec la possibilité de les rendre réutilisables. Le compromis était intentionnel : l'indépendance des widgets avait plus de valeur à ce stade que le filtrage global et réduisait énormément la complexité du projet. Ça avait été signalé tôt par l'équipe de développement et intégré dans le design.",[15,554,555],{},[18,556],{"src":557,"controls":21,"preload":22,"muted":21,"poster":558,"alt":559,"title":560},"\u002Fimages\u002Fcustomizable-dashboard\u002Flayout-editing.webm","\u002Fimages\u002Fcustomizable-dashboard\u002Flayout-editing.png","Le tableau de bord permettait des dispositions personnalisées, mais essayait de combler automatiquement les espaces vides","Édition de la disposition",[15,562,563],{},[116,564],{"alt":565,"src":566,"title":567},"Les interactions de glisser-déposer nécessitaient des états d'interaction et des spécifications approfondis","\u002Fimages\u002Fcustomizable-dashboard\u002Finteraction-states.png","La spec des états d'interaction dans les widgets",[87,569,571],{"id":570},"le-système-de-couleurs","Le système de couleurs",[15,573,574],{},"Les graphiques de la plateforme étaient construits autour d'une palette de couleurs sémantique liée aux catégories de retours (vert pour les compliments, jaune pour les problèmes, bleu pour les suggestions, violet clair pour les questions, gris pour les neutres). Ces couleurs portaient du sens. Quand on a ajouté des types de graphiques comme les séries temporelles, où les couleurs représentent des séries de données plutôt que des catégories de retours, cette palette ne pouvait pas être réutilisée. Les associations auraient été trompeuses, et cinq couleurs n'étaient de toute façon pas suffisantes. On avait besoin d'une palette catégorique capable de distinguer jusqu'à 20 séries clairement, sans connotation.",[15,576,577],{},"J'ai suivi de près la méthodologie de séquence de couleurs inclusives d'IBM, générant des teintes pour chaque nuance avec Colorbox.io, travaillant la palette complète dans Figma, puis adaptant et étendant notre thème MUI pour l'implémenter de manière systématique. Chaque couleur a été conçue pour satisfaire un ratio de contraste de 3:1 sur fond clair.",[15,579,580],{},[116,581],{"alt":582,"src":583},"Un ensemble de couleurs de base, sélectionnées pour la visualisation de données","\u002Fimages\u002Fcustomizable-dashboard\u002Fbase-palette.png",[15,585,586],{},"Le contraste entre les couleurs a été géré structurellement : la grille a été organisée avec un saut en chevron de sorte que seules les nuances ayant un contraste suffisant entre elles soient adjacentes dans la séquence et une règle d'utilisation a été établie pour toujours itérer dans la palette dans l'ordre plutôt que de choisir les couleurs librement. L'accessibilité est garantie par le système lui-même, elle ne dépend pas de jugements individuels au moment de l'implémentation.",[15,588,589],{},[116,590],{"alt":591,"src":592,"title":593},"Un motif en chevron répété a été utilisé pour séquencer les couleurs","\u002Fimages\u002Fcustomizable-dashboard\u002Fchevron-skip.png","La méthodologie de sélection par saut en chevron",[87,595,307],{"id":312},[15,597,598],{},"Focus Recommendations est l'approche de l'application pour l'analyse des facteurs clés, combinant la corrélation d'un sujet avec les variations du score de satisfaction par rapport à son score de satisfaction moyen pour faire remonter ce qui influence activement la satisfaction ou l'insatisfaction des clients, et où concentrer les efforts.",[15,600,601],{},"J'étais fortement impliqué dans le développement de Focus Recommendations en tant que fonctionnalité autonome. Le widget tableau de bord était ce qui l'avait intégrée dans le produit plus large, traduisant le graphique à quatre quadrants et les listes d'insights actionnables pour qu'ils fonctionnent à la fois sur la page dédiée de Focus Recommendations et comme widget redimensionnable aux côtés d'autres contenus du tableau de bord. L'adaptation de la logique de filtre FR pour coexister avec l'architecture de filtre du tableau de bord nécessitait une collaboration étroite avec le développement pour élaborer les différences et trouver un point d'intégration propre.",[15,603,604],{},[116,605],{"alt":606,"src":607,"title":608},"Les widgets Focus Recommendations présentaient leurs propres défis uniques","\u002Fimages\u002Fcustomizable-dashboard\u002Ffocus-recommendations-widget.png","Le widget Focus Recommendations",[15,610,611],{},[68,612,613,614,447],{},"Focus Recommendations est traité en profondeur dans une ",[72,615,75],{"href":74},[25,617,250],{"id":249},[15,619,620],{},"Le tableau de bord a été mis en production au T3-T4 2021 et est devenu le point d'entrée principal de l'application et la fonctionnalité phare des démos clients. Il a été cité comme facteur clé dans la conversion et le renouvellement de plusieurs clients, des enjeux importants pour une petite entreprise où chaque contrat comptait.",[25,622,624],{"id":623},"après-le-lancement","Après le lancement",[15,626,627],{},"Le tableau de bord a continué d'évoluer. L'ensemble de widgets initial était minimal et largement fixe (scores de sentiment, volume, comptages d'enregistrements, ventilations par source, sujets principaux). Ceux-ci ont été progressivement remplacés par des widgets de graphiques entièrement personnalisables : graphiques en barres, séries temporelles, tableaux de données, graphiques circulaires, widget numérique et carte de chaleur retravaillée. Une troisième vague a ajouté des widgets plus complexes et analytiquement avancés : notes en texte enrichi, questions matricielles et Focus Recommendations.",[15,629,630],{},"Un filtre au niveau du tableau de bord a également été mis en production dans un cycle ultérieur, réintroduisant le filtrage inter-tableau de bord sous une forme plus puissante. Appliqué sur tous les widgets simultanément, qui restreignait toujours, sans jamais élargir, leurs filtres individuels, et indépendant des filtres d'analyse globaux de l'application, il permettait aux utilisateurs de découper un tableau de bord entier sans perdre le contexte indépendant que chaque widget portait. Le modèle de filtre, conçu en amont pour supporter l'indépendance au niveau des widgets, s'est étendu sans accroc pour l'intégrer.",{"title":255,"searchDepth":256,"depth":257,"links":632},[633,634,635,636,637,638],{"id":27,"depth":256,"text":28},{"id":34,"depth":256,"text":35},{"id":514,"depth":256,"text":515},{"id":78,"depth":256,"text":79},{"id":249,"depth":256,"text":250},{"id":623,"depth":256,"text":624},"Tableau de bord analytique personnalisable avec un éditeur par glisser-déposer",{},"\u002Fwork\u002Ftableau-de-bord-personnalisable",{"title":476,"description":639},"work\u002Ftableau-de-bord-personnalisable",[276,277,467],[646,647,648,649],{"name":281,"img":282,"href":283},{"name":285,"img":286,"href":287},{"name":289,"img":290,"href":291},{"name":293,"img":294,"href":295},"dLLkM61DaXPS3YoRgqcjdm5z8BhOjqpPIre-slgUn-0",1782790338121]