Agentic commerce

Aperçu

Le commerce agentique, c'est déléguer un achat en ligne à un agent IA, ChatGPT, Gemini, etc., qui connaît déjà vos préférences, identifiants et moyens de paiement. L'agent trouve, choisit et règle à votre place, dans des parcours human-present (l'utilisateur valide au moment du paiement) ou human-not-present (achat délégué dans des limites définies (mandat, date d'expiration, selon les règles des schema/réseaux de paiement comme Visa, Mastercard ou CB).

Chez Worldline, je conçois et prototype ces expériences sur notre stack de paiement, avec les établissements financiers de réseaux de paiement et des établissements bancaires (émmeteurs de moyen de paiement) partenaires comme ING et Crédit Agricole, pour montrer que l'infrastructure est prête pour ces nouveaux usages.

Problème

Les usages du commerce en ligne évolue de la navigation dans le browser (cliques, panier, payer) à la description de mon besoin à un agent qui affine, demande des précisions et la délagation de l'achat à l'agent. Avant de généraliser, il faut répondre à des questions concrètes : qui autorise le paiement ? Quand l'utilisateur est-il dans la boucle ? Comment préserver confiance, sécurité des données et contrôle quand un agent agit pour quelqu'un ? Qui gère en cas de litige, d'une hallucination de l'agent ?

Marchands, réseaux et banques ont besoin de démos tangibles, pas seulement de slides, pour explorer les parcours human-present / human-not-present, tester l'authentification (3-D Secure, passkeys) et mesurer ce que les utilisateurs acceptent vraiment.

Mon rôle

• Piloter le Product design sur plusieurs démos et POCs d'agentic commerce
• Concevoir les parcours de bout en bout : UI du marchand, chat agent intégré ou externe, authentification, délégation et confirmationd de l'achat
• Produire des UI kits et visuels prêts à présenter, partagés avec la tech, le marketing et les partenaires, et faciliter la personnalisation du design
• Intégration front-end sur les POCs techniques, sites marchands, utilisation de Figma MCP pour accélérer le processus
• Spec-driven development sur les POCs, mise en place de GSD (Get Shit Done) au sein de l'équipe (bonne pratique de dev assisté par IA) pour documenter, enrichir le contexte outils (Claude code, Github Copilot), et tracer les changements (logique métier)
• Créer l'identité visuelle et le motion design de l'agent de chat (Illustrator, Lottie Lab) pour renforcer confiance et empathie
• Contribuer au développement de l'agent et du back-end
• Animer le stand en salon (démos/POCs) et recueillir le feedback utilisateur (Sommet CB 2026)
• Coordonner et animer des ateliers d'idéation, de création avec les réseaux (Visa, Mastercard, CB) et les équipes Worldline (3-D Secure, ACS, GoPay, Marketing, delivery)

Approche

Cinq démos, un workflow de paiement commun. Les démos ci-dessous suivent l'ordre de conception. Deux modèles de délégation : agent autonome (Gemini/ChatGPT like, tout le parcours dans l'interface de l'agent) vs chatbot intégré au site marchand (l'utilisateur achète sur un site marchand, l'agent l'accompagne dans sa recherche sur le site).

Boutique goodies Worldline (premier POC)

Une boutique merch (t-shirts, goodies) avec un agent intégré sur le site marchand. L'utilisateur s'authentifie, crée son profil, discute comme dans un chat classique, puis délègue l'achat en human-present ou human-not-present. Écrans low-fidelity pour valider le concept avant les démos partenaires plus abouties.

CB, agent autonome (Gemini / ChatGPT), Pour cartes bancaires, l'acheteur dialogue avec un agent autonome, pas un chatbot marchand : découverte, sélection et paiement se déroulent dans l'interface de l'agent, avec une UI Gemini-like. En human-present, le flux peut ouvrir l'application bancaire pour que le porteur valide dans un contexte familier. Nous sommes partis d'une version non brandée avant la finition spécifique au schéma CB. Création de deux POC pour le salon "Sommet CB 2026"

Valises, contrôle human-present (deuxième POC)

L'utilisateur garde plus de contrôle sur le choix et la validation pendant que l'agent l'aide à sélectionner des valises et finaliser le checkout.

Billets de concert (troisième POC)

L'utilisateur demande à l'agent autonome des places pour un concert Taylor Swift avant l'ouverture des ventes ; l'agent surveille le site de billetterie et commande dès l'ouverture, sans que l'utilisateur navigue lui-même sur le marchand. Testé en direct avec CB ; présenté au Sommet CB 2026 où j'ai animé le stand Worldline et collecté le retour des participants.

Site de réservation d'expériences (4ème POC)

