# Une installation qu’on parcourt comme une arborescence - Type : Étude de cas 01 - Entreprise : Desoutter · Plateforme SaaS industrielle - Période : Un an, en sprints - Rôle : Product designer, en indépendant - Équipe : Deux Product Owners, trois développeurs front-end - Livrables : WebUI (SaaS), design system - Statut : publié - Contenus liés : - [Écrit 02 · Le modèle avant l’écran](https://florianbutour.com/ecrits/le-modele-avant-l-ecran.md) - [Écrit 03 · Un design system qui s’arrête au bouton](https://florianbutour.com/ecrits/un-design-system-qui-s-arrete-au-bouton.md) - Page web : https://florianbutour.com/travaux/desoutter Chez Desoutter, des controllers pilotent des dizaines de tightening tools, chacun avec ses psets. J’ai été recruté en freelance pour concevoir WebUI, une plateforme accessible depuis un navigateur, et créer son design system. Le cœur du travail : une navigation qui suit la structure de l’installation elle-même. WebUI est une plateforme centrale, accessible depuis un navigateur : elle réunit tous les controllers d’une installation et les outils qu’ils pilotent, là où chaque ancien logiciel ne couvrait qu’une tâche. J’y ai travaillé un an, en sprints, avec deux Product Owners et trois développeurs front-end, que j’accompagnais jusqu’à l’implémentation. ## Avant : un logiciel par tâche Chaque tâche avait son logiciel : configurer un controller, analyser des courbes de vissage, collecter les résultats, gérer les droits d’accès. Un même outil ou un même pset existait dans plusieurs applications, avec des écrans et parfois un vocabulaire différents. Réunir ces logiciels dans un seul produit, c’était faire cohabiter quatre métiers qui n’y cherchent pas la même chose : l’opérateur, la maintenance, l’ingénieur process et l’ingénieur qualité. ## Descendre dans l’installation J’ai choisi l’installation comme structure principale de navigation plutôt qu’une entrée par fonctions : configurer, analyser, diagnostiquer. L’arborescence reproduit les relations entre les équipements. On entre par les controllers ; chaque controller donne accès à ses tightening tools ; chaque outil à ses psets. L’arborescence de WebUI · quatre niveaux, une même page : Système · Tous les Multi et leur état · Multi · Ses tightening units en temps réel · Tightening unit · Ses psets et ses propriétés · Pset · Consulté, puis édité · Même page à chaque niveau : titre, onglets Overview · Settings · History, fil d’Ariane pour remonter À chaque niveau, la page a la même forme : un titre, les mêmes onglets (vue d’ensemble, réglages, historique) et un fil d’Ariane pour remonter. La répétition de ces repères vise à faciliter le passage d’un niveau à l’autre. Écran WebUI : vue système, chaque Multi avec ses outils connectés, conformes, hors tolérance ou en panne Écran WebUI : un Multi, ses tightening units et leur état en temps réel Écran WebUI : les psets d’une tightening unit, l’un d’eux édité en panneau latéral avec sa courbe L’état remonte dans l’arbre : un outil hors tolérance apparaît dans le compteur de son controller, qui apparaît dans la vue d’ensemble. D’en haut, on voit où descendre. Avant de dessiner une page, j’en précisais l’objectif, la navigation, les statuts, les actions et le contenu. ## Le même arbre pour quatre métiers Quatre profils métier ont été identifiés en ateliers avec les équipes Desoutter ; trois ont été formalisés en fiches persona, l’opérateur n’ayant pas de fiche dédiée. Ce travail a permis de formuler les besoins et les risques propres à chaque profil pour concevoir leurs parcours dans une même installation : - **Ingénieur process** : configurer et surveiller le système, appliquer une nouvelle configuration ou revenir à l’ancienne. Il redoute la double modification d’un process et l’arrêt de production. - **Maintenance** : diagnostiquer, restaurer une configuration, gérer le parc, recalibrer. Elle redoute de ne pas savoir qui a modifié quoi. - **Ingénieur qualité** : contrôler les machines, analyser les défauts, étalonner. Il redoute « un OK qui n’est pas OK » et la perte de traçabilité. - **Opérateur** : configurer et contrôler les outils, suivre en temps réel, valider les séquences. ## Un pset, plusieurs niveaux d’engagement Le pset est le nœud où ces attentes se croisent. Deux des trois fiches persona faisaient apparaître un besoin de réglages avancés et de configuration guidée. J’ai conservé les deux modes d’édition : on trouve le pset, on le consulte, puis on choisit de l’éditer directement ou pas à pas. Le guidage offre une autre manière d’aborder la configuration, sans imposer ce parcours à tous. ## Plusieurs chemins, un même nœud L’arbre donne un contexte, mais il ne doit pas imposer de parcourir tous les niveaux pour atteindre un outil connu. Le diagnostic illustre cette articulation entre navigation et recherche. Il commence quand un opérateur bloqué appelle la maintenance, dont le technicien n’est pas forcément devant la ligne. Qu’il parte de la vue d’ensemble ou d’un outil recherché par son nom ou son numéro de série, il arrive à la même page outil, d’où part le chemin de vérification. ## Ce qui reste commun, ce qui change Le design system, que j’ai créé pour WebUI, servait directement cette navigation. Deux règles guidaient les déclinaisons : 1. **Chaque niveau de l’arborescence suit le même template.** 2. **Les états sont les mêmes partout et remontent d’un niveau à l’autre.** Le template regroupait un titre, des onglets et un fil d’Ariane ; les états permettaient de signaler un problème à plusieurs niveaux de l’installation. L’équipe pouvait réutiliser ces repères, puis concevoir le contenu et les actions propres à chaque page. ## Ce qui a été transmis à l’équipe WebUI visait à réunir la configuration, l’analyse des courbes, la collecte des résultats et la gestion des droits. À la fin de ma mission, l’arborescence, le template de page et le design system étaient posés, et l’équipe front-end construisait les nouvelles pages à partir d’eux, sans repasser par une conception écran par écran. Ce résultat porte sur la structure du produit et sa réutilisation par l’équipe. Il ne suffit pas à établir un gain de temps en diagnostic ou une réduction de l’apprentissage, qui ne sont pas documentés ici. Le choix structurant reste **une navigation fondée sur l’installation, complétée par la recherche pour atteindre directement un équipement**.