Reworking the payment hierarchy for international shoppers, and using behavioural insights to reduce friction in the existing checkout.
Company
BoxPay
Project
International Checkout template and domestic checkout optimisation
Focus
Checkout UX, Payment Hierarchy, Conversion Optimisation
My Role
Product Design
Tools
Figma, Microsoft Clarity
Overview
BoxPay is a payments technology company that provides payment infrastructure and checkout experiences for merchants. Alongside its flagship Payment Routing product, I worked on the checkout that shoppers see when they pay.
BoxPay already had a working checkout built around Indian merchants and shoppers. This case study covers two connected pieces of work:
01
A new international checkout template that supports several payment methods without overwhelming the shopper.
02
An optimisation of the domestic checkout, driven by heat-map evidence, that was later carried into the international template.
Outcome
MEASURED
Increase in payment completions following the domestic checkout optimisation.
DESIGN OUTCOMES
An international template that is visibly distinct from the domestic checkout.
A clear split between primary payment actions and secondary options.
A behaviour-led fix to the domestic checkout, reused in the international template.
The domestic checkout could not simply be reused
India's checkout ecosystem includes UPI alongside cards, wallets, netbanking and EMI. BoxPay's domestic template was built to give all of these a place on the page.
For merchants selling abroad, carrying the same approach into a new template would not create a sufficiently different experience. The international checkouts I reviewed also ordered payment methods quite differently.
So the brief was not just to add international payment methods. It was to rethink how those methods should be organised and presented.
Support many payment methods
Merchants need express wallets, cards and alternative methods available to their shoppers.
VS
Keep the choice easy
Every extra option on screen is something the shopper has to read before they can pay.
Looking outward, then iterating
I reviewed checkout flows used by international merchants to see how they ordered payment methods. It was a focused review rather than a market study, but a pattern kept repeating.
Shop Pay, PayPal and Google Pay sit above everything else, then the form.
Card networks come first, with PayPal and Google Pay as the only alternatives.
PayPal, a pay-later option and credit card. Nothing more on screen.
What the examples had in common
01
Express methods such as PayPal and Apple Pay are given prominence where supported.
02
Card payment is treated as the primary manual method.
03
Less frequently used methods are secondary, or not shown upfront at all.
Hick's law as a lens
Hick's law describes how the time it takes to decide grows with the number of choices presented at once. I used it as a framing for the problem, not as proof of an outcome: if every method has equal weight, the shopper has to scan all of them before acting. A clear default path reduces that effort.
Three rounds of exploration
I explored several directions before landing on the final structure. Stakeholder reviews after each round sharpened what the template needed to do.
ROUND 1
Six layout options
Side menus, accordions, tabs and dropdowns, in light and dark styles. Option 1 is shown in Fig. 2.1.
STAKEHOLDER FEEDBACK
The early directions were not approved. They either looked too similar to the domestic checkout, or put too many payment options in front of the shopper at once. That feedback turned a layout question into a hierarchy question.
ROUND 2
Search versus a tiered structure
ROUND 3
Proportions and themes
With the hierarchy agreed, I refined the split between order summary and payment, and tested the structure in dark and light themes.
50/50 dark
40/60 dark
40/60 light
Two tiers instead of one long list
The final direction keeps every supported method available, but not with equal emphasis.
PRIMARY
Visible immediately
Express checkout
Apple Pay
PayPal
Google Pay
Card payment
Card number
Expiry
Security code
Name
SECONDARY
One step away
“Want more options? Choose a payment method”
Wallet
Crypto
Pay later with Zip
1
Express buttons lead
Apple Pay, PayPal and Google Pay are the fastest route for shoppers who already use them, so they come first.
2
Card is the default manual path
After an Or divider, the card form is open and ready. No extra click to reach the most common manual method.
3
Everything else is grouped
Other methods sit in a single dropdown. They stay accessible, but they no longer compete for attention with the primary actions.
Why this approach
It makes the international template intentionally different from the domestic checkout, rather than a re-skin.
Less frequently used options remain accessible without taking space upfront.
The most prominent payment methods are easier to identify at a glance.
The page avoids showing every option with equal emphasis, which was the core issue in earlier rounds.
The logos people tried to tap
Separately from the international work, I studied the live domestic checkout with Microsoft Clarity heat maps. The goal was to find friction that stopped people from completing their payment.
One pattern stood out. Below the payment form sits a row of card network logos: Visa, Mastercard, RuPay, SafeKey and PCI DSS. They are trust badges, not actions. Yet people were tapping them as if they were quick payment options, particularly on mobile.
Those taps went nowhere and showed up as dead clicks. They also kept people on the checkout page for longer, on a page whose only job is to get them to pay.
It was one of several friction points the audit surfaced, and the clearest one to show here.
MY RESEARCH NOTE
“A small portion of mobile users are clicking on the footer images, mistaking them for payment options or next steps after entering their details.”
Noticed across payment links, adding to the count of dead clicks.
CLARITY HEAT-MAP INSIGHT
“The high number of dead clicks on mobile devices suggests that some elements like the footer logo may need to be more interactive or removed.”
Microsoft Clarity, heat-map insights panel
The fix: grey out the network logos
Removing the badges would have cost trust signals that matter at the point of payment. Instead, I took away their visual pull so they read as reassurance rather than as buttons.
The logos no longer carry the same visual weight as actionable payment options.
It is less likely that shoppers mistake a badge for an express payment button.
The difference between a payment method and card network branding becomes clear.
The trust signals stay on the page, where they still reassure at the moment of payment.
The rest of the audit
The same Clarity review produced other observations and recommendations for the checkout:
Hiding upcoming steps on the first visit, so attention goes to the primary call to action.
Investigating a drop-off between the name and mobile number fields.
Renaming “Continue” to “Proceed to Payment Options” so the next step is explicit.
Making CTAs more prominent after rage clicks on the payment failed message.
RESULT
Payment completions increased by 13% following the domestic checkout optimisation.
The logo change came out of this wider audit, so I treat the 13% as the result of the optimisation work as a whole, not of the logos alone. The logo treatment was then applied to the international template as well.
The international checkout template
Order summary on the left. On the right, a single clear path to pay, with everything else one step away.
Choosing a secondary method
Selecting an option from the dropdown, such as a wallet, enables the Continue button beneath it. The express buttons and card form stay where they were, above it.
Light and dark themes
I designed the template to be customisable, with light and dark themes. The intent was for it to follow the shopper's system appearance setting, so the checkout fits the environment it opens in.
The structure and hierarchy are identical across both themes. Only the surface changes.
Theme customisation for merchants
The template customisation frames explore a dark theme with a merchant accent colour. The payment hierarchy holds, while the brand expression shifts with the merchant.
The same rule, one level down
The wallet screen repeats the pattern. Commonly Used Wallets are shown as buttons, while Other Wallets live in a dropdown. Shoppers learn the logic once and it holds throughout.
A detail I changed after testing: the card field
An earlier version collected card number, expiry and CVV in one dynamic field. When I tried it with two teammates, one found it confusing and the other found the right-to-left reveal surprising on first use. The desktop template moved to separate, labelled fields.
What changed, and what I took from it
13%
MEASURED
Payment completions increased by 13% following the domestic checkout optimisation.
QUALITATIVE DESIGN OUTCOMES
A clearer separation between primary payment actions and secondary payment options.
A distinct international checkout approach, rather than a direct adaptation of the domestic template.
A behaviour-led fix found on the domestic checkout and carried into the international template.
A customisable template with light and dark themes that share one hierarchy.
Learnings
Rejection is useful information. The feedback on my early rounds reframed the brief. The problem was never which methods to add, but how to rank them.
Available does not mean visible. Every supported method can stay within reach without being given the same weight on screen.
Evidence over taste. Greying out a row of logos sounds cosmetic. The heat maps showed the badges were drawing real taps, which is what justified the change.
Separate the finding from the result. The heat maps justified the logo fix. The 13% belongs to the wider optimisation. Keeping those two claims apart makes both more credible.