[{"data":1,"prerenderedAt":1109},["ShallowReactive",2],{"\u002Ffr\u002Fprojets\u002F":3},[4,305,474,651,797,940],{"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",{"id":652,"title":653,"body":654,"description":753,"extension":267,"featureImage":661,"featured":754,"links":755,"meta":768,"navigation":21,"order":769,"path":770,"seo":771,"stem":772,"tags":773,"tools":775,"__hash__":796},"work_fr\u002Fwork\u002Fschedio.md","Schedio : un système de design Vue",{"type":8,"value":655,"toc":747},[656,659,663,666,670,686,692,695,699,708,714,720,723,727,730,736,738],[11,657,653],{"id":658},"schedio-un-système-de-design-vue",[116,660],{"src":661,"alt":662,"title":662},"\u002Fimages\u002Fschedio\u002Fschedio-feature.png","schedio",[15,664,665],{},"Schedio est une bibliothèque de composants Vue et un système de design que j'ai construit pour Spartan Bio. L'objectif était de formaliser le design dans une petite entreprise où l'efficacité et la cohérence comptaient d'autant plus que l'équipe était réduite. Je l'ai initié de façon indépendante, livré la v1 en quelques mois et maintenu pendant deux ans. Le nom vient du mot grec signifiant design (schédio, plus ou moins). Spartan appréciait les références grecques.",[25,667,669],{"id":668},"design-tokens","Design tokens",[15,671,672,673,679,680,685],{},"La première étape était de définir les éléments fondamentaux du système : typographie, couleurs, espacement, mouvement. Je les ai structurés comme des ",[72,674,678],{"href":675,"rel":676},"https:\u002F\u002Fwww.lightningdesignsystem.com\u002Fdesign-tokens\u002F",[677],"nofollow","design tokens"," en utilisant ",[72,681,684],{"href":682,"rel":683},"https:\u002F\u002Fgithub.com\u002Fsalesforce-ux\u002Ftheo",[677],"Theo",", qui fournissait une source de vérité unique exportable dans plusieurs formats. Les tokens ont fini par influencer le travail non seulement en Vue, mais aussi sur nos plateformes Windows (WPF) et React Native, même là où les composants eux-mêmes ne pouvaient pas être consommés directement.",[15,687,688],{},[116,689],{"alt":690,"src":691,"title":690},"Travail sur les couleurs dans Theo","\u002Fimages\u002Fschedio\u002Fschedio-tokens-colors.png",[15,693,694],{},"Certains tokens, comme l'easing et le timing des transitions, n'ont de sens que dans le contexte des composants. J'ai d'abord travaillé sur les tokens fondamentaux, puis les ai développés davantage en parallèle du travail sur les composants.",[25,696,698],{"id":697},"bibliothèque-de-composants","Bibliothèque de composants",[15,700,701,702,707],{},"J'ai conçu les composants dans Adobe XD (Figma était nouveau à l'époque et XD avait de meilleurs outils pour ce dont j'avais besoin), en générant des designs statiques avant de construire. ",[72,703,706],{"href":704,"rel":705},"https:\u002F\u002Fstorybook.js.org\u002F",[677],"Storybook"," fournissait le bac à sable de développement et la couche de documentation. Certains plugins supportaient principalement React à l'époque, ce qui nécessitait des contournements pour Vue. Aucun n'était majeur, et le compromis en valait la peine. Notre développeur Windows pouvait se référer à Storybook pour comprendre l'intention de design même quand il ne pouvait pas consommer les composants directement.",[15,709,710],{},[116,711],{"alt":712,"src":713,"title":712},"Composants dans XD","\u002Fimages\u002Fschedio\u002Fschedio-xd.png",[15,715,716],{},[116,717],{"alt":718,"src":719,"title":718},"Schedio dans Storybook","\u002Fimages\u002Fschedio\u002Fschedio-storybook.png",[15,721,722],{},"Chaque composant a été conçu pour respecter WCAG 2.0 AA. J'ai utilisé Jest et Storybook pour appliquer les standards d'accessibilité pendant le développement plutôt qu'en audit après coup.",[25,724,726],{"id":725},"documentation","Documentation",[15,728,729],{},"Storybook n'est pas idéal pour la documentation non technique (directives d'utilisation, philosophie d'interaction, application des couleurs). J'avais besoin d'un endroit pour la mettre et je n'avais pas le temps de construire un site de documentation séparé, donc elle est restée dans Storybook aux côtés des composants. Pour une équipe petite et majoritairement technique, ça fonctionnait. La limitation était un compromis conscient pour l'échelle à laquelle on opérait.",[15,731,732],{},[116,733],{"alt":734,"src":735,"title":734},"Documentation pour Schedio","\u002Fimages\u002Fschedio\u002Fschedio-logo-usage.png",[25,737,250],{"id":249},[15,739,740,741,746],{},"Schedio a été mis en production comme fondation pour le site corporate Vue de Spartan et utilisé dans les outils internes. Ses design tokens et ses patterns d'interaction ont influencé le travail sur nos plateformes WPF et React Native. ",[72,742,745],{"href":743,"rel":744},"https:\u002F\u002Fgithub.com\u002FShopify\u002Fpolaris-react\u002F",[677],"Polaris"," de Shopify a été une influence déterminante sur l'approche, particulièrement sa réflexion sur la façon dont un système de design doit servir une équipe produit sans la contraindre.",{"title":255,"searchDepth":256,"depth":257,"links":748},[749,750,751,752],{"id":668,"depth":256,"text":669},{"id":697,"depth":256,"text":698},{"id":725,"depth":256,"text":726},{"id":249,"depth":256,"text":250},"Un système de design et une bibliothèque de composants pour Spartan Bio",false,[756,759,762,765],{"title":757,"href":758},"Schedio","https:\u002F\u002Fspartanbio-design.netlify.app",{"title":760,"href":761},"Fork de Schedio sur GitHub","https:\u002F\u002Fgithub.com\u002Falexkcollier\u002Fschedio",{"title":763,"href":764},"Schedio Tokens","https:\u002F\u002Fspartanbio.github.io\u002Fschedio-tokens\u002F",{"title":766,"href":767},"Fork Schedio Tokens sur GitHub","https:\u002F\u002Fgithub.com\u002Falexkcollier\u002Fschedio-tokens",{},4,"\u002Fwork\u002Fschedio",{"title":653,"description":753},"work\u002Fschedio",[276,277,774],"Design System",[776,780,784,786,788,792],{"name":777,"img":778,"href":779},"Adobe XD","\u002Fimages\u002Ftools\u002Fxd.svg","https:\u002F\u002Fwww.adobe.com\u002Fca\u002Fproducts\u002Fxd.html",{"name":781,"img":782,"href":783},"Vue.js","\u002Fimages\u002Ftools\u002Fvue.svg","https:\u002F\u002Fvuejs.org",{"name":706,"img":785,"href":704},"\u002Fimages\u002Ftools\u002Fstorybook.svg",{"name":684,"img":787,"href":682},"\u002Fimages\u002Ftools\u002Ftheo.png",{"name":789,"img":790,"href":791},"Sass","\u002Fimages\u002Ftools\u002Fsass.svg","https:\u002F\u002Fsass-lang.com",{"name":793,"img":794,"href":795},"Jest","\u002Fimages\u002Ftools\u002Fjest.png","https:\u002F\u002Fjestjs.io\u002F","TLhUGbQ8UgNczg-5suEtHvPR3Nue6QlFI0Eb7sE2q6E",{"id":798,"title":799,"body":800,"description":921,"extension":267,"featureImage":809,"featured":754,"links":269,"meta":922,"navigation":21,"order":923,"path":924,"seo":925,"stem":926,"tags":927,"tools":929,"__hash__":939},"work_fr\u002Fwork\u002Fapplication-test-environnemental.md","Application de test environnemental",{"type":8,"value":801,"toc":914},[802,805,810,813,815,818,821,835,838,842,845,848,854,860,863,869,876,880,883,889,892,896,899,903,909,911],[11,803,799],{"id":804},"application-de-test-environnemental",[15,806,807],{},[116,808],{"alt":799,"src":809,"title":799},"\u002Fimages\u002Fenvironmental-testing-app\u002Flegionella-mobile-feature.jpg",[15,811,812],{},"J'étais le seul designer sur un client mobile pour le test Legionella de Spartan, travaillant avec un développeur mobile pour porter un système sur ordinateur vers iOS et Android. La plupart des fonctionnalités principales ont été conçues et développées avant que le projet ne soit annulé lors de la fermeture de l'entreprise.",[25,814,515],{"id":514},[15,816,817],{},"Le système original fonctionnait sur un ordinateur portable connecté au Spartan Cube par câble, un ordinateur par Cube, filaire. Les responsables d'installation effectuant des tests sur des sites plus grands avaient besoin de plusieurs systèmes, devaient relever manuellement les résultats sur chaque ordinateur, et géraient un encombrement physique important. Le système fonctionnait. L'usage en conditions réelles avait rendu ses limites évidentes.",[15,819,820],{},"La refonte y répondait directement :",[214,822,823,826,829,832],{},[217,824,825],{},"Contrôle mobile remplaçant l'ordinateur dédié",[217,827,828],{},"Connectivité sans fil via Bluetooth Low Energy (BLE)",[217,830,831],{},"Capable de surveiller plusieurs Cubes simultanément",[217,833,834],{},"Résultats envoyés vers un serveur distant",[15,836,837],{},"Les fonctionnalités principales de l'original ont été conservées : un workflow de test guidé, des instructions étape par étape et un journal de résultats recherchable.",[25,839,841],{"id":840},"structure-et-wireframes","Structure et wireframes",[15,843,844],{},"J'ai commencé par cartographier la structure de l'application autour des cas d'usage plutôt que des types de données, aboutissant à cinq sections : workflow de test, statut du Cube, journal de résultats, paramètres et gestion des sources d'eau.",[15,846,847],{},"Les wireframes ont suivi pour les écrans clés. L'écran d'instructions nécessitait des actions principales accessibles sans s'étirer sur les grands téléphones, ce qui a écarté d'emblée plusieurs dispositions trop denses en haut de l'écran. Pour le journal de résultats, j'ai wireframé quatre approches avant de retenir une liste segmentée avec des en-têtes sticky, qui offrait le meilleur équilibre entre densité d'information et facilité d'utilisation.",[15,849,850],{},[116,851],{"alt":852,"src":853,"title":852},"Wireframes de l'écran d'instructions","\u002Fimages\u002Fenvironmental-testing-app\u002Finstructions-wire.png",[15,855,856],{},[116,857],{"alt":858,"src":859,"title":858},"Wireframes de l'écran du journal","\u002Fimages\u002Fenvironmental-testing-app\u002Flog-wire.png",[15,861,862],{},"La navigation était une question ouverte. J'ai construit un prototype dans Adobe XD, l'ai chargé sur mon téléphone et effectué des tests de couloir. La disposition avec barre inférieure l'a emporté. Les participants appréciaient le chemin rapide pour démarrer un test, et trouvaient la carte du journal de résultats sur l'écran d'accueil déroutante.",[15,864,865],{},[116,866],{"alt":867,"src":868,"title":867},"Wireframes de l'écran d'accueil","\u002Fimages\u002Fenvironmental-testing-app\u002Flanding-wire.png",[15,870,871],{},[18,872],{"src":873,"controls":21,"muted":21,"style":874,"poster":875},"\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation.webm","max-height: 400px;","\u002Fimages\u002Fenvironmental-testing-app\u002Fnavigation-poster.png",[25,877,879],{"id":878},"design-et-prototype","Design et prototype",[15,881,882],{},"Après le wireframing, je suis passé à Framer, écrivant un prototype entièrement interactif avec des données en direct et des interactions codées. C'était l'outil de transfert principal. Le développeur signalait tout ce qui ne pouvait pas être implémenté ou nécessitait une révision, et on le travaillait ensemble.",[15,884,885],{},[18,886],{"src":887,"controls":21,"muted":21,"style":874,"poster":888},"\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype.webm","\u002Fimages\u002Fenvironmental-testing-app\u002Fprototype-poster.png",[15,890,891],{},"L'écran de statut du Cube nécessitait un contournement pour la limitation fondamentale du BLE : le Bluetooth ne se connecte qu'en 1-à-1, ce qui aurait complètement compromis la surveillance multi-Cube. En travaillant avec le développeur, on a opté pour la lecture des paquets d'annonce que les Cubes diffusent passivement plutôt que de maintenir une connexion continue. Pour un test en cours, on combinait un minuteur (les tests durent un peu moins d'une heure) avec les mises à jour de paquets disponibles à portée. Les utilisateurs hors de portée lors de la fin d'un test recevaient une notification. Ceux à proximité recevaient le résultat directement depuis l'annonce BLE. On pouvait également attribuer des noms significatifs aux Cubes, et le journal de résultats supportait le filtrage.",[116,893],{"src":894,"alt":895,"title":895},"\u002Fimages\u002Fenvironmental-testing-app\u002Fapplied-filters.png","Filtres appliqués",[15,897,898],{},"Un problème non résolu avant la fin du projet : le curseur double du filtre de résultats. La plage de valeurs significatives était fortement regroupée à l'extrémité basse d'une échelle 0-1000, ce qui le rendait difficile à utiliser précisément. La correction était planifiée (le remplacer par des cases à cocher) mais n'avait pas été implémentée avant l'annulation.",[25,900,902],{"id":901},"développement","Développement",[15,904,905,906,908],{},"J'ai étendu les design tokens de ",[72,907,757],{"href":770}," dans Theo pour ajouter un format de définition TypeScript et des transformations spécifiques à React Native, donnant au développeur une base de style cohérente. J'ai également contribué au code de style côté implémentation.",[25,910,250],{"id":249},[15,912,913],{},"La plupart des fonctionnalités principales ont été conçues et développées avant la fermeture de Spartan. Le projet n'a pas atteint la production, mais le travail de design a tenu. Le processus de wireframing et de prototype a mis en évidence de vrais problèmes d'utilisabilité tôt, et la contrainte BLE a produit une solution viable qui aurait été réellement utile sur le terrain.",{"title":255,"searchDepth":256,"depth":257,"links":915},[916,917,918,919,920],{"id":514,"depth":256,"text":515},{"id":840,"depth":256,"text":841},{"id":878,"depth":256,"text":879},{"id":901,"depth":256,"text":902},{"id":249,"depth":256,"text":250},"Effectue le test Legionella de Spartan depuis ton téléphone.",{},5,"\u002Fwork\u002Fapplication-test-environnemental",{"title":799,"description":921},"work\u002Fapplication-test-environnemental",[276,928],"Mobile",[930,931,935,938],{"name":777,"img":778,"href":779},{"name":932,"img":933,"href":934},"Framer","\u002Fimages\u002Ftools\u002Fframer.svg","https:\u002F\u002Fwww.framer.com\u002F",{"name":936,"img":286,"href":937},"React Native","https:\u002F\u002Freactnative.dev\u002F",{"name":684,"img":787,"href":682},"NU_7QcTsbm4Xb6aZq3cb8jUPBum0BfU22xjZfewfI8E",{"id":941,"title":942,"body":943,"description":1098,"extension":267,"featureImage":952,"featured":754,"links":269,"meta":1099,"navigation":21,"order":1100,"path":1101,"seo":1102,"stem":1103,"tags":1104,"tools":1106,"__hash__":1108},"work_fr\u002Fwork\u002Finterface-test-adn.md","Interface du test ADN, homologuée FDA",{"type":8,"value":944,"toc":1090},[945,948,953,956,960,963,966,969,986,989,995,999,1002,1007,1011,1014,1032,1036,1039,1045,1051,1054,1060,1063,1073,1077,1080,1085,1087],[11,946,942],{"id":947},"interface-du-test-adn-homologuée-fda",[15,949,950],{},[116,951],{"alt":942,"src":952,"title":942},"\u002Fimages\u002Fdna-test-ui\u002Fcyp2c19-feature.png",[15,954,955],{},"L'interface du test ADN est la composante logicielle de la plateforme CYP2C19 de Spartan Bio, un test ADN rapide exécuté sur l'analyseur Spartan Cube. J'ai dirigé la conception avec un autre designer, en ayant le dernier mot sur les décisions, dans le cadre du processus formel de contrôle de design de Spartan. Le produit a reçu l'homologation FDA et est toujours commercialisé par l'entreprise qui a acquis les actifs de Spartan.",[25,957,959],{"id":958},"le-défi","Le défi",[15,961,962],{},"Les logiciels de dispositifs médicaux opèrent sous des contraintes strictes. Les exigences sont définies tôt, la documentation est rigoureuse, et les modifications après la soumission réglementaire ont des coûts importants dans toute l'organisation. Bien concevoir avant la soumission est essentiel.",[15,964,965],{},"L'objectif initial était une désignation CLIA waived de la FDA, ce qui aurait permis à quiconque d'effectuer le test avec une formation minimale (comparable à un glucomètre). La chimie du test l'a finalement placé en haute complexité, mais l'objectif de conception a façonné notre approche tout au long : les instructions devaient être suffisamment claires pour les non-spécialistes, les workflows devaient être suffisamment fiables pour être exécutés sans erreur, et l'interface devait résister à l'examen minutieux.",[15,967,968],{},"Les fonctionnalités ont été définies lors des phases de concept et de faisabilité, en parallèle des exigences réglementaires, techniques et des utilisateurs finaux :",[214,970,971,974,977,980,983],{},[217,972,973],{},"Workflows guidés pour effectuer un test ou un contrôle",[217,975,976],{},"Un journal recherchable des résultats de tests et de contrôles",[217,978,979],{},"Connexions utilisateur et permissions pour protéger les données patient",[217,981,982],{},"Un verrouillage optionnel basé sur le temps",[217,984,985],{},"Un module de formation optionnel",[15,987,988],{},"On a construit des prototypes dans XD et utilisé ses fonctionnalités de transfert en collaboration étroite avec notre développeur Windows, affinant les exigences en continu tout au long du processus.",[15,990,991],{},[116,992],{"alt":993,"src":994,"title":993},"Interface du test ADN dans XD","\u002Fimages\u002Fdna-test-ui\u002Fcyp2c19-xd.png",[25,996,998],{"id":997},"workflows-guidés","Workflows guidés",[15,1000,1001],{},"S'assurer que les utilisateurs pouvaient effectuer le test avec succès à chaque fois était au cœur de la valeur du produit. Le workflow guidé fournissait des instructions étape par étape et des illustrations à chaque étape, afin que les utilisateurs n'aient jamais à deviner ce qui venait ensuite. Pour l'étape la plus critique et complexe (tapoter et mélanger l'échantillon), on a intégré une vidéo directement dans l'interface.",[15,1003,1004],{},[18,1005],{"src":1006,"controls":21,"preload":22,"muted":21,"poster":952},"\u002Fimages\u002Fdna-test-ui\u002Fcyp2c19-workflow.webm",[25,1008,1010],{"id":1009},"journal-de-résultats","Journal de résultats",[15,1012,1013],{},"Le journal donnait aux utilisateurs accès à tous les résultats passés de tests et de contrôles, recherchables au fur et à mesure de l'accumulation des enregistrements. La sélection d'un résultat affichait des détails complets. Une fonctionnalité d'export supportait les utilisateurs qui maintenaient leurs propres systèmes de gestion des dossiers en dehors du dispositif.",[15,1015,1016,1020,1024,1028],{},[116,1017],{"alt":1018,"src":1019,"title":1018},"Journal de résultats vide","\u002Fimages\u002Fdna-test-ui\u002Flog-empty.png",[116,1021],{"alt":1022,"src":1023,"title":1022},"Journal de résultats rempli","\u002Fimages\u002Fdna-test-ui\u002Flog.png",[116,1025],{"alt":1026,"src":1027,"title":1026},"Journal filtré sur les contrôles","\u002Fimages\u002Fdna-test-ui\u002Flog-search.png",[116,1029],{"alt":1030,"src":1031,"title":1030},"Écran de résultat","\u002Fimages\u002Fdna-test-ui\u002Fresult.png",[25,1033,1035],{"id":1034},"connexions-et-sécurité","Connexions et sécurité",[15,1037,1038],{},"Les connexions utilisateur protégeaient les données patient potentiellement sensibles. Le formulaire de connexion donnait un retour clair sur les tentatives échouées sans révéler quelle information d'identification était incorrecte. Les utilisateurs pouvaient également balayer un code-barres pour s'authentifier, un pattern courant dans les environnements cliniques où le personnel balaie ses badges pour accéder aux équipements.",[15,1040,1041],{},[116,1042],{"alt":1043,"src":1044,"title":1043},"Écran de connexion","\u002Fimages\u002Fdna-test-ui\u002Flogin.png",[15,1046,1047],{},[116,1048],{"alt":1049,"src":1044,"title":1050},"La validation des informations d'identification indique seulement qu'il y a une erreur, sans préciser laquelle","Informations d'identification invalides",[15,1052,1053],{},"Un verrouillage optionnel basé sur le temps permettait aux utilisateurs de sécuriser le système en leur absence. Puisque le dispositif peut exécuter un test alors qu'il est verrouillé, on a ajouté le statut du test à l'écran de verrouillage. Avec un seul ordinateur par Cube, il était important d'indiquer si le système était occupé.",[15,1055,1056],{},[116,1057],{"alt":1058,"src":1059,"title":1058},"Système verrouillé avec test en cours","\u002Fimages\u002Fdna-test-ui\u002Flock-screen.png",[15,1061,1062],{},"La gestion des paramètres et des utilisateurs était réservée à l'administrateur système.",[15,1064,1065,1069],{},[116,1066],{"alt":1067,"src":1068,"title":1067},"Paramètres système","\u002Fimages\u002Fdna-test-ui\u002Fsettings.png",[116,1070],{"alt":1071,"src":1072,"title":1071},"Paramètres utilisateurs","\u002Fimages\u002Fdna-test-ui\u002Fsettings-users.png",[25,1074,1076],{"id":1075},"module-de-formation","Module de formation",[15,1078,1079],{},"Un module de formation intégré guidait les utilisateurs tout au long du workflow complet, de la collecte d'échantillons au fonctionnement de l'analyseur, avec des instructions claires et des conseils complémentaires à chaque étape. Cela soutenait l'objectif de minimiser la charge de formation pour les nouveaux utilisateurs.",[15,1081,1082],{},[116,1083],{"alt":1076,"src":1084,"title":1076},"\u002Fimages\u002Fdna-test-ui\u002Ftraining.png",[25,1086,250],{"id":249},[15,1088,1089],{},"La plateforme de test ADN a reçu l'homologation FDA. La désignation CLIA waived qu'on visait lors de la conception n'a pas été obtenue (une question de chimie du test, pas du logiciel), mais l'approche de conception a résisté au processus réglementaire. Une version du produit est toujours commercialisée par l'entreprise qui a acquis les actifs de Spartan.",{"title":255,"searchDepth":256,"depth":257,"links":1091},[1092,1093,1094,1095,1096,1097],{"id":958,"depth":256,"text":959},{"id":997,"depth":256,"text":998},{"id":1009,"depth":256,"text":1010},{"id":1034,"depth":256,"text":1035},{"id":1075,"depth":256,"text":1076},{"id":249,"depth":256,"text":250},"Une interface pour dispositif médical conçue pour la facilité d'utilisation.",{},7,"\u002Fwork\u002Finterface-test-adn",{"title":942,"description":1098},"work\u002Finterface-test-adn",[276,1105],"Medical",[1107],{"name":777,"img":778,"href":779},"f2C13ujkgltFf9R4VHdX356-QHrv8kAU4QDEViiVAyY",1782790338134]