Edenred Mon CSE.
Contexte.
Edenred Mon CSE est l'application mobile e-commerce qui permet aux bénéficiaires de dépenser leurs avantages CSE (subventions, chèques cadeaux) sur de la billetterie, des cartes cadeaux et des biens physiques, mais aussi de géolocaliser les offres et partenaires à proximité, et de suivre l'actualité et les événements organisés par leur CSE, directement depuis leur téléphone. Elle fait partie du projet Explorer, la refonte globale des plateformes CSE d'Edenred : logiciel de gestion des CSE, plateforme e-commerce, application mobile et back office e-commerce. Cette expérience m'a demandé de collaborer avec de nombreux métiers et parties prenantes, dans un fonctionnement agile basé sur la méthode Scrum : sprints, cérémonies, backlog partagé avec les développeurs. Sur ce périmètre, j'étais référent de l'expérience de l'application mobile : maquettage sur Figma, prototypage interactif et itérations testées à chaque sprint.
Ma démarche.
Le même déroulé revient à chaque parcours retravaillé sur l'application, du cadrage jusqu'à la mise en production.
Analyse des parcours existants
Étude des parcours déjà en place sur les autres plateformes du projet Explorer, pour distinguer ce qui devait être repensé pour le mobile plutôt que simplement transposé.
Maquettage & prototypage
Maquettes et prototypes interactifs sur Figma, incluant le Motion Design System : micro-interactions et transitions cohérentes d'un écran à l'autre.
Tests utilisateurs
Tests réguliers via Maze pour valider chaque parcours et chaque micro-interaction avant sa mise en production.
Itération & livraison
Itérations livrées au rythme des sprints, en lien continu avec les développeurs pour garantir la fidélité de l'implémentation.
Méthode de travail : Agile Scrum & Product Trio
Le projet Explorer fonctionnait en méthode Agile Scrum : sprint planning pour cadrer le travail à venir, daily pour synchroniser l'équipe, sprint review en fin de sprint pour présenter le travail réalisé et recueillir des retours, et rétrospective pour ajuster la façon de travailler d'un sprint à l'autre. Au quotidien, la collaboration prenait la forme d'un product trio (designer, Product Owner et développeur) pour que chaque parcours mobile intègre dès le départ les objectifs produit, les besoins utilisateurs et la faisabilité technique, plutôt que d'être validé après coup.
Recherche & tests utilisateurs.
Avant de trancher un parcours, je le confrontais aux bénéficiaires eux-mêmes : entretiens exploratoires en amont du cadrage (préparés et synthétisés sur Miro et Dovetail), benchmark des pratiques du marché, puis tests d'usabilité réguliers via Maze sur chaque maquette et chaque micro-interaction, avant la mise en production. Ce triptyque (entretiens, benchmark, tests) est un axe fort de ma pratique, mené avec la même rigueur sur chacun des projets présentés dans ce portfolio, même quand il n'est pas détaillé écran par écran ici.
Le déroulé d'un entretien, de la préparation à la restitution.
Ce déroulé reste globalement le même d'un sujet à l'autre, quelle que soit la plateforme du projet Explorer.
Préparation du guide
Guide structuré en thèmes plutôt qu'en questions isolées, pensé en mode entonnoir : du général vers le spécifique, pour ne pas orienter les réponses trop tôt.
Entretiens individuels
Sessions semi-directives à distance, enregistrées avec l'accord de la personne interrogée, pour pouvoir se concentrer sur l'échange plutôt que sur la prise de notes.
Retranscription & synthèse
Réponses retranscrites puis confrontées question par question d'un entretien à l'autre, pour en extraire les irritants et les attentes qui reviennent plutôt que des cas isolés.
Restitution & arbitrages
Enseignements partagés avec l'équipe produit et développement, pour nourrir les personas et arbitrer la hiérarchie de l'accueil et du menu avant le maquettage.
Le bénéficiaire terrain, mobile-only
Travaille sans poste de bureau (industrie, logistique, retail) et n'a pas d'accès à un ordinateur professionnel. L'app mobile est son seul point d'entrée vers ses avantages, consultée sur une pause courte.
Le parent, acheteur ponctuel
N'ouvre l'app que quelques fois par an, au moment où un avantage arrive à expiration (rentrée scolaire, Noël). Objectif unique sous contrainte de temps, sans réapprendre l'app à chaque visite.
L'explorateur récurrent
Ouvre l'app régulièrement pour profiter des bons plans loisirs (cinéma, parcs, sorties). À l'aise avec le digital, compare les offres et attend un vrai moteur de recherche plutôt qu'une simple liste.
Des ateliers avec les utilisateurs, sur toutes les plateformes du projet.
Au-delà des entretiens et des tests Maze, une partie de ma pratique sur le projet Explorer a consisté à organiser des ateliers directement avec les utilisateurs et les métiers concernés, sur chacune des plateformes du projet (application mobile, Edenred Shop, back-office), pour faire remonter les besoins réels avant de concevoir plutôt que de les découvrir une fois les maquettes posées.
Un des ateliers organisés avec les utilisateurs et les métiers du projet Explorer.
Ce que les tests ont fait remonter
Les sessions Maze ont mis en évidence plusieurs frictions récurrentes : une hésitation sur le menu Explorer, les testeurs cherchant d'abord leurs avantages disponibles avant de parcourir le catalogue par catégorie ; un besoin de contexte plus fort sur les cartes cadeaux, certains voulant vérifier la validité d'un avantage avant même de choisir un montant ; et une meilleure perception du motion lorsqu'il accompagnait une action déjà comprise plutôt que lorsqu'il tentait de l'expliquer. Ces retours ont directement nourri la mise en avant des avantages dès l'accueil et les intentions d'usage documentées dans le Motion Design System.
Penser un parcours mobile, pas un site réduit.
Concevoir une expérience fluide et dynamique pour Mon CSE supposait de ne pas traiter l'app comme une version compressée du desktop. La session y est courte, souvent interrompue, l'utilisateur est en mobilité et tient son téléphone d'une main ; il attend une réponse immédiate là où le desktop tolère un détour par un tableau de bord. J'ai repris chaque parcours clé pour distinguer ce qui devait être repensé pour le mobile plutôt que simplement transposé depuis les autres plateformes du projet Explorer.
Sur desktop
- Tableau de bord riche : historique complet, filtres, export
- Sessions longues, souvent en tâche de fond dans un onglet
- Saisie au clavier, formulaires détaillés
- Navigation horizontale par menu, plusieurs niveaux visibles
Sur mobile
- Informations essentielles accessibles en un geste, dès l'ouverture
- Sessions courtes et fréquentes, souvent en mobilité
- Interactions simplifiées, priorité au pouce et à une main
- Navigation par onglets bas, un niveau de profondeur maximum
Focus : Motion Design System
En tant que référent de l'expérience sur Mon CSE, j'ai conçu une expérience fluide et dynamique en créant un Motion Design System intégrant micro-interactions, transitions et animations. L'objectif : que chaque geste (validation d'un champ, changement d'écran, retour visuel au toucher) soit cohérent d'un bout à l'autre de l'app plutôt que traité au cas par cas selon l'écran. Ce travail de motion s'est appuyé sur des tests utilisateurs réguliers pour valider le ressenti avant l'implémentation.
Le Motion Design System, en détail.
Pour que le motion reste cohérent au fil des sprints et des développeurs qui s'en emparent, j'ai construit un outil de référence où chaque animation attendue est non seulement spécifiée mais codée à l'identique, code React Native Reanimated à l'appui, prêt à être récupéré tel quel. Plus de 30 animations et retours haptiques y sont référencés, chacun avec ses tokens d'easing et de durée, une démo live et son intention d'usage.
Le Motion Design System que j'ai construit pour l'équipe.
Focus : Une iconographie 3D pour incarner les avantages
Les icônes plates et monochromes utilisées jusque-là peinaient à distinguer rapidement les grandes familles d'avantages (billetterie, cartes cadeaux, sorties, bien-être) dans un catalogue par nature hétérogène. Le passage à un set d'icônes 3D, partagé avec Edenred Shop pour garder une cohérence entre les plateformes du projet Explorer, répond à plusieurs objectifs : une reconnaissance plus rapide des catégories grâce à des formes et des couleurs propres à chacune, plutôt qu'une même teinte uniforme difficile à distinguer au premier coup d'œil ; un rendu plus chaleureux et engageant, cohérent avec la dimension loisirs et plaisir de l'offre, sans basculer dans l'enfantin ; et une meilleure perception de qualité sur mobile, où le relief et les ombres douces de ces icônes contrastent agréablement avec la sobriété du reste de l'interface.
Un extrait du set d'icônes 3D, partagé entre l'application mobile et Edenred Shop.
Un aperçu des parcours retravaillés.
L'application couvre beaucoup plus d'écrans que ce qu'une seule page peut montrer. En voici un aperçu, à travers quelques parcours représentatifs :
Tableau de bord & avantages
Vue d'ensemble à l'ouverture de l'app : accès rapide aux catégories et mise en avant des avantages CSE disponibles.
Navigation par catégorie
Menu Explorer pour parcourir le catalogue par grande famille : cinéma, billetterie, parcs, sorties, loisirs, sport.
Recherche & sélection
Parcours de recherche et de sélection d'une offre, par exemple un parc d'attractions, avec des filtres adaptés au mobile.
Achat d'une carte cadeau digitale
Choix du montant et validation d'une e-carte cadeau, un parcours court pensé pour être complété en quelques gestes.
Suivi de mes avantages CSE
Vue consolidée des subventions et chèques cadeaux disponibles, avec leurs dates de validité.
Validation de la commande
Tunnel de commande simplifié pour le mobile, avec application des avantages disponibles avant paiement.
Partenaires & offres à proximité
Repérer les commerçants et activités partenaires autour de soi, pour transformer un avantage CSE en usage concret près de chez soi ou du bureau.
Actualités du CSE
Fil d'actualités propre à chaque CSE, pour relayer ses communications directement dans l'app plutôt que par un canal séparé.
Événements du CSE
Consultation des événements organisés par le CSE (sorties, animations) et suivi de sa participation, directement depuis l'app.
Parcours Face ID
Authentification biométrique à l'ouverture de l'app (Face ID sur iOS, équivalent biométrique sur Android), pour retrouver ses avantages CSE en un geste, sans ressaisir un mot de passe à chaque session courte.
Focus : Concilier rapidité et confiance
Le problème : sur mobile, on cherche à réduire chaque parcours au minimum de gestes, mais la validation d'une commande engage un solde CSE réel, avec ses propres règles de plafond et de validité. Réduire trop l'information affichée pour aller vite créait une hésitation à l'étape de paiement : les testeurs Maze relisaient deux fois le récapitulatif avant de valider, par manque de certitude sur le montant réellement prélevé sur leurs avantages. La solution : un bandeau de solde toujours visible en haut du tunnel, complété d'un récapitulatif dépliable juste avant la validation, pour donner accès au détail sans l'imposer par défaut. Le taux d'abandon à cette étape a nettement baissé après cette itération.
Avant / après.
L'ancienne application avait vieilli, autant visuellement que dans sa façon de guider l'utilisateur. La refonte n'a pas cherché à faire du neuf pour du neuf, mais à donner plus de hiérarchie et de chaleur à une interface jusque-là plutôt plate, tout en remontant plus tôt dans chaque parcours ce qui compte vraiment pour un bénéficiaire : ce que ses avantages lui permettent réellement. Un aperçu, à travers quatre écrans, avant la refonte et après.
Accueil.
Catalogue Parcs.
Fiche produit.
Mes avantages.
« Un bon parcours mobile ne se juge pas à ce qu'il permet de faire, mais à ce qu'il permet de faire en une main, en quelques secondes. »
Résultats.
Ce que j'ai appris.
Un parcours mobile réussi commence par accepter qu'il n'a pas les mêmes priorités qu'un parcours desktop : vitesse et geste plutôt qu'exhaustivité. Le motion n'est pas un supplément décoratif : documenté et cohérent, il devient un vrai vecteur de qualité perçue, mesurable jusque dans les avis laissés sur les stores. Et tester régulièrement avec de vrais utilisateurs, plutôt qu'en fin de cycle, change la nature même des décisions de design.
Edenred
Des avantages CSE simples à retrouver et activer, même entre deux tâches.
Edenred Mon CSE, conçue au sein du projet Explorer, en méthode Agile Scrum.