Booster le NPS de l’app

La connexion, c'est la première expérience de l'app, et avant ce projet elle prenait 30 secondes. Pour une app bancaire, c'est 30 secondes à se demander si ça va fonctionner.

Rôle

Lead designer

Contexte

App mobile

Période

Fin 2024 → début 2025

Ma mission

Repenser l'UX/UI du parcours de connexion en parallèle de sa réécriture technique afin d'améliorer le NPS.

Impact mesuré · 6 mois après (2025)

+30

NPS App

était à +26

4,6

Note App Store

était à 2,2

~10s

Temps de connexion

était 25–30 s

Le problème

Le parcours de connexion s’était complexifié au fil des correctifs OS, jusqu’à devenir difficile à maintenir et frustrant côté utilisateur.

Résultat : 25 à 30 secondes d’attente, des bugs de session récurrents et des messages d’erreur trop génériques pour aider l’utilisateur.
Les verbatims négatifs sur les stores montaient. Le NPS stagnait à +26 depuis deux ans.

J’ai donc travaillé sur un double chantier : simplifier l’expérience et cadrer le nouveau parcours avec les développeurs dès la conception.

Ce que j'ai fait - et pourquoi

01. Reconstruire l'existant depuis zéro.

Aucun travail UX préalable n'existait. J’ai d’abord reconstruit l’existant à partir de screenshots pour identifier les écrans, les cas couverts et les zones d’ombre avant toute conception.

Cartographie de l'existant reconstruite depuis des screenshots — point de départ avant toute conception.

02. Cadrer exhaustivement les cas limites.

Ensuite, il fallait prévoir deux parcours (1ère connexion / connexions suivantes), les cas d'erreur, les warnings contextuels et la dépendance à Luxtrust Mobile imposée par la sécurité.
J'ai tout modélisé dans un userflow et un service blueprint conçu avec les développeurs avant de concevoir ce qui m'a aidé à comprendre les dépendances et les contraintes.

Userflow des deux parcours — 1ère connexion et connexions suivantes.

Service Blueprint — Service blueprint de la 1ère connexion — pour aligner l'équipe sur les dépendances.

03. Traiter les erreurs comme du design.

J’ai traité les erreurs comme des moments de design : chaque cas critique (timeout, téléphone rooté, perte de connexion, maintenance, etc.) a eu son message contextuel et son écran dédié.

04. Tester sur prototype.

J’ai testé le prototype avec des profils représentatifs : habitués, peu habitués, et sans connaissance de l'app ni de Luxtrust.
100% de réussite sur les parcours. | 7,8/10 de satisfaction.
Friction identifiée sur le QR code Luxtrust, remontée aux équipes de Luxtrust, hors périmètre design.

“Aucune difficulté de connexion, c'est fluide.”

“C'est assez fluide et les informations sont claires.”

“Je me suis posé des questions vis-à-vis de Luxtrust, le QR code n'est pas intuitif.”

05. Produire les visuels stores.

Enfin cette refonte a également nécessité la mise à jour des visuels des stores. De part mon passé graphique, j’ai décliné les nouveaux visuels pour les stores sur iPhone, iPad et Android en plusieurs langues pour aligner la promesse produit avec la refonte.

06. Accompagner jusqu'en production.

J’ai accompagné le projet jusqu’en production avec annotations, Design Quality Check et suivi des écarts avec la maquette.
Le projet a été déployé en deux phases : un premier cercle restreint (Friends & Family) pour valider sans retour UX bloquant, puis généralisation.

Décisions clés

Restructuration de la page de connexion

J’ai mis Luxtrust Mobile en option principale et relégué la connexion banque dans un onglet secondaire pour refléter les usages réels et simplifier la lecture.

Nouvelle connexion avec Luxtrust Mobile — Après - Connexion Luxtrust

Nouvelle connexion avec identifiants banque — Après - Connexion banque

Luxtrust Mobile mis en avant-plan, identifiants banque en onglet secondaire — la hiérarchie reflète désormais les usages réels.

Aide et Explication de Luxtrust Mobile

J’ai ajouté une page d’aide et un contenu “Qu’est-ce que Luxtrust ?” pour rendre l’authentification plus compréhensible, notamment pour les utilisateurs peu familiers avec l’écosystème luxembourgeois.

Ajout d'une aide dédiée pour expliciter Luxtrust Mobile et réduire les zones d'incertitude autour de l'authentification.

Remplacement des pop-ups par des bottom sheets

J’ai remplacé les pop-ups héritées du web par des bottom sheets plus explicites, avec 4 variantes sémantiques adaptées au contexte. J'ai repris ce composant du projet Prise de rendez-vous en ligne et l'ai adapté au contexte connexion.

Avant

Après

Refonte de l'infologin

J’ai remplacé la page d’information imposée à chaque connexion par une card contextuelle, moins intrusive et plus consultable à la demande.

Ancienne page d'information imposée à la connexion

Nouvelle card infologin dans la page de connexion

Contenu détaillé de la nouvelle infologin

Splashscreen animée

J’ai ajouté une splashscreen animée pour mieux accompagner le temps de chargement résiduel et moderniser l’entrée dans l’app.

Ce que j'en retiens

"Les cas d'erreur ne sont pas des détails — un message générique peut faire chuter le NPS."

"Travailler avec les devs dès le userflow permet de livrer quelque chose de propre."

"Reconnaître ce qui est hors périmètre est une posture aussi importante que la conception."

"Anticiper le coût d'intégration côté dev fait partie du travail du designer."