Petty cash payments made easy for businesses
Designing a seamless Scan and Pay experience for RazorpayX users
CONTEXT
RazorpayX is a neo-banking platform that offers banking and financial services to business owners and finance teams. At RazorpayX, we are solving for a no hassle finances and get more more time to grow businesses or build a better product.
In this case study, I have described my process of designing a “scan and pay” feature of RazorpayX. The Scan and Pay feature enables users to initiate payments towards merchants by simply scanning the merchant's QR code using their mobile devices.
ROLE
Product Design Intern
DURATION
1 month
SCOPE
Discovery, user research, design, testing
TOOLS
Hotjar, marvin, figma
INTRODUCTION
To understand the effect of adding a new feature like scan and pay to razorpayx ecosystem we will need ti understanding what a payout is? So let’s dive in!
What is a payout?
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
UNDERSTANDING THE PROBLEM SPACE
While owners/founders do pay all the company expenses from their current accounts, they have few ways for micropayments like paying offline merchants for cab payment, petrol charges, buying stationery, office items from their current accounts on razorpayX.
WE HAD SEEN BUSINESS OWNERS/ FOUNDERS HACKING THE SYSTEM
BUSINESS OPPOERTUNITY
Key business metrics focused to be improved from a mobile app perspective through scan and pay feature -
Increasing the number of payouts created from the mobile app :
We expect that scan and pay being an additional source of payout will expand the ways in which payouts can be done through the mobile x app
Compete for the startup cohort : In mobile app competitors, our competitors in the startup segment are not only banks but also UPI apps such as GooglePay, PayTM. With Scan and Pay, we will have the option to compete for the startup cohort.
Differentiation for current account :
Banks do not have Scan QR code functionality for all current accounts. An only sole proprietor who has a debit card can do Scan and pay. Even these business categories are not fully aware of this functionality in the bank app since enabling mobile banking requires a lot of paperwork in banks.
OKAY? BUT HOW DID WE GET HERE?
We noted down everything that we could gather from support tickets, research interviews, by looking at the data and observing things and keeping in mind the company wide OKRs :
Currently RazorpayX is working on two major business pillars : -
1. Scaling payout businesses
2. Becoming a business banking hub (Neobank)
For payout product, there were 3 target areas identified that were needed to focus upon
1. Incredibly simple experience to manage money movement : Provide best in class experience for integration, go live and post go live experience for a merchant on payouts
2. Reliability : RazorpayX payouts should be the most reliable platform for money movement and provide best in class success rate, processing time, uptime for our suite of payouts products and proactive handling of bank issues
3. Category level deep solution : As we ngo deeper into verticals, requirements vary for each vertical, for this to happen we need to have strong footing in each vertical. This focuses on building features that are relevant for specific verticals only.
One of the key payment levers is : Coverage
And we will be focusing the UPI vertical
THE NEEDS
The first step in designing the new scan and pay feature is to understand the needs and expectations of the users. To gather this information, we conducted user interviews and surveys. Based on the feedback received, we identified the following user needs:
1. Convenience: Users want a payment method that is quick and easy to use.
2. Security: Users want to feel confident that their financial information is secure.
3. Reliability: Users want a payment method that is reliable and does not have technical issues.
Based on these user needs, we developed a set of design principles to guide our design process. These principles include:
1. Simplicity: Require minimal cognitive load. Make payments feel quick and easy.
2. Security: The design should prioritize the security of users' financial information. Give people the right amount of information at the right time.
3. Reliability: The design should be reliable and free from technical issues. Help people feel in control of their payment experience.
PUSHING OUT FOR CLARITY : DIVE AND RESEARCH
With the goal of standardising a basis of knowledge for both team and myself, as part of my diving phase, my first task was to research the following
Online sruvey for user behaviour understanding
Distribution on dashboard
Analysing on hotjar
Remote in depth interviews
Script and questions definition
Execution on marvin
Competitive Landscape
Covering UPI apps
The outcome of this process delivered a solid document with all the information relevant for both design and product team, a Journey Map and a Page structure.
SETTING OUT TO SOLVE : EXPLORATIONS
The first thing in the list was to create an easy way of discovering this new feature.
DISCOVER
User should be able to know that a new way of payout exists through which they can make instant payouts scanning QR code.
”As a user i want to know if any new way of payout has come so that i can try it”
Discoverability becomes a more significant challenge in the mobile environment because of limitations on screen real estate. The key elements to take action should be well presented for good discoverability of a new feature. So I started looking into how our users can discover this new scan and pay feature with ease in the current UI and what would be the ideal positioning of it.
One of the discoverable controls in UI design patterns are action bars so that lead to the first option
In the current UI of razorpayX app there were only two groupings of similar features (payouts and contacts in your apps list) and elements present in bottom menu so that led to option 2 and 3
Option 2 : Adding a circular tile of scan and pay in your apps list.
Option 3 : Merging scan and pay with +payout in bottom nav
Option 3 might add some friction to the payout flows as even if one way of payout (payment link or scan and pay) is used than the other ,the user will always need to go through a selection process.
So our winner here was option 2
The scan and pay icon was replaced by the end of these iterations so it has been updated in the coming designs
Positioning within the your apps list
Within option 2 there were further decisions to make like at which order this new circular tile should be added
This was our first discovery point for scan and pay. For a consistent and reliable experience throughout the razorpayX app there are two other discovery points to be considered here.
SCANNING
As Scan & Pay is an instant payout mechanism, these types of payouts have to be skipped from the workflow by default
What is a workflow?
You can create custom workflows for creation and approval, allowing you to scrutinize your payouts and reduce human errors.
There are no pre-set workflows that you need to follow.
You can set up the Approval Workflow matrix so that a payout created by a role needs to be approved by up to two different roles before it is sent for processing.
Approval Workflow can be applied to all payouts created on RazorpayX
We decided to give an option to skip or not skip the workflow
Option 1
We made an assumption that people would be interested in having total control of their payout experience (i.e being able to disable their workflow.
Option 2
Option 2 was the most minimal solution from current state but it seems to add unnecessary cognitive load if users do want the workflow enabled
Tradeoffs
After weighing the tradeoffs against the design principles, we ultimately decided to move forward with “workflow option 1”
1. “Option 2” made the payout experience feel too heavy if users do want the workflow. Option 1 was better at keeping the payout experience feel quick, but it still added unnecessary cognitive load to the experience.
2. As with most projects, we had technical and time constraints. Given the constraints, we decided option 1 was the most appropriate MVP
So our winner here was option 1
Prerequisite : On tapping the scan & pay tile, camera access has to be given if not given before
Final Version : Key Interactions
In the following sections, I’ve broken down the key actions and respective edge cases refined after gathering feedback of end to end flows in demo hours.
Key interactions :-
1. QR Scanning
2. Input amount
3. OTP Verification
4. Completion
5. Post transfer
QR SCANNING
User stories
“As a user i want to know what kind of QR codes I am compatible with”
“As a user i want to be able to scan the QR code in low lighting”
Edge Cases
Ability to enter UPI ID in case of failure / QR not present.
Scan failure due to shake (solved with haptics)
Scan failure due to faulty QR ( retry)
INPUT AMOUNT
User stories “As a user i want to know if i am transferring the amount to correct contact name and UPI ID or not so that the payout is not done to the wrong vendor” “As a user i want to be able to input the amount i want to transfer”
Edge Cases Amount to be restricted as workflow will be disabled. Name associated with UPI ID to be added as a new contact. Payout purpose to set to “Scan&Pay” (default). Description entered by users to follow as narration.
OTP Verification
2FA enabled - via mobile OTP
Option 1 : OTP as 2FA This setup is same as other existing payout setups in which we wait for OTP to complete the transaction. The OTP get auto-filled
Option 2 : MPIN as 2FA This is similar to UPI apps payout. In this user set’s up a PIN and using that at the last step before payout.
Option 3 : Skip 2FA for Scan & Pay payouts Skip 2FA for Scan & Pay payouts until a certain amount, sayRs. 2000. Beyond this, use OTP only for 2FA
Although it goes against We had some time to reflect on this from product side. Though choosing option 1 might need to friction but friction isn’t always a bad thing for a user, especially when it involves money. In other words, if more friction mean that a task takes longer to complete, but the user’s security isn’t compromised. So we went with option 1
COMPLETION
FEEDBACK LOOP : Incorporating motion for feedback
When users take action specifically related to money, there should be feedback to communicate what happened. We tried to do this with appropriate micro-animations for if it’s a success, pending or failure status.
MENTAL MODELS : Users have a preconceived opinion of how things work
Users tended to appreciate when more details regarding a specific transaction were presented such as payment method, sender and recipient details, status etc. Here we tried to migrate the usual UPI apps model which is migrated from physical payment experiences.
POST TRANSFER
User’s transaction list updates after every payout in payout list view
OUTCOME
This was a really exciting and fun project for me to work on as it provides real value, involved a ton of research, and detailed interaction work
I got the chance to take ownership and designed “Scan & Pay” feature for razorpayX app. I got to conduct user interviews which helped me gain real-world experience of communicating with users.
I led daily project meetings with my project mentor, manager, other designers, and developers for their inputs and reviews, which helped me make better decisions.