Introducing native payments onto apps

Using Apple Pay and Google Pay to improve conversion
*Please note that images and/or sensitive information may be blurred out due to confidentiality agreements

Project Context

Lead UX/UI designer
One UX/UI designer (myself), product owner and development team
project status
Delivered and implemented
July - August 2022

Smartbox is a e-commerce/booking site and app for gifting experiences. Someone can buy their loved one a physical or digital voucher as a present. Then the receiver of that gift can redeem it against various types of experiences (ie. restaurants, parachuting, hotel stays, etc.) by booking online.

Before this project, customers buying a Smartbox could only checkout using card payments. This project aimed to bring Apple Pay and Google Pay into the checkout flow. This has now been successfully implemented and has shown great results including: - Higher conversion rates since implementation - 1/5 customers checkout using a native payment

Customer insights & User research

1 - As-is experience

When joining Smartbox I conducted an as-is audit of the complete journey experience and added notes on what was working and what could be improved. So, when picking up the integration of native payments onto the app I referred back to the journey.

Main areas of improvement:

  • Too many steps
  • Information wasn’t being saved when users went back between screens
  • UI alignment - Parent and child radio buttons shouldn’t exist
  • Content improvement - CTA’s did not indicate the correct action and there was also extra copy around
  • Field improvement - The ‘title field’ is irrelevant and outdated
Image of part of the as is audit of the Smartbox app when I first joined in 2021

The design process

1 - Flow improvement & constraints

Before designing anything, I made a user flow of how the new payment could be integrated based on best practice research*. Due to different tech dependencies this was crucial. Once the lead devs signed it off I was ready to design. Some of the dependencies included:

  • Needing the user to select ‘giftbox’ or ‘e-voucher’ (1) before the payment step (2)
  • The user wouldn’t be able to log into their Smartbox account once express checkout was selected (Google/Apple pay)

*Unfortunately the best practice research got lost when migrating from Sketch to Figma

User flow of the checkout journey including express checkout

2 - The designs

The below designs have now been implemented and have shown massive success in increasing conversions. The key aspect was showing the native payment (Apple/Google Pay) as soon as possible making sure that people had the least steps possible. The single screen process was not improved as this would be part of the cart project.

The designs were user tested to make sure that the flow was easy to use and there was no friction.

Final screens of the native payments and card flow

3 - Implementation

After the designs were handed to devs, the implementation started. Throughout the project, I collaborated with the teams to make sure the designs were correctly interpreted. In addition, as they were coding it, new edge cases appeared for which I had to design a specific screen and test the copy for clarity.


1 - To show progress bar or not?

During the competitor research I noticed progress bars were often used. So for my proposal I designed variations of progress bars to A/B test using I was testing:

  • Colour preference
  • Scale preference
  • Number or shape

Ultimately the progress bar that was the clearest and helped users progress the best was the one with numbers in orange. Although there was a case to bring a progress bar into the checkout, the technical team deemed it too complex to implement. Again here, it was known that the cart project would come in and could be relooked at then.

Examples of different progress bars tested


This has now been successfully implemented and has shown great results including:

  • Higher conversion rates since implementation
  • 1/5 customers checkout using a native payment
  • This project lead to the full implementation of the cart on the app, which you can find here.

Other projects