Gabriel Nion
Mon CV

Je conçois
des parcours. J’éclaire les décisions.

Product Designer senior · Développeur macOS

Je transforme des besoins complexes en interfaces claires, du parcours jusqu’au produit qui fonctionne.

Voir les projets Défiler pour découvrir
Portrait de Gabriel Nion dans un ruban bleu
Malakoff HumanisParcours de l’espace client

Comprendre les usages.
Clarifier l’espace client.

Données d’usage et recherche utilisateur ont éclairé les parcours de l’espace client web, sur mobile et ordinateur.

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

Analyse des usages et recherche utilisateur web. Écrans adaptés pour la présentation de ce parcours.

Cetelem

Open banking

Préremplir une demande de crédit avec l’accord du client.

Trois décisions structurent le parcours : préremplir avec accord, expliquer les données partagées et préserver le choix de la saisie manuelle.

Atelier et espace Figma reconstitués ; captures AUG DMA / Tink issues de vues distinctes.

Passer l’expérience
CetelemCetelem · BNP Paribas Personal Finance
Voir la suite
CetelemUne marque de BNP Paribas Personal FinanceConnexion bancaire

Parcours sans animation

Du questionnement à la connexion bancaire : trois étapes essentielles de la même démarche.

Une question

Comment gagner du temps sans masquer le partage de données ?

Une question
Un choix

Expliquer le préremplissage, le consentement et la saisie manuelle.

Un choix
Un écran

Vérifier les explications dans des interfaces concrètes.

Un écran
Cetelem

BNP Paribas Personal Finance · Cetelem

D’autres dimensions de la mission.

Autres réalisations chez Cetelem

CetelemFinancement · Outils · Design System
Maquette Cetelem du récapitulatif de financement d’une commande Apple France, avec un iPhone et sa mensualité
Maquette Apple France · 2023–24
FINANCEMENT PARTENAIRE2023–2024

De l’achat au financement.

Paiement en plusieurs fois dans les parcours d’achat Apple France et Orange, adapté à chaque partenaire.

Maquette Cetelem de l’étape de justificatif d’identité dans une demande de crédit
Parcours justificatif d’identité
SÉCURITÉ & FRAUDESOUSCRIPTION

Sécuriser la souscription.

Une étape de vérification d’identité intégrée au parcours de crédit.

Outils pour les conseillers

Comparer les propositions avant de les présenter au client.

Design System

Un composant. Des états cohérents.

Aperçus illustratifs · outils métier et composants

Allianz Trade Pay · recherche & conception

Donner du temps au paiement.
Garder la maîtrise du risque.

Product Designer chez Allianz Trade, sur une solution de paiement B2B. Ce parcours reconstitué met en lumière trois enjeux : comprendre les conditions, guider la décision et rendre la suite lisible.

Lire le parcours

Rendre le parcours lisible.
Avant de dessiner.

Ma mission : Product Designer sur Allianz Trade Pay. Ici, une lecture du parcours, de l’identification au suivi du règlement.

Distinguer les besoins

Une vente B2B.
Deux expériences à relier.

Le marchand suit sa vente. L’acheteur comprend son engagement. La conception doit rendre les étapes utiles à chacun.

Expliciter les conditions

Choisir en comprenant
les conditions.

Dans cette reconstitution, le montant, le délai et la vérification apparaissent au moment du choix du paiement.

Préserver une issue

Une réponse claire.
Jamais une impasse.

Si le paiement est accepté, la commande avance. Sinon, une autre méthode reste disponible.

Accompagner la suite

La commande devient
une facture suivie.

Une lecture continue : montant, échéance, règlement et, si nécessaire, une aide clairement identifiée.

Parcours reconstitué · montants illustratifs · mon rôle : Product Designer.

Explorer les choix de parcours

Du contexte au composant

Une décision prend forme.

Le parcours acheteur documenté éclaire la structure. Les écrans schématiques montrent le raisonnement, sans prétendre mesurer des résultats.

01 · Parcours
Choix du paiementVérificationDécision
Comprendre la séquence

Savoir ce qui se passe et ce qui vient ensuite.

02 · Structure
Mode de paiementPayer à 30 jours
Éligibilité vérifiée ensuite
Continuer →
Hiérarchiser l’information

Modalités, vérification, prochaine action.

03 · Interface
Mode de paiementTrade Pay
Payer à 30 jours

L’éligibilité est vérifiée avant confirmation.

Continuer vers la vérification
Rendre la suite explicite

Un exemple de principe, pas une capture de production.

Lecture de conception

Des choix qu’on peut expliquer.

Relier une contrainte à ce que l’acheteur voit, comprend et peut faire.

Contrainte du parcours

Le parcours sépare le choix du paiement et les contrôles d’éligibilité.

Choix illustré

Réunir les conditions et la prochaine étape au moment du choix, plutôt que les découvrir après validation.

À vérifier en testL’acheteur peut-il expliquer quand il paiera et ce qui sera vérifié ?

AllianzScénario fictif
Commande de démonstration
Commande · 2 217,58 €
Choisir le paiement
Payer à 30 jours

2 217,58 € à régler le 15 nov. 2026 · date illustrative.

Ensuite : vérifier votre entreprise pour confirmer l’éligibilité.
Continuer
Contexte de la mission

Du parcours au paiement B2B

Mon rôle : Product Designer chez Allianz Trade. La lecture présentée distingue l’identification, le choix et les vérifications, le règlement, puis le suivi. Les schémas sont reconstitués pour le portfolio.

Choix illustrés

Décider avec les bonnes informations

