Background
A project managed by Creative Dock in 2021 for Raiffeisen Bank, a leading financial institution in Central and Eastern Europe. I joined the project as a lead UX/UI designer.
The goal was to design and develop a payment gateway for merchants, encompassing the online payment page, the merchant portal, the admin portal, KYC flow, transactions, and customer management.
My Responsibilities
To collaborate with the client's team in identifying research opportunities, insights, and needs, with the aim of establishing design consistency.
To design the platform based on research insights and collaborate with one more UI designer to establish the product design system.
To work alongside engineers and product owners in maintaining delivery schedules, collaborating on story mapping, feature refinement, design specifications, and prioritization.
The Research
I have identified the consumer-facing payment gateway as our top priority. If consumers do not trust the platform or find its behavior confusing, we risk losing the transaction and the trust of both the consumer and the merchant. The flow needs to be seamless to instill trust.
In-depth research involving analysis of industry standards, competitor assessment, and user journey mapping was essential. This research formed the foundation for making informed decisions during the design and development process.
I want to emphasize the various analyses of the payment flow, specifically focusing on the scenarios I've designed for OTP (one-time code/passphrase) to highlight the necessity of flexibility in the flow.
Scenario 1: Frictionless Flow
In a frictionless flow, the issuer may not require additional authentication for the transaction, leading to a smooth order confirmation for the cardholder. If the issuer receives all necessary authentication data in the background from the 3DS Server, the chances of a successful 3D Secure authentication increase. This results in a frictionless experience for the cardholder and a liability shift for you.
Scenario 2: Challenge validation using an OTP (one-time code/passphrase)
In this flow, the challenge screen notification requests the cardholder to select a registered email ID or a mobile number to receive a one-time code/passphrase (OTP). After the cardholder selects an option, the cardholder will receive the code on the selected option. The cardholder will enter the code when prompted. If the cardholder enters the correct code, the purchase order is confirmed. However, if the cardholder enters an incorrect code, the issuer may decide to challenge the cardholder using any other authentication method or deny the transaction.
Scenario 3: Challenge validation using a knowledge-based question
The issuer decides to challenge the cardholder and presents a challenge screen where the cardholder can select one or more correct options. In this example, the challenge screen notification requests the cardholder to select the cities where the cardholder has lived in the past. After the cardholder selects the options, the issuer validates this data with the data stored in the cardholder’s records. If the validation is confirmed, the issuer authenticates the transaction and the purchase order is confirmed. However, if the validation is not positive, the issuer may decide to challenge the cardholder using any other authentication method or deny the transaction.
Scenario 4: Challenge validation using an OOB (Out of band authentication) authentication using single or multiple devices
Issuer decides to challenge the cardholder using an OOB method that pushes the challenge screen to the device. In this example, the challenge screen asks the cardholder to open the bank app to authorize the payment. The bank app may or may not be on the same device that the cardholder is using to make a purchase. The cardholder gets an alert on the bank app to authorize the payment. The cardholder reviews the transaction details required to authorize the payment and confirms the payment. Once the purchase gets confirmed, the merchant’s website /app (which was still open in the background) is displayed to the cardholder.
Final Design
Summary
In summary, the key learnings emphasize the significance of user trust, and the need for a variety of authentication scenarios to provide a seamless, secure, and trustworthy payment experience. These insights are crucial in the design and development of payment gateways to meet user expectations and ensure successful transactions.
