Co-creating the UX standard behind every card payment on the planet

When you buy something online, 3 parties are involved…

The issuing bank (eg Barclays)
The card network (eg Visa)
The merchant (eg Amazon)

Each party as different priorities; the merchant wants maximum conversions. The banks want maximum security. The card networks want a bit of both (and you want your coffee machine ASAP).

For each purchase you’ll be shown one of ~12 flows to make sure the purchase is legitimate. This happens in milliseconds, sometimes you won't even notice it.

My role

Working as one of 2 designers, Ipsos' UXR team and EMV® 3DS working:

Designed and iterated 80 payment flow variants across 6 international markets
Rapid design iteration validated through user testing, not assumptions
Created an interactive UX guidelines website to make insights more accessible

Impact

Reduced authentication friction points that cause checkout abandonment
Validated the best design approach for each new and existing flow
Created UX guidelines website enabling consistent implementation

First, we mapped out flows and paths together

In our first collaborative workshop we co-created each and every flow variant, including new features and UX enhancements, fringe and unhappy flows. Visual journey maps helped bring alignment quickly.

The first challenge? Using brands people recognise gives false results

As soon as people saw their bank or card network logo, they felt more at ease. To simulate more realistic payment anxiety, we made up fake brands for each card network, bank and merchant.

The same word in France means something different in Singapore so we combined AI with local translators

Once we had designed and built the prototypes for each flow we combined human and AI to translate every word. This was done with a combination of components and variables. The user testing team in each market then made sure the AI translation had captured the nuance of their language.

We simulated new security tech, like biometrics, for each payment flow

As new tech evolved on both smart phones and browsers we had to pivot and update flows to accommodate the changes.

Front-loading key details in notifications is key to efficient purchases and reduced drop-offs

Every notification's UX copy was tested too.

The payment flows had to work identically whether you're a fintech in Singapore or a high-street bank in Munich.

So we used consistent template-based approach in Figma, ensuring templates were flexible enough for Issuer-level changes.

We tested different challenge layouts to see which ones people found most efficient and trustworthy

A big challenge was constraints. Many layouts were just not possible and any changes had to also work for every language.

From phones to game consoles to desktops, the challenge template had to remain consistent

Research suggested any inconsistency can trigger hesitation and at this scale, costly abandonments.

The smallest UX copy can make or break a conversion, especially during unhappy paths

Imagine something breaking midway through a big purchase, you need to feel at ease and get clear instructions. We tested and iterated all copy to maximise clarity and trust using Figma variables to manage the lexicon.

80 flows in 6 markets is hard to manage

Each researcher needed easy access to each flow, in each international market. So we built a flow variant hub. We also included things like secret hit spots to reset each prototype.

To maximise testing session impact, we often iterated live and used Figjam to capture key findings and changes

We captured every design change in Figjam and ported all insights across to Airtable to share with the wider teams. We used coloured sticky notes to make insights scannable in Figjam.

Making the findings accessible

This amount of research created a lot of data. To make it easy to digest, we built and co-authored the 3DS UX guidelines. What was once trapped in PDFs was now brought to life with easy navigation and interactive prototypes.