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.
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:
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:
*Unfortunately the best practice research got lost when migrating from Sketch to Figma
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.
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.
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:
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.
This has now been successfully implemented and has shown great results including: