If you’ve made a transaction online you've been through the payment authentication UX. Here's how we set about improving it.
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.
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.
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.
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.