1 of 5

Agentic commerce

Product design and front-end integration for agentic commerce demos. Collaboration with payment networks Visa, Mastercard and CB (Cartes Bancaires), issuing banks ING (Netherlands) and Crédit Agricole. Design-to-code workflow with Figma MCP, spec-driven development with GSD (Get Shit Done), for delegated online purchase POCs.

Skills: Agentic commerceAI engineeringDesign-to-codeFigma MCPGSDClaude CodeFront-end integrationProduct discoveryUX ResearchUI designMotion designPrototypingFigma
Clients: (Visa)(Mastercard)(Cartes Bancaires)(ING NL)(Crédit Agricole)
Roles: Product designerFront-end developer
Teams: Technical squad (devs, PO, PM)Marketing & communications
Period: 2026 - Present
Duration: 8 months

Overview

Agentic commerce means delegating an online purchase to an AI agent, ChatGPT, Gemini, and so on, that already knows your preferences, credentials, and payment methods. The agent finds, selects, and pays on your behalf, in human-present journeys (the user validates at checkout) or human-not-present journeys (delegated purchase within defined limits: mandate, expiry date, per payment scheme and network rules such as Visa, Mastercard, or CB).

At Worldline, I design and prototype these experiences on our payment stack, with payment network schemes and partner issuing banks such as ING and Crédit Agricole, to show that the infrastructure is ready for these new uses.

Problem

Online commerce is shifting from browsing in the browser (clicks, cart, pay) to describing what you need to an agent that refines, asks for details, and delegates the purchase. Before scaling this, concrete questions need answers: who authorises the payment? When is the user in the loop? How do you preserve trust, data security, and control when an agent acts on someone's behalf? Who handles disputes, or an agent hallucination?

Merchants, schemes, and banks need tangible demos, not slides alone, to explore human-present / human-not-present journeys, test authentication (3-D Secure, passkeys), and measure what users will actually accept.

My role

Lead product design across multiple agentic-commerce demos and POCs
Design end-to-end journeys: merchant UI, embedded or external agent chat, authentication, delegation, and purchase confirmation
Produce UI kits and presentation-ready visuals shared with engineering, marketing, and partners, and make design customisation easier
Front-end integration on technical POCs and merchant sites, using Figma MCP to speed up the process
Spec-driven development on POCs, rolling out GSD (Get Shit Done) within the squad (AI-assisted dev best practice) to document, enrich tool context (Claude Code, GitHub Copilot), and track changes (business logic)
Create the chat agent's visual identity and motion design (Illustrator, Lottie Lab) to strengthen trust and empathy
Contribute to agent and back-end development
Run live stand sessions (demos / POCs) and collect user feedback (Sommet CB 2026)
Coordinate and facilitate ideation and creation workshops with schemes (Visa, Mastercard, CB) and Worldline teams (3-D Secure, ACS, GoPay, Marketing, delivery)

Approach

Five demos, one shared payment workflow. The demos below follow the order they were designed. Two delegation models: autonomous agent (Gemini / ChatGPT-like, the whole journey in the agent interface) vs chatbot embedded on the merchant site (the user shops on a merchant site while the agent assists with search on the site).

Worldline goodies shop (first POC)

A merch store (t-shirts, goodies) with an agent embedded on the merchant site. The user signs in, creates a profile, chats like in a classic messenger, then delegates a purchase in human-present or human-not-present mode. Low-fidelity screens to validate the concept before more polished partner demos.

Early low-fidelity agentic-commerce flow on a Worldline merch store, embedded chat, sign-in, and delegated t-shirt purchase (1/7) — Early low-fidelity agentic-commerce flow on a Worldline merch store, embedded chat, sign-in, and delegated t-shirt purchase

Early low-fidelity agentic-commerce flow on a Worldline merch store, embedded chat, sign-in, and delegated t-shirt purchase (2/7) — Early low-fidelity agentic-commerce flow on a Worldline merch store, embedded chat, sign-in, and delegated t-shirt purchase

CB, autonomous agent (Gemini / ChatGPT), for Cartes Bancaires, the shopper talks to an autonomous agent, not a merchant chatbot: discovery, selection, and payment unfold inside the agent interface, with a Gemini-like UI. In human-present mode, the flow can open the banking app so the cardholder validates in a familiar context. We started from a non-branded version before CB-specific polish. Two POCs were built for the Sommet CB 2026 event.

Luggage, human-present control (second POC)

The user keeps more control over choice and validation while the agent helps select luggage and complete checkout.

CB demo, autonomous agent with MCP App UIs inside Gemini; luggage shopping with human-present delegation (1/8) — CB demo, autonomous agent with MCP App UIs inside Gemini; luggage shopping with human-present delegation

CB demo, autonomous agent with MCP App UIs inside Gemini; luggage shopping with human-present delegation (2/8) — CB demo, autonomous agent with MCP App UIs inside Gemini; luggage shopping with human-present delegation

Concert tickets (third POC)

The user asks the autonomous agent for Taylor Swift concert tickets before sales open; the agent monitors the ticketing site and buys as soon as sales open, without the user browsing the merchant themselves. Tested live with CB; presented at Sommet CB 2026 where I ran the Worldline stand and gathered attendee feedback.

CB agentic-commerce demo, autonomous agent (Gemini/ChatGPT) monitoring a concert ticketing site before sales open (1/8) — CB agentic-commerce demo, autonomous agent (Gemini/ChatGPT) monitoring a concert ticketing site before sales open

CB agentic-commerce demo, autonomous agent (Gemini/ChatGPT) monitoring a concert ticketing site before sales open (2/8) — CB agentic-commerce demo, autonomous agent (Gemini/ChatGPT) monitoring a concert ticketing site before sales open

Experience booking site (fourth POC)

