Refonte d'une solution SAAS pour le domaine de l'industrie
La compagnie MachIQ propose une solution SAAS aux différents acteurs de l’industrie afin de fluidifier les échanges entre les usines et les fabricants de machines.
Le produit APM est destiné aux usines de production et leur offre une meilleure efficacité en ce qui concerne la gestion de la maintenance et une connexion directe avec les fabricants de machines.
L’offre modulable DCX s’adresse aux fabricants de machines et leur permet de proposer leurs services (support technique via videochat, vente de pièces détachées, gestionnaire des droits d’accès, planifier le travail des ingénieurs).
Objectif
Improve and overhaul APM to offer a better experience and unify the visual identity with DCX applications. Build a Design System for both APM and DCX products to keep consistency through the products and to be more efficient to maintain the interfaces.
Build a Design System for both APM and DCX products to keep consistency through the products and to be more efficient to maintain the interfaces.
Équipe
J'ai travaillé avec Emma Pevrol, Head of Product Department, Jade Schnoebelen, Project Manager and Krzysztof Filipecki, Product Designer.
Vue d'ensemble d'APM
Compréhension du produit
La première version d’APM comportait déjà une quantité d’écrans importante. Étant donné la complexité du produit, la première chose à faire a été de comprendre son fonctionnement. J’ai donc passé un certain nombre d'heures avec Jade, le Project Manager. Elle m’a expliqué en détail les différentes parties du site, les utilisateurs qui sont concernés par chaque section et les objectifs futurs d’APM.
APM est un produit complexe à comprendre. Pour faciliter sa compréhension, j'ai proposé de faire un aperçu d'APM qui liste toutes les pages, les onglets, les formulaires et les actions du produit. Ce document permet d'avoir une vue d'ensemble d'APM et d'en faire l'inventaire. Ce document m'a beaucoup aidé à comprendre le fonctionnement de ce service.
Organiser le work-flow
Dans le même temps, nous nous sommes réunis avec Jade et Krzysztof, mon collègue designer, pour répartir les écrans à concevoir et le work-flow que nous voulions utiliser. Il a été décidé que je travaillerai sur les écrans “critiques” et Krzysztof sur les écrans moins complexes. Krzysztof étant en Pologne et moi en Suisse avec les membres de l’équipe Produit, il était plus facile pour moi de travailler avec le Project Manager sur certaines fonctionnalités.
La société souhaitait aussi construire un Design System, c’est donc logiquement que nous nous sommes mis d’accord pour travailler en suivant la logique de l’Atomic Design. Il s’agit d’une approche modulaire du design pour être plus efficace et organisée.
Mise en place du Design System
La palette de couleurs
L’un des premiers choix que nous avons dû faire avec mon collègue est de créer une palette de couleurs efficace et que chaque couleur puisse être utilisée dans un but précis.
Les couleurs qui servent de base ont permis de créer des nuances pour apporter une plus grande richesse dans le Design System.
Le choix de d’utiliser un nom et pas la fonction pour nommer les couleurs est simple.
Comment nomme-t-on une couleur qui est utilisée pour les alertes, l’action “supprimer” d’un bouton et les différents statuts. Il est plus facile de mettre à jour la variable cerise et l’appliquer à plusieurs utilisations possibles.
Les styles de textes
La définition des styles de base pour les textes est un élément important pour maintenir une unité à travers l’interface. De la même manière que les couleurs, le style des textes est défini au départ de la phase de conception. Lorsqu’un style de texte est modifié, les changements se répercutent sur les instances à travers tout le document.
La bibliothèque d’icônes
La bibliothèque d’icônes utilisée pour APM est FontAwesome car elle était déjà implémentée et fonctionnait bien.
Cependant, la bibliothèque ne satisfaisait pas tous nos besoins. Visant le marché des fabricants de machine et des usines, certaines icônes n’existaient pas. Un des enjeux a été d’étendre la bibliothèque avec la création d’icônes propres à APM tout en respectant le style FontAwesome pour rester cohérent.
Les champs de formulaires
Les champs de formulaires sont des éléments importants puisqu’ils permettent d’intégrer et transmettre des données sur les applications (achats de fournitures, créer un ticket de maintenance sur une machine, etc...). Il est donc nécessaire de créer les champs suffisants pour tous les types de données que peut entrer l’utilisateur.
Proposant un système de gestion et d'autorisation des utilisateurs, tous ne peuvent entrer ou changer certaines données. Les champs disabled sont efficaces pour indiquer aux utilisateurs qu’ils ne peuvent pas renseigner ou éditer une donnée.
Les boutons et leurs utilisations
Cette partie du design system est de créer des boutons qui sont utilisés de manière logique.
Les boutons pleins sont utilisés pour une action principale sur une page. La couleur est utilisée pour indiquer la nature de l’action : bleu signifie une tâche «classique», vert pour les actions de sauvegarde et de validation, et rouge pour les actions qui sont irréversibles (supprimer des données).
Les boutons «outline» – fantômes – sont utilisés pour indiquer qu’il y a une action secondaire.
Les boutons peuvent être libellés d’un texte afin d’être le plus explicite possible ou d’une icône représentant la tâche à réaliser. Dans les deux cas, il faut faire attention au sens du signifiant pour qu’il soit compréhensible.
La taille des boutons est dépendante de leur utilisation. Certaines actions se trouvent directement dans les lignes de tableaux. Cela implique donc un espace plus restreint et donc des boutons adaptés pour cette utilisation.
Widgets et analytiques
L’un des points forts des produits développés est le fait de suivre l’évolution de l’état des machines, de la gestion des fournitures, et des tâches de maintenance. Les widgets permettent aux différents profils d’utilisateurs de suivre et visualiser les données dont ils ont besoin sous forme de graphiques.
Une partie du Design System est consacrée aux widgets. Il est important que les widgets puissent avoir leurs propres règles pour qu’ils soient compréhensibles. Par exemple, des couleurs ont été ajoutées pour les graphiques des widgets.
Utiliser les composants pour concevoir les maquettes
La phase de conception des interfaces suivait la méthode suivante :
Vous trouverez ci-dessous différentes sections d’APM et APM-Lite sur lesquelles j’ai travaillé.
La gestion kanban
Les chefs de services et les employés de maintenance peuvent voir les demandes de service rapportées.
La méthode du kanban a été reprise pour cette fonctionnalité qui permet de voir les tâches en attente, en cours, en retard et terminées de manière efficace.
On peut attribuer une tâche à une personne précise ou à un service, une date à laquelle la réaliser, le niveau de criticité et les fournitures nécessaires pour cette tâche.
Analytiques des équipements
Les machines sont maintenant connectées afin de signaler une panne mais aussi, et surtout, de prévoir une panne – à l’aide d’IoT – qui peut arriver.
Mon rôle a été de collaborer avec notre ingénieur en IoT et concevoir les widgets affichant les données des machines sous forme de graphiques.
Gestion des tâches
Les employés de maintenance peuvent avoir des tâches prévues plusieurs mois à l’avance, voire une année avant. Ces tâches régulières sont créées automatiquement. Il est donc important d’avoir plusieurs vues pour afficher les tâches.
Mon rôle ici a été de concevoir les vues «calendrier» et «en liste». Le type d’affichage «en liste» peut être présenté au format hebdomadaire, mensuel et annuel. L’affichage «calendrier» peut être affiché au format hebdomadaire et mensuel.
Catalogue des équipements
La boutique des équipements et des fournitures est destinée à être directement connectée aux catalogues des fabricants de machine.
L’utilisateur n’a pas besoin d’utiliser un outil supplémentaire pour voir si une pièce est disponible ou non et procéder à l’achat.
Pages d’équipements, de produits, de pièces, etc...
Il existe un certain nombre de pages pour les différents éléments entrés dans le système : les machines, les pièces détachées, les fournitures, les demandes de services ont toutes une page qui détaille leurs informations relatives et les actions possibles.
Tableaux complexes
Certains tableaux sont utilisés pour uniquement afficher des données mais certains tableaux permettent à l’utilisateur de sélectionner et manager des fichiers, des équipements ou des fournitures.
Ces tableaux sont donc présentés sur deux niveaux. Le niveau 1 étant l’affichage des données et des indications (si une fourniture doit être commandée, par exemple). Le niveau 2 pour avoir accès aux détails et aux actions que l’utilisateur est autorisé à réaliser.
Administration des utilisateurs
Les produits pouvant être utilisés par des profils d’utilisateurs avec des objectifs et des besoins très variés, il est important d’avoir une bonne gestion des droits d’accès.
Une personne, dont le travail est l’achat de fournitures auprès des fabricants de machines, ne doit pas avoir accès à la partie réservée à la maintenance des équipements.
Tester et suivre le travail des développeurs
La dernière partie de mon travail était de préparer les différents assets graphiques pour les développeurs. Il s’agissait majoritairement d’exporter les icônes et vérifier qu’il n’y ait pas de de couleurs ou de typographies qui ne soient pas prévues dans le Design System.
J’échangeais régulièrement avec les développeurs pour répondre à leurs questions sur les choix de design, leur apporter des indications pour que l’élément soit intégré comme prévu. Emma, Jade et moi vérifions et testons le travail effectué par les développeurs. Les retours étaient inscrits dans JIRA pour suivre l’avancée des backlogs.
Les livrables d'APM sur 1 an
Au final, nous avons construit un système de conception unifié - pour APM, APM-Lite et DCX - composé de plus de 300 styles et composants, y compris des variantes et des états multiples pour le même composant, le même style et le jeu complet d'icônes.
Le nombre de pages conçues livrées pour APM uniquement est de plus de 200 pages. Il s'agit de pages complètes, mais aussi des différents onglets de la page, des fenêtres modales, des formulaires et des interactions de parties spécifiques de la page.
Ce que j'ai appris...
Je suis tout d’abord très fier d’avoir travaillé sur ce projet. La complexité du projet a été un très gros défi et m’a beaucoup apporté au niveau professionnel. J’ai découvert le product design, la manière de travailler sur ce type de projets, découvrir et faire évoluer mon workflow sur la conception d’interfaces en fonction des retours utilisateurs.
J’ai appris un grand nombre de connaissances sur la construction d’un Design System et la conception d’interfaces basée sur la méthode Atomic Design. Cela m’a permis d’être plus rigoureux, organisé et être attentif à la cohérence des interfaces d’un produit à l’autre.
J’ai découvert et appris beaucoup de choses sur la technologie React, l’IoT, la manière de communiquer avec les développeurs et le domaine de l’industrie.
Axes d'améliorations
J’aurais souhaité améliorer et structurer les phases d’idéation et les tests utilisateurs. Beaucoup de phases de conception et de recherche d’idées et de solutions se faisaient de manière informelle. Mettre en place des UX workshops aurait été plus efficace pour résoudre certains problèmes.