Dorian Bleynie

Designer UX

Graphiste

Dashboard de contrôle de taux d’irradiation

Périmètre

Dans le cadre d’une alternance au sein du groupe ENGIE, j’ai eu l’opportunité de travailler sur une application en interne, avec une équipe de développeurs. L’objectif de cette étude de cas est de vous présenter mon travail, en tenant compte du fait que cette application a été conçue pour des techniciens et des gestionnaires d’actifs dans le domaine du photovoltaïque.

Cette application est une solution d’automatisation de rapports de données d’irradiation de centrales solaires. Elle permet de calculer les données automatiquement en cas de pannes d’internet, d’écrire des commentaires pour déterminer la cause de la perte de puissance et de regrouper les centrales par zones, par région, etc.

Diagramme d’activité

Dans le cheminement classique d’un utilisateur qui vient pour faire un rapport sur l’activité d’une ou de plusieurs centrales, l’utilisateur se connecte, sélectionne la ou le groupe de centrales, vérifie les données, et les commente, avant de sortir un rapport en format Excel s’il le désire. L’action se doit d’être simple, intuitive. 

Ergonomie

Après avoir identifié les besoins d’utilisation régulière de l’équipe, il fallait quelque chose qui puisse afficher un maximum d’informations sans forcément avoir beaucoup de données non visuelles à l’écran. Il a été donc nécessaire de réfléchir à une navigation fluide en tant qu’utilisateur. 

Diviser l’écran en trois parties a donc été la meilleure solution trouvée. Ainsi, il était plus facile de sélectionner et de naviguer au travers les trois parties. D’abord à gauche, le choix entre la partie production, facile à gérer centrale par centrale. Ou reporting, qui permet de se pencher sur un groupe de sélection de centrale, permettant ainsi l’exportation Excel du rapport lié à un groupe de centrale. 

En deuxième partie, nous retrouvons nos centrales enregistrées et toute action d’ajout de site, ou de sélection liée à ce menu de centrale. Plus visuelle, et sous forme de tuile, il est possible à l’utilisateur de choisir sa centrale ou ses centrales en fonction du menu à sa gauche. 

La partie 3, donc tout à droite se retrouve la partie « données ». Il peut ainsi lire, écrire, modifier les données d’une ou de plusieurs centrales en fonction de son menu parent (à sa gauche). 

Codes Couleurs

Afin de réaliser une maquette répondant au mieux à l’image de ENGIE, même pour une application interne, il me fallait respecter certaines normes de l’identité du groupe.

Bleu  – Le bleu ENGIE. Couleur principale de l’application. Elle indique les titres, les noms des contenus. Il représente l’énergie.

Bleu Dégradé Vert – Le « gradient-corpo ». Il relie l’énergie de ENGIE à la transition écologique, l’énergie verte. Politique du groupe allant vers le 0 Carbonne.

Blanc – Le blanc est utilisé en cas de fond de couleur à l’image de la marque. Sur l’application, il est utilisé pour faciliter la lecture et séparer les différents modules.

Gris – Sur l’application, le gris est utilisé pour montrer et différencier les données modifiables des non-modifiables.

Noir – Sur l’application, le noir est utilisé pour appuyer les données non-modifiables.

Vert – Officiellement dans la charte graphique, ce vert est une couleur pour accentuer certains éléments. Ici, cette couleur sert d’indication positive. Elle marque l’importation, l’exportation, la mise a jour, la modification, et la sauvegarde. 

Rouge – Officiellement dans la charte graphique, ce rouge est une couleur pour accentuer certains éléments. Ici, cette couleur sert d’indication négative. Elle marque l’annulation, la fermeture, la suppression d’élément. 

User Flow

L’écran d’accueil de l’application en cas de connexion réussie. Celle-ci montre d’un côté les centrales photovoltaïque sur lesquels nous pouvons naviguer, et de l’autre la description de la centrale sélectionnée dans laquelle nous pouvons naviguer. 

En navigant dans la centrale, il est possible de voir un aperçu des graphiques, avec les données nécessaires pour créer un rapport lié à la centrale. 

Il est également possible de paramétrer une ou plusieurs sondes dans l’onglet Paramètres. En cliquant sur « ajouter une sonde » vous arrivez sur la capture suivante où il est possible de décrire une sonde. Si la sonde est vertical, son inclinaison est égale à 1, sinon, elle est horizontale. L’inclinaison est modifiable par l’utilisateur. Il est possible de détailler ces inclinaisons mois par mois. 

En cas de « reporting de masse » (donc de plusieurs centrales photovoltaïque) il est possible de gérer des groupes de centrales. Ici on peut apercevoir des graphiques relatant de l’écart de productions.

La possibilité de commenter les groupes de centrales pour détailler les rapports au mois. Le détail au cas par cas, donc des centrales, se fait directement dans la centrale. 

Période

Dans le cadre de mon alternance

Mission

Product Designer
Recherches, Compréhension et identification des besoins, recherche utilisateur, design

Équipe

Franck CACHERO – Product Owner ;
Guillaume JOUSSE – Asset Manager / Superviseur ;
François LEBRETON – Responsable équipe CoverSolar ;
Julien PERRUFEL – Sous-responsable équipe CoverSolar ;
Dorian BLEYNIE – Product Designer