WEB & APP DESIGN
Apple Pay Integration
Context
As OLG strives to enhance the convenience and accessibility of our customers, we are constantly expanding the range of deposit and purchasing options available on OLG web and apps. In line with this objective, our team has made it a priority to implement Apple Pay as a payment option, catering to the needs of over 75% of OLG's mobile user base. By leveraging Apple Pay, our customers will be able to complete their transactions securely and seamlessly on our web and app channels using their saved credit/debit cards in Apple Wallet, authenticated through biometric identification.
Currently, OLG provides users with two payment options to deposit funds on its website and apps: debit/credit cards and INTERAC e-Transfer. The objective is to enhance the deposit and purchase experience by integrating Apple Pay into the existing flow, allowing users to conveniently fund their digital wallet.
Challenges & Ideation
One issue we're facing is that our payment options are currently organized by tabs. This has been a pain point for our users since they are not able to see all payment options upfront. Especially with the addition of Apple Pay, this tab format is not optimal for displaying all three options. We need to increase the visibility of all payment methods and display them upfront. To address this, I began exploring ideas by quickly mapping out a couple of possible user flow variations and discussing them with the Product Owner. After gaining alignment on an improved version of flow 1, I was ready to implement it and create designs across all channels.
Flow Revisited
While implementing the improved flow 1 with other channels, I noticed that the dropdown menu, which would work fine on the desktop UI, could be problematic in the mobile responsive view. As a result, I mapped out a new flow and realized there was a way to further simplify the flow while still achieving the objective. This led to the birth of flow 3.
Testings
One major challenge I encountered was determining the best approach to display Apple Pay alongside other payment methods. According to Apple's UI guidelines and current app structure, we have to use the native Apple Pay button to initiate the processing overlay. This eliminates the possibility of triggering Apple Pay directly from the list of payment options. After careful consideration, I devised two potential ideas for consideration. The first idea was to display the Apple Pay button as a CTA button at the bottom of the screen. Alternatively, Apple Pay can be displayed in the list with other payment options, and the Apple Pay button will appear when the user taps on it. Both ideas had their pros and cons. In order to gauge the preferred user experience, we recognized the need to engage with our customers and gather their feedback. Consequently, I created two prototypes for user testing, allowing us to gather valuable insights for informed decision-making.
Final Design
On both desktop and mobile responsive versions of the site, Apple Pay is presented alongside other payment options. To simplify the interface and ensure optimal user experience, tabs have been removed from the design for two primary reasons. Firstly, users are able to view their saved debit and credit cards upfront, making it more convenient to choose the desired payment method. Secondly, this design approach allows for greater scalability in the future, making it easier to introduce additional payment options.
The iOS app displays Apple Pay in the list of payment options, and the Apple Pay button appears when the user taps on it. This design aligns with the native form and behavior of iOS, ensuring a consistent and intuitive user experience and minimizing the possibility of triggering Apple Pay by accident. Placing the Apple Pay button at the bottom of the screen also makes it easier for users to tap and trigger the authentication process quickly. The same design was implemented in the purchase flow as well.
