In this case study, I have described my process of designing a bunch payout feature of RazorpayX. Bunch payout is a that enables users to pay a group of 5–30 people in a seamless and hassle-free manner. This was the capstone project that I had worked on as a part of the 10k Designers Masterclass.
Making a bunch of Payouts using RazorpayX
RazorpayX is a neobank for companies to manage their financial operations. There’s a use case that requires companies to make payouts to merchants, vendors, payroll for employees, etc. Currently, there are two options:
Single Payout and Bulk Payout.
→ Single payout works great for transferring to one single entity.
→ Bulk payout involves uploading a CSV in a particular format and works great for hundreds or thousands of payouts at once.
However, there isn’t a good way to make a payout for the range of 5–20 payouts. Both existing solutions, Single and Bulk involve a lot of effort.
1. Familiar with computers and use software like Microsoft Office, Browsers, Bank websites.
2. Their tools often aren’t super user-friendly — link bank of govt websites. So they often are “trained” to execute such tasks. The goal of Razorpay’s products is to eliminate training.
3. Given it needs training, they are often apprehensive about trying out new things. New products could be intimidating.
4. They end up doing the same tasks repeatedly. Like there would be some person in the team who would be making payouts day in and day out. The flows should be optimized for such users.
5. A person interacting with such tools is always very cautious about doing things. A small mistake here could lead to major goof-ups or losses in money. Razorpay’s solutions should help people identify and reduce their mistakes.
RazorpayX is a neo-banking platform that helps business owners and finance teams automate the manual, repetitive financial task,s and provide insights into money flow.
Payout
A payout is made to a fund account associated with a contact. You are eligible to make payouts after sign up, account activation, and KYC verification.
A payout can be created in 3 simple steps:
1. Adding funds to the business account
2. Creating a contact and a fund account
3. Creating a payout
Types of Payouts
As of now, RazorpayX has two types of payouts:
→ Single Payout — Creating a payout and send it to a single user
→ Bulk Payout — Creating and sending payouts to a large number of users
How Payouts Work?
When a payout is created, this is the flow it follows:
When it comes to making payouts for a small group (5–30) of people, it becomes tedious by both of the existing methods. I analyzed both of the payout methods to understand the pain point better.
1. Single Payout
| Repetition is tedious
This method involves sending payout to one person at a time. For a large number of people, the user has to make individual payouts one by one which thereby reduces the speed and increases the chances of making an error.
2. Bulk Payout
| No one (or a very few) people maintain a well formatted file for a small group of people
This method involves uploading a CSV file that has all the necessary information about the people who will receive the payouts. Most users do not maintain a well-formatted file for a small group of 5–30 people.
| The required template of the CSV file
The file needs to be in a particular format in order to function properly. There is an existing template that needs to be followed for Bulk Payout to work.
A: 2 or 3 options?
2 because having 3 would confuse the existing users. Moreover having 3 options adds to the cognitive load. The user has to spend time and effort while choosing a particular option. (Hick’s Law)
B: Single or Bulk options?
After finalizing that there would be 2 options instead of 3, I had to decide where to place the Bunch Payout feature.
Upon conducting some basic research, insights suggested having the bunch payout feature in bulk because people prefer bulk when it is more than once contact. They refer to a single payout to making a payout to a single entity and not more than that.
1. There is a significant group of users who will benefit from this feature
2. Users make frequent payment to the same batches
1. Speed
→ Selecting multiple contacts at once
→ Having existing batches
→ Data entry in form of sheets fastens the payout process
2. Accuracy
→ Preview mode showing the important details of all the selected contacts
→ Options or choices would be unselected by default
→ Data entry in form of sheets reduces errors
→ The sheet would be non-editable after upload
3. Security
→ The sheet would be non-editable after upload
→ Single OTP for all the whole batch showing the number of selected contacts
→ Higher authority approval needed when the payout amount is greater than the threshold payout amount
I ideated on what minimum placeholders should be present in order to carry out a successful payout. The minimum information needed were the following:
→ Serial Number
→ Name
→ Payout Amount
→ Bank Name
→ Bank Account Number
→ Purpose of Transaction
→ Transfer Method
→ Email ID
→ Phone Number
A user who is not familiar with MS Excel does not fall into the target user group. Considering it to be an extreme use case, I planned on adding a Help section in the payout flow to smoothen the process.
I planned on the user flow with the features and user pain points in mind.
With the user flow in mind, I built the site-map demonstrating the addition of the bunch payout feature in the RazorpayX’s payout.
Taking the features and user flow into account I built rough wireframes for the product.
After coming up with a few concepts, I designed the interfaces for the website following the design guidelines set by the brand.
This version of the design follows a 4-step process in order to make a bunch payout. After logging in, the user gets a notification about the new feature launch. The bunch payout feature is present inside the Bulk Payout. The 4-step process is as follows:
1. Select contacts and create a batch:
Select/add contacts, create and name a batch. There’s also an option to select existing batches to fasten the flow.
2. Enter payout amount:
Case 1 — If the payout amount is different for different contacts, the user has to enter the individual payout amount for all the users.
Case 2 — If the payout amount is the same for all contacts, the user has to enter one payout amount and select the option “same payout amount for all contacts”.
3. Preview the payout:
The user gets to preview the payout before finalizing and confirming the payout.
4. Confirm the payout:
The user gets the OTP and upon entering the OTP the payout is created.
Based on the feedback received, I iterated and came up with a solution that accounted for the missed use cases meanwhile improving the speed, accuracy, and security of the user using the application.
a. Onboarding
→ User logins through the usual login screen to access the RazorpayX Dashboard
→ After feature launch, there’s a one-time notification to make people aware of the new feature that has been added
b. Dashboard & Bulk Payout
→ The dashboard has the previous payout options — Single and Bulk
→ Bunch payout can be accessed from the Bulk Payout Page by clicking on “Upload Excel File” or “Enter Manually”
Case 1: The user has an excel sheet
c. Uploading the Excel sheet
→ The user uploads the excel sheet that has the necessary information in order to carry out the payout
d. Renaming the column headings
→ The user has to rename the column headings to the required names for easier and more organized data management
Case 2: The user does’nt have excel sheet
c. Selecting contacts and creating a batch
Possible Use Cases:
a. Send payout to a new group of contacts
b. Send payout to an existing group of contacts
→ The first step involves creating and selecting contacts and grouping them as a batch for easier faster transaction
→ Previously created batches are also present to avoid errors by eliminating the tedious process of selecting and creating batches every time
d. Creating Payout amounts
Possible Use Cases:
a. Send different payout amount to a group of contacts
b. Send the same payout amount to a group of contacts
→ The user enters the payout amount for the contacts in the respective cells
→ For entering the same amount for multiple contacts, the user can select multiple cells using keyboard controls and enter the payout amount
e. Payout Finalization
→ The third step involves previewing the information before finalizing the payout
→ The fourth step involves entering the OTP sent to the registered mobile number for a secured transaction
f. Result
→ Based on the outcome of the process, result screens will be displayed showing the payout status
→ Putting users first in the design approach instead of intuition
During the initial steps of the project, while brainstorming and ideating when I had to decide the placement of the feature it seemed a good option to merge it with ‘Single Payout’ but upon some research, it made more sense to add the feature in ‘Bulk Payout’.
→ Working with a well-established design system
Razorpay has a well-established design system, while working on the designs, I had to make sure that I followed the guidelines and created the designs accordingly. Deviating from the guidelines changed the design language of the screens and they didn’t match the brand.