Banque Nationale

Modernisation de l'expérience de personnalisation de carte bancaire sur mobile

DÉFI

L’Atelier Numérique de la Banque Nationale (BNC) propose un concept innovant permettant aux clients de concevoir une carte de crédit sur-mesure. Le défi majeur consistait à transposer cette expérience visuelle complexe sur un format mobile vertical sans perdre l’ADN de la marque, tout en simplifiant le parcours de saisie de données et en maximisant l’engagement via la gamification.

SOLUTION

Une refonte complète Mobile-First structurée en trois grandes étapes clés :

  • L’Introduction Immersive : Condensation du hub 3D dans un viewport mobile optimisé, maintenant la présence de la borne interactive et de l’appel à l’action principal.
  • Le Formulaire Contextuel : Une interface de saisie épurée éliminant la surcharge cognitive, permettant de configurer son identité, de prévisualiser son design en temps réel et de choisir ses options de livraison en quelques gestes.
  • La Célébration & Gamification : Un écran de confirmation à fort impact psychologique (Effet de dotation / Endowment Effect). L’utilisateur reçoit une gratification immédiate (Points XP, badges de niveau) dès la finalisation, renforçant la rétention et le sentiment d’accomplissement.
DURÉE

3 mois (Sprint Agile)

OUTILS

Photoshop, Animate, After effect (fake 3D)

MON RÔLE

UI/UX Designer

Le Minimalisme au service de l'Interaction

L'approche visuelle adopte un style épuré et lumineux, fortement inspiré du design scandinave. En utilisant un fond gris neutre très doux et des structures d'onglets simples, l'interface s'efface pour mettre en valeur les éléments interactifs rouge vif de la marque et les textures réalistes des cartes en 3D.

Architecture Mobile-First : Intégration d'une barre de navigation inférieure pour une accessibilité maximale au pouce (Accueil, Services, Cartes, Messages).

Utilisation systématique d'unités relatives (rem) pour s'assurer que le texte s'adapte parfaitement aux préférences de lecture des utilisateurs, combinée à des contrastes élevés sur les boutons d'action (CTA « Valider et payer »).

Animations de transition fluides lors du défilement des designs de cartes sur le carrousel rotatif pour reproduire l'effet tridimensionnel physique.

💡 LEÇONS APPRISES

Transposer un univers 3D horizontal sur un écran vertical demande des compromis rigoureux. Plutôt que de miniaturiser les éléments (ce qui aurait rendu les textes illisibles), j’ai choisi de hiérarchiser l’espace de manière séquentielle. La gamification en fin de parcours a prouvé que transformer une tâche administrative en une expérience gratifiante réduit drastiquement le taux d’abandon du tunnel.