Checkout page design

Checkout One

Redesigning Cashfree's checkout page for consistency, improved user experiences and greater conversions

 To read a abstracted a version of this article you can read my medium article here

The checkout page is one of the most critical steps in a user's purchase journey. This is where the customer decides to finally take the plunge and pay money for something they want. Having a clunky, time consuming process leads to abandoned carts. According to a report, 87% of online shoppers will abandon their carts if checkout is complex, and 55% will abandon the retailer completely.

A while back the leadership at Cashfree believed it was time to standardize the checkout experience across all the platforms we supported . But when we did an audit of the checkout experiences , we realised consistency was just one issue, the other issues we discovered were a lack of feature parity, limited customisability, inconsistent branding ( both merchant and cashfree) , slow load times and complex unsupportable native apps and sdks.

On a more granular level there were problems with the visual elements like inconsistent icons, styling, information and style of headers, different icons,logos and more. Also the behaviour on some platforms were problemastic as certain animations obscured infromation etc.

On further discussion with leadership on the next steps, we pitched for a complete redesign of the checkout page, because it would give us the flexibility to tackle the many problems that had crept in, from first principles

What makes a good checkout

Since we were redesigning the checkout from first principles, we researched what makes a good checkout and the answer is whatever makes the users pay

Ther key factors in ensuring a user payment are Trust and Speed, a fast and trustworthy checkout reduces customer apprehension leading to more succesful payments. 

While ensuring things are quick and reliable, it is imprtant to explore the payment flows at a granular level , to minimise user errors, confusion and uncertainty.

 Boosting affordability by offering offers, no cost EMI's etc sweetens the deal for many a customer and highlighting these payment methods provides for more conversions.

In this quest for speed, we also focussed on where contributions from tech would help us. So everything from load times to transitions was first optimised for speed. Some of  our customers  finish interacting with our screens in 3 seconds.

Initial designs

Our intial designs werea small aesthetic overhaul, we just wanted our checkout to look more modern. The image below shows some of the options we explored.

Some learnings from our initial explorations

We learnt a lot form our initial explorations, and these were some of the final takeaways.

• Grouped cards are more efficient space wise
• Having the amount in the header helps set context more easily
• Merchants want the checkout to reflect their branding more, it has to be more customisable
• The footer is a vital location and should be used for actions, and showing information just before confirming payment ( Can be used to build confidence )

Radical appropaches not explored in totality

Since we were starting from first principles, when we were looking at layouts and interaction paradigms. There were 2 radically different approaches that we felt had merit

Paysay : A chat interface for payments

We explored completely replacing the landing page with a chat experience.

Advantages :

• Chat allows for multiple options without being overwhelming
• Can be easily integrated into social media/chat  platforms like whatsapp etc to allow for a more native payment experience
• Easier to localise into multiple languages
• Screen reader friendly
  

Disadvantages

• On web interfaces and desktop the chat option would work only in popups or iframes and would not be ideal for full page redirections
• Maintaining context in a chat like interface is hard, ( but it can be attempted )
• Checkout pages are not expected to be chat boxes
  

Instapay: Using a horizontal scroll to navigate between payment methods

We explored completely replacing the vertical page with a horizontal page.

Advantages

• Horizontal page allows for easy changing between payment methods
• Standout approach that no other competitor has taken
  Disadvantages
• Horizontal scrolling is not optimised for older desktops and browsers
• Chance of checkout action being confused with global action gestures ( like back on mobile devices )
• Uncertainty over universal recognition of horizontal scroll paradigm

Mid Process Designs

The mid process designs, were when we had a lot more clarity of both the aesthetic we were working for and the information we wanted to show . The final designs were derivatives of these and a lot of the aspects were kept

Competitor analysis

Once we had our base set we looked at our competitors to benchmark our approach .

Our layout was similar to most of our competitors.

• Some competitors did use separate pages for individual payments.
• Horizontal scroll options were rarely used, while vertical scroll was exploited without a second thought
• Competitors with multiple payment methods, broke them into cards
• UPI was a main focus for many competitors

Near final design

We took our mid level approach added some more polish , added other required information and a little more polish.And we got our near final designs

Design system for checkout

Since our design was nearly final we created a design system dedicated to checkout, so that all subsequent pages ( dedicated to payment methods ) are consistent

Evolution of the header

Just to show the change in information, and how the design evolved and some of the nuanced decision making that was needed . The following image shows how the header evolved. From first to final design

Final design evaluation

Since the checkout is so significant we created 2 alternate versions of checkout and did as final user test to ensure that our designs were right. Our design was selected as superior by 66 % of those polled

Final designs

After a little more polish , we finally had the design for our checkout

Improvements in the new checkout

While there are a lot of improvements made between the old and the new checkout, these are some of the main improvements in the new checkout

• Maintaining context : The new checkout always calls out amount at every page, and you can see breakup before you pay, ensuring least confusion. WSe also call out offers, incidents , tpv and tdr contextually.
• Comprehensive preferred payments : New preferred payments will include other payment methods
• Distinct payment flows : Payment flows are unique pages ( On mobile especially ) allowing more intricate flows and focussed payment experiences.
• UPI first checkout : With 80%  payments happening through UPI , we ensured that reliable UPI options were given the most focus ( faux predictive approach, where data drives the ordering of the payment methods)
• Graceful failure recovery :  Depending on the error type , we give the customer relevant information or we collect contextual feedback. Always giving the customer the ability to retry

Customisation suite

Once our checkout was done , we built a customisation suite so that any merchant could make the checkout theirs. While we could use data to drive our decisions for the new checkout designs, for customisation requirements and value we looked at requests and user feedback. We conducted a cold calling exercise with our merchants to understand their needs . We called 12 customers across various GMV’s and line of businesses

Results of the cold calling

• 5/12 customers had no idea of customisation had no idea about customisation or had not revisited it post initial deployment
• 3/12 customers we called had business specific use cases which required customisation of payment methods
• 2/12 Customers wanted detailed customisation

Final approach

Since some enterprise customers had specifically requested detailed customisation but our smaller merchants needed only simple customisation, we created a 2 layer visual customisation interface. We also created a specific business customisation interface.

Conclusion

In the end the redesign gave us a checkout with the following salient points

Multi level customisation ( 256 merchants have customised their checkouts ) You can also try the customisation engine here 
Improved payment and success rates ( Increase of upto 10% )
Enhanced merchant branding 
Enhanced customer and merchant experiences
and a lot more

Ps. Playful customization

Here is an example check out customized for christmas, with some lottie magic.