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

‍

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

‍

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.

‍

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 usertesting.com. 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.