Three parties are involved when you buy online

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).

EMVCo manage the tension between these parties

EMVCo are made up of six major card networks. They work together to create global standards. In our first collaborative workshop we co-created each and every flow variant. Visual journey maps helped bring alignment quickly.

Mapping the screens

The messy part is taking sticky notes into Figjam, but this allowed us to iterate, comment and collaborate across timezones.

Building a robust, multi-lingual design system in Figma

Each screen and each flow, with versioning and components, make iteration during testing easier. We had to work closely with the Figma team to address performance issues.

Testing with 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.

Every flow had to be translated for each market

We combined AI with local translators in each market. This was done with a combination of Google Sheets, components, and a Figma translation plugin.

We simulated new security tech for each payment flow

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

Every notification's UX copy was tested

Front-loading key details is key to efficient purchases and reducing drop-offs.

Data-backed iteration

We used data-backed iteration to maximise clarity and comprehension of new anti-fraud technology and approaches.

We tested different challenge layouts

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.

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.

Key Insight

Balancing friction with efficiency can increase conversion, especially when security is top of mind. 

4 data-backed pillars that impact trust: