CA Titres – Crédit Agricole
Mission: Cadrage UX
Durée: 8 semaines
Contexte du projet
Après plusieurs années d'enrichissement fonctionnels, le site de bourse en ligne du groupe Crédit Agricole s'éloigne des standards actuels. La réalisation d’un audit UX du site et de l’application a permis d’identifier 3 principales problématiques:
Une architecture de l’information trop complexe
Un manque de lisibilité des contenus impliquant une forte charge de travail pour les utilisateurs
Une ergonomie et des codes graphiques éloignées des standards actuels du web
Le projet de refonte a pour clairement objectif de répondre pleinement aux exigences d'expérience utilisateur des clients.
Exploration
Personae
En s’appuyant sur les entretiens individuels des clients existants, 4 personae principaux ont été identifiés permettant de couvrir 80% des besoins des utilisateurs cibles du service :
Le novice, un nouveau client qui découvre l’univers boursier
L’habitué qui pilote son portefeuille depuis quelques années déjà.
L’inactif qui possède un portefeuille depuis de nombreuses années mais ne passe pas d’ordre.
Le trader qui passe des ordres quotidiennement sur plusieurs plateformes de bourse en ligne.
Parcours d’utilisateur
L’analyse d’opportunité(value proposition canvas) a permis de dégager les principaux parcours d’utilisateur en tenant compte des attentes spécifiques des utilisateurs-cibles:
Pour le novices et l’habitué, un accompagnement adapté à chaque étape du parcours pour les rendre autonomes.
Pour le trader, un parcours orienté outils pour faciliter la gestion quotidienne de son portefeuille.
Pour l’inactif, un parcours permettant d’identifier rapidement les raisons de l’inactivité, pour le transformer en utilisateur actif.
Customer Journey Map
Définition
Vision produit
Les ateliers d’idéation réunissant les parties prenantes du projet ont permis de définir la vision produit :
“Pour l'ensemble de nos clients qui souhaitent investir sur les marchés, le site de bourse en ligne est un outil complet et indispensable dans la gestion quotidienne de son portefeuille. Contrairement à la plateforme actuelle, notre produit est personnalisable et s'adapte aux besoins de chaque investisseur, qu'il soit novice ou expert.”
Story mapping
La priorisation des fonctionnalités en utilisant la méthode Moscou
Architecture d’information
Une architecture simplifiée avec des entrées principales marquées et bien distinctes les unes des autres pour faciliter la navigation et le repérage des utilisateurs au sein de l’outil.
Principe de navigation
Une personnalisation selon le profil de l’utilisateur (novice – expert), en proposant un contenu et une navigation adapté à chaque cas.
À travers un principe d’entonnoir, les profils novices accèdent à une information vulgarisée puis rentrent dans un niveau d’information plus détaillé.
À l’inverse les profils experts accèdent d'abord à une information exhaustive en première intention, leur permettant d’avoir une vue d’ensemble, puis ensuite à des informations plus spécifiques et pointues. Le passage d’ordre reste accessible et présent tout au long du parcours.
Principe d’accompagnement
Proposer un accompagnement adapté selon le type d’information et contextualisé selon le parcours de navigation. L’aide est donc présente sous plusieurs formes, à différents endroits du site, tout en restant la plus pertinente possible selon les besoins des utilisateurs.
Interface design
Enjeux et principes de design
Enjeu #1 : des utilisateurs avec des niveaux d’expertise de la bourse très disparates ayant des besoins et attentes spécifiques.
Proposer une interface évolutive permettant de s’adapter aux profils des utilisateurs à travers :
L’adaptation des contenus présentés sur les pages selon un profil expert (contenu exhaustif et complet de pages) VS un profil novice (page simplifié avec des contenus cachés). Le double profil est accessible sur l’ensemble des pages du site permettant aux utilisateurs de changer rapidement et facilement de profil.
Un outil d’accompagnement des profils novices via un module de « gamification » pour les accompagner dans leur découverte de la bourse et leur montée en compétences.
Module de changement du profil pour un accès facile et rapide Enjeu #2 : Faciliter et simplifier le parcours d’accès au passage d’ordre.
Permettre aux utilisateurs d’accéder au passage d’ordre à chaque instant de leur parcours au sein de l’outil et faciliter son accès à travers un point d’entrée unique et transverse facilement reconnaissable:
Un point d’entrée unique on permet à l’utilisateur de limiter l’effort de prise en main de l’outil.
L’utilisateur peut configurer son ordre de bout en bout au sein du formulaire (de la sélection de la valeur à la validation de l’ordre) sans avoir besoin d’effectuer un parcours additionnel via les fiches valeur.
Dans le cas d’un parcours court le formulaire est contextualisé selon le parcours de l’utilisateur.
Bouton d’accès transverse au passage d’ordre mis en exergueEnjeu #3 : Simplifier et accompagner les actions nécessaires à la réalisation d’un passage d’ordre.
Par défaut le formulaire se concentre sur les informations essentielles, permettant de simplifier l’affichage. Sur demande certains blocs peuvent s’ouvrir permettant de découvrir des informations détaillées. C’est notamment le cas du carnet d’ordre qui par défaut présente les 2 dernières transactions, et au format déplié les 7 dernières.
On facilite la saisie en permettant de choisir aussi bien la quantité que le montant et ainsi prendre en charge d’éventuels besoins de conversion des utilisateurs.
Pour les profils novices, on appuiera l’accompagnement à travers des messages explicatifs présentant les options mais aussi en cachant certaines options avancées.
Sur l’étape de récapitulatif on conserve les mêmes principes en permettant à l’utilisateur de consulter en un coup d’œil les informations principales.
Le détail est accessible sur demande à travers l’ouverture des blocs. C’est notamment le cas pour la partie des frais et également des messages d’informations.
En offrant une forte hiérarchie de l’information sur la page on guide et on accompagne les utilisateurs dans leur lecture.
La prise de connaissance est facilitée et les utilisateurs ont moins de crainte de se tromper.
Enjeu #4 : Un besoin d’aiguillage et d’accompagnement face à la multitude de produits disponibles
Les utilisateurs, notamment novices, peuvent vite se sentir perdus face à une offre de produits très importante. À différentes étapes de leur parcours, on proposera des mises en avant selon différents critères :
Un rebond sur les produits fréquemment achetés par les autres utilisateurs en fin de passage d’ordre ou bien la mise en avant de produits similaires (niveau de risque, secteur, performances, etc.)
La mise en avant des produits les plus achetés en ce moment
Les tops les flops du moment
Enjeu #5 : Un manque de concret dans la représentation du portefeuille présentant un frein d’investissement
Une valorisation de la fonctionnalité de répartition du portefeuille à travers un accès plus évident et visible.
Complété par une refonte graphique permettant aux utilisateurs de bénéficier d’une vue d’ensemble de leur portefeuille sous forme de tableau de bord de type infographie dynamique.
La répartition du portefeuille devient également une fonctionnalité à valeur ajoutée, en facilitant le pilotage long terme et en permettant aux utilisateurs de comparer leur portefeuille actuel avec des portefeuilles types mais également leurs propres objectifs.
Enjeu #6 : Des utilisateurs ayant besoin d’être guidés pour initier et constituer leur portefeuille
Proposer aux utilisateurs de s’inspirer de portefeuilles existants, tout en présentant les bonnes pratiques de constitution d’un portefeuille à travers la mise à disposition de :
Portefeuilles types : selon différents critères (type d’investissement, niveau de risques, etc.)
Les meilleurs portefeuilles des clients Crédit Agricole
Accompagner cette première prise en main en valorisant les portefeuilles fictifs, permettant aux utilisateurs de débuter tout en limitant les risques .
Enjeu #7 : des outils de gestion riches, présentant une trop grande complexité de lecture pour les utilisateur non aguerris
Retravailler la hiérarchisation des informations pour proposer un accès adapté aux profils des utilisateurs.
Une mise en avant sur principe d’entonnoir permettant d'afficher les informations principales du portefeuille en haut de page :
Valorisation du portefeuille
Solde en espèces
Valorisation des titres
Puis d’accéder aux informations détaillées en second niveau :
Onglets de détail du portefeuille
Suivi d’un troisième niveau pour accéder aux informations spécifiques liées à chacun des onglets via des bandeaux dépliants du tableau.
Synthèse des principes
Espace portefeuille
Présentation repensée et simplifiée
Mise en avant de la valorisation du portefeuille
Mise en avant des principaux indices de performances
Accès rapide aux détails d'une position, d'un ordre, ...
Un accès rapide aux différentes sections du portefeuille (positions, ordres, …)
Répartition et analyse est entièrement revue, plus graphique et pédagogique
Passage d’ordre
Le passage d'ordre est désormais transverse et contextuel: il apparaît comme un volet indépendant, devenant ainsi utilisable depuis n'importe quelle page consultée.
Focus sur la valeur choisie, son cours et le carnet d'ordres
Simplification de la saisie (avec par exemple le choix entre quantité et montant) pour un passage d'ordre plus immédiat
L'étape de vérification est simplifiée pour se concentrer sur l'essentiel
L'étape de confirmation permet de proposer d'autres produits basés sur la valeur achetée
Tests utilisateurs
Modalité de réalisation
Les tests ont été réalisés à distance via la plateforme Testapic
Synthèse des constats
Une très grande majorité des retours des utilisateurs sont positifs. Ils estiment que le site est extrêmement facile à prendre en main et intuitif et cela quel que soit le profil des utilisateurs ayant répondu au questionnaire (novice ou expert).
Au-delà de cette impression générale très positive, les utilisateurs remontent deux points qui peuvent présenter un frein d’usage :
Manque d’accompagnement à la compréhension de termes techniques
Les boutons A & V présents sur la liste des positions n’est pas assez explicite
