Refonte de la page d'authentification BRED

refonte de la page d'authentification

BRED Banque populaire

BRED Banque
populaire

Contexte

Le site internet des particuliers a été refait en 2018. Depuis, les tendances ont évolué et l’UX design s’est fortement développé. J’ai initié le projet en proposant de simplifier la page et de la rendre plus accessible aux utilisateurs.

L’objectif principal était donc de garder uniquement l’essentiel sur la page et de la moderniser.

Déroulé

découvrir

Audit des pages

Audit des pages d’authentification Afin de comprendre au mieux les enjeux de cette refonte, il est important de savoir qu’il existe plusieurs parcours d’authentification :
- Le parcours dit “classique” : je suis un client qui souhaite me connecter sur mon ordinateur.
- Le parcours “mobile” : parcours réalisé par un client depuis son téléphone portable (environ 60% des connexions).
- Le parcours dit “spécifique” : je suis un client qui s’intéresse à un prêt (par exemple), lors de la souscription au prêt, je suis redirigé vers la page d’authentification spécifique au prêt.

Analyse concurrentielle
J'ai étudié les parcours d'authentification de sites bancaires concurrents et d'entreprises reconnues pour leurs interfaces utilisateur. Cette analyse comparative m'a permis d'identifier les bonnes pratiques et les points à améliorer.
J'ai aussi examiné l'ergonomie des parcours existants sur le site BRED, en identifiant les obstacles potentiels à la connexion et en évaluant la fluidité de l'expérience utilisateur.
Étant donné que 60% des connexions sont effectuées via mobile, l'interface a été repensée pour offrir une expérience plus fluide et intuitive sur les petits écrans.

découvrir

recommandations UX (bastien & scapin)

À l’aide des critères ergonomiques de Bastien & Scapin, j’ai réalisé une liste de recommandations pour avoir une expérience utilisateur optimale :

Guidage
Ajouter des messages d’aide et des indications claires tout au long du processus d'authentification pour guider l’utilisateur.
Par exemple (Vu chez BNP Paribas) : inciter le client à rentrer son identifiant tout de suite en floutant le reste.

Charge de travail
Réduire la charge cognitive en simplifiant les formulaires et en utilisant des éléments visuels cohérents. Limiter le nombre d'étapes nécessaires pour l'authentification.
Par exemple (vu chez Bourso Bank) : mettre un minimum d’informations pour avoir une charge perceptive ou mnésique faible.

Contrôle explicite
Permettre à l’utilisateur de corriger facilement ses erreurs sans devoir recommencer tout le processus. Intégrer des messages d’erreur explicites et des options de récupération de mot de passe accessibles.
Par exemple (vu chez BNP Paribas) : proposer la récupération du mot de passe ou de l’identifiant, si besoin.

Adaptabilité
Adapter l’interface aux différents types de dispositifs (ordinateurs, tablettes, smartphones) en utilisant un design responsive. Prendre en compte les spécificités des parcours mobiles, où la saisie de texte est plus contraignante.
Par exemple (vu chez BNP Paribas) : un mode accessible à tous (pour tous les types de handicaps visuels).

délivrer

Les wireframes

Pour la conception de cette page, j'ai élaboré des wireframes en utilisant l'outil Figma. Voici les trois propositions que j'ai développées. Les différences entre ces versions résident principalement dans la section de la foire aux questions (FAQ), qui est un élément crucial de la page d'authentification. Dans cette proposition, la FAQ est placée en bas de la page, avec des questions courantes et leurs réponses sous forme de liste déroulante.

Ici, la FAQ est intégrée directement dans le formulaire d'authentification, avec des réponses qui apparaissent en survolant les questions.