[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"page-tableau-de-bord-personnalisable":3},{"doc":4,"isFallback":228},{"id":5,"title":6,"body":7,"description":199,"extension":200,"featureImage":21,"featured":104,"links":201,"meta":202,"navigation":104,"order":190,"path":203,"seo":204,"stem":205,"tags":206,"tools":210,"__hash__":227},"work_fr\u002Fwork\u002Ftableau-de-bord-personnalisable.md","Tableau de bord personnalisable",{"type":8,"value":9,"toc":188},"minimark",[10,14,23,28,31,35,42,48,54,58,61,68,72,75,78,83,86,89,92,95,98,109,116,120,123,126,132,135,142,146,149,152,159,171,175,178,182,185],[11,12,6],"h1",{"id":13},"tableau-de-bord-personnalisable",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21,"title":22},"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",[24,25,27],"h2",{"id":26},"en-résumé","En résumé",[15,29,30],{},"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.",[24,32,34],{"id":33},"contexte","Contexte",[15,36,37,41],{},[38,39,40],"strong",{},"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,43,44,47],{},[38,45,46],{},"Mon rôle :"," Designer et développeur frontend unique",[15,49,50,53],{},[38,51,52],{},"Calendrier :"," Première mise en production T3-T4 2021, avec des mises en production de fonctionnalités itératives jusqu'en 2025",[24,55,57],{"id":56},"le-problème","Le problème",[15,59,60],{},"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,62,63],{},[18,64],{"alt":65,"src":66,"title":67},"L'ancien tableau de bord n'offrait quasiment aucune personnalisation","\u002Fimages\u002Fcustomizable-dashboard\u002Fold-dashboard.png","L'ancien tableau de bord",[24,69,71],{"id":70},"ce-que-jai-fait","Ce que j'ai fait",[15,73,74],{},"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,76,77],{},"Trois problèmes ont orienté les décisions les plus importantes.",[79,80,82],"h3",{"id":81},"léditeur-de-disposition","L'éditeur de disposition",[15,84,85],{},"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,87,88],{},"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,90,91],{},"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,93,94],{},"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,96,97],{},"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,99,100],{},[101,102],"video",{"src":103,"controls":104,"preload":105,"muted":104,"poster":106,"alt":107,"title":108},"\u002Fimages\u002Fcustomizable-dashboard\u002Flayout-editing.webm",true,"none","\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,110,111],{},[18,112],{"alt":113,"src":114,"title":115},"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",[79,117,119],{"id":118},"le-système-de-couleurs","Le système de couleurs",[15,121,122],{},"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,124,125],{},"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,127,128],{},[18,129],{"alt":130,"src":131},"Un ensemble de couleurs de base, sélectionnées pour la visualisation de données","\u002Fimages\u002Fcustomizable-dashboard\u002Fbase-palette.png",[15,133,134],{},"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,136,137],{},[18,138],{"alt":139,"src":140,"title":141},"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",[79,143,145],{"id":144},"focus-recommendations","Focus Recommendations",[15,147,148],{},"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,150,151],{},"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,153,154],{},[18,155],{"alt":156,"src":157,"title":158},"Les widgets Focus Recommendations présentaient leurs propres défis uniques","\u002Fimages\u002Fcustomizable-dashboard\u002Ffocus-recommendations-widget.png","Le widget Focus Recommendations",[15,160,161],{},[162,163,164,165,170],"em",{},"Focus Recommendations est traité en profondeur dans une ",[166,167,169],"a",{"href":168},"\u002Fwork\u002Ffocus-recommendations","étude de cas distincte ->",".",[24,172,174],{"id":173},"résultat","Résultat",[15,176,177],{},"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.",[24,179,181],{"id":180},"après-le-lancement","Après le lancement",[15,183,184],{},"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,186,187],{},"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":189,"searchDepth":190,"depth":191,"links":192},"",2,1,[193,194,195,196,197,198],{"id":26,"depth":190,"text":27},{"id":33,"depth":190,"text":34},{"id":56,"depth":190,"text":57},{"id":70,"depth":190,"text":71},{"id":173,"depth":190,"text":174},{"id":180,"depth":190,"text":181},"Tableau de bord analytique personnalisable avec un éditeur par glisser-déposer","md",null,{},"\u002Fwork\u002Ftableau-de-bord-personnalisable",{"title":6,"description":199},"work\u002Ftableau-de-bord-personnalisable",[207,208,209],"Design","Development","Data",[211,215,219,223],{"name":212,"img":213,"href":214},"Figma","\u002Fimages\u002Ftools\u002Ffigma.svg","https:\u002F\u002Fwww.figma.com",{"name":216,"img":217,"href":218},"React","\u002Fimages\u002Ftools\u002Freact.svg","https:\u002F\u002Freact.dev",{"name":220,"img":221,"href":222},"TypeScript","\u002Fimages\u002Ftools\u002Ftypescript.svg","https:\u002F\u002Fwww.typescriptlang.org",{"name":224,"img":225,"href":226},"MUI","\u002Fimages\u002Ftools\u002Fmui.svg","https:\u002F\u002Fmui.com","dLLkM61DaXPS3YoRgqcjdm5z8BhOjqpPIre-slgUn-0",false,1782790338405]