Agentic Commerce · Trust UX · Flagship · Ongoing
Flagship · OngoingThe silent guardian: Mastercard's role in AI-led payments.
15 min read · Published: 2024 · Trust · AI Payments · Prototype · Money20/20
- Role
- Lead · Creative Studio
- Platform
- React · Figma · Claude AI
- Scope
- Agentic Commerce · Trust UX
- Organisation
- Mastercard
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
When AI pays for you, where does trust come from?
In normal payments, trust lives in the interface. You see the checkout, you tap, you see the Mastercard logo, you feel safe. Agentic commerce removes all of that. Three problems landed at once.
Layer 01 · Market problem
AI agents are starting to buy things, and no one has defined what trust looks like.
ChatGPT, Claude, and Gemini are all adding commerce. People will hand purchases to an agent: flights, hotels, groceries, subscriptions. Mastercard still processes the payment, but in the background, unseen. With no checkout screen, how does it stay trusted and relevant?
Layer 02 · Internal problem
Four teams were building the same flows, and nobody had named the duplication.
Product, Tech, Research, and Brand were each building their own agentic flows. Different outputs, duplicated work, no shared language. No one had been asked to fix it. I flagged it and proposed one 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 wanted the logo across the whole flow. My read was the opposite: these flows work because they feel fluid, and constant branding breaks that. The real question was not how visible Mastercard should be, but which moments its presence actually builds trust.
What the multilingual study surfaced
Six flows, three regions (NAM, EU, South America), tested in several languages. We ran Assisted and Autonomous Agent Pay separately. Here are the structural insights I can share.
Insight 01 · Platform reality
The invisibility paradox
“In normal payments, seeing the brand is the trust signal. In agentic flows, seeing it becomes noise.”
→Visual presence, Mastercard's strongest checkout asset, turns into a liability once the agent is meant to act on its own.
Insight 02 · Trust architecture
Trust isn't constant. It spikes at specific moments.
“I don't need to know Mastercard is there the whole time. I need to know it's there when something important happens.”
→So the trust signals follow where anxiety peaks: confirmation, verification, and completion.
Insight 03 · Flow typology
Assisted and Autonomous are two products, not two settings
“When I'm in the decision, I want to confirm. When I've handed it over, I just want to know it went through safely.”
→So I designed them as separate flows, each with its own trust model.
Insight 04 · Sensory channel
When the screen belongs to ChatGPT, sound and touch are the only brand channels
“On someone else's surface, Mastercard has nowhere to put a logo. The brand has to live somewhere else.”
→That moved sound and haptics from a nice-to-have to the main brand strategy for these environments.
The findings are confidential. The study showed clear regional differences in how people respond to trust signals in autonomous payments, and those differences shaped the V2 demos and the multi-sensory work. Happy to talk through specifics in person.
Four calls that shaped the work
Four teams building the same flows
Problem
Product, Tech, Research, and Brand were each building their own agentic flows. Inconsistent outputs, duplicated effort, no shared language. No one had asked me to fix it.
Decision
I offered to own the flows for everyone, so there was one source of truth used by all four teams. I saw the gap and moved on it.
Tradeoff
It stretched my brief on purpose. If the toolkit wasn't good enough, the teams would ignore it and go back to working alone.
Impact
All four teams adopted it. The duplication stopped, and everyone now builds from the same base.
The silent guardian, the decision the whole project turned on
Problem
Brand wanted the logo present at every stage. My view was that constant branding interrupts a flow that only works when it feels fluid.
Decision
Mastercard stays hidden by default and shows up at three moments: payment confirmation, identity verification, and completion. Not a logo, a trust signal. Quiet, but clear when it appears.
Tradeoff
Pushing back on the team that owns the brand meant arguing it as product strategy, not taste. Trust here is earned by showing up at the right moment, not by being everywhere.
Impact
Silent guardian became the company-wide direction for Mastercard in agentic commerce. The SVP of Multi-Sensory, Brand, and the other stakeholders all signed on.
React over Figma, a demo that survives a live meeting
Problem
The CPO needed to demo live from a phone with Google, ChatGPT, and merchant partners. Figma breaks mid-meeting: you can't tailor it per client or handle interruptions.
Decision
I built a working React app with a Claude backend in two weeks. It can be set per pitch (name, region, currency, flight details), has ElevenLabs voice, and runs on a phone.
Tradeoff
This was engineering, outside my role. I took it on because the problem needed it and I could do it.
Impact
The CPO and several SVPs now demo Agent Pay from their phones at Money20/20, Mastercard Connections, and Innovate at McLaren HQ, with no designer in the room.
Real haptics for real research
Problem
The research needed real haptic feedback at the guardian moments. Figma doesn't do haptics. Drop it from scope, or find another way?
Decision
I brought in Haptic Labs to build real haptics for the research. If touch is a trust signal, you have to test touch, not fake it.
Tradeoff
Working with an outside partner added coordination and setup time. Worth it, since the alternative was missing data on a key trust channel.
Impact
The research found that haptic signals land differently by region. That only surfaced because we tested the real thing, and it now feeds the V2 multi-sensory work.
Invisible until the moment it matters. Then unmistakable.
The payment journey runs seven stages. Mastercard is present the whole way, processing and protecting, but visible at only three: the moments where someone needs to know they are safe.
Where anxiety peaks across the journey
Userintent
AIbrowses
AIselects
Paymentconfirm
Mastercardappears
Identityverify
Trustsignal
Transactioncomplete
Protectedby MC
Receipt/ done
Why this is a product call, not a style choice
The useful question was never how prominent the brand should be. It was which moments brand presence actually lowers someone's anxiety. Answering that is what the silent guardian does, and it ends up defining Mastercard's whole role in agentic commerce.
What I built, and why each piece existed
The Agent Pay toolkit (Figma)
Assisted Agent Pay · 3 flows
User-initiated with confirmation
The user sets the intent, the agent acts, and the user confirms at payment. Trust signal at the confirmation gate.
Partial delegation
The agent picks options, the user approves a shortlist before paying. A built-in double check.
Exception handling
What happens when the agent can't finish: escalate, let the user step back in, reassure.
Autonomous Agent Pay · 3 flows
Fully delegated transaction
The user has pre-approved. The agent pays without interrupting, with an ambient signal after.
Recurring autonomous
Subscriptions and repeat buys. The guardian appears at renewal so the user stays informed.
Dispute and reversal
When an autonomous payment goes wrong. A recovery flow with 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
A quiet brand mark at the three guardian moments. It appears, confirms, and recedes, more signal than advertisement.
Own work · Figma + motion team
Sound
Short, distinctive audio cues at confirmation, verification, and completion. Built on Mastercard's existing sonic identity.
Collaboration · Video / motion team
Haptics
Three haptic patterns for the three moments, each a different intensity and rhythm. Figma can't do haptics, so we built them outside it and tested regional variations.
Collaboration · Haptic Labs
Built in 2 weeks.
Used by the CPO
at Money20/20.
Figma prototypes fall apart the moment a meeting goes off-script. The CPO needed something he could hold, hand over, and run mid-conversation. So I built a working React version of Agent Pay, powered by Claude, in two weeks.
React and Claude
Real AI responses, not a click-through script. It follows wherever the conversation goes.
Editable per meeting
Name, region, currency, and flight details can be set for whoever is in the room.
Voice mode
ElevenLabs voice for hands-free demos and voice-first research.
Runs on a phone
No laptop, no Figma login. The CPO opens it and demos live.
This is the white-labelled version. The Mastercard-branded build is the one the CPO uses with Google, ChatGPT, and merchant partners.
Two steps, one fold.
The agent's pick and the payment it asks you to approve, side by side. Fold it and the cover shows only the confirmation: the moment the trust signal has to carry on its own.
Screens from the white-labelled demo above, set on Apple's iPhone Duo reference model as a presentation study. Drag to turn it; play or scrub to fold.
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 went from duplicating flows to building from one shared toolkit. The drift stopped at the source.
Strategic direction adopted
The silent guardian held up against Brand and became the agreed approach for Mastercard's role in agentic commerce.
Executive demo capability
The CPO and several SVPs can demo Agent Pay from their phones, with no designer and no Figma login needed.
Multi-sensory research
Six flows with real haptic and sound variations, tested across three regions. The first Mastercard research of its kind in agentic commerce, and it fed V2.
External conversations
The work has been used in live conversations with Google, ChatGPT, and merchant partners to show where Mastercard fits.
New brand dimension
Multi-sensory design is now a Mastercard brand channel for agentic environments, an infrastructure decision the company has kept.
Where this is heading
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
One adjacent piece worth notingI worked on the early product concept for Mastercard One Credential, now live at mastercard.com, before it moved to its own product team. That work shaped how I think about credential flexibility, and how agentic commerce needs to handle credentials at scale.
“Agentic commerce taught me that trust is less about where you put the logo and more about what happens, and what someone feels, at the moment they need to know they are safe.”
Designing in undefined space
There's no settled pattern for agentic payments yet. No precedent, no competitor to copy. I had to work it out from first principles: what trust needs, what an agent needs, and where those overlap. It's the most interesting problem I've worked on, and the least resolved.
The silent guardian as product philosophy
Pushing back on Brand was a product argument. Everywhere in the flow, Mastercard is noise; at the moments someone is anxious about safety, it's a signal. That decision is where the project stopped being about how things looked and started defining Mastercard's role in a new kind of commerce.
Why the React demo mattered more than the Figma flows
The Figma toolkit was for research. The React demo was for selling. Both mattered, but the CPO using the demo live with Google is what moved this from internal strategy to external positioning. Sometimes the best thing you can build is something that lets people do the work without you in the room.
What I'd do differently
Measure the toolkit from day one. Which flows get used most? Which scenarios come up in every pitch? Which regional variations get adapted? It's used across four teams and three regions, but I can't see exactly how, and what you can't see is hard to improve.
Keep reading
More case studies
01Demo Systems / Mastercard
PartnerBank: A demo system for global RFPs
A per-deal demo went from about 10 days to about 3; the library grew from 8 to 31 components in six months.
02Commerce Infrastructure / Honasa
Honasa: One commerce system for many D2C brands
All three storefronts shipped in the window on one shared system, with no critical post-launch bugs.
030→1 Product / Dror
Dror: Building and pivoting a safety product
The B2B pivot shipped in six weeks and reached ₹1.98Cr lifetime revenue.