"The Unlisted" with an embedded agent (Steward) for Money20/20 Europe. The agentic demo with Steward was built in collaboration with ING NL and payment networks Visa and Mastercard, presented as a live demo at Money20/20 Europe (Amsterdam). Scenario: "I have €200, I'm in Amsterdam with my wife to celebrate our wedding anniversary, find us something special." The agent proposes a premium experience (e.g. a classical concert).

I designed (art direction, UX, UI) and built the merchant website with the embedded agent (chatbot-style, with MCP Apps). First a large Figma pass, then accelerated integration with Figma MCP, and business logic implemented in spec-driven development mode with GSD (Get Shit Done) and Claude Code. Without these tools, we could never have delivered everything on time.

Steward demo for ING NL (Money20/20), Visa payment flow on The Unlisted, our in-house merchant site with embedded agent chat (1/10) — Steward demo for ING NL (Money20/20), Visa payment flow on The Unlisted, our in-house merchant site with embedded agent chat

Steward demo for ING NL (Money20/20), Visa payment flow on The Unlisted, our in-house merchant site with embedded agent chat (2/10) — Steward demo for ING NL (Money20/20), Visa payment flow on The Unlisted, our in-house merchant site with embedded agent chat

Steward demo for ING NL (Money20/20), Mastercard checkout on The Unlisted with Worldline 3-D Secure human-present authentication (1/11) — Steward demo for ING NL (Money20/20), Mastercard checkout on The Unlisted with Worldline 3-D Secure human-present authentication

Steward demo for ING NL (Money20/20), Mastercard checkout on The Unlisted with Worldline 3-D Secure human-present authentication (2/11) — Steward demo for ING NL (Money20/20), Mastercard checkout on The Unlisted with Worldline 3-D Secure human-present authentication

Concert booking (fifth POC)

Weezevent is an existing online ticketing platform. Starting from the Steward / The Unlisted base, I adapted the branding and reused the Steward / The Unlisted architecture: on-site chat, with Steward now as an animated "friendly robot" (see below).

Some graphic design (Illustrator) and motion design (Lottie Lab) to animate the friendly robot and build empathy without distracting from the payment journey. When users open the chat, the agent welcomes them on screen and stays animated during the exchange: it feels like talking to a present interlocutor.

Weezevent agentic-commerce chat, welcome screen with the animated agent greeting the user when the chat opens — Weezevent partner demo, Steward codebase with adapted partner branding, chat UI, and Lottie robot animation

Lottie agent character, friendly robot with subtle bob, arm and eye movement, and a gentle smile — Weezevent partner demo, Steward codebase with adapted partner branding, chat UI, and Lottie robot animation

This demo was created in partnership with Crédit Agricole (Payment Services) and Visa.

CAPS issuing-bank screens, delegated purchase, authentication, and cardholder control in a banking-app context (1/8) — CAPS issuing-bank screens, delegated purchase, authentication, and cardholder control in a banking-app context

CAPS issuing-bank screens, delegated purchase, authentication, and cardholder control in a banking-app context (2/8) — CAPS issuing-bank screens, delegated purchase, authentication, and cardholder control in a banking-app context

Across all demos, I iterated with CB, Visa, Mastercard, CAPS, ING, and partner banks on what a secure, reassuring, and robust agentic checkout should offer.

Design-to-code: what actually works

The bigger picture: one agent, every source of truth. What would make this workflow truly powerful is wiring the coding agent (Claude Code) through MCP to every tool available to build the product: Figma, Storybook, Zeroheight, Jira, Confluence, the GitLab / GitHub repo, so it can pull design, component docs, tickets, and written specs. The more context Claude Code has, the more precise the UI (pixel-perfect), the more relevant the business logic, the faster and more optimised the output (using tools like GSD / BMAD / spec-kit), and eventually you spend more time reviewing what it generates than hand-coding from scratch. You obviously need clean design sources (Figma, UI kit / design system, Zeroheight docs, and so on).

Tip when you have no design system: Maintain a dedicated HTML page in the project where every UI building block is laid out flat and testable in a real browser, buttons, fields, chat bubbles, payment widgets, before integrating them into journeys. That is what I did on the merchant site and agent integration.

Atomic design first With a coding agent like Claude Code, implement small elements first, then progressively more complex patterns, then full screens, rather than everything in one shot with a single prompt. The smaller the elements (less complex, more basic), the more precise and rigorous Claude Code will be when integrating with Figma MCP.

Rich context in Figma. Annotations, variables (design tokens), and component structure matter: Figma MCP pulls not only visuals but also the hierarchy (how elements nest), the architecture (HTML) the code should reflect.

Connect Figma to the code repo (GitHub / GitLab) With Figma Code Connect, each designed atom is a component in the repo, which lets Figma MCP reuse those components.

The end goal: move from a simple UI kit and HTML test page to a design system with Storybook / Zeroheight, to speed up implementation further, stop worrying about accessibility that is already validated, use speech-to-text (with SuperWhisper / Whisperflow), and review so you only have to prompt, without touching Figma or code, and get a production-ready front end.

Outcome

Sommet CB 2026: Strong stand traffic; users are ready to delegate purchases to AI for time savings and relevance, but demand security, transparency, and control, findings integrated into solution design with CB and schemes.
Money20/20 Europe (Steward / ING NL): End-to-end POC presented live on stage, The Unlisted merchant site, Visa and Mastercard flows, UI kit and front end delivered despite a tight deadline.
Reusable practice: Figma MCP, spec-driven development with GSD (Get Shit Done), and tight design-engineering loops proved effective for shipping UI quickly, with a central role on the final visual experience across product, engineering, and communications.
Integration takeaway: atomic design first, rich Figma context, MCP for more context and precision: the designer prompts and reviews while the agent codes.