Case study

Optimising worldwide payment flows across multiple markets

Overview

When you buy something online there are multiple flows and authentication steps, for example OTP. As part of a global UX research project, we worked with EMVCo (who govern the payment process for the major card networks) and Ipsos to optimise each of the 16 flows you may face.

Challenge

6 markets were involved, which meant ensuring the design and prototypes could be easily updated.

Every market multiples changes. To simulate real-world reactions of test subjects we needed to find a balance between realism and flexibility. We couldn't use real brands or logos as that could influence reactions.

Goals

Create realistic prototypes that would work in local markets. That were also easier to manage and update as insights from testing were uncovered.

Outcome

We built React prototypes to mimic a real shopping and banking app, along with notifications (for flows that included OTP). The research was a huge success and we are still working with the teams involved.

The start

Working closely with the Ipsos team we mapped out each step in the flow before going near design.

Visualising a project using journey maps and flows can help align teams and reduce assumptions early on in the project.

To get realistic reactions we created faux bank and card network brands that felt like they could be real.

Real brands could impact how different people react to a flow, so we used faux brands to heighten security concerns.

40+ screens. 6 markets. 3 device types. We needed to map the structure of the design system in Figma to make future updates manageable.

Without a strong foundation, one change could take hours. We had to ensure the design system we used could handle the different requirements and allow us to pivot and adapt quickly.

This expanded into a giant Figma file of screen components we could weave together to build each flow. Like Lego.

We built an e-commerce brand, shop and a bank app. The e-commerce brand had to look very average small to medium size shop. Again to heighten people's awareness of trust during the buying process.

Each flow would look something like this, but there's a catch...

Since a Figma prototype wouldn't cut it, we needed to reference each individual screen so our developer could build a react prototype

Therefore each screen was given a code below it. Using React, we could simply stitch together screens to build flows using the codes.

We created a start screen to make accessing each flow super simple for researchers

We also used versioning so that every round of feedback was trackable.

Researchers could easily test things like people's reactions to alternative copy, poor design quality and different layout formats

Would this impact how you felt about the security of a purchase?

We were even able to test the optimum loading indicator speed, and if you're wondering...

Across multiple markets 5 seconds is best for enhancing trust in a process.

Ready to upgrade your design?

Book a discovery call