instagram-icon

[USE CASE UX] Refonte d’un tableau de bord financier

Filiale du Crédit Mutuel Arkéa, Monext a pour vocation de faciliter les transactions électroniques de paiement avec ou sans carte, en point de vente, sur internet ou sur mobile. Monext commercialise depuis plus de 10 ans un service de paiement nommé Payavenue. Cette offre de processing des encaissements par carte bancaire est utilisée par de grandes enseignes (PMU, Indigo, Le Mouvement E.Leclerc, Ludendo etc.) afin de pouvoir gérer de façon centralisée toute l’activité carte, quels que soient les canaux de vente (magasins, distributeurs de carburant, barrières automatiques, bornes de vente, internet, drive, etc.) et quelles que soient les banques de ces commerçants.

 

Le brief

Payavenue propose une interface utilisateur de pilotage et de suivi d’activité. Cette interface s’adresse principalement à des profils financiers (trésorier d’entreprise, directeur financier, comptables, directeurs de magasin etc).

« Notre offre connait une belle croissance, poussée entre autres par des enjeux internationaux. Délivrer un produit parfaitement aligné sur notre ambition requiert de convoquer les meilleures expertises, aussi faire appel à une agence plutôt que de réaliser le projet en interne s’est imposé comme une évidence. Nous avions des convictions fortes concernant cette nouvelle UI, mais pas forcément tout le savoir-faire pour les réaliser. Ce que nous attendions de l’agence ? Au-delà d’une exécution parfaite, une vraie force de proposition, une méthodologie rigoureuse, une écoute et une proximité dans les échanges, et puis surtout de l’enthousiasme ! » précise Vincent Lenglet, responsable produit Payavenue.

Les objectifs de refonte :

  • Assurer une consultation fluide et multidevice
  • Simplifier des écrans rendus complexes par de nombreuses données (tableaux – chiffres …)
  • Déterminer les actions/contenus clés de l’interface et optimiser les niveaux de navigation
  • Permettre la personnalisation de l’interface
  • Initier une logique mobile first
  • Adopter un style en harmonie avec les home banking

 

Un projet UX mêlant empathie et écoute des utilisateurs

« Se mettre à la place de l’autre pour comprendre ses réactions et ses sentiments », c’est la définition de l’empathie selon Joël de Rosnay. Convaincus que tout projet digital doit passer par une phase amont de recherche et de découverte des utilisateurs, nous avons mené des interviews sur 2 profils cibles :

  • Equipe support Monext
  • Clients finaux

Les interviews abordent des thématiques plurielles telles que le type de device utilisé, le contexte d’utilisation de l’interface, la pertinence des fonctionnalités, les motivations à utiliser Payavenue (etc..) Les échanges (face à face) nous permettent d’identifier précisément les points noirs de l’interface, les manques et les incohérences des IHM.

Des questions et des itérations sur les fonctionnalités mettent en exergue des attentes communes entre les différents profils cibles :

  • Simplifier certaines fonctionnalités du tableau de bord
  • Apporter une aide à la navigation (infos bulles – pédagogie..)
  • Clarifier les données, hiérarchiser les contenus
  • Réduire le nombre d’étapes nous séparant de l’info recherchée
  • Faciliter la recherche des contrats et données financières

« L’interface actuelle n’était pas user-friendly et rendait complexe la navigation de l’utilisateur de l’outil. Qu’il s’agisse des équipes de support internes à Monext que les back offices de nos clients. Dans ce projet de refonte nous avons donc mis l’accent sur la simplicité, le visuel, la richesse des informations restituées afin d’être en adéquation avec les besoins de nos clients et utilisateurs » précise Anne-Charlotte Duperat-Rissel, Directeur projet chez Monext.

 

Profondeur de navigation

L’une des problématiques de l’interface réside dans la profondeur de navigation. Comment adopter le fameux « less is more » quand une interface doit permettre de naviguer au travers de plusieurs milliers de points de ventes, une dizaine de pays et sur des dizaines d’enseignes? Comment permettre la gestion d’une arborescence de points de ventes (création, modification, suppression) directement depuis l’interface ?

