Design application métier

une stratégie ambitieuse

 Je suis intervenu comme designer UI / UX dans un projet de l’entreprise Econocom de refonte complète du parc d’applications de maintenance industriel de Schneider Électric Monde pendant plus de 3 ans. Ces applications possèdent plusieurs milliers d’utilisateurs et on été conçues et testées en collaboration avec eux.

L’ensemble des différentes applications sont regroupées dans une application mère appelée sur laquelle l’électricien se connecte. Dans cette application mère ont retrouve différents petits modules dépendants de celle-ci. Un module gère les bases de données installées par l’utilisateur, il sert à télécharger, supprimer, classer et dupliquer les contenus. Cette application mère permet à l’utilisateur de parcourir ses équipements installés et à voir toutes les différentes caractéristiques et attributs qui lui sont rattachées. Ils peuvent à loisir supprimer, dupliquer, copier et créer tout le contenu de fonctionnement des modules applicatifs et en faire un bilan. Un dernier module régit les activités de l’utilisateur qui peut les voir et intervenir sur leur statut.

Dans ce cadre j’étais en binôme avec une UX designer sur la plus grosse partie du projet et en autonomie sur d’autres modules d’application.

A titre d’exemple nous allons voir deux modules d’applications conçues dans le cadre de refonte globale.

En résumé :

Ce projet est une refonte complète du parc applicatifs de maintenance de Schneider Electric au sein d’une seule et même application.

La totalité de l’application est conçue dans une méthodologie UX / UI dans un soucis de collaborations et d’amélioration continue avec tests et retours utilisateurs.

La place du design est au cœur des interactions des équipes clients, des chefs de projets, product owner et des équipes de développement jusqu’aux utilisateurs finaux.

La méthodologie de l’Atomic Design a permi d’offrir dans ce projet une cohérence visuelle et un développement facilité.

 

 

1 – module de maintenance

capt_ecran_module_applicatif

Ce module applicatif a été conçue et réalisé afin d’assister le technicien dans le contrôle de routine d’un équipement installée chez son client. Cette application est une création originale d’après une conception UX collaborative et une réalisation UI.

Le technicien choisi d’abord une procédure de maintenance dans le carrousel. Il rempli ensuite les champs dans l’ordre et passe à l’étape suivante.

Cette application devait répondre à beaucoup de demandes et d’exigences des utilisateurs. Elle affiche les anciennes valeurs de la dernière procédure, les valeurs hors normes et hors limites,  une bulle d’information par opération, possède par chapitre la possibilité de laisser un commentaire en rich text et/ou une photographie, saisir des dates etc…

La conception d’interface graphique de cette application a été réalisée par création et déclinaisons des éléments de la chartes graphique de Schneider Électric.

Cette expert module a bénéficié d’une conception collaborative avec le client et a été validé et amélioré grâce à plusieurs ateliers de test utilisateurs.

 

 

 

2 – module d’analyse Électrique

Cette application permet d’acquérir des données de mesure du matériel électrique installé. Les besoins sont nombreux.

Les utilisateurs doivent pouvoir consulter plusieurs jeux de courbes par onglet et pouvoir zoomer à l’intérieur, changer les couleurs, voir les valeurs relatives aux croisement des curseurs et des courbes etc…

Cette application a été conçue en totalité en UX / UI et avec la participation des utilisateurs de l’application. Cette démarche a permis de tester et d’ajuster le design aux contraintes et aux exigences que rencontre les utilisateurs sur le terrain. Ce processus garantis que l’application rencontre ses usages et répond correctement aux besoins de ses utilisateurs.

 

3 – MÉthodologie et cadre de travail

La méthodologie de travail au sein d’ Econocom était de collaborer avec les équipes clients, les utilisateurs et les chefs de projets et les développeurs dans un cycle Agile itératif.

La première étape du travail est de récolter les besoins du client et de concevoir les expériences utilisateurs lors d‘atelier de workshop.

Ensuite les interface sont découpées en user story avec le chef de projet et le proxy PO en collaboration avec l’architecte de données et les responsables de développement .

Puis pour chaque user story les maquettes graphiques sont produites afin d’appuyer et de finaliser les parcours utilisateurs.

L’ensemble des éléments de design à disposition des équipes de développement étaient structurés en Atomic design. Cette structure de classement en librairie de composants du plus simple au plus complexe a permis d’offrir une cohérence graphique entre toutes les différentes applications tout en facilitant le travail des développeurs et des intégrateurs.

Pour chaque application des recettes de design étaient régulièrement mises en place afin de contrôler leur conformité avec le design global de toutes les applications.