Gabriel NionSenior Product Designer · UX/UI & IADes parcours complexes.Une expérience claire.

Gabriel Nion

Je conçois des parcours clairs et des interfaces cohérentes avec les équipes produit, métier et développement. Ma spécialité : l’IA appliquée au design UX/UI.

Financement · Assurance · Protection sociale

Ils ont fait partie de mon parcours

Financement, assurance et protection sociale.

Du parcours aux composants.
Deux projets à découvrir.

Deux missions, des maquettes et des exemples à essayer pour découvrir ma façon de concevoir.

Un regard extérieur

« Il a vraiment cherché à comprendre nos contraintes métiers. »

Emilie L. · Product Owner

Des missions au sein de
grands groupes.

Financement, assurance et protection sociale : des projets conçus avec les équipes produit, métier et développement.

Mission 2026

BNP Paribas Personal Finance

Senior Product Designer

Début de mission · mars 2025

Allianz Trade

UX/UI Designer

Septembre 2023–décembre 2024

BNP Paribas Personal Finance

Senior UX/UI Designer

2020–2022

Malakoff Humanis

UX Designer

Premières missions · 2016

Freelance UX/UI

UX/UI Designer

Le design se construit
avec l’équipe.

L’IA m’aide à structurer la réflexion et à explorer des pistes. Je fais les choix de design avec l’équipe, au service des utilisateurs.

L’IA dans ma méthode.

Écouter.

Avec l’IA, je synthétise les échanges. Avec l’équipe, je clarifie le besoin.

Une question à comprendre
« Puis-je m’arrêter sans perdre ma demande ? »

Le besoin : reprendre là où l’on s’est arrêté.

Dessiner.

Avec l’IA, j’explore des pistes. Je dessine un parcours à tester.

Une piste de parcours
  1. Sauvegarder
  2. Reprendre

La personne retrouve sa progression à son retour.

Améliorer.

Avec l’IA, j’affine les textes. Je vérifie leur clarté dans l’interface.

Un texte plus utile
Avant
Votre dossier est enregistré.
Après
Votre demande est sauvegardée. Vous pourrez la reprendre ici.

Exemple illustratif : reprendre une demande. Sans données client.

Étape 1 sur 3 : Écouter.

Contact

Un produit à faire évoluer ?
Parlons-en.

Un poste, une mission ou une question ? Parlez-moi de votre besoin.

Vous préférez m’écrire par email ?

nion.gabriel@gmail.com

Malakoff Humanis

Espace client · 2020–2022 · UX Designer

Un espace client
qui donne des repères.

Des parcours de remboursement, une application mobile et des composants partagés pour l’espace client des particuliers.

Maquettes de l’espace client Malakoff Humanis : accueil, remboursement, informations personnelles et conseils.
Maquettes du projet, réalisées en équipe et déjà publiées dans mon portfolio.Agrandir les maquettes (nouvel onglet)
Mon rôle
Recherche, ateliers, parcours, prototypes et composants.
Livrables
Interfaces web, expérience mobile dédiée, documentation du design system.
Collaboration
Équipes métier et développement, de la conception à l’intégration.

01 · Parcours

Comprendre sa demande et la prochaine étape.

J’ai travaillé sur les démarches de remboursement, de la recherche aux prototypes, avec les équipes métier. Les ateliers permettent de rapprocher les besoins des particuliers des contraintes du service.

Les maquettes réunissent le suivi des remboursements et les informations utiles. L’objectif : aider la personne à comprendre où elle en est et ce qu’elle peut faire ensuite.

Démonstration de design · scénario fictif

Un état, une prochaine action.

Essayez une formulation qui explique ce qui manque et comment avancer.

Demande de remboursement · exempleEn attente

Votre demande est en cours de traitement.

Le choix proposé : préciser ce qui manque et indiquer la prochaine action.

02 · Mobile

Concevoir pour l’usage mobile.

