Harvey Nichols - Apple Pay integration

Know your customer

Understanding customer behaviour is fundamental before implementing new features. To establish a baseline, it's essential to analyse data to determine whether a feature will be beneficial to our customers. For instance, Apple Pay, which integrates seamlessly with iOS and OSX platforms via Safari browser, primarily targets Apple users across mobile, tablet, and desktop devices.

Upon reviewing data from Google Analytics 360, we observed a significant preference among our users for Apple devices and Safari browser. This insight suggests a substantial user base potentially interested in Apple Pay. This alignment between our user demographics and the feature's compatibility underscores the relevance of considering Apple Pay integration to enhance user experience and convenience.

Moreover, the data highlights a strategic opportunity to cater directly to our most engaged segment, reinforcing the importance of adapting our platform to meet their preferences. By leveraging this understanding, we can align our development efforts with user expectations, fostering greater satisfaction and loyalty.

Problem / Solution

The task at hand involves integrating the Apple Pay feature into the payment page seamlessly, following Apple's human interface guidelines. This integration must address several key considerations:

1. User Roles and Journeys:
- Registered Users: These are users who have accounts on the platform. They may have previously saved payment methods, including Apple Pay, which should streamline their checkout process.
- Guest Users (Non-registered): These users do not have accounts and will likely need a simplified, intuitive path to complete their transactions using Apple Pay.

2. UI Consistency Across Platforms:
- Ensuring a consistent user interface (UI) experience across different technologies (Apple vs. Android) is crucial. The Apple Pay integration should adhere to iOS design patterns while maintaining usability on other platforms.

3. Hierarchy with Other Express Payments:
- Apart from Apple Pay, other payment methods such as PayPal and Credit/Debit cards need to be accommodated. The payment page should present these options clearly, possibly with Apple Pay prominently displayed if supported by the user's device.

4. Users with and without Cards in Apple Wallet:
- Users who have added their cards to Apple Wallet should have a straightforward checkout process. It's essential to detect and leverage this capability to enhance their payment experience.
- For users without cards in Apple Wallet but are eligible for Apple Pay, clear guidance should be provided on how to add and use Apple Pay during checkout.

To extend further, the integration of Apple Pay should not only focus on technical implementation but also on enhancing user trust and convenience.

New Design

On the following slide, we can see the final design broken down by:

1. End-to-end journeys, starting with the Product Details Page (PDP) and concluding with the Confirmation Page, which is the last step for the user before leaving the HN site.

2. Mobile and Desktop resolutions based on our most common user (414px width for mobile and 1312px for desktop, which is our medium breakpoint).

3. Two different journeys for buying via Apple Pay:
- Shopping Bag: Users who have not entered delivery options, which will be requested by Apple.
- Checkout/Payment Page: Users who have completed all delivery details, with Apple requesting only the payment.

4. Two types of Apple users:
- Users with a credit/debit card already set in Apple Wallet.
- Users without any card in Apple Wallet but still eligible for Apple Pay (showing 'Set Apple Pay' CTA).

5. Two types of Harvey Nichols users:
- Users with an existing HN account and a saved credit/debit card.
- Users without an HN account or with an account but no saved card.

My involvement

I collaborated closely with both the front-end and back-end development teams to establish a streamlined process flow and gain insights into the technology, including the hand-offs between different systems.

Additionally, I conducted a comparative analysis of our competitors' implementations and adhered to Apple's guidelines.

Prior to the commencement of development, I engaged with Product Owners and various stakeholders across the organisation. I showcased our plans through mockups and prototypes, showcasing a strong ability to present and incorporate stakeholder feedback effectively.

Lastly, I played a crucial role in the testing phase, partnering with developers and the Quality Assurance team to ensure the delivery of a robust solution.

Conclusion

While we did not observe a measurable increase in conversions, the day we introduced Apple Pay as an alternative payment option in the checkout process, we noticed immediate engagement. 60% of eligible customers who had access to Apple Pay began using this feature.

The reason we couldn't directly attribute a conversion uplift is because Apple Pay primarily enhances convenience for our customers. It's plausible that these sales would have occurred even without Apple Pay being available.

Our future plans include expanding Apple Pay to Product Pages and enabling instant checkout for individual products. Once these features are implemented, we expect to confidently quantify Apple Pay's impact on conversions, potentially demonstrating an uplift of X%. This will provide clearer evidence since these options are not currently available on the HN website.

In conclusion, integrating Apple Pay into the payment page requires careful consideration of user roles, UI consistency, payment method hierarchy, and varying user scenarios. By addressing these aspects comprehensively, you can create a seamless and user-friendly payment experience that aligns with both Apple's guidelines and user expectations.

Underneath, I've included a payments page study.