WizCommerce
WizCommerce
WizCommerce
Design Leadership | Global B2B Commerce SaaS
Payment Solution for B2B Commerce
Payment Solution for B2B Commerce
Payment Solution for B2B Commerce
Payment Solution for B2B Commerce
Summary
B2B commerce involves complex, multi-step payment processes that demand complete flexibility in payment collection workflows. For a single invoice, users must be able to utilize various payment methods, such as credit/debit cards, credit points, offline payments, or POS terminals, while also having the option to split payments into multiple tranches. Additionally, invoices need to be centrally managed, accommodating multiple stakeholders with distinct permission levels for viewing and authorizing transactions. Key user pain points in existing implementations include:
Chaotic Invoice Management
Chaotic Invoice Management
Chaotic Invoice Management
Chaotic Invoice Management
Chaotic Invoice Management
Multiple Payment Records to Maintain
Multiple Payment Records to Maintain
Multiple Payment Records to Maintain
Multiple Payment Records to Maintain
Multiple Payment Records to Maintain
Lack of Transparency On Payments
Lack of Transparency On Payments
Lack of Transparency On Payments
Lack of Transparency On Payments
Lack of Transparency On Payments
Objective
Design a mobile-responsive payment interface optimized for seamless integration, to record & maintain GMV transactions, with multiple payment methods, including credit/debit cards, payment links, offline payment modes like - cash / cheques, and POS Terminals. The solution should support flexible payment collection, enabling features such as installment-based payments, split transactions, and partial payments. It must adhere to industry security standards and provide transparent transaction records to ensure user trust and reliability.
Design Process
Design Process
Design Process
Competitve benchmarking
Defining the user flow diagram
WizPay is one of the most crucial modules on the platform that is key for building trust among the users about the platform. A detailed user flow that shows all the possible modes of payment, covers all use cases, and error states was carefully recorded.
Key design principles
Prioritised clarity & transparency. Focused on keeping the visibility on system status at all times, ensuring that there is no loss of information while transitioning between screens.
Designing for scalability. The current solution was the first iteration, with limited features, with the scope to become more robust. hence, the designs were made in such a way, that any new feature would be annotated, rather than replace the existing designs
Having delightful & engaging experience was important, as successful payments were registered as the primary goal for the users. Hence having visually engaging screens offered a great way to complete an experience, adhering to the peak-end rule.
Invoice details
Invoice details
The top section of this screen is used to show dynamic details regarding an invoice against a confirmed order, that are of top most priority : The time sensitive validity, status and payment details
The top section of this screen is used to show dynamic details regarding an invoice against a confirmed order, that are of top most priority : The time sensitive validity, status and payment details
Since every invoice has payment history, they are shown in chronological order, along with mode of payment.
Since every invoice has payment history, they are shown in chronological order, along with mode of payment.
Primary action is to 'collect payment' against the invoice generated for the purchase order.
Primary action is to 'collect payment' against the invoice generated for the purchase order.
Flexible Payment Split
User's clients can select they amount they wish to pay in a single payment.
The remaining amount, along with the date till which it needs to be paid, are shown here, to provide complete visibility of the upcoming payments, so users can set their task, i.e, to collect the next payment, accordingly.
Edge cases are also handled here, by showing the error details below.
Payment Mode Selection
As the invoice amount can be split into multiple tranches, the payment modes could also change. Depending on the where the users and their buyers initiate a transaction, could be in showroom, or over email, the mode of payment might change accordingly.
The action bar at the bottom of the screen, would get updated based on the user's selection.
Success Screen
This success screen emphasizes on the collected amount, along with micro animated success screen, delighting the user.
Payment summary is shown with detailed breakdown, that retains the information, throughout the payment process
Focus is also now on the remaining amount that is to be collected, to close the invoice
Summary
B2B commerce consist of multi-step payments, and require complete flexibility over payment collection. Against a single invoice, users could choose different modes of payment (Cards, Credit Points, Offline or POS Machine) and also amount of payment could be split into multiple tranches. Additionally, invoices need to be centrally managed, accommodating multiple stakeholders with distinct permission levels for viewing and authorizing transactions.. Major pain points that users are facing, with existing implementations are as follows -
Objective
Design a mobile-responsive payment interface optimized for seamless integration, to record & maintain GMV transactions, with multiple payment methods, including credit/debit cards, payment links, offline payment modes like - cash / cheques, and POS Terminals. The solution should support flexible payment collection, enabling features such as installment-based payments, split transactions, and partial payments. It must adhere to industry security standards and provide transparent transaction records to ensure user trust and reliability.
The Delight Factor
The Delight Factor
The Delight Factor
The Delight Factor
Visually engaging screens that were tailor made for multiple mode of payments
Checkout the prototype for one of the payment modes
Order Confirmation Page
The top section of this screen is used to show dynamic details regarding an invoice against a confirmed order, that are of top most priority : The time sensitive validity, status and payment details
Since every order has supporting documents like invoices, multiple quotations, it is made available to users so they can access them quickly.
Primary action is to 'collect payment' against the invoice generated for the purchase order.
Flexible Payment Split
User's clients can select they amount they wish to pay in a single payment.
Edge cases are also handled here, by showing the error details below.
The remaining amount, along with the date till which it needs to be paid, are shown here, to provide complete visibility of the upcoming payments, so users can set their task, i.e, to collect the next payment, accordingly.
Payment Mode Selection
As the invoice amount can be split into multiple tranches, the payment modes could also change. Depending on the where the users and their buyers initiate a transaction, could be in showroom, or over email, the mode of payment might change accordingly.
The action bar at the bottom of the screen, would get updated based on the user's selection.
Also designed screens for intermediate states, like authorization getting processed, failed etc.
Success Screen
This success screen emphasizes on the collected amount, along with micro animated success screen, delighting the user.
Payment summary is shown with detailed breakdown, that retains the information, throughout the payment process
Focus is also now on the remaining amount that is to be collected, to close the invoice
Defining the user flow diagram
WizPay is one of the most crucial modules on the platform that is key for building trust among the users about the platform. A detailed user flow that shows all the possible modes of payment, the forward flows & error handling was carefully recorded as part of the user flow.
Key design decisions
Prioritised clarity & transparency. Focused on keeping the visibility on system status at all times, ensuring that there is no loss of information while transitioning between screens.
Designing for scalability. The current solution was the first iteration, with limited features, with the scope to become more robust. hence, the designs were made in such a way, that any new feature would be annotated, rather than replace the existing designs
Having delightful & engaging experience was important, as successful payments were registered as the primary goal for the users. Hence having visually engaging screens offered a great way to complete an experience, adhering to the peak-end rule.
Design Process
WizPay is one of the most crucial modules on the platform that is key for building trust among the users about the platform. A detailed user flow that shows all the possible modes of payment, covers all use cases, and error states was carefully recorded.
The Delight Factor
Visually engaging screens that were tailor made for multiple mode of payments
Checkout the prototype for one of the payment modes
Results & Impact
Results & Impact
7,898
7,898
7,898
No.of invoices managed and transaction data recorded in the first 6 months of implementation
$ 3.64 m
$ 3.64 m
$ 3.64 m
Value of transactions processed and authorised through payment modes on WizPay
Want to know more details about the project?
Want to know more details about the project?
Want to know more details about the project?
Happy to connect over a call or a cup of coffee :)
Say Hello!
Say Hello!
Say Hello!
Say Hello!
Marvelous Ms Designer