Je clarifie les parcours. Du besoin à l’interface.

Senior Product DesignerFinance, assurance et paiement B2B · En design depuis 2016

Je pars des usages pour définir les priorités avec les équipes et rendre la prochaine action claire à l’écran.

Voir mes réalisations Voir mon CV (PDF) (nouvel onglet)
Gabriel Nion, Product Designer

Réalisations

Malakoff Humanis

Combien me reste-t-il à payer ?

J’ai mis le reste à charge en premier et laissé le détail des remboursements à portée de main.

Accueil de l’espace client Malakoff Humanis avec les démarches et les remboursements.
Espace client · Maquette d’origine

À votre charge11 €

Voir le calcul
Frais de santé
35 €
Malakoff Humanis
−22 €
Sécurité sociale
−2 €

Exemple illustratif.

Planche de l’espace client

Voir l’étude de cas
Planche de présentation de l’espace client Malakoff Humanis
Planche de conception de l’espace client

Reconstitution pour le portfolio. Sur 35 € de frais, 22 € sont remboursés par Malakoff Humanis et 2 € par la Sécurité sociale. Il reste 11 € à payer.

Malakoff HumanisVoir l’étude de cas
Cetelem

J’ai conçu un parcours de préremplissage qui explique les données partagées avant la connexion et conserve la saisie manuelle.

Voir l’étude de cas
BNP Paribas Personal Finance

Du cadrage à l’interface.

Préremplir une demande de crédit, tout en laissant la personne décider quelles données partager.

Mon rôle · Cadrage UX, wireframes & interface

Prototype de préremplissage · écrans présentés pour le portfolio

Chargement de l’animation… Les écrans restent disponibles plus bas.

UX · Wireframes & interfaces

Les écrans, sans animation

Prototype de préremplissage.

Voir l’étude de cas

Comprendre les deux voies.

L’écran de choix présente la connexion bancaire et l’alternative de saisie manuelle.

Écran de choix entre connexion bancaire et saisie manuelleAgrandir

Lire ce qui sera partagé.

Le détail du service peut être ouvert depuis l’écran de choix avant de lancer la connexion bancaire.

Information sur la connexion et les données transmisesAgrandir

Choisir sa banque.

La sélection de banque vient après le choix de continuer par la connexion.

Interface de sélection bancaireAgrandir

Deux façons de poursuivre. Le préremplissage passe par la connexion bancaire. La saisie manuelle reste accessible.

Captures et extraits du prototype de 2026. Cadrage et wireframes reconstitués. Démonstration sans connexion réelle.

Préremplissage et parcours partenaires

Le choix avant la connexion. L’écran présente le préremplissage, les données partagées et la saisie manuelle.

Chez Apple France et Orange, un autre enjeu : garder les repères de la commande jusqu’au financement.

Voir les parcours partenaires Allianz Trade

Allianz Trade

Une commande, deux points de vue.

J’ai gardé la même référence du choix du paiement au suivi marchand.

Commande d’exemple AT-2025-041

Choisir le point de vue

Modalités visibles avant confirmation

Choisir son paiement

Prochaine action Continuer vers la vérification de l’entreprise

Paiement non réglé

Suivre la vente

Prochaine action Examiner l’incident

Allianz Trade

Refondre une solution de paiement B2B.

Du choix du paiement au suivi de la vente par le marchand.

Le besoin

Choisir le paiement.
Suivre la commande.

L’acheteur doit comprendre les modalités du paiement. Le marchand doit retrouver le statut et l’action à effectuer.

Architecture & wireframes

Une commande.
Deux parcours.

Un repère commun pour l’acheteur et le marchand.

Interface acheteur

Choisir
en confiance.

Conditions avant validation. Une alternative accessible.

Espace marchand

Voir la suite.
Savoir agir.

Échéancier, remboursement et prochaine action réunis par commande.

Résultat du projet

Une nouvelle version,
mise en production.

Un parcours acheteur et un espace marchand reliés par une commande.

Refonte UX et améliorations techniques menées en parallèle.

Allianz TradeVoir l’étude de cas
Mon rôle

Concevoir les deux parcours

J’ai conçu les parcours acheteur et marchand, les prototypes et l’interface web et mobile, puis accompagné le développement avec les équipes produit et techniques.

Enjeu B2B

Servir l’acheteur et le marchand

L’acheteur lit les modalités avant de payer. Le marchand utilise la référence de la commande pour suivre le paiement et retrouver l’action à effectuer.

Solution livrée

Relier paiement et pilotage

Le parcours couvre le paiement côté acheteur et, côté marchand, le suivi des commandes, des paiements échelonnés, des incidents et des impayés.

La nouvelle version a été mise en production sur web et mobile. Les interfaces et la commande montrées ici sont des exemples reconstitués.

AppHalt
  1. Choisir

    Une app à suspendre.
    Le reste continue.

  2. Suspendre

    En pause.
    La fenêtre reste là.

  3. Reprendre

    Même fenêtre.
    Même point de reprise.

AppHaltVoir l’étude de cas
Mon parcours

Parcours & expériences

De la recherche au produit.

J’ai conçu des parcours de remboursement, de financement et de paiement B2B avec les équipes produit, métier et développement. Je conçois et développe aussi AppHalt, un logiciel pour macOS.

Consulter mon CV (PDF)

Expériences clés

  1. 2026
    BNP Paribas Personal Finance

    Senior Product Designer

    Prototype de préremplissage d’une demande de crédit, avec saisie manuelle ou connexion bancaire.

    Voir les écrans de préremplissage
  2. 2025
    Allianz Trade

    UX/UI Designer

    Paiement B2B : parcours acheteur et suivi marchand.

    Lire l’étude Allianz Trade
  3. 2023–2024
    BNP Paribas Personal Finance

    Senior UX/UI Designer

    Parcours Cetelem et intégrations chez les partenaires.

    Voir les parcours partenaires
  4. 2020–2023
    Malakoff Humanis

    UX Designer

    Refonte de l’espace client, recherche et conception UX.

    Lire l’étude Malakoff Humanis
  5. 2016–2020
    Missions en indépendant

    UX/UI Designer

    Missions pour Colas, Nexter et Adopte un Bureau : refonte de parcours, wireframes, prototypes et interfaces.

Comment j’utilise l’IA

Je travaille avec l’IA pour comparer des pistes et prototyper. Je prends les décisions de design et je teste ce qu’elles changent pour le client.

Tester la démo

Exemple illustratif

Comprendre avant de choisir.

« Quelles données vais-je partager si je connecte ma banque ? »

Je donne à l’IA la question du client et je lui demande deux façons d’organiser le choix.

Piste proposée
Choisir un mode de saisie, puis expliquer les données partagées.
Mon choix
Expliquer les données partagées avant de choisir le mode de saisie.

Le client sait ce qu’il partagerait avant de choisir entre connexion et saisie manuelle.

Essayer le parcours retenu

Choisissez une option, continuez, puis utilisez « Modifier mon choix ».

Préremplir la demande

La connexion permettrait de transmettre revenus, charges et opérations, avec votre accord.

Contact · Paris · Travail hybride

Et si on travaillait
ensemble ?

Vous recrutez ou avez un projet en tête ? Je peux vous présenter d’autres travaux et échanger sur vos enjeux produit.

Aller au formulaire de contactMon profil LinkedIn (nouvel onglet)

M’écrire

Adresse email et message obligatoires.

Quelques mots sur le poste, la mission ou le produit dont vous souhaitez parler.

Ces informations servent uniquement à vous répondre. Confidentialité

En haut