Regrouper conditions et prochaines étapes, expliquer la réponse et préserver une alternative. Ces exemples rendent le raisonnement visible ; ils ne constituent pas un résultat de test utilisateur.

Après la commande

Garder la suite lisible

La commande devient une facture avec un montant, une échéance et une action possible. Une question à vérifier : le lecteur sait-il quelle est sa prochaine action ?

Exemples de parcours reconstitués. Aucun résultat chiffré revendiqué.

Après les projets clients, un produit conçu de bout en bout.

Projet indépendant · macOS

AppHalt

Une app en pause.
Pas une app fermée.

Une application travaille en arrière-plan alors que tu n’en as pas besoin ? AppHalt permet de suspendre son activité depuis la barre de menus du Mac, puis de la reprendre.

Un produit que je conçois et développe : du besoin initial à l’interface, puis au code et à l’application disponible.

Découvrir le projet Le site d’AppHalt (nouvel onglet)
Conception produitDéveloppement macOSProduit publié
AppHaltInterface réelle · macOS
Véritable menu AppHalt sur macOS, avec Chrome, Safari, ChatGPT et leur activité CPU au moment de la capture
Directement dans la barre des menus macOS. Repérer les applications ouvertes et en suspendre une sans la fermer. Capture du véritable produit ; les valeurs affichées ne mesurent pas un gain.

Intelligence artificielle · Product Design · Développement

Concevoir avec l’IA.
Décider en designer.

J’intègre l’IA générative à la conception et au développement : explorer des variantes, prototyper des interactions fonctionnelles, examiner les cas limites. Je reste responsable du cadrage, des décisions produit et de la qualité.

Voir aussi mon parcours
Ce que l’IA accélèreExplorer · Comparer · Prototyper
Ce que je garde en mainCadrer · Décider · Vérifier
De l’exploration assistée par IA au prototype testableExemple illustratif · mon portfolio, pas un projet client
01 / 04

Transformer une demande en question utile.

L’IA aide à reformuler le besoin et à faire apparaître les zones floues. Je distingue ce que l’on sait, ce que l’on suppose et ce qu’il faut aller vérifier.

Ne pas confondre une hypothèse bien formulée avec un fait.

Point de départ« Faciliter la prise de contact. »
01Pour qui ?

Un recruteur ou une équipe produit.

02Quel effort ?

Que faut-il vraiment demander ?

03Quel retour ?

Savoir si le message est parti.

Des questions à examiner. Pas des résultats de recherche.

02 / 04

Comparer des choix, pas collectionner des écrans.

Je fais varier le parcours, les textes et les états d’interface. L’intérêt n’est pas d’obtenir plus de propositions : c’est de rendre leurs compromis visibles.

La proposition retenue doit répondre au besoin, pas seulement paraître séduisante.

Option A · tout demanderPréparer un dossier
Nom, prénomEntreprise, fonctionTéléphone, budgetCalendrier, besoin

Plus de contexte. Plus d’effort.

Option B · engager l’échangeParlons de votre projet
Votre e-mailVotre message
Envoyer le message ↗

Moins de champs. Des précisions à recueillir ensuite.

03 / 04

Construire un prototype que l’on peut tester.

Le code assisté permet de matérialiser une interaction, puis d’en éprouver les détails : saisie, erreur, confirmation, comportement mobile. Je reprends et vérifie ce qui est généré.

Un prototype qui fonctionne n’est pas encore un produit validé.

Prototype local · aucun envoi

Parlons de votre projet.

Teste un champ vide, puis complète les deux champs.

04 / 04

Vérifier ce que la démonstration ne prouve pas.

Je m’en sers aussi pour challenger une formulation, repérer un état manquant et préparer des vérifications. Le contexte, les sources et les retours réels restent nécessaires pour décider.

L’IA ne remplace ni les utilisateurs, ni les tests, ni la responsabilité du concepteur.

Ce qu’il reste à éprouverRevue, pas certification
  1. Clavier

    Le focus permet-il d’atteindre et d’activer le bouton ?

  2. Erreur

    Le problème est-il expliqué là où il faut le corriger ?

  3. Mobile

    Le formulaire reste-t-il utilisable avec le clavier ouvert ?

  4. Usage réel

    Les visiteurs savent-ils quoi écrire et ce qui se passe ensuite ?

Une réponse convaincante peut encore cacher un problème.

L’IA propose et aide à matérialiser. Je questionne, j’arbitre et je vérifie.

Des sources, pas des certitudes fabriquées.Je distingue information fournie, hypothèse et contenu généré.

Un cadre de confidentialité.Cette démonstration utilise un cas personnel, sans données client.

Un outil, pas un verdict.L’apparence d’un résultat ne prouve ni sa justesse ni son utilité.

Parcours & expériences

Des contextes variés.
Mes principales expériences.

Services clients, parcours financiers et produit macOS personnel. Je fais le lien entre produit, métier et développement pour transformer des besoins complexes en expériences compréhensibles.

Consulter mon CV (PDF) ↗

Missions sélectionnées

  1. 2026
    BNP Paribas Personal Finance

    Senior Product Designer

  2. 2025
    Allianz Trade

    UX/UI Designer

  3. 2023–2024
    BNP Paribas Personal Finance

    Senior UX/UI Designer

  4. 2020
    Malakoff Humanis

    UX Designer

  5. Depuis 2016
    Indépendant

    UX/UI Designer

Contact · Paris · hybride

Et si on travaillait
ensemble ?

Un service complexe à concevoir ? Parlons de votre produit et de votre équipe.

nion.gabriel@gmail.com
M’écrireLinkedIn(nouvel onglet)