J’ai participé à la conception d’une application dédiée au mobile. Les parcours et prototypes permettent d’en définir les priorités, avec une interface adaptée à un petit écran.

L’enjeu : accéder rapidement aux informations utiles et être guidé lorsqu’une démarche demande plusieurs étapes.

03 · Design system

Documenter les états des composants.

J’ai contribué aux composants, aux styles et à leur documentation, avec les développeurs. Des exemples d’usage complètent le design system.

Extrait du design system : boutons et champs dans plusieurs états, messages d’erreur et de succès, calendrier.
Extrait de composants publié dans mon portfolio de 2024. Image non interactive.Agrandir les composants (nouvel onglet)

Ces composants prévoient le survol, les états désactivés, les erreurs et les confirmations. Leur documentation donne aux équipes des repères communs pour concevoir et intégrer les interfaces.

À propos des maquettes et de l’exemple.

Les maquettes présentent un travail réalisé en équipe. L’exemple interactif a été créé pour ce portfolio : il illustre un choix de design dans un scénario fictif. Il ne correspond pas à un résultat mesuré chez le client.

Lire l’autre projetBNP Paribas Personal Finance
BNP Paribas Personal Finance

Cetelem · Septembre 2023–décembre 2024 · Senior UX/UI Designer

Financer un achat
sans perdre le fil.

Adapter les parcours Cetelem aux sites d’Apple France et d’Orange, puis accompagner la demande de financement sur ordinateur et mobile.

Maquettes Cetelem pour un achat Apple : résumé de commande sur ordinateur et mobile, détail du financement et confirmation de sortie.
Maquettes publiées en 2024. Les montants et conditions sont historiques et ne constituent pas une offre actuelle.Agrandir les maquettes (nouvel onglet)
Mon rôle
Parcours, wireframes, prototypes et interfaces.
Contextes
Apple France et Orange, au sein de BNP Paribas Personal Finance.
Sujets traités
Étapes de financement, vérification d’identité, états et passage vers mobile.

01 · Parcours

Relier la commande au financement.

Le financement s’inscrit dans un achat déjà commencé. J’ai contribué à organiser ses étapes, puis à les traduire en wireframes, prototypes et interfaces.

Dans les maquettes Apple, le résumé de commande reste visible. Le détail du financement peut être déplié et le retour à la commande est clairement nommé. Ces repères permettent de garder le lien avec l’achat.

Les choix à discuter avec l’équipe

Les informations à garder visibles, le contenu à déplier et la façon de quitter le parcours : le prototype permet de discuter ces choix sur un exemple concret.

02 · Partenaires

Adapter le parcours à chaque partenaire.

J’ai travaillé sur les adaptations aux sites d’Apple France et d’Orange. L’interface doit garder les repères de l’achat tout en rendant les étapes du financement compréhensibles.

Ma contribution porte sur l’enchaînement des étapes, les états d’interface et leur adaptation sur ordinateur et mobile, dans le cadre de ma mission chez BNP Paribas Personal Finance.

03 · Continuité

Changer d’appareil sans perdre le fil.

J’ai aussi travaillé sur la vérification d’identité et le passage vers mobile. Les prototypes permettent de préciser ce qui doit être retrouvé à la reprise : la commande, l’étape en cours et la prochaine action.

Démonstration de design · scénario fictif

Reprendre sans recommencer.

Cette démonstration se déroule ici, sans changer d’appareil.

Sur ordinateur · étape 2 sur 3Votre demande est prête à continuer.

Commande conservée. Prochaine étape : vérifier votre identité.

Le choix proposé : retrouver la commande et l’étape en cours, avec une prochaine action claire.

À propos des maquettes et de la simulation.

Les maquettes, publiées en 2024, présentent un travail réalisé en équipe. Elles ne constituent pas une offre de financement actuelle. La simulation a été créée pour ce portfolio : aucun dossier ni aucune donnée personnelle ne sont transmis.

Lire l’autre projetMalakoff Humanis