Projet — Clauger : Conception & design de l’interface du produit numérique MyPortal3E.
Services : UX & UI Design — PO
Client : Clauger
Produit numérique : MyPortal3E
Au début, j’avais des doutes, […] mais là, pff, y’a pas de débat, c’est une tuerie atomique le truc !
Stéphane Alajarin — Client
La refonte a révolutionné l’outil c’est clair, même moi je sais faire. […] En même temps, on est parti de teeeeeellement loin !
Émilie Cabot, Marketin Manager chez Clauger 3E
C’est trop bien, ça va vite, c’est ludique.
C’est rapide, ça reste assez simple, je voyais ça plus compliqué que ça à remplir, c’est assez convivial.
2 utilisateurs finaux suite à des tests utilisateurs
Fondée en 1971, Clauger est une entreprise spécialisée en froid industriel et en traitement d’air, assurant la conception, la fabrication, l’installation, le service et la maintenance d’équipements en France et dans le monde. Soucieux des problématiques environnementales, Clauger mise sur l’innovation pour aider ses clients à optimiser leur efficacité énergétique, notamment à travers l’activité du lab Clauger 3E. Cet éditeur de solutions numériques innovantes dans l’écosystème de Clauger développe depuis plusieurs années un portail web, MyPortal3E, véritable concentrateur de datas et d’intelligence collective.
Cet outil permet d’apporter un maximum de valeur ajoutée en intégrant tout un ensemble de fonctionnalités autour du management de l’énergie, des enjeux environnementaux et de l’impact sociétal d’un site industriel.
C’est dans le contexte d’une refonte de cette plateforme numérique que Clauger 3E a fait appel au collectif uxShadow, pour repenser l’ergonomie et le design de celle-ci, et faciliter le travail des développeurs en spécifiant précisément les fonctionnalités.
La démarche.
Le sujet étant très vaste et très technique, nous prenons tout d’abord le temps de nous en imprégner en binôme UX/UI à travers de l’observation, des interviews utilisateurs et des ateliers avec le client autour des types d’utilisateurs et de leurs besoins, avant de passer à des séances de co-conception. Après quelques semaines de travail, nous avons abouti à une première version des écrans principaux permettant à tous de se projeter sur cette nouvelle interface et d’appréhender les nouveaux concepts.
Dans un deuxième temps, le client ayant affiné sa roadmap de développement, nous a demandé de travailler sur 2 sujets l’un après l’autre :
- une page très technique, utilisée uniquement par quelques utilisateurs internes mais très sous-optimale en termes d’efficience : l’objectif était ici d’améliorer l’efficience à moindre coût, en adaptant le développement existant.
- une sous-partie de l’application permettant de créer et de consulter des pages de data-visualisation (sur laquelle nous n’avions pas encore travaillé, car un peu décorrélée du reste), utilisée par de nombreux utilisateurs et très datée en termes d’ergonomie et de design. L’objectif ici était de faire une refonte totale de ce module, en repartant d’une page blanche pour améliorer l’expérience utilisateur.
Pour traiter le premier sujet, nous avons organisé un atelier de co-design avec les parties prenantes, lors duquel nous avons listé les problèmes rencontrés et imaginé des pistes de solutions. A la suite de cela, des maquettes ont été réalisées avec 3 niveaux de solutions : de la plus ergonomique (mais probablement plus coûteuse à développer) à la moins ergonomique mais améliorant déjà l’expérience utilisateur. Ces maquettes ont été présentées à l’équipe métier et aux développeurs pour valider l’adéquation aux besoins et la faisabilité. Il a été choisi de développer la solution la plus ergonomique, que l’UX designer/proxy-PO a spécifié précisément.
Priorisation par la valeur.
Pour aider à la priorisation des fonctionnalités, nous avons adapté le concept du Poker Planning à l’estimation de la valeur utilisateur. Après une description succincte de chaque fonctionnalité à l’équipe, les développeurs devaient estimer le coût de développement de la fonctionnalité, et les référents métier se mettre d’accord sur une valeur entre 1 et 5 pour estimer la valeur métier de la fonctionnalité. Grâce à cela, les sprints ont pu être planifiés de manière à apporter un maximum de valeur le plus rapidement possible, et le développement a pu commencer avec des livraisons régulières en prod.
En savoir plus sur le rôle combiné UX / Proxy-PO
Le second sujet étant plus vaste et plus impactant, nous avons réalisé des interviews utilisateurs auprès de 4 utilisateurs afin de recueillir les points de douleur. Nous avons ensuite organisé un atelier de co-conceptionavec différentes parties prenantes permettant d’impliquer celles-ci et de bénéficier de l’intelligence collective pour concevoir la solution la plus adaptée en explorant des pistes créatives variées. Après plusieurs allers-retours sur les maquettes, nous avons pu valider une version idéale, et découper celle-ci en lots de fonctionnalités à développer. La priorisation s’est faite un peu différemment : la nouvelle version ayant pour ambition de remplacer l’ancienne version assez rapidement, il était nécessaire de développer en priorité les fonctionnalités présentes sur l’ancienne version afin de permettre aux utilisateurs de recréer les mêmes vues de data-visualisation dans la nouvelle version.
L’évaluation.
Afin de mesurer l’impact de notre travail, des questionnaires standardisés validés par la recherche scientifique ont été proposés aux utilisateurs avant et après refonte. Voici les résultats :
Sur le 1er sujet, un questionnaire d’évaluation de l’utilisabilité (SUS) a été réalisé sur 8 participants pré-refonte et 5 participants post-refonte. Malgré le tout petit échantillon, on observe déjà un effet : par rapport au benchmark de référence, l’ancienne version était estimée se situer autour du 63è percentile, ce qui équivaut à un score de C et la nouvelle version se trouve autour du 85è percentile, ce qui lui donne le score A. Le taux de réussite estimé de la tâche, quant à lui, passe de 78% à plus de 95% grâce aux améliorations effectuées. Ce résultat a été obtenu avec un investissement UX/UI d’environ 5 jours spécifiquement sur ce sujet.
Sur le 2nd sujet, 2 questionnaires ont été proposés et complétés par 14 utilisateurs pré-refonte et 11 utilisateurs post-refonte :
- le même questionnaire d’évaluation de l’utilisabilité (SUS) : par rapport au benchmark de référence, la version initiale était estimée faire partie des 34% plus mauvaises interfaces, et la refonte a permis de passer dans les 7% des meilleures, avec un score qui passe de D à A et un taux de réussite estimé de la tâche qui passe de 53% à 100%.
- un questionnaire d’évaluation de l’UX (UEQ) à travers 6 axes (attraction, compréhensibilité, efficacité, contrôlabilité, stimulation et originalité) : des améliorations statistiquement significatives ont pu être établies sur tous les axes, la plus forte amélioration observée concernant l’efficacité. Sur 4 des 6 axes, le score l’évaluation avant refonte donnait des résultats considérés comme “mauvais” comparativement à un benchmark issu de plus de 460 études auprès de plus de 20000 personnes. Après refonte, tous les axes obtiennent des résultats considérés comme bons(meilleurs que 75% des produits évalués dans le benchmark), voire excellents (top 10% des produits).
Ces résultats ont été obtenus avec un investissement UX/UI d’environ 20 jours spécifiquement sur ce sujet. D’autre part, sur ce deuxième sujet, des tests utilisateurs ont été effectués auprès de 4 utilisateurs lors de la première mise en production. Ces tests nous ont permis d’identifier une vingtaine de petites améliorations permettant de fluidifier significativement l’expérience utilisateur, ainsi qu’une dizaine de besoins métiers qui n’avaient pas émergé lors des premières interviews.
La suite.
En parallèle du développement de ce premier gros sujet, nous avons travaillé en 2022 puis en 2023 sur les 3 sujets suivants :
- Refonte UX/UI et travail de spécification de l’application Expoll, à destination des riverains souhaitant remonter une odeur gênante liée à une activité industrielle, et à destination des professionnels souhaitant consulter les signalements effectués par les riverains
- Refonte UX/UI de l’application MyPortal3E mobile, le pendant mobile du portail web, spécification des fonctionnalités et suivi au quotidien de l’équipe de développement (rôle de proxy Product Owner)
- Conception de A à Z d’un formulaire mobile pour permettre aux techniciens de créer leurs CERFA quotidiens en quelques clics, spécification des fonctionnalités et suivi au quotidien de l’équipe de développement (rôle de proxy Product Owner)
