Flagship · Ongoing
The silent guardian — Mastercard's role in AI-led payments.
Agentic commerce is payments without a payment screen. I built the UX research toolkit, multi-sensory trust framework, and the live React demo the CPO used at Money20/20 to show Google and ChatGPT what Mastercard's role looks like.
ChatAI Agent
● Active — booking your trip
Book me a flight to Tokyo, business class
Found: ANA NH807, departs 22:15. Business, direct. ¥285,000. Booking now...
⚡ Payment secured
ANA NH807 · Business · Tokyo
¥285,000 · Visa ···· 4821
Transaction verified and protected
Secured by trusted payment network ✦
My Role
Lead · Creative Studiotoolkit + flows + React demo
Partners
Haptic Labs · ElevenLabs+ video team · UX research
Timeline
8+ monthsongoing · V2 in progress
Research
6 flowsNAM · EU · South America
React Demo
2 weeksReact.js + Claude AI + ElevenLabs
Platforms
ChatGPT · ClaudeGemini · merchant surfaces
Problem
When AI pays for you, where does trust come from?
Traditional payments have trust built into the UI — you see the checkout, you tap, you see the Mastercard logo, you feel safe. Agentic commerce removes all of that. Three problems had to be solved simultaneously.
Layer 01 · Market problem
AI agents are beginning to transact. Nobody has defined what trust looks like.
ChatGPT, Claude, Gemini are building commerce capabilities. Users will delegate purchases to AI agents — flights, hotels, groceries, subscriptions. Mastercard processes the payment in the background, invisible and unacknowledged. In a world with no checkout screen, how does Mastercard maintain trust, visibility, and relevance?
Layer 02 · Internal problem
Four teams building the same Figma flows independently. Nobody had named the duplication.
Product, Tech, Research, and Brand were all separately creating Agentic Commerce UX flows. Inconsistent outputs, duplicated effort, no shared language. Nobody had been asked to fix this. I saw it and proposed the solution: one consolidated toolkit every team could build from.
Layer 03 · The design philosophy problem
Brand wanted to be everywhere. The right answer was to be almost nowhere.
Brand's instinct: maximum Mastercard logo visibility throughout the agentic flow. My instinct: agentic commerce is defined by fluidity — constant branding interrupts it. The question wasn't 'how visible should Mastercard be?' It was 'at which exact moments does Mastercard's presence actually build trust?'
Research
What the multilingual study surfaced
Six research flows. Three regions — NAM, EU, South America. Assisted Agent Pay and Autonomous Agent Pay tested separately. Multilingual. The structural insights that shaped the design direction are mine to share.
Insight 01 · Platform reality
The invisibility paradox
“In traditional payments, brand recognition is the trust signal. In agentic flows, brand recognition becomes noise.”
→Mastercard's strongest checkout asset — visual brand presence — becomes a liability when the AI is supposed to be acting fluidly.
Insight 02 · Trust architecture
Trust isn't continuous — it spikes at specific moments
“Users don't need to know Mastercard is there throughout the flow. They need to know it's there when something important happens.”
→The trust system had to match user anxiety architecture — appearing at confirmation, verification, and completion.
Insight 03 · Flow typology
Assisted and Autonomous are different products, not variations
“When I'm involved in the decision, I want to confirm. When I've delegated, I just want to know it happened safely.”
→Designed as separate flows, not variants of one. Different trust architectures for different delegation models.
Insight 04 · Sensory channel
When the screen belongs to ChatGPT, sound and touch are the only brand channels
“In third-party environments, Mastercard has no persistent visual presence. The brand has to live somewhere else.”
→Multi-sensory design moved from nice-to-have to primary brand strategy for agentic environments.
Research findings are confidential. The multilingual study across NAM, EU, and South America surfaced meaningful regional differences in how users respond to trust signals in autonomous payment flows. Those findings directly informed the V2 demo direction and multi-sensory design decisions. Happy to discuss specifics in conversation.
Key Decisions
Four calls that shaped the work
The duplication problem — four teams building the same flows
Problem
Product, Tech, Research, and Brand were all separately creating Agentic Commerce UX flows. Inconsistent outputs, duplicated effort, no shared language. Nobody asked me to fix this.
Decision
Proposed owning the Figma flows for all teams. One source of truth for agentic commerce UX — used by Product, Tech, Research, and Brand. I saw the problem and moved on it.
Tradeoff
Deliberate scope expansion beyond my explicit brief. The risk: if my toolkit wasn't good enough, four teams would ignore it and return to building separately.
Impact
One consolidated toolkit adopted across all four teams. Inconsistency eliminated at source. Every team now builds from the same agentic commerce foundation.
The silent guardian — the most important decision this project made
Problem
Brand wanted Mastercard visible throughout the agentic flow — maximum logo presence at every stage. My instinct: in ambient computing, constant branding interrupts fluid AI-led flows.
Decision
Mastercard invisible by default. Appears only at three moments: payment confirmation, identity verification, transaction completion. Not a logo — a trust signal. Subtle. Unmistakable when it appears.
Tradeoff
Pushing back on Brand — the team that owns the identity — required framing it as product philosophy, not design preference. In ambient computing, trust is earned by appearing at the right moment, not everywhere.
Impact
Silent guardian adopted as the company-wide direction for Mastercard's role in agentic commerce. SVP of Multi-Sensory, Brand team, and all stakeholders aligned. The agreed approach.
React over Figma — building a demo that survives live conversation
Problem
CPO needs to demo live from a phone in client meetings with Google, ChatGPT, and merchant partners. Figma prototypes fall apart mid-meeting — can't customise per client, can't handle interruptions.
Decision
Built a fully interactive React app with Claude AI backend in two weeks. Customisable per pitch — user name, region, currency, flight details. ElevenLabs voice mode. Runs on phone.
Tradeoff
Going outside my job description. Building a production React app with an AI backend in 2 weeks is an engineering task. I did it because the problem required it — and because I could.
Impact
CPO and multiple SVPs demo Agent Pay live from their phones at Money20/20, Mastercard Connections, and Innovate at McLaren HQ. No designer in the room required.
Haptics beyond Figma — real signals for real research
Problem
Multi-sensory research required testing real haptic feedback at the guardian moments. Figma doesn't support haptics. Do you drop haptics from scope or find a way?
Decision
Brought in Haptic Labs to execute haptic feedback for UX research instruments. The tool's limitation is not the project's limitation. If touch is a trust signal in agentic commerce, you need to test touch — not simulate it.
Tradeoff
Additional collaboration overhead with an external partner. More coordination, longer research setup. Worth it because the alternative was incomplete data on a primary trust channel.
Impact
Research found multi-sensory signals behave differently across regions. That finding only exists because we tested real haptics. Regional haptic variations now inform V2 multi-sensory design.
The silent guardian
Invisible until the moment it matters. Then unmistakable.
The agentic payment journey has seven stages. Mastercard is present throughout — processing, routing, protecting. But visible at only three. The moments where a user needs to know they're safe.
Userintent
AIbrowses
AIselects
Paymentconfirm
Mastercardappears
Identityverify
Trustsignal
Transactioncomplete
Protectedby MC
Receipt/ done
Why this is a product decision, not a design preference
In ambient computing, trust is architectural. The question is not “how prominent should the brand be?” It's “at which exact moments does brand presence reduce user anxiety?” Those are different questions with different answers. The silent guardian framework answers the second — and in doing so, defines Mastercard's entire role in agentic commerce.
Solution
Three things built — and why each one existed
The Agent Pay Toolkit — Figma
Assisted Agent Pay — 3 flows
User-initiated with confirmation
User sets intent, AI executes, user confirms at payment. Trust signal at confirmation gate.
Partial delegation
AI handles selection, user approves shortlist before payment. Double-check pattern.
Exception handling
What happens when AI can't complete — escalation, user re-entry, trust reassurance.
Autonomous Agent Pay — 3 flows
Fully delegated transaction
User has pre-authorised. AI transacts without interruption. Ambient trust signal post-completion.
Recurring autonomous
Subscription or repeat purchase. Silent guardian appears at renewal. User stays informed passively.
Dispute and reversal
When autonomous payment is wrong. Trust recovery flow — Mastercard visible throughout.
Used by Product, Tech, Research, and Brand teams · Multilingual research across NAM, EU, South America · Fed directly into V2 direction
Multi-sensory trust framework
When the screen belongs to ChatGPT or Claude, visual branding has no persistent home. Sound and haptics become the primary Mastercard brand channel in agentic environments.
Visual
Subtle brand ingredient at the three guardian moments. Not a logo — a trust mark. Appears, confirms, recedes. Designed to feel like a signal, not an advertisement.
Own work · Figma + motion team
Sound
Audio cues at payment confirmation, verification, and completion. Short, distinctive, reassuring. Builds on Mastercard's existing sonic identity without replicating it.
Collaboration · Video / motion team
Haptics
Three haptic patterns for three guardian moments — distinct intensities and rhythms. Figma doesn't support haptics, so we went outside the tool. Regional variations tested in research.
Collaboration · Haptic Labs
Live Demo
Built in 2 weeks.
Used by the CPO
at Money20/20.
Figma prototypes break in live conversation. The CPO needed something he could hold, hand to someone, demo mid-meeting without it falling apart. I built a fully interactive React simulation of Agent Pay — powered by Claude AI — in two weeks.
Built in React.js + Claude AI
Real AI responses, not scripted. Adapts to any conversation in real time.
Customisable per pitch
User name, region, currency, address, flight details — all editable for each client meeting.
Voice mode via ElevenLabs
Multi-sensory demo capability. Accessibility and voice-first interaction research.
Mobile-first
Runs on phone. CPO demos live. No laptop required, no Figma credentials needed.
White-labelled version — live and interactive.
The Mastercard-branded version is used by the CPO
in live conversations with Google, ChatGPT, and merchant partners.
Impact
What this work actually changed
Strategic direction
Adopted
silent guardian — company-wide
Events used
3
Money20/20 · Connections · McLaren
Research flows
6
NAM · EU · South America
React demo
2 weeks
solo build · live in production
Impact by type
Internal team alignment
Four teams duplicating Figma work → one consolidated toolkit every team builds from. Inconsistency eliminated at source.
Strategic direction adopted
Silent guardian framework pushed back on Brand and won. Now the agreed approach for Mastercard's role in agentic commerce globally.
Executive demo capability
CPO and multiple SVPs can demo Agent Pay live from their phones. No designer in the room required. No Figma credentials needed.
Multi-sensory research
6 research flows with real haptic and sound variations tested across 3 regions. Findings fed V2 direction. First Mastercard research of this type in agentic commerce.
External conversations
Work used in live discussions with Google, ChatGPT, and merchant partners. Mastercard's position in agentic commerce demonstrated, not just described.
New brand dimension
Multi-sensory design established as a Mastercard brand channel in agentic environments — an infrastructure decision, not a campaign.
Roadmap — where this is going
V1
8 months · shipped
Complete- ·6 Figma research flows
- ·Assisted + Autonomous typology
- ·Multi-sensory framework
- ·Haptic Labs collaboration
- ·Multilingual UX research
- ·Silent guardian direction
- ·React + Claude AI demo
- ·ElevenLabs voice mode
V2
In progress
Active- ·Research findings → refined flows
- ·Updated demos from V1 insights
- ·Extended platform coverage
- ·Deeper multi-sensory integration
- ·Regional demo customisation
- ·Broader internal rollout
Future
Vision
Roadmap- ·Real transaction integration
- ·Full platform standardisation
- ·Cross-ecosystem trust standards
- ·Production multi-sensory SDK
- ·Self-serve demo toolkit for sales
Adjacent Work
One adjacent piece worth notingI contributed to the initial product concept for Mastercard One Credential — now a live product at mastercard.com — before it moved to a dedicated product team. That early concept work informed how I think about credential flexibility in payment experiences, and directly shaped my perspective on how agentic commerce needs to handle payment credential management at scale.
Reflection
“Designing for agentic commerce taught me that trust is not a visual problem. It's an architectural one. The question isn't where to put the logo. It's what should happen — and what should be felt — at the exact moment a user needs to know they're safe.”
Designing in undefined space
There's no established UX pattern for agentic payments. No precedent, no best practice, no competitive reference. Everything had to be derived from first principles — what does trust require, what does an AI agent require, and where do those needs intersect? That's the most interesting design problem I've worked on. It's also the most unresolved.
The silent guardian as product philosophy
Pushing back on Brand wasn't a design choice — it was a product argument. If Mastercard is everywhere in the agentic flow, it's noise. If it appears only when a user is anxious about safety, it's signal. The silent guardian decision was the moment this project moved from 'making things look right' to 'defining what Mastercard actually is in a new commercial world.'
Why the React demo mattered more than the Figma flows
The Figma toolkit was research infrastructure. The React demo was a sales instrument. Both were necessary. But the CPO using the React demo in a live conversation with Google is what moved the work from internal strategy to external positioning. Sometimes the most important thing a designer can do is build something that removes themselves from the process entirely.
What I'd do differently
Instrument the toolkit from day one. Which flows get used most? Which scenarios come up in every pitch? Which regional variations get adapted and which get used as-is? The toolkit is generating value across four teams and three regions — but I can't fully see how it's being used. Unmeasured systems are hard to improve.
Keep reading