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.

Une sélection de réalisations

Trois missions clients et AppHalt, un produit macOS que je conçois et développe.

J’ai conçu le parcours de remboursement, du dépôt des justificatifs à la lecture du montant restant à payer. Cet exemple animé montre comment présenter ce montant et sa répartition.

Explorer mes réalisations

Planche de l’espace client

Voir l’étude de cas

Planche de présentation de l’espace client Malakoff Humanis — Planche de présentation du projet

Recherche utilisateur et conception UX. Écrans adaptés pour le portfolio.

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. Prototype non déployé.

Explorer mes réalisations

BNP Paribas Personal Finance

De l’atelier à 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 conception, non déployé · é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 non déployé.

Voir l’étude de cas

Poser les questions

Comment réduire la saisie tout en expliquant clairement ce que le client autorise ?

Interface de préremplissage avec consentement

Agrandir

Structurer les choix

Préremplir avec l’accord du client, expliquer les données partagées et conserver la saisie manuelle.

Information sur la connexion et les données transmises

Agrandir

Concevoir les écrans

Du wireframe à l’interface, le choix entre connexion bancaire et saisie manuelle reste visible.

Agrandir

Un prototype pour simplifier la saisie. Le préremplissage vise à réduire la saisie. L’interface explique le partage des données et propose la saisie manuelle. Ce prototype n’a pas été déployé.

Captures produit authentiques. Cadrage et wireframes reconstitués pour expliquer les choix de conception. Démonstration sans connexion réelle.

Préremplissage et parcours partenaires

Choix éclairé. Bénéfice, données partagées et saisie manuelle expliqués avant connexion.

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

Voir les parcours partenaires Allianz Trade

J’ai relié le paiement acheteur et le suivi marchand autour d’un même repère : la commande, son statut et la prochaine action.

Explorer mes réalisations

Refondre une solution de paiement B2B.

De l’audit au parcours acheteur et à l’espace de gestion marchand.

Audit et tests utilisateurs

Repartir
de l’existant.

Audit et tests : remboursements et réglages trop complexes.

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

De la recherche à la livraison

J’ai pris en charge l’ensemble du design : audit de l’existant, tests utilisateurs, architecture, parcours acheteur, espace de gestion marchand, UI web/mobile, prototypage et accompagnement du développement. Les wireframes et interfaces sont reconstitués pour expliquer les choix de conception.

Enjeu B2B

Servir l’acheteur et le marchand

Les clients avaient besoin d’un paiement sûr, mais aussi d’une gestion plus simple des commandes, remboursements, automatisations et litiges.

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. Les interfaces sont reconstituées ici pour présenter les choix de conception.

AppHalt

AppHalt Produit personnel · macOS

J’ai conçu et développé AppHalt pour mettre les apps inactives en pause sans fermer leurs fenêtres, puis les reprendre quand on en a besoin.

Découvrir AppHalt

Choisir
Une app à suspendre.
Le reste continue.
Suspendre
En pause.
La fenêtre reste là.
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

2026
BNP Paribas Personal Finance
Senior Product Designer
Prototype non déployé de préremplissage d’une demande de crédit, avec saisie manuelle ou connexion bancaire.
Voir le prototype
2025
Allianz Trade
UX/UI Designer
Paiement B2B : parcours acheteur et suivi marchand.
Lire l’étude Allianz Trade
2023–2024
BNP Paribas Personal Finance
Senior UX/UI Designer
Parcours Cetelem et intégrations chez les partenaires.
Voir les parcours partenaires
2020–2023
Malakoff Humanis
UX Designer
Refonte de l’espace client, recherche et conception UX.
Lire l’étude Malakoff Humanis
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

J’utilise l’IA pour organiser des notes, comparer des parcours et coder des prototypes. Voici ce que je lui demande et ce que je vérifie.

Comprendre

Poser la bonne question.

Exemple illustratif. Je demande à l’IA de regrouper ces questions, puis je relis les notes pour vérifier le regroupement.

Quelles données partager ?Puis-je saisir moi-même ?

Je garde la saisie manuelle parmi les options à prototyper.

Explorer

Comparer avant de choisir.

Je demande à l’IA deux séquences pour comparer à quel moment les données partagées sont expliquées.

Choisir d’abord

ChoisirExpliquerConfirmer

Expliquer d’abord

ExpliquerChoisirConfirmer

Je place l’explication avant le choix du mode de saisie.

Prototyper

Vérifier le comportement.

L’IA m’aide à coder la démo. Je vérifie que les options sont décochées au départ et que la sélection est conservée quand on revient modifier son choix.

Démonstration du portfolio

Préremplir la demande

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

1 / 3

Contact · Paris · Travail hybride

Et si on travaillait
ensemble ?

Vous recrutez ou avez un projet en tête ? Indiquez le contexte et l’enjeu produit. Je peux vous présenter d’autres travaux lors d’un échange.

Mon profil LinkedIn

nion.gabriel@gmail.com

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

Une sélection de réalisations

Planche de l’espace client