Park+ is an ecosystem that solves the daily challenges faced by car owners ranging from parking, FASTag management, car insurance, automated vehicle access control systems in malls, corporate parks and residential apartments. Hence, payments are sensitive and the most crucial part of the checkout experience.
The Problem
The payment experience of services to be availed from Park+ is not optimal and has a high failure rate as the users end up selecting the wrong payment method and in turn raise tickets. We identified the following issues in our product
- Selecting the payment method and finally paying for the service is not a uni-directional flow
- Payment selector UI is introducing complexity to the checkout process and leading to choice paralysis as the presentation of multiple payment methods has not been carefully designed
- Visibility of payment method that is experiencing high failure rate is not present
- Paying via card is not a smooth experience as the error handling is poor
The Solution
I did the analysis of payment flow of some of the leaders in e-commerce as players like Amazon have a payment success rate of 99.9%
I also looked at some popular payment gateway services like Stripe and Razorpay. To mention a few others: Amazon Payments, SecurePay, Juspay, or BlueSnap.
Essentially, I wanted to:
- Create a uni-directional linear flow from order summary screen to payment success as to eliminate chances of error and reduce jarring
- Reduce cognitive load of the user by grouping the most used payment methods together and collapsing the others and showing the supported and unsupported payment methods upfront
- Make the payment via Debit and Credit card experience smooth
- Reduce failure rate by promoting the payment method with highest success rate and clearly highlighting the payment methods experiencing high failure rate
Step 1: Change the payment summary strip on order summary page
- Clearly highlight the selected mode of payment and option to change
- Clearly show the amount to be paid and a standard CTA “Proceed to Pay” for a first-time and returning user for consistency
Step 2: De-clutter the payment method interface
- Introduce grouping and give priority to the most used payment method
- The optimal solution requires a progressive disclosure design wherein, only the category and logos of available payment modes are visible, and all content for the non-selected methods is collapsed
Step 3: Making the payment via card quick and easy
- As compared to the old UI, in the new UI I gave the option to add a new card on expansion of the Credit/Debit Card option
- The CVV can be entered in the same screen, unlike the old UI where the user was taken to a new screen to enter CVV
Step 4: Error handling
- Reduce the failure rate by promoting the payment methods with high success rate in the suggested for you section and disabling the ones that are experiencing failure rates
The Impact
The development for the new payment flow is in progress and would be live by next week (10-Jan-2022) and then I’ll be able to track down the exact numbers around the success rate. The success will be measured around the following parameters
- Reduced failure rate due to less chance of error which will eventually lead to less refund cycles
- Improved play store rating due to higher payment success rate which will build more trust to increase the number of downloads and onboard more users
- Lesser time taken for payment due to unidirectional flow and carefully designed grouping of payment methods
- Lesser number of raised tickets for payment issues
Next Steps
The ongoing promotional offers can be introduced in the payment screen. This will eliminate the need to have a separate section of promocodes and discounts. The impact of the offer tied to different payment methods on final payment will be visible.
