Pactis Checkout Modal
Pactis Checkout Modal
My roles: End-to-end Product Design, Design system management, User Research and Competitive analysis, Interaction Design, and contributing to business Strategy
My roles: End-to-end Product Design, Design system management, User Research and Competitive analysis, Interaction Design, and contributing to business Strategy
Industry: Fintech, B2C, B2B
Industry: Fintech, B2C, B2B
This case study only covers one part of this project, which is the customer’s view.
The Merchant's set up is excluded due to NDA.
This case study only covers one part of this project, which is the customer’s view. The Merchant's set up is excluded due to NDA.
Business Outcomes & Impact (Beta Testing)
Based on my agreement with the company, third party individuals are not privy to the exact business metrics of this product. But I am allowed to give you a fair baseline.
Xebar V1 had an agile development process, and our primary focus was to get in front of our target market and test what we’ve built.
About 30% decrease in checkout abandonment - Owing to the fact that multiple currencies were supported.
About 40% of our users opted for Crypto Payment Adoption
About 70% increase in mobile conversion
1min recorded Avg. Transaction Time
Project Overview
Project Overview
We developed a global payment checkout modal that enables businesses to receive payments in multiple currencies (fiat and crypto) while offering flexibility in payment collection (fixed amounts, dynamic invoicing, and e-commerce integrations). The solution is a web-based, mobile-responsive widget that can be embedded into any website or payment link.
We developed a global payment checkout modal that enables businesses to receive payments in multiple currencies (fiat and crypto) while offering flexibility in payment collection (fixed amounts, dynamic invoicing, and e-commerce integrations). The solution is a web-based, mobile-responsive widget that can be embedded into any website or payment link.
Background
Background
The need for our payment modal emerged from deep merchant and user research. Interviews with 15+ small and medium-sized businesses revealed lost sales from currency limitations and crypto payment gaps. Competitor benchmarks (Paystack, Flutterwave, etc) exposed missing features like seamless fiat-crypto switching. These insights drove our solution: a unified checkout eliminating currency barriers while building trust in crypto payments.
The need for our payment modal emerged from deep merchant and user research. Interviews with 15+ small and medium-sized businesses revealed lost sales from currency limitations and crypto payment gaps. Competitor benchmarks (Paystack, Flutterwave, etc) exposed missing features like seamless fiat-crypto switching. These insights drove our solution: a unified checkout eliminating currency barriers while building trust in crypto payments.
Pain Points Discovered
Pain Points Discovered
Currency Conversion Hassles: Customers pay in different currencies, leading to exchange rate losses.
Currency Conversion Hassles: Customers pay in different currencies, leading to exchange rate losses.
Limited Payment Options: Many businesses can’t accept crypto or alternative payment methods.
Limited Payment Options: Many businesses can’t accept crypto or alternative payment methods.
Manual Invoice Adjustments: Lack of dynamic pricing for different customers
or regions.
Manual Invoice Adjustments: Lack of dynamic pricing for different customers
or regions.
Poor Mobile Experience: Many checkout flows aren’t optimized for mobile users, leading to drop-offs.
Poor Mobile Experience: Many checkout flows aren’t optimized for mobile users, leading to drop-offs.
Currency & Payment Limitations: About 52% of SMBs reported losing international customers due to unsupported currencies. Only a few businesses could accept crypto, missing out on a growing payment segment.
Currency & Payment Limitations: About 52% of SMBs reported losing international customers due to unsupported currencies. Only a few businesses could accept crypto, missing out on a growing payment segment.
Core Objective
Core Objective
Reduce Checkout Friction – Optimize for speed and clarity
Support Global Payments – Allow merchants to receive funds in
preferred currencies.
Mobile-First Approach – Ensure seamless UX across devices.
Flexible Payment Options – Enable fixed/variable pricing and crypto/fiat choices.
Design Process
Design Process
Research & Benchmarking: Analyzed competitors (Stripe, PayPal, Flutterwave) to identify UX gaps. Conducted user interviews with 15 merchants and 10 customers.
Research & Benchmarking: Analyzed competitors (Stripe, PayPal, Flutterwave) to identify UX gaps. Conducted user interviews with 15 merchants and
10 customers.
Wireframing & Prototyping: I began with the Merchant’s set up for the Modal (which is beyond the scope of this case study). The set up covers the currencies the merchant want’s to receive as payment, how dynamic the payment should be, and which regions it is accessible to.
Wireframing & Prototyping: I began with the Merchant’s set up for the Modal (which is beyond the scope of this case study). The set up covers the currencies the merchant want’s to receive as payment, how dynamic the payment should be, and which regions it is accessible to.
Usability Testing: Testing was done in 3 phases. In-house testing with the PMs, engineers and stakeholders, Then testing with the Merchants followed by the Customers. The final designed evolved accordingly...design is never finalized anyway.lobal Payments – Allow merchants to receive funds in preferred currencies.
Usability Testing: Testing was done in 3 phases. In-house testing with the PMs, engineers and stakeholders, Then testing with the Merchants followed by the Customers. The final designed evolved accordingly...design is never finalized anyway.lobal Payments – Allow merchants to receive funds in preferred currencies.
Final UI & Handoff: Setting up components and necessary documents for the engineers and other team members.
Final UI & Handoff: Setting up components and necessary documents for the engineers and other team members.
Customer Info Page - Fixed Price
Customer Info Page - Fixed Price
There are two use cases for this. Fixed prices imply that the business owner (or whoever set up the payment link) has fixed a price to be paid. Changing the currency you want to pay with will convert the fixed price into the equivalence in your preferred currency.
The screen below shows the use case with an unfixed price, which is perfect in cases where the payment link is for a donation.
The screen below shows the use case with an unfixed price, which is perfect in cases where the payment link is for a donation.
Begin Payment - Bank Transfer
Begin Payment - Bank Transfer
Select your preferred means of payment and proceed.
Select your preferred means of payment and proceed.
Pay With Debit Card
Pay With Direct Debit
Pay With Direct Debit
Pay With Wallet
Pay With Wallet
Pay With Crypto
Pay With Crypto
Web View
Web View
Up next
HOTD Game Design
HOTD Game Design
Exploring motion, interaction, and lore through House Of The
Dragon -inspired gameplay.
Exploring motion, interaction, and lore through House Of
The Dragon -inspired gameplay.
Exploring motion, interaction, and lore through House Of The Dragon -inspired gameplay.
Now, we both know you’d love to have batman on your team. Click the button below to get in touch.
Now, we both know you’d love to have batman on your team. Click the button below to get in touch.