WEB & APP DESIGN
Deposit with Amex
Context
The Payment team is exploring ways to enhance the customer experience on the OLG.ca website by expanding the available payment options. In this regard, the team is considering implementing Amex (American Express) as a viable option for customers to deposit funds or make purchases. By doing so, OLG.ca aims to provide its customers with a wider range of payment choices, which will further facilitate secure and hassle-free transactions on the platform.
UX Opportunities
I noticed different design patterns on the deposit page and checkout page after attempting to add Amex to the existing flows. This is not aligned with the goal of providing customers with a unified user experience whenever possible.
After discussing with the product owner, in addition to simply implementing Amex in the current flow, the team concluded that this could be an opportunity for improvement. By addressing the inconsistencies in design patterns, the team can ensure that the user experience is seamless and consistent across all pages.
3DS Process
3DS is a two-factor authentication process that users encounter when making credit card purchases. This process adds an extra layer of security by requiring users to receive a code through their preferred communication method (such as text, call, or email) to verify their identity as a credit card holder. The 3DS process is triggered when making a first-time deposit or purchase and subsequently based on certain security parameters.
Incorporating the 3DS process was another aspect of the design that I needed to consider.
Final Design
The final design includes various new additions and improvements aimed at enhancing user experience. Specifically, the user interface has been updated to feature Amex card-related elements, such as card logos, numbers, and CVV codes, which have been seamlessly integrated into both deposit and purchase flows. Furthermore, a single "Add new card" process has been implemented across desktop and mobile responsive sites, unifying the experience on deposit and purchase pages. Finally, the existing flows have been updated to include the 3DS process, which improves security for users.