Background
Improving the payment and checkout experience for buyers by updating and expanding the payment methods.
A self-initiated project that corresponded to business OKR.
Business goal
- Move 40% of buyers from offline to digital payment options.
- Improve checkout conversion across all platforms.
- Offer buyers new payment solutions: Installments and Credit Line.
Success metrics / KPIs
More buyers paying digitally instead of with cash.
- Time on task
- User error rates
- Drop-off rate
- Conversion rate
- Use of digital vs offline payments
- Increased AOV
My role
Research, benchmarking, UX, UI, and Cargo design system components.
Initial problems
Intro
While expanding the eCommerce marketplace's payment options to include Installments and Credit Line, I found the existing checkout flow couldn't support them.
I proposed a full revamp of the checkout payment component to the business and CEO. Google Analytics showed heavy drop-off at this step; Hotjar recordings showed why.
Transaction data and benchmarking against leading B2B and B2C platforms confirmed it — our payment step looked dated next to the competition.
Image: Too many steps for choosing Installments payment method
Questions to answer
- Who are our buyers?
- What payment methods do they prefer?
- How does the current payment flow perform, and how can we improve it?
- Why do some buyers use offline payment methods?
- Will our buyers prefer using new payment methods?
Problem statement
The eCommerce marketplace's payment component didn't match how buyers actually pay, causing heavy drop-off at checkout.
It lacked user-centered design and had no room for Installments or Credit Line — options buyers increasingly expect.
The component needed rebuilding around real buyer behavior, benchmarked against leading B2B and B2C platforms.
Existing plus new digital payment methods
List of challenges
- Prioritize digital payment methods over traditional ones.
- Highlight Credit and Installment payment availability in new checkout.
- Make checkout more accessible for inexperienced buyers.
- Modernize checkout without disrupting existing buyers.
- Reduce drop-off at the payment step.
Existing checkout
Research
Empathizing with buyers
In the Empathize phase, I focused on understanding buyers — their behavior, payment preferences, and pain points. That grounding shaped a payment component built around how people actually pay.
Tools used:
- Google Analytics — conversion data and checkout funnels
- Hotjar — observational research and session recordings
- Marketplace financial data
Users: Buyers
To understand who are our buyers, we have identified and defined 3 buyer personas based on the type of businesses that use our platform.
Based on payment behavior:
Small businesses:
- mostly use Cash on delivery payment method,
- large number of orders,
- low contribution to GMV
Mid-sized businesses:
- mostly use Credit/debit cards and Cash
- average number of orders
- low contribution to GMV
Large businesses:
- mostly use Bank Transfer payment method
- low number of orders
- high contribution to GMV
GMV/Order split by payment method
Buyer personas: Small, Medium and Large businesses
Benchmarking
I compared and analyzed payment steps on the most popular eCommerce platforms, including Amazon Business, Alibaba, and Noon (one of the region's leading B2B platforms). For the most advanced insights about Installments, I included Klarna and Tabby.
Why would I include B2C platforms if the eCommerce marketplace only serves B2B customers?
As per Jakob's law (UX) users tend to develop expectations from design conventions based on their cumulative experience from other websites. The end users of the eCommerce marketplace have experience of using and are familiar with checkout on Amazon and Noon.
Payment methods benchmarking: summary table
Benchmarking findings
Benchmarking helped to understand that most of the payment flows follow similar pattern. Payment methods are exposed and presented as radio cards, with one most frequently used selected by default.
That matched my proposed revamp, and gave the new methods — Credit and Installments — a place to stand out.
Illustrated list of suggestions for payment step in checkout after benchmarking
Action plan
- Display all payment methods on the Checkout page
- Use the radio card component to display all payment methods (instead of the dropdown)
- Use the sticky 'Pay/Place order' button (as it works in the marketplace app) for mobile view
- Have 'Credit/Debit card' as pre-selected payment method
- Show the 'Add new Credit/Debit card' form when the user has no saved cards
- Show pre-selected saved Credit/Debit card when the user has saved cards
- Show the 'Installments available' badge or similar when the card is eligible for installments and the order value is AED 500.00+
- Show the 'Installments available' notification next to the sticky button 'Pay/Place order
- Highlight the CVV code input field for saved cards when the card is selected
- Show installment plans when a Credit card is eligible for installments
Information architecture
To map out payment flow I created a diagram in Miro.
Payment methods flow diagram
Wireframes
Lo-fi wireframes
To start the prototype phase of my process, I created lo-fi wireframes in Miro, which show the process of adding and using Credit/Debit card.
Miro lo-fi wireframes: Credit/Debit cards and Installments
Credit card elements mapping
To understand what kind of information we should display for Credit/Debit card components I made a mapping, which I later presented to stakeholders.
Other payment methods
As I mentioned earlier, we chose radio-cards for presenting payment methods due to several factors:
- Users are familiar with this component
- It is straightforward, easy to understand and use
- It is flexible and interactive
After peer review and alignment with stakeholders, I started creating the UI based on those prototypes.
Payment module prototype: radio card style
Credit/Debit card payment method breakdown and mapping
Final result
With the UI and components complete, I created a clickable prototype for presenting the designs.
Platforms
Supported platforms are: Desktop Web, Mobile Web, Mobile App
Mobile Web
Mobile Web Figma file organization
Outcomes
- The number of clicks/taps to select/add Payment method was reduced by 2
- Checkout conversion rate 2X increase
- Credit line payment method contributes to 40%+ of GMV (and counting)
- 50% of buyers who preferred offline payment methods switched to digital payment solutions