EMVCo

If you’ve made a transaction online you've been through the payment authentication UX. Here's how we set about improving it.

#UI/UX design
#Prototyping
#Full-stack development
#React mobile app

Summary

EMVCo are the working group of American Express, Discover, JCB, Mastercard, UnionPay and Visa. They manage the standards for worldwide payment authentication.

The goal of the project was to validate and improve the current standard with a global multi-market study.

We were commissioned to produce the designs and prototypes for the study run by Ipsos UX.

We worked closely with the team to figure out, for example, complexity vs realism, impact of copy, impact of design quality and many more variations.

Defining the scope

The payment auth process has many available flows - to cover all use cases (what happens when your signal drops mid payment?). Together, in a remote workshop with the working group and research team we set out to identify and then prioritise which flows we'd be testing and how we'd vary them.

Using a modular approach to produce 140+ screens with 1 core component.

Designed to scale

Once identified, we set up a system to manage the many variants across the flows. With 15 variants across 140 screens, this was an interesting challenge! We used a single, modular component built using design system principles. This ensured we kept screens consistent, organised and allowed us to scale and adapt quickly as feedback poured in.

The prototypes were built to mimic everyday behaviour.

Complex vs simple prototypes

Simple Invision prototypes wouldn't cut it for this project. We needed to emulate real world scenarios. This meant allowing users to authenticate through a separate banking app. We therefore built 2 React apps; an online store and a banking app, as well as a responsive website for desktop users.

A separate banking app was built so participants could go through the whole flow.

How much friction?

One of the variants involved testing how much friction provided the right balance of safety vs efficiency. Different markets have different views on this. We designed and built around 7 different spinners and tested timings for 2,5 and 10 seconds. Here's an example:

Creating faux brands

We created 3 brands: one for the card network, one for the bank (below) and one for the merchant. We then used the colour and branding assets consistently throughout. We couldn't use real brands or logos as that might have impacted participant bias.

Quick access to the prototypes

Researchers from the various markets needed to access a set number of variant prototypes on the fly. We used consistent naming codes and a dashboard to list out all the flow URLs.

15 variations across 6 global markets.

Before rolling out to all 6 markets a pilot study was held in the UK. This gave us the opportunity to identify and action quick wins, and then gain more valuable insight from the remaining markets. Prototypes are only useful if they are adaptable enough to change within a fast-paced, agile environment.

A week long pilot study in the UK with 12 participants before rolling out to 5 other countries

View more work

Locked icon to show this case study requires and NDA to view.Someone using the mobile app we designed to help them save.

Ipsos MORI

An app that helps people fight impulse buying, and save for the things they really care about.
Locked icon to show this case study requires and NDA to view.Screens of the web app we designed.

ContinuityPartner

We helped this ambitious startup redefine the complex, archaic world of business continuity.