A. Cover.jpg

PAYMENTS ON WHATSAPP

ENABLING PAYMENTS ON WhatsApp Business

WhatsApp BizPay: Revolutionizing Payments with Razorpay for Merchants

 

📋 About

Whatsapp is partnering with Razorpay to offer Peer to Peer Merchant and Peer to Merchant payment solutions to Whatsapp business app users. 

📱Status

Project deprioritized as WA aimed to create a payment gateway marketplace within the app, rather than being coupled with 1 company.

🙋My Role & Team

1 Product Designer, 1 Illustrator, Collaborated with 3 PMs in different time zones along with the WA design team to create a new merchant payment solution for merchants to receive payment digitally

⏳Duration

6 Months of Designing

 

💸 Business Vision

Is to leverage the unique combination of chat and payments offered by WhatsApp Business Payments, capitalizing on its widespread adoption among clients. To provide a seamless integrated platform enabled with Razorpay for communication and financial transactions.

 

What is the Partnership Project all about?

`The objective of this design project is to collaborate with Razorpay and create a seamless P2PM (Peer to Peer Merchant) and P2M (Peer to Merchant) payment solution for Whatsapp business app users.

In the phase-1 launch, the focus is on P2PM payments, enabling merchants to accept up to 1 lakh rupees monthly via UPI using the Whatsapp business app (QR code or UPI links). The design scope encompasses both native flows within the Whatsapp business app and Razorpay-hosted web page flows, including onboarding, support tickets, report generation, and other relevant functionalities.

 

Project panned out in three major avenues

Onboarding •Payments and Transactions• Support flows

 

Onboarding Flow

I meticulously outlined the comprehensive onboarding flow, considering both the screen and system-level information that would occur on both WhatsApp (WA) and Razorpay's side. This mapping of the information architecture ensured a smooth and synchronized onboarding experience for users across both platforms

 

Guiding principles for Onboarding

2. Progressive Disclosure :

Simplifying user interactions by focusing the user's attention on the most important details first while revealing additional detail only as needed. As a result, the user focuses on the task at hand with as few distractions as possible.

  1. Conversational UX:

Asking questions in a conversational manner Keeping the experience conversational would not only help us engage with users better but will also break the monotony of the form-filling process. When overdone, it might take attention away from the data inputs required.

 

Designing for Error Scenarios

Our error scenarios are designed to have a "size matters" approach. The more severe the error, the larger the space it occupies, making sure it gets the attention it deserves. With a dash of contextual magic, these error messages ensure that users are fully informed about the situation on hand

 

White-labeling UI components

We've cleverly crafted and planned screen components in a way that they can effortlessly speak any brand language in the future with minimal tweaks. Here's a fun adaptation of the screen, infused with the WhatsApp (WA) branding style.

 

Payments and Transaction Flows

 

Card Design


The Card component is designed for maximum reusability across all listing pages, offering a flexible structure that allows for consistent utilization with minimal modifications.

 

Merchant Dispute Flow

 

Multiple Support Touch Points

 

The journey from designing the onboarding process to transaction flows, as well as support and care flows, was both thrilling and meticulous. It reinforced the significance of collaborating with multiple stakeholders within the team and investing efforts in refining even the smallest details, as they can have a profound impact on user adoption.

Key Lessons Learned:

  1. Prepare for the unexpected: Despite putting in dedicated hard work, it was unforeseen that the design project wouldn't go live. Sometimes, luck doesn't align in our favor or the business priorities shift.

  2. Design for all error scenarios: It is crucial to consider and design for various error scenarios, ensuring a seamless experience for users even in less favorable situations.

  3. Embrace iteration and improvement: Continuous iteration and improvement play a significant role in enhancing the overall user experience. Embrace feedback, learn from it, and incorporate necessary improvements to achieve optimal results.