Launching the Buyer Portal

Company logo

Building a webapp for order & payment management

B2B0 → 1ProjectsDashboardMultilingualWeb/Mobile

Team

Dashboard Team

3 Devs + 1 PM + 1 Designer

Role

Senior Product Designer

Status

Live

Shipped in

2023

Overview

Mondu is Europe's leading B2B Buy Now Pay Later (BNPL) payments platform for sellers & buyers. Upon integeration, businesses will be able to offer Buy Now Pay Later options to its customers via their website.
Mondu was embeddable as a payment option on the checkout page of the business and upon selection, customers were taken to either of Mondu's payment interfaces - The Widget or The Hosted Checkout.
And once the purchase is made, the business customer or the buyer will be able to manage their orders paid for via Mondu - using the Buyer Portal.

Situation

Mondu's payment infrastructure initially consisted of the payment widget. With more and more business customers signing up for Mondu, there was a need to branch out into more offerings, which gave way to the Hosted Checkout page.
With the Hosted Checkout's screen space and with the Buyer's business, payment and order details, there's a lot of scope to tie the business cutomer into Mondu's ecosystem and that's exactly what we did with the Buyer Portal.
The Buyer Portal was one place the business buyer can create his profile, verify and update his company's KYC, so for the next purchase Mondu has everything pre-filled already on its payment interfaces.
00
Buyer Portal On Mobile

Orders

In order to launch the MVP, we prioritized the most important sections - Orders & Payments, followed by Account & Settings The layout of the buyer portal looks and works more like a B2C product, and initially it consisted of a clean layout with a clear list of orders and its details as metadata.
01
List of Orders
02
Order details
Initial actions for the MVP launch included the option to View payment details and Download invoice and any other documents available. And responsive mobile layouts looked like this:
03
Mobile screens - Orders + Details

Payments

After launching orders and interviewing buyers, we collected some actionable improvements for the orders page. While simultaneously working on the Payments environment, because that's what was the next most required function.
04
Payment List
Mondu offers 3 types of payment methods to "pay later" with. In Germany, the primary market, there are Invoice, SEPA Direct Debit and Installment options offered during checkout. Below are the proposed designs for each of the payment methods, as they are works in progress (as of Nov 2023).

Invoice payments

05
Invoice payment details

Installment payments

06
Installment payment details

SEPA payments

07
SEPA payment details
09
Mobile layouts

Explorations - Home Page

With the topic of purchasing power coming in, it was evident to explore options to show it on the homepage, because it shows the amount the buyer has remaining to make further purchases. One of the options is below with a simple dashboard-style homepage, taking up the entire width, and sending the navigation to the top of the screen.
11
Next iteration - Home page with repositioned navigation
11
Next iteration - Repositioned navigation (Order details)

Outcome

Launching the MVP of the Buyer Portal was a great success and we saw a few users flow in the first couple of weeks. With the interconnected ecosystem Mondu was building at the time, it was inevitable that the Portal was going to be needed by the business customers paying with Mondu.
Today, more details about the Buyer Portal can be found in this link: https://www.mondu.ai/business-buyers/