"The Unlisted" avec un agent intégré (Steward) pour le salon Money20/20 Europe. La démo agentique avec l'agent Steward a été construite en collaboration avec ING NL et les réseaux de paiement Visa et Mastercard, présentée en démo live au salon Money20/20 Europe (Amsterdam). Scénario : « J'ai 200 €, je suis à Amsterdam avec ma femme pour fêter nos noces, trouve-nous quelque chose de spécial. » L'agent propose une expérience premium (ex. concert de musique classique).

J'ai désigné (DA, UX, UI) et développé le site web marchand avec l'agent intégré (type chat bot, avec MCP Apps). D'abord un gros travail sur Figma, puis intégration accélérée avec Figma MCP, et implémentation de la logique métier en mode spec-driven-development avec GSD (Get Shit Done) et Claude code. Sans ces outils, on aurait jamais pu tout livrer dans les temps.

Réservation de concerts (5ème POC)

Weezevent est une billetterie en ligne existante. À partir de la base Steward / The Unlisted, j'ai adapaté le branding, réutilisé l'architecture du Steward/The Unlisted : chat sur site, le Steward est maintenant un "friendly robot" animé (voir ci-dessous).

Un peu de graphiqsme (Illustrator) et de motion design (Lottie Lab) pour animer le friendly robot pour créer de l'empathie, sans distraire du parcours de paiement. À l'ouverture du chat, l'agent accueille l'utilisateur à l'écran et reste animé pendant les échanges : on a l'impression de parler à un interlocuteire présent.

Cette démo à été créer en partenariat avec Crédit Agricole (Payment services) et Visa.

Sur l'ensemble des démos, j'ai itéré avec CB, Visa, Mastercard, CAPS, ING et les banques partenaires sur ce qu'un checkout agentique sécurisé, rassurant et robuste devait proposer.

Design-to-code : ce qui fonctionne vraiment

La vision d'ensemble : un agent, toutes les sources de vérité. Ce qui rendrait ce workflow vraiment puissant, c'est de brancher l'agent de code (Claude code) de code via MCP sur tous les outils disponibles pour construire le produit : Figma, Storybook, Zeroheight, Jira, Confluence, le répo GitLab/GitHub, pour qu'il récupère design, doc composants, tickets et specs écrites. Plus Claude code a de contexte, plus il est précis au niveau l'UI (pixel-perfect), plus il est pertinant sur la logique métier, plus il est rapide et optimisé (en utilisant des outils comme GSD/BMAD/spec-kit) et finalement on passe plus de temps à relire/vérifier ce qu'il génère qu'à coder à la main from scratch. Il faut bien évidement des sources de design propres (figma, ui kit / design system, doc Zeroheight etc...).

Astuce quand on a pas de design system : Maintenir une page HTML dédiée dans le projet où chaque brique UI est posée à plat et testable dans un vrai navigateur, boutons, champs, bulles de chat, widgets de paiement, avant de les intégrer dans les parcours. C'est ce que j'ai fait sur l'intégration du site marchand et de l'agent/

Atomic design first Avec un agent de code type Claude code, on implémente d'abord des petits éléments, puis des patterns de plus en plus complexes, puis les écrans entiers plutôt que d'un seul coup, en un seul prompt. Plus les éléments sont "petits" (moins complexe, basiques), plus Claude code va être précis/rigoureux en terme d'intégration avec Figma MCP.

Un Figma riche en contexte. Annotations, variables (design tokens) et structure des composants comptent : Figma MCP ne récupère pas que le visuel mais aussi l'arborescence (l'imbrication des éléments), l'architecture (html) du design que le code doit refléter.

Connecter Figma au répo de code (GitHub/Gitlab) Avec Figma "Code Connect" chaque atome désigné est un composant dans le repo, ce qui permet à Figma MCP de réutiliser ces composants.

L'objectif à terme : passer d'un simple UI Kit et une page HTML de test vers un design system avec Storybook / Zeroheight, pour accélérer encore plus l'implémentation, ne plus se soucier de l'accessibilité déjà validée, faire du Speech to Text (avec SuperWhisper / Whisperflow) et relire pour n'avoir qu'a prompter, sans toucher à Figma, ni le code et avoir un frontend prêt pour la prod.

Résultat

• Sommet CB 2026 : Forte affluence sur le stand ; les utilisateurs sont prêts à déléguer leurs achats à l'IA pour le gain de temps et la pertinence, mais exigent sécurité, transparence et contrôle, enseignements intégrés dans la conception des solutions avec CB et les réseaux.
• Money20/20 Europe (Steward / ING NL) : POC bout en bout présenté en live sur scène, site marchand The Unlisted, flux Visa et Mastercard, UI kit et front-end tenus malgré une deadline courte.
• Pratiques réutilisables : Figma MCP, spec-driven development avec GSD (Get Shit Done) et boucles design-tech serrées se sont révélés efficaces pour livrer rapidement l'UI, avec un rôle central sur le visuel final entre produit, technique et communication.
• Enseignement intégration : atomic design first, Figma riche, MCP pour plus de contexte et de précision : le designer prompte et relit pendant que l'agent code.