Lucille Mercier
UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦ UX/UI DESIGN ✦ DIRECTION ARTISTIQUE ✦ DESIGN SYSTEM ✦ GRAPHISME ✦
← Retour au portfolio
01 Mission 1

Smarty+ — application mobile Orange

Le contexte

Le projet ?

BNP Paribas Cardif est la filiale assurance et prévoyance du groupe. Smarty+ est une application mobile permettant de tester la santé d'un téléphone portable, soit pour le revendre, soit lors de la souscription à une assurance mobile — un parcours mené en collaboration avec Orange.

Suite à un taux de fraude à l'assurance mobile croissant, l'expérience et le design de l'application ont été entièrement retravaillés.

Mon rôle ?

  • J'ai mené des tests utilisateurs de l'application actuelle, sur un panel divisé en deux groupes distincts avec focus group en fin de session.
  • J'ai créé un customer journey mapping suite aux résultats des tests et à des entretiens exploratoires.
  • J'ai designé un premier parcours incluant des notions de nudge, puis un deuxième parcours avec l'amélioration UI.
  • J'ai testé les nouveaux parcours auprès d'utilisateurs, puis étendu l'audit à l'ensemble du parcours de souscription (avant/après l'application).

Phase d'exploration et de recherche

Le contexte ?

Dans un premier temps, nous avons voulu comprendre comment les utilisateurs réalisaient le parcours pour tester la santé de leur mobile, mais aussi si cela était vraiment possible de frauder et de passer outre les tests présents dans le parcours.

Mon rôle ?

J'ai mis en place un atelier séparé en deux temps :

  • Tests individuels divisés en 2 groupes de six personnes :
    • Groupe n°1, 2 scénarios (le premier en tant que personne honnête, le deuxième en tant que fraudeur).
    • Groupe n°2, 1 seul scénario, celui en tant que fraudeur.
  • Focus group global réunissant tous les participants afin d'échanger sur l'expérience qu'ils avaient vécue.

Le résultat ?

Au total, 13 types de fraudes ont été tentés, et plus de la moitié ont fonctionné. Ce que nous avons principalement retenu, c'est que si la fraude était bien possible dans les tests, un découragement des utilisateurs lambda existait aussi : le parcours pouvait être long, sans notion d'étapes, et les abandons pouvaient donc être fréquents.

12
Participants aux ateliers
50%
Ont réussi à aller à la souscription de l'assurance avec un portable cassé
8
Types de fraudes ont fonctionné dans le parcours
40%
Des participants ont trouvé le parcours complet trop long
Les points clés à retenir concernant l'UX/UI — user experience et user interface

Les points clés à retenir concernant l'UX/UI.

UX/UI — autres pistes d'améliorations

UX/UI — autres pistes d'améliorations.

Réalisation d'un customer journey mapping

Mon rôle ?

À la suite de la phase d'observation et de test, j'ai réalisé un customer journey mapping pour comprendre le parcours global de l'utilisateur ainsi que les points bloquants ressortis. Les observations ont fait ressortir des failles d'utilisation à certaines étapes, mais aussi un découragement de l'utilisateur à aller au bout du parcours.

Customer journey mapping détaillé — recherche, installation, utilisation et souscription Smarty+, avec pain points par device

Customer journey mapping — Desktop, Mobile (navigateur) et Mobile (application), avec pain points identifiés par étape.

Création des deux parcours en maquettes

Mon rôle ?

Dans un premier temps, j'ai réalisé un parcours incluant des notions de nudge, sans modification de design, afin de décourager la fraude et d'encourager les utilisateurs à aller au bout du parcours. Dans un deuxième temps, j'ai ajouté des améliorations de design afin d'éviter les blocages visuels pouvant polluer l'expérience.

Maquettes avant/après avec notions de nudge : capacité, motivation, gamification, effet Zeigarnik, nouveau design

Maquettes avant/après intégrant différentes notions de nudge — capacité, motivation, gamification, effet Zeigarnik, et nouveau design.

User tests (A/B testing) des deux nouveaux parcours

Le résultat ?

Des tests A/B ont été conduits sur un panel de 8 utilisateurs, en 3 phases (présentation, scénario en think-aloud sur les deux parcours, questionnaire d'utilisabilité). L'expérience To Be a été très bien accueillie (NPS > 70%), avec une nette amélioration par rapport au parcours initial.

-28,5
NPS du parcours initial (As Is)
-20
NPS après ajout du Nudge
75
NPS du parcours To Be, avec refonte UI
Phase 1 — As Is / Nudge, NPS -28,5 à -20, verbatim utilisateurs et conclusion

Phase 1 — As Is / Nudge : NPS de -28,5 à -20.

Phase 2 — As Is / To Be, NPS -28,5 à 75, verbatim utilisateurs et conclusion

Phase 2 — As Is / To Be : NPS de -28,5 à 75.

Pour aller plus loin, audit du parcours complet

Mon rôle ?

En étudiant le customer journey mapping de la souscription à une assurance mobile dans sa globalité, en prenant en compte les actions de l'utilisateur avant et après son arrivée dans l'application, nous sommes allés plus loin dans les recommandations auprès d'Orange : des pain points sont aussi ressortis en amont et en aval du parcours dans l'application.

Audit détaillé du parcours complet — recherche, installation, utilisation et souscription à l'assurance, du site Orange jusqu'à la fin du parcours

Audit du parcours complet — de la recherche d'information sur le site Orange jusqu'à la souscription à l'assurance.

Propositions de trois différents user flows

Mon rôle ?

Les entretiens exploratoires et les tests ont révélé qu'un des points bloquants principaux était le changement de format d'écran. En repensant le parcours complet, j'ai proposé trois possibilités : un parcours 100% mobile intégrant Smarty+ au sein de l'application Orange & Moi, un parcours démarrant sur le site internet d'Orange sur mobile, et un parcours démarrant sur le site internet d'Orange sur ordinateur.

User flow détaillé des trois parcours proposés — Parcours A 100% App, Parcours B Mobile diagnostique + déductible, Parcours C Desktop diagnostique + déductible

Trois user flows proposés — A. 100% App, B. Mobile (diagnostic + deductible), C. Desktop (diagnostic + deductible).

Prototypes cliquables & tests des nouveaux parcours

Mon rôle ?

Pour chaque parcours proposé, j'ai réalisé des prototypes cliquables en reprenant les codes de la charte graphique d'Orange et sa ligne éditoriale, afin de tester chaque hypothèse dans des conditions proches du réel.

Le résultat ?

Des tests ont été conduits sur un panel de 8 utilisateurs, en think-aloud, avec le choix libre du format d'écran (ordinateur ou mobile) pour démarrer leur parcours. Le parcours A (100% App) est ressorti comme le plus cohérent et rapide pour les utilisateurs, avec le score le plus élevé (7,5/10).

7,5/10
Score du parcours A — 100% App
6,9/10
Score du parcours B/C — Web browser + App
5,5/10
Score du parcours B/C — Web browser + Deductible
Prototypes cliquables — écrans du parcours 100% App et du parcours via le site internet Orange

Prototypes cliquables — parcours 100% App et parcours via le site internet Orange.

User tests des nouveaux parcours — devices utilisés et verbatim utilisateurs

Devices utilisés instinctivement et verbatim utilisateurs.

User tests des nouveaux parcours — scores par parcours testé A, B et C

Scores et feedbacks par parcours testé — A, B/C.

02 Mission 2

Spread — plateforme interne d'innovation

Le contexte

Le projet ?

Spread est un site internet interne permettant de répertorier les innovations menées au sein de BNP Paribas Cardif dans le monde. Ce site existait déjà mais n'atteignait pas ses objectifs : usage peu naturel au quotidien, proposition de valeur peu claire et UI vieillissante.

Mon rôle ?

  • J'ai réalisé un audit et des entretiens exploratoires sur le site actuel afin de comprendre les usages et les points de blocage.
  • J'ai designé le nouveau site en incluant une nouvelle proposition de valeur, pour faciliter l'utilisation quotidienne du site.
  • J'ai créé un design system soutenant l'UI et les interactions du site, en collaboration directe avec le développeur en charge du site.

Design system Spread

Le résultat ?

Un design system complet a été livré au développeur pour soutenir la refonte : couleurs et dégradés, typographie, composants atomiques (boutons, tabs) et composants plus complexes (cards, textarea, carrousel, barre de progression).

Design system Spread — composants Atoms, boutons

Atoms — Boutons.

Design system Spread — composants Molecules, cards

Molecules — Cards.

Design system Spread — composants Organisms, carrousel

Organisms — Carrousel.

Page d'accueil du site Spread — initiatives populaires, Innovation Ambassadors, Positive Impact Initiatives

Aperçu final de la homepage Spread.

Continuer la visite

Retour au portfolio →