FinanSHEly
FinanSHEly est une plateforme d’éducation financière pensée exclusivement pour les femmes, combinant apprentissage, personnalisation, communauté et accompagnement lors des différentes étapes de vie. Dans le cadre d’une mission menée avec DeVinci Junior, j’ai conçu l’expérience UX/UI de la plateforme à partir de zéro, de la découverte no login jusqu’à l’espace Premium, en passant par les parcours d’onboarding, d’apprentissage, de conversion et de gestion d’abonnement.
Client
DVJ
Expertises
Product Strategy, UX, UI, Atomic DS
Concevoir l'expérience d'un produit digital de bout en bout
L'objectif était de transformer la vision fonctionnelle de FinanSHEly en une expérience digitale cohérente, intuitive et premium.
Mon travail a porté sur l'ensemble des parcours utilisateurs, de la première interaction avec la plateforme jusqu'à l'utilisation quotidienne du compte Premium : architecture des parcours, logique de navigation, onboarding, conversion, apprentissage, gestion du compte, interactions communautaires et rétention.
L'enjeu était de structurer un produit riche en fonctionnalités sans complexifier l'expérience, tout en conservant une direction UI élégante, féminine et premium.
1
Architecture UX & parcours de conversion
L'un des premiers enjeux UX a été de distinguer clairement l'expérience No Login de l'expérience Premium, tout en permettant de passer de l'une à l'autre sans rupture. Le parcours public permet de découvrir le produit, de comprendre son fonctionnement et de commencer une première expérience d'apprentissage sans création de compte offerte.
Découvrir → Questionnaire → Recommandation → Gifted Access
ou
Découvrir → Premium → Création de compte → Abonnement → Activation
Cette architecture permet de laisser l'utilisatrice expérimenter la valeur du produit avant de lui demander un engagement.
Gifted Access : supprimer la friction à l'entrée
J'ai travaillé sur le parcours permettant d'accéder au premier Learning Path gratuitement, sans compte ni paiement.
Le terme Gifted Access a également été travaillé dans le cadre de l'UX Writing afin de mieux traduire le positionnement premium de l'expérience.
L'idée était de ne pas présenter ce parcours comme une simple "version gratuite", mais comme une première expérience offerte permettant de découvrir concrètement la valeur de FinanSHEly.
Premium & Student
Le parcours de souscription devait gérer plusieurs offres tout en restant simple à comprendre :
Premium mensuel · Premium annuel · Premium étudiant
L'offre étudiante soulevait une problématique UX supplémentaire : comment vérifier l'éligibilité sans transformer la vérification en point de friction ?
J'ai donc échangé avec les développeurs sur un parcours à deux possibilités.
La première repose sur une adresse e-mail institutionnelle permettant de vérifier le statut étudiant.
Si l'établissement n'est pas reconnu ou ne permet pas cette vérification, l'utilisatrice peut directement joindre un justificatif officiel depuis la plateforme.
Un choix important a également été fait sur le moment de la vérification : ne pas bloquer inutilement l'accès au Premium.
L'utilisatrice peut finaliser son inscription et son paiement, puis son statut peut être contrôlé. En cas de justificatif invalide ou de fraude détectée, le statut étudiant est ensuite désactivé.
Le statut doit par ailleurs être renouvelé chaque année, avec une information claire dans l'espace compte lorsque l'utilisatrice doit actualiser son justificatif.
L'objectif était de trouver un équilibre entre conversion, contrôle et sécurité, sans créer de rupture dans le parcours.
2
De la conception des parcours au prototype interactif
Une fois l'architecture définie, j'ai traduit les parcours en wireframes, maquettes haute fidélité et prototypes Figma.
Le travail ne consistait pas simplement à représenter les écrans principaux, mais à anticiper les différents cas d'utilisation et les états/instances nécessaires à leur fonctionnement.
J'ai notamment prototypé les transitions entre les différentes étapes du parcours, les interactions, les états actifs ou inactifs, les contenus verrouillés, les éléments débloqués et les différents comportements nécessaires à la compréhension du produit.
Penser les états avant le développement
Pour chaque fonctionnalité, la réflexion UX/UI intégrait les différents états susceptibles d'être rencontrés par l'utilisatrice.
Un contenu peut par exemple être :
disponible · en cours · terminé · verrouillé · débloqué · Premium · sélectionné · désactivé
Cette logique a été particulièrement importante pour les Learning Paths, les récompenses partenaires, les fonctionnalités communautaires et la gestion de l'abonnement.
Le prototype devait donc représenter le comportement du produit, et pas uniquement son apparence.
3
Concevoir une expérience riche sans surcharger l'utilisatrice
Le défi était de structurer une plateforme comportant de nombreux usages sans donner l'impression d'un produit complexe ou fragmenté.
Navigation contextuelle
La navigation évolue selon le contexte.
En No Login, la navbar sert principalement à parcourir les différentes sections de la landing page et à accéder à la connexion.
Une fois authentifiée, elle devient une navigation applicative structurée autour des différentes fonctionnalités du produit.
Ce changement d'architecture permet de passer d'une logique de découverte à une logique d'usage quotidien.
Dashboard : prioriser l'action
Le dashboard a été pensé autour des informations réellement utiles au retour de l'utilisatrice :
progression, apprentissage en cours, événements et accès à la communauté.
L'idée n'était pas de multiplier les informations, mais de créer une hiérarchie claire entre ce qui mérite une attention immédiate et ce qui peut être découvert secondairement.
Communauté : concevoir les interactions sociales
La communauté nécessitait de penser plusieurs niveaux d'interaction au sein d'un même composant.
J'ai donc travaillé les différents états nécessaires aux publications :
publication initiale, réactions, replies, delete et interactions utilisateur.
Le prototypage permettait de matérialiser ces comportements et de clarifier auprès des développeurs ce qui se passe après chaque interaction.
Learning Paths : progression, verrouillage & récompense
La logique des Learning Paths nécessitait également plusieurs états UX.
Un parcours peut être accessible, en cours, terminé ou verrouillé.
Une fois complété, il peut également débloquer une récompense partenaire.
Cette relation entre progression → complétion → récompense a été intégrée directement dans l'expérience afin que l'utilisatrice comprenne ce qu'elle peut obtenir et comment l'obtenir.
Partenaires : rendre le verrouillage compréhensible
Les offres partenaires disponibles et indisponibles ont été pensées comme deux états d'une même expérience.
Lorsqu'une offre est verrouillée, l'utilisatrice ne se retrouve pas face à une simple fonctionnalité inaccessible.
L'interface lui indique ce qui est nécessaire pour la débloquer et lui permet de rejoindre directement le Learning Path concerné.
Le verrouillage devient ainsi une incitation à poursuivre le parcours, plutôt qu'une frustration.
4
Gestion du compte, abonnement & rétention
La dernière partie du travail UX concernait les parcours moins visibles mais essentiels à l'expérience globale : Account Settings, Subscription et résiliation.
Account Settings
L'espace compte centralise les informations personnelles, le statut Premium et, pour les étudiantes, le statut de vérification.
L'utilisatrice peut notamment modifier ses informations, gérer son mot de passe, son mail et suivre l'état de son statut étudiant.
Subscription : rendre la gestion transparente
J'ai structuré l'espace abonnement pour permettre à l'utilisatrice de retrouver au même endroit :
son offre actuelle, son prix, son statut, sa prochaine date de prélèvement, son moyen de paiement, son historique et les possibilités de changement ou de résiliation.
L'objectif était de transformer une partie souvent complexe des produits SaaS en une expérience lisible et maîtrisable.
La résiliation comme parcours de réactivation
Un choix UX important a été fait concernant les comptes résiliés.
Suite à la logique une utilisatrice Premium passerait au plan Gifted access après résiliation, qui nécessite aucune création de compte, ce qui se traduit plus simplement en perte de données, d'accès et retour à zéro.
Donc on a décidé : plutôt que de supprimer le compte ou de faire perdre l'historique à l'utilisatrice, nous conservons son espace en simplement verrouillant les fonctionnalités Premium, gardant le compte accessible.
L'utilisatrice peut toujours consulter ses paramètres et son abonnement afin de pouvoir se réabonner simplement en un clic.
Cette décision permet de transformer :
Résiliation → perte du compte
en :
Résiliation → compte conservé → retour simplifié → réactivation
C'est une réflexion davantage Product que UI, afin de prendre en compte la relation entre l'utilisatrice et le produit au-delà de la simple interface.
5
Atomic Design System & UI Design
Une fois les parcours stabilisés, j'ai conçu l'interface dans une DA luxe, féminine et moderne.
L'enjeu était de traduire le positionnement de FinanSHEly dans une interface suffisamment premium pour porter la marque, tout en conservant la lisibilité nécessaire à une plateforme d'apprentissage.
Composants modulaires
Plutôt que de produire les écrans indépendamment, j'ai construit un mini Atomic Design System permettant de faire évoluer rapidement l'interface. Cette méthode consiste de créer ce dernier en décomposant les interfaces en leurs éléments les plus fondamentaux comme composants.
Ces composants reposent sur des propriétés, variantes, états et instances qui permette notamment de modifier leur contenu, icône, visibilité ou comportement sans recréer chaque version.
Cette approche permet de maintenir la cohérence entre les différents parcours tout en préparant une base directement exploitable par les développeurs.
Un système pensé pour les cas réels
Les composants ont été conçus avec leurs différents états afin de couvrir les situations rencontrées dans le produit. Un même composant pouvait ainsi être adapté à différents contextes grâce à ses propriétés et variantes, plutôt que de multiplier les composants indépendants.
Ce travail a particulièrement facilité la conception des éléments récurrents comme les cards, boutons, badges, Learning Paths, éléments communautaires, contenus verrouillés, états Premium ou encore composants liés à l'abonnement.
6
Projets Récents
