November 20, 2017

Re-Imagining The Payment Verification Experience

When crafting online experiences, we spend a lot of time thinking about the user journey and their experience along the way.

Whether making, adding to cart seamless, or checking out with simplified data forms, the user shouldn’t have to think about what they are being asked to do. However, there can be a stumbling block in eCommerce that can throw the user experience (around payments) off track — the ‘Verified by Visa’ requirement at the end of a transaction.

The verification requirement was introduced to help increase security, and better protect consumers when completing their transaction online. However, since the service was launched, Visa haven’t invested in the user experience and very little has changed. For example, when you are asked to verify your transaction on mobile, there is no mobile-friendly version or responsive form. This makes it difficult & annoying to type the 3rd, 6th and 8th characters of your password into the tiny boxes, often resulting in tapping the wrong box or accidentally hitting ‘Forgot Password’.

Looking through consumer tweets about this, there is a clear problem that needs addressing:

We spent the afternoon re-imaging (from a mobile starting point) how some simple user interface updates could impact the experience and discourage users from dropping off when greeted by the Verified by Visa verification wall.

The current sign up and returning user version:

Payment Experiences

Form explorations:

Payment Experiences

From previous research, we already understood that the current set up sometimes leads to users thinking that the pop up or form on a single page/screen looked suspicious. Our re-imagined approach would keep this in mind, as we believe that good design can improve the trust for the customer using the service.

Payment Experiences

We felt that two approaches could be taken in order to display the verification form. One; dedicated space within the checkout / payment pages so that users aren’t taken off to blank page. Two; we explored ways to display the form as an on-page pop up. Finally, we settled on showing how the form could be displayed in browser when used on a mobile device, once the checkout process was completed by the user.

This new approach saw us change the hierarchy of information, putting the most important actions and information at the top, with a much larger tapping surface. Combined with clear typography and a responsive, mobile first approach, these features allow for a much more pleasurable experience — now everyone just needs to remember their password!

Next Post

National Express Launch BETA Phase

We'd love to build something amazing together!

Start a Project
Start a Project