BlinqCheckout: Designing a Trusted Checkout for a Diverse Payment Landscape
BlinqCheckout: Designing a Trusted Checkout for a Diverse Payment Landscape
BlinqCheckout: Designing a Trusted Checkout for a Diverse Payment Landscape
Lead Product Designer
2 months
Web App
UX, Product Design. Product Strategy
Fintech
Live website
My role
My role
I led the design for this project, collaborating closely with a junior designer and working cross-functionally with a team of three engineers, one product manager, and QA testers.
I led the design for this project, collaborating closely with a junior designer and working cross-functionally with a team of three engineers, one product manager, and QA testers.
Overview
Overview
In Africa’s growing digital economy, businesses are expanding rapidly online but friction at the checkout is costing them conversions. We identified a recurring pain point among merchants: too many customers were dropping off at the final step — payment.
Whether it was due to limited payment options, clunky mobile experiences, or generic, unbranded checkout pages, merchants needed more than just payment infrastructure. They needed a checkout experience customers could trust.
That’s where Blinqcheckout comes in.
In Africa’s growing digital economy, businesses are expanding rapidly online but friction at the checkout is costing them conversions. We identified a recurring pain point among merchants: too many customers were dropping off at the final step — payment.
Whether it was due to limited payment options, clunky mobile experiences, or generic, unbranded checkout pages, merchants needed more than just payment infrastructure. They needed a checkout experience customers could trust.
That’s where Blinqcheckout comes in.
Understanding the Challenge
Understanding the Challenge
We set out to build BlinqCheckout, a hosted checkout page merchants could plug into their websites or apps via redirect or inline iFrame. My role as the product designer was to shape the customer-facing experience: to make it fast, frictionless, and familiar no matter the device, browser, or payment method.
But this wasn’t just about screens. It was about solving for three core tensions:
Trust vs. Flexibility: How do we allow merchants to brand the experience without compromising payment security?
Speed vs. Choice: How do we give users more ways to pay without overwhelming them?
Clarity vs. Control: How do we handle errors and edge cases without losing the user?
Qwid's current dashboard and user interface fail to effectively communicate the brand's core value proposition of dynamic, seamless, and easy cross-border payments and fund management. The existing platform suffers from several critical issues:
Poor visual design that doesn't align with the brand's purpose
Lack of content structure, leading to user confusion
Insufficient consideration for accessibility
Inadequate transparency in the payment process
Low user engagement
In the competitive landscape of cross-border payments, these shortcomings hinder Qwid's ability to meet the growing expectations of individuals and businesses seeking affordable, transparent, and seamless global transactions.
Qwid's current dashboard and user interface fail to effectively communicate the brand's core value proposition of dynamic, seamless, and easy cross-border payments and fund management. The existing platform suffers from several critical issues:
Poor visual design that doesn't align with the brand's purpose
Lack of content structure, leading to user confusion
Insufficient consideration for accessibility
Inadequate transparency in the payment process
Low user engagement
In the competitive landscape of cross-border payments, these shortcomings hinder Qwid's ability to meet the growing expectations of individuals and businesses seeking affordable, transparent, and seamless global transactions.
Goals We Defined
Goals We Defined
Together with product and engineering, we aligned on two fronts:
For Customers:
Let me choose how I want to pay.
Make the process feel safe and familiar.
Get me through it in under a minute.
For Merchants:
Increase completed payments (especially on mobile).
Minimize support calls from failed or confusing transactions.
Keep the checkout visually consistent with our brand.Allow businesses to cater to a global audience by enabling cross-border payments and offering multi-currency support without the need for complex integrations.
Together with product and engineering, we aligned on two fronts:
For Customers:
Let me choose how I want to pay.
Make the process feel safe and familiar.
Get me through it in under a minute.
For Merchants:
Increase completed payments (especially on mobile).
Minimize support calls from failed or confusing transactions.
Keep the checkout visually consistent with our brand.Allow businesses to cater to a global audience by enabling cross-border payments and offering multi-currency support without the need for complex integrations.
Together with product and engineering, we aligned on two fronts:
For Customers:
Let me choose how I want to pay.
Make the process feel safe and familiar.
Get me through it in under a minute.
For Merchants:
Increase completed payments (especially on mobile).
Minimize support calls from failed or confusing transactions.
Keep the checkout visually consistent with our brand.Allow businesses to cater to a global audience by enabling cross-border payments and offering multi-currency support without the need for complex integrations.
Design Methodology & Process
Design Methodology & Process
Research
We interviewed 20+ merchant and business owners and their customers to gain a deeper understanding of the challenges, their pain points, and objectives.
Team Collaboration
After collecting the recordings from the user interviews, we synthesised the data and grouped the findings into themes.
How Might We
To align our understanding of user challenges identified during research with opportunities for innovative problem-solving
Wireframes (sketches)
I created simple sketches on paper and in greyscales to focus on the main functions and how it feels to use.
Design System
following the Atomic design system principles, we created atoms, molecules, and organisms to develop a robust design system.
High Fidelity
PrototypesAfter rounds of explorations and critique with the team on key low-fi flows, I converted to high fidelity designs.
Research
We interviewed 20+ merchant and business owners and their customers to gain a deeper understanding of the challenges, their pain points, and objectives.
Team Collaboration
After collecting the recordings from the user interviews, we synthesised the data and grouped the findings into themes.
How Might We
To align our understanding of user challenges identified during research with opportunities for innovative problem-solving
Wireframes (sketches)
I created simple sketches on paper and in greyscales to focus on the main functions and how it feels to use.
Design System
following the Atomic design system principles, we created atoms, molecules, and organisms to develop a robust design system.
High Fidelity
PrototypesAfter rounds of explorations and critique with the team on key low-fi flows, I converted to high fidelity designs.
Research
We interviewed 20+ merchant and business owners and their customers to gain a deeper understanding of the challenges, their pain points, and objectives.
Team Collaboration
After collecting the recordings from the user interviews, we synthesised the data and grouped the findings into themes.
How Might We
To align our understanding of user challenges identified during research with opportunities for innovative problem-solving
Wireframes (sketches)
I created simple sketches on paper and in greyscales to focus on the main functions and how it feels to use.
Design System
following the Atomic design system principles, we created atoms, molecules, and organisms to develop a robust design system.
High Fidelity
PrototypesAfter rounds of explorations and critique with the team on key low-fi flows, I converted to high fidelity designs.
User Experience
User Experience
During early research, we uncovered a few recurring truths:
Trust breaks easily at checkout. Users drop off when branding disappears or security isn’t clear.
One-size-fits-all doesn’t work — users in Kenya and Ghana prefer mobile money, while others prefer direct transfers.
Time-sensitive transactions like mobile prompts or dynamic bank accounts require real-time feedback loops to reassure the user.
These insights drove a key principle: “Frictionless, yet flexible.” The checkout needed to adapt to how different users pay — without overloading them with choices or confusion.
During early research, we uncovered a few recurring truths:
Trust breaks easily at checkout. Users drop off when branding disappears or security isn’t clear.
One-size-fits-all doesn’t work — users in Kenya and Ghana prefer mobile money, while others prefer direct transfers.
Time-sensitive transactions like mobile prompts or dynamic bank accounts require real-time feedback loops to reassure the user.
These insights drove a key principle: “Frictionless, yet flexible.” The checkout needed to adapt to how different users pay — without overloading them with choices or confusion.
Visual Design
Visual Design
The design process focused on creating a streamlined, user-friendly checkout experience, guided by principles of simplicity, clarity, and flexibility. Through iterative wireframing and prototyping in Figma, a cohesive flow was developed to accommodate diverse user needs and regional payment methods. Key features were designed to enhance user trust and efficiency during transactions.
Highlights:
Design Principles:
Simplicity: Minimized cognitive load during checkout.
Clarity: Clear instructions and real-time feedback throughout.
Flexibility: Support for multiple payment methods and regional preferences
Wireframing & Prototyping:
Low-fidelity wireframes mapped user flows.
High-fidelity prototypes in Figma included branding and interactivity.
Key Features:
Modal Pop-Up Interface: Consistent overlay with merchant and transaction details.
Payment Method Selection: Options for Card, Bank Transfer, and Mobile Money.
Mobile Money Integration: Country-specific forms with relevant MMOs and auto-filled codes.
Real-Time Feedback: Visual indicators for loading, success, or failure.
Session Management: Timers to prompt timely completion of payments
The design process focused on creating a streamlined, user-friendly checkout experience, guided by principles of simplicity, clarity, and flexibility. Through iterative wireframing and prototyping in Figma, a cohesive flow was developed to accommodate diverse user needs and regional payment methods. Key features were designed to enhance user trust and efficiency during transactions.
Highlights:
Design Principles:
Simplicity: Minimized cognitive load during checkout.
Clarity: Clear instructions and real-time feedback throughout.
Flexibility: Support for multiple payment methods and regional preferences
Wireframing & Prototyping:
Low-fidelity wireframes mapped user flows.
High-fidelity prototypes in Figma included branding and interactivity.
Key Features:
Modal Pop-Up Interface: Consistent overlay with merchant and transaction details.
Payment Method Selection: Options for Card, Bank Transfer, and Mobile Money.
Mobile Money Integration: Country-specific forms with relevant MMOs and auto-filled codes.
Real-Time Feedback: Visual indicators for loading, success, or failure.
Session Management: Timers to prompt timely completion of payments
The design process focused on creating a streamlined, user-friendly checkout experience, guided by principles of simplicity, clarity, and flexibility. Through iterative wireframing and prototyping in Figma, a cohesive flow was developed to accommodate diverse user needs and regional payment methods. Key features were designed to enhance user trust and efficiency during transactions.
Highlights:
Design Principles:
Simplicity: Minimized cognitive load during checkout.
Clarity: Clear instructions and real-time feedback throughout.
Flexibility: Support for multiple payment methods and regional preferences
Wireframing & Prototyping:
Low-fidelity wireframes mapped user flows.
High-fidelity prototypes in Figma included branding and interactivity.
Key Features:
Modal Pop-Up Interface: Consistent overlay with merchant and transaction details.
Payment Method Selection: Options for Card, Bank Transfer, and Mobile Money.
Mobile Money Integration: Country-specific forms with relevant MMOs and auto-filled codes.
Real-Time Feedback: Visual indicators for loading, success, or failure.
Session Management: Timers to prompt timely completion of payments
Mobile money
Mobile money
The Mobile Money Payment Method allows customers in supported East African countries to pay using their preferred mobile money operators. At checkout, users select the Mobile Money option on the Blinqcheckout modal, which displays the configured currency, country code, and available MMOs. They enter their phone number, receive a prompt to authorize payment on their device, and confirm the transaction. After clicking “I have made payment,” the system checks the status: success or failure is displayed accordingly. If not completed within 10 minutes, the session times out and must be restarted.
The Mobile Money Payment Method allows customers in supported East African countries to pay using their preferred mobile money operators. At checkout, users select the Mobile Money option on the Blinqcheckout modal, which displays the configured currency, country code, and available MMOs. They enter their phone number, receive a prompt to authorize payment on their device, and confirm the transaction. After clicking “I have made payment,” the system checks the status: success or failure is displayed accordingly. If not completed within 10 minutes, the session times out and must be restarted.
Card payment
Card payment
The Pay With Card option enables customers to complete purchases using their debit or credit card. At checkout, after providing their contact details, users select the “Pay with Card” method, input their card number (16–18 digits), expiry date (MM/YY), and CVV. After clicking the “Pay” button, they receive an OTP on their phone to authenticate the transaction. A screen appears for entering the OTP to complete the payment.
The Pay With Card option enables customers to complete purchases using their debit or credit card. At checkout, after providing their contact details, users select the “Pay with Card” method, input their card number (16–18 digits), expiry date (MM/YY), and CVV. After clicking the “Pay” button, they receive an OTP on their phone to authenticate the transaction. A screen appears for entering the OTP to complete the payment.
Pay with Bank transfer
Pay with Bank transfer
The Pay With Bank Transfer method allows customers to complete purchases by making a direct transfer. At checkout, after entering their contact details, users select “Pay with Bank Transfer” to view a screen displaying a one-time bank account, the payment amount, and a copy button. They then transfer the exact amount to the provided account and click “I have made Payment” to confirm the transaction.
The Pay With Bank Transfer method allows customers to complete purchases by making a direct transfer. At checkout, after entering their contact details, users select “Pay with Bank Transfer” to view a screen displaying a one-time bank account, the payment amount, and a copy button. They then transfer the exact amount to the provided account and click “I have made Payment” to confirm the transaction.
Impact & Results
Impact & Results
Expanded merchant reach to 10 African countries with local payment methods
Increased transaction volume by supporting multiple payment methods
75% increase in successful transaction completions for mobile money payments
60% reduction in merchant onboarding time
Expanded merchant reach to 10 African countries with local payment methods
Increased transaction volume by supporting multiple payment methods
75% increase in successful transaction completions for mobile money payments
60% reduction in merchant onboarding time
Key Learnings
Key Learnings
One major takeaway was that merchants place high value on transparency—having clear visibility into transaction details emerged as a top priority. On the user experience front, simplifying complex processes such as KYC by breaking them into smaller, more manageable steps led to higher completion rates. These learnings underscore the need for thoughtful design and ongoing user research when building scalable international payment systems.
One major takeaway was that merchants place high value on transparency—having clear visibility into transaction details emerged as a top priority. On the user experience front, simplifying complex processes such as KYC by breaking them into smaller, more manageable steps led to higher completion rates. These learnings underscore the need for thoughtful design and ongoing user research when building scalable international payment systems.