Payment interfaces - widget & hosted page

Indhuja Kesavan

UX Designer
Product Designer
UI Designer
Figma
Miro
Mondu
Checkout widget and Hosted checkout page for B2B BNPL
Hosted checkout page layouts
Hosted checkout page layouts

Payment Widget

The Mondu BNPL checkout flow is a modal triggered inside the Merchant/Seller's website. The buyer goes through a flow where they provide more information about them and their business. After a credit/risk check, the order is successfully placed.
Widget triggered in a modal on Merchant's checkout
Widget triggered in a modal on Merchant's checkout
Various widget screens
Various widget screens
The widget being the primary offering of Mondu, was always analysed and improved by the Payments team. Along with the researcher and product manager, I created many valuable improvements to the widget over time to improve user experience and in turn, enable a smooth payment process for buyers paying with Mondu.
Eg. Scroll shadow and Exit survey
Eg. Scroll shadow and Exit survey

Hosted Checkout Page

Similar to Klarna's Hosted Payment Page, Mondu's Hosted Checkout Page was introduced to provide an even more personalized payment experience.
Mondu's Hosted Checkout Page
Mondu's Hosted Checkout Page
Unlike the widget, the Hosted Checkout Page loads in a new tab. It uses components from the widget in case of information required from the buyer. For this, we reused components from Mondu's checkout widget while making a few required changes to the modal's design - like removing the logo, for example.
Modal on the Hosted Checkout Page
Modal on the Hosted Checkout Page
Hosted Checkout's modals
Hosted Checkout's modals

Mobile layouts

The Hosted Checkout page is also very mobile-friendly and it works much better than the widget on smaller screens. The team also constantly monitors the usage, time spent, etc. via PostHog recordings.
Hosted Checkout on Mobile
Hosted Checkout on Mobile

Explorations

Apart from monitoring the payment integration interfaces I also worked on some explorations that allowed for more space and better structure. Below is one example mimicking Klarna's payment modal.
Exploration - Mondu's payment modal
Exploration - Mondu's payment modal
Partner With Indhuja
View Services

More Projects by Indhuja