Optimising the EMV^® 3DS Payment Experience: UI/UX Design Guidelines

In e-commerce purchases where EMV^® 3-D Secure (EMV 3DS) solutions are used, user interface (UI) and user experience (UX) design refers to the look and feel of the screen that consumers interact with on their device during authentication with their card issuer. In this post, EMVCo EMV 3DS Working Group Chair Elint Chu explains how new EMV 3DS UI/UX Guidelines can help card issuers, merchants and EMV 3DS solution providers take a consistent, familiar and efficient approach to EMV 3DS UI/UX design that instils consumer trust in the authentication process and optimises the checkout experience.

What has EMVCo published?

EMVCo has published EMV 3-D Secure (EMV 3DS) UI/UX Design Guidelines in an interactive online format for implementers of EMV 3DS, including merchants, card issuers and solution providers. The guidelines are publicly available for anyone to access free of charge at: https://3ds-ux-guidelines.emvco.com/.

What is EMV 3-D Secure UI/UX design?

EMV 3DS is a fraud-prevention technology that enables consumer authentication, without adding unnecessary friction to the e-commerce payment process that often leads to abandoned purchases. The EMV 3DS Specification provides a common set of requirements product providers can use to integrate this technology into their solutions to support seamless and secure e-commerce payments.

EMV 3DS user interface (UI) and user experience (UX) design refers to the look and feel of the screen that consumers interact with on their device during authentication with their card issuer. This includes how visual components (e.g., logo, colour, iconography, etc.) are displayed in various device layouts, and how information is presented and communicated to guide them through the steps for verifying that they are the legitimate cardholder.

How does the consumer authentication process work for EMV 3DS transactions?

For e-commerce purchases where EMV 3DS solutions are used, the process works like this:

• Consumer uses a payment card to make an online purchase on a mobile phone, tablet, laptop or other device.
• To confirm that the consumer making the purchase is the actual cardholder, the merchant uses EMV 3DS for authentication. This involves sending data to the issuer so they can approve the transaction, which includes information about the transaction, payment method and device being used.
• The issuer reviews the data, decides the type of authentication needed, performs it and then processes the transaction per the usual authorisation process. For transactions that are higher risk, EMV 3DS provides an additional layer of security by validating that the individual making the purchase is the legitimate cardholder. In these cases, the issuer can choose to prompt the consumer to authenticate themselves using a challenge, such as a one-time-passcode, knowledge-based questions, biometrics or other method.

Why is EMVCo introducing the EMV 3-D Secure (3DS) UI/UX Design Guidelines?

EMVCo developed the EMV 3DS UI/UX Design Guidelines to support implementers of EMV 3DS solutions in deploying a validated, consistent, and optimal approach to authentication that maximises efficiency and minimises opportunities for consumers to leave an e-commerce site before completing a purchase, known as ‘shopping cart abandonment’.

Key to this is providing user interfaces that look and feel consistent and familiar to consumers and instill comfort and trust in the authentication process.

How are the guidelines different than the UX/UI requirements in the EMV^® 3-D Secure – Protocol and Core Functions Specification (EMV 3DS Specification)?

The guidelines are supplemental to the EMV 3-D Secure User Interface Templates, Requirements, and Guidelines chapter in the EMV 3DS Protocol and Core Functions Specification and provide recommendations for optimising the EMV 3DS consumer authentication process to provide a consistent, familiar and seamless user experience.

Has EMVCo published a resource like this before?

This is the first time EMVCo has produced an interactive, online resource that supports a specific aspect of EMV 3DS implementation.

It aligns with EMVCo’s broader efforts to bring confidence to the payments ecosystem by helping technology implementers establish a consistent and familiar payment experience, which include EMVCo testing and certification, and marks management programmes.

How were the EMV 3DS UI/UX Design Guidelines developed?

EMVCo Associates identified that implementers would benefit from additional guidance on UI/UX design for EMV 3DS consumer authentication. Based on this input, EMVCo commissioned a global market research study^[1] to better understand industry needs in this area.

The key finding from this research is that consumers are looking for consistency and familiarity in the challenge process, an authentication step often required for higher risk transactions. Inconsistency and poor quality in design and experience can confuse and frustrate consumers or raise concerns about the trustworthiness of a site, causing them to abandon the purchase.

The guidelines were developed specifically to help implementers address this need, focusing on four principles that impact consumer trust – control, familiarity, efficiency and design quality.

EMVCo Associates and Subscribers had the opportunity to review and provide input on the initial draft of the guidelines before they were finalised for public use.

How do the guidelines address the challenge process specifically?

The challenge process is part of the additional security layer that EMV 3DS provides to help card issuers verify that the individual making a purchase with a payment card is the legitimate cardholder. Consumers are prompted to authenticate themselves using a ‘challenge’, such as a one-time-passcode, knowledge-based questions, biometrics or other methods.

The guidelines include examples of the most commonly used challenge methods and provide specific user interface recommendations for each, including best practices and what to avoid to ensure optimal trust in the authentication process.

This builds on examples provided in the EMV 3DS Specification with more details on how the challenge screen can be designed and set up in a way that provides consistency for the consumer – so they can recognise and expect a similar process, regardless of the merchant they are shopping with.

Are the guidelines mandatory?

No, EMVCo does not mandate the use of these guidelines. However, the guidelines are supplemental to the EMV 3-D Secure User Interface Templates, Requirements, and Guidelines chapter in the EMV 3DS Protocol and Core Functions Specification, which is required for 3DS compliance testing.

Implementers of EMV 3DS solutions can refer to these guidelines as a useful resource when building or upgrading UI/UX screens for EMV 3DS consumer authentication.

Which versions of EMV 3DS do the EMV 3DS UI/UX Guidelines support?

The guidelines support the EMV 3-D Secure User Interface Templates, Requirements, and Guidelines chapter as outlined in EMV 3DS Protocol and Core Functions Specification v2.1.0, v2.2.0 and soon to be released v2.3.0.

What are the benefits of this resource for the payment community?

These guidelines help contribute to consumer confidence in payment technology and the e-commerce payment process, which benefits the entire payment ecosystem.

The EMV 3DS UI/UX Guidelines will help card issuers, merchants and solution providers deploy a consistent and familiar user interface for EMV 3DS consumer authentication that maximises efficiency and minimises shopping cart abandonment.

A consistent and familiar user interface helps consumers move through the e-commerce payment process smoothly and efficiently, and have confidence in the safety of the transaction, without added friction.

What will be the process for updating and maintaining the guidelines moving forward?

The EMVCo EMV 3DS Working Group will monitor the use of this resource and continue updating it as necessary. It will also be regularly reviewed to ensure alignment with any changes to the EMV 3DS Specification.

Industry stakeholders are invited to provide comments or questions on the guidelines via the query form on the EMVCo website.

^[1] Methodology: Qualitative and quantitative usability study conducted in 2019-2020. Featured surveys with 650+ participants in UK, Brazil, China, France, Singapore and the U.S.