La phase de wireframes est axée sur la réduction des niveaux de navigation et sur l’adoption de systèmes de recherches similaires quelles que soient les pages. Nous créons une cartographie des points de ventes pour les hiérarchiser et leur attribuer des « classes ». Ces catégories nous permettront de créer une navigation à facettes (recherche multi-critères) pour une vue plus fine et plus synthétique des résultats de recherches.

D’une vision macro (enseigne ou pays), l’utilisateur peut désormais passer à une vision magasin en 2 clics. La gestion organisations (points de ventes arborescence) s’articule autour d’un tunnel de conception simple et didactique. Le « glisser-déposer » permet de déplacer des points de vente dans l’arborescence.

 

La data visualisation comme outil de simplification

Largement construite autour de résultats financiers et d’analyses statistiques, Payavenue est une interface riche dont l’objectif est de présenter une synthèse de l’activité commerciale/financière de points de ventes (grandes surfaces, GSB, GSA, chaîne de magasins..) La restitution des données doit pouvoir être macro (analyse par enseigne) ou beaucoup plus fine (vision par point de vente).

Nous optons donc pour un tableau de bord de type « Data driven / chart board » permettant aux utilisateurs de comprendre rapidement des données chiffrées. Convaincus par les interfaces mobiles des banques en ligne, nous souhaitons aborder une conception Mobile first. Nos charts sont construits sur la base de librairies Polymer via le framework Vaadin.

Les données sont affichées en temps réel, les types de graphiques sont personnalisables (ajout de widgets depuis la home page). Orientée card design, l’interface adopte une grille customisable selon les préceptes du drag and drop, chaque utilisateur peut faire le choix d’afficher telle ou telle donnée aux emplacements disponibles de la grille, le tout en responsive design.

Éléments rédhibitoires par excellence : les tableaux! Nous leurs donnons plus de lisibilité en contrastant les backgrounds, trop complexes pour optimiser l’affichage sur mobile nous conservons un scroll horizontal. En lien avec les attentes utilisateurs, les données de tableaux sont exportables (pdf-xls…) et transmissibles pas e-mail. Leur structure est personnalisable (choix des colonnes à afficher ou non).

 

Un tableau de bord orienté « actions » et efficience.

Comme le rappelle Amélie Boucher « L’un des moyens les plus faciles pour optimiser l’efficience de vos utilisateurs est de leur proposer des raccourcis pour leurs actions préférées. » En effet, dès la phase d’interview, les utilisateurs remontent la nécessité de bénéficier de raccourcis vers des actions clés. Création de contrats, création de règles, vision des profils les plus consultés etc.. L’idée est de pouvoir accéder à des données rapidement, de modifier ou créer des éléments simplement.

Nous testons lors des ateliers sur prototypes l’ajout de zones d’accès rapides aux actions plébiscitées par les utilisateurs. Un système de tabs permet de naviguer dans les contrats/profils les plus consultés sans changer de page.

L’engouement utilisateur valide cette fonctionnalité et nous étendons la mise en place de ce principe à plusieurs pages stratégiques de l’interface en adaptant les CTA au contexte des écrans.

 

Encourager l’utilisateur

Nous en parlions ici, diminuer les efforts cognitifs et engager l’utilisateur dans une interface sont des éléments déterminants en phase d’UI. Les tableaux de bords sont des outils, rien ne les obligent à être compliqués ou fastidieux. Payavenue comprend des actions a réaliser en plusieurs étapes, un scénario assez proche d’un tunnel de paiement e-commerce.

Sur les grands principes de l’affordance nous imaginons ces étapes en lien avec un fil d’ariane, dynamique et progressif pour induire une sensation d’avancée dans une tache donnée.


De la même manière, nous utilisons une charte UI permettant de ne provoquer aucune ambiguïté entre les éléments cliquables ou non. Concernant les zones de recherches et de formulaires, nous utilisons des libellés afin de renforcer l’affordance perçue de ces éléments grâce à la dimension sémantique.

Retour

Toujours n° 1

Découvrez en 1er les billets qui font l'internet de demain !

M'inscrire

Merci pour ton inscription