Crédit Agricole Paiement Mobile

Le Crédit Agricole avait déjà une application de paiement mobile, "Ma Carte by CA", mais elle ne tenait plus la route face aux ambitions du groupe et à ce que les utilisateurs attendaient d'une expérience mobile bancaire en 2019.

L'objectif était de repartir sur quelque chose de nouveau : Crédit Agricole Paiement Mobile, destinée à l'ensemble des porteurs de carte. Avec une contrainte forte dès le départ : les utilisateurs existants ne devaient rien sentir. Pas de friction, pas de rupture, une transition qui se passe bien parce qu'elle a été pensée pour ça.

L'application devait aussi pouvoir fonctionner en marque blanche, pour être déclinée sous d'autres enseignes du groupe. Ça paraît simple dit comme ça, mais ça impliquait de designer avec une logique de composants réutilisables, en s'alignant sur la colorimétrie du groupe et en tenant compte d'une équipe interne CA qui commençait à construire un design system à ce moment-là. C'était vraiment les débuts de cette démarche chez eux, donc on devait avancer en cohérence avec quelque chose qui n'était pas encore terminé.

CACD2 avait organisé le projet en squads, chacune responsable d'un périmètre fonctionnel précis. L'équipe design tournait autour de 4 à 5 personnes selon les semaines, un effectif qui bougeait en fonction de ce qui était en cours, ce qui demandait une vraie coordination pour éviter que les parcours partent dans des directions différentes.

Chaque designer portait son sujet de bout en bout, du cadrage jusqu'aux maquettes finales. Côté CACD2 on était aussi 2 POs et 6 développeurs, avec des équipes supplémentaires du côté Crédit Agricole. Ce double interlocuteur technique rendait la documentation des décisions design vraiment importante. Sans ça, les arbitrages se perdaient vite.

Mon rôle au sein de cette organisation : l'un des 3 designers travaillant sur les parcours de paiement, et ownership complet sur la Cagnotte et le chantier design d'interaction, micro-animations, transitions et micro-interactions.

• Les parcours de paiement : sans contact en magasin, à distance via Paylib, et tout ce qui touche à l'authentification, biométrie, MPin, gestion des erreurs. Des parcours qui semblent courts sur le papier mais qui sont en réalité assez denses en logique d'état. Chaque variation de contexte (bio indisponible, session expirée, réseau instable) nécessitait une réponse design explicite. Rien ne pouvait rester dans le vague.
• La Cagnotte, une fonctionnalité de paiement groupé. Le vrai sujet n'était pas la création de la cagnotte en elle-même, mais sa configuration : quelles valeurs par défaut proposer, comment gérer les cas d'usage qui divergent, comment rendre les états intermédiaires lisibles pour des gens qui n'ont pas le même niveau d'implication dans la dépense.

Sur les deux périmètres, le process était classique : cadrage, user flows, maquettes fonctionnelles basse définition, puis haute fidélité. Sur la Cagnotte, le sujet avait été dépriorisé en cours de projet : je suis allé jusqu'aux wireframes, sans produire la version haute fidélité.

User flow — Parcours paiement Paylib

Maquettes UX-UI

On a fait 5 sessions de tests utilisateurs dans une salle avec miroir sans tain. L'équipe pouvait observer en direct sans perturber la personne en face. C'est un dispositif qu'on sous-estime souvent, mais voir les réactions en temps réel change vraiment la façon dont on lit les résultats ensuite.

Ces tests portaient sur les moments potentiellement problématiques des parcours : comment les gens initiaient un paiement, comment ils vivaient les étapes d'authentification, et ce qu'ils comprenaient des écrans de confirmation ou d'erreur. Ce qui est ressorti assez vite : les utilisateurs n'attendaient pas la fin des écrans de transition avant d'agir. Ils tapaient, re-tapaient, perdaient confiance. Sur une app bancaire, ce genre de comportement crée de l'anxiété et des doubles actions non voulues. C'est directement ce qui a justifié le travail sur les animations, pas comme un plus esthétique, mais comme une réponse à quelque chose d'observé.

On a complété avec Testapic pour des tests à distance, utiles pour toucher des profils qu'on n'aurait pas pu avoir en présentiel.

Les micro-animations n'étaient pas dans le scope initial. Je les ai proposées, j'ai construit l'argumentaire pour les intégrer, et j'ai mis en place un pipeline de production qui rendait l'investissement défendable auprès de l'équipe et du client.

Ces animations couvraient les moments à plus forte charge cognitive du parcours : états de chargement, confirmation de transaction, retours d'erreur. Sur une application bancaire, ces instants concentrent l'attention et l'anxiété de l'utilisateur. Une animation calibrée au bon moment n'est pas un ornement, c'est un signal de contrôle. Elle confirme que le système a bien reçu l'action et réduit l'incertitude dans un contexte où la confiance est le vrai enjeu.

Le pipeline technique : conception sous After Effects, export JSON via LottieFiles, intégration directe côté développement. Ce workflow évitait toute ré-implémentation manuelle et ramenait les allers-retours entre design et développement à presque zéro. Un argument décisif pour faire accepter ce chantier dans un planning contraint.

Beaucoup d'équipes écartent ce type de travail par manque de temps ou de priorité. Ce que j'ai appris sur ce projet : savoir identifier les contextes où cet investissement produit un retour réel sur la qualité perçue, et construire le cas pour le défendre.

Vidéos de validation — prototypes interactifs

À l'époque, produire de courtes vidéos de simulation permettait de valider rapidement des intentions d'interaction ou des hypothèses de comportement, sans avoir à passer par un prototype fonctionnel complet. Un format léger, efficace pour aligner l'équipe et convaincre le client. Aujourd'hui, l'IA a largement accéléré et transformé cette pratique.

Animation — Interface supprimée