Enhacing users trust in automatic payments in a B2B SaaS web app
✦ problem
Blend metrics used a usage-based billing model. Users were charged based on how much they used. If they exceeded their plan, they had to pay more. However, around 80% of users chose to pay overages manually. This manual process was easy to forget, and when users missed a payment, they were automatically downgraded to a free, limited version the following month. This not only hurt the user experience but also had a negative impact on the business.
How might we increase trust in payment automation for developers so that they can enjoy the immersive experience?
✦ solution
I introduced an automated payment system with more user control. The solution uses an e-wallet with set limits and trigger alerts, so users can manage how much goes in and out, without losing peace of mind.
✦ results
15% more user retention
expected based on projecitons
70% NPS score
from survey
MY ROLE
UX Researcher and Designer
TEAM
PM, Developers, Snr UX designer
focus
Design system, Responsive design
timeline
3 months
Tools
Figma, Adobe CC
MarketEQ Digital
Payment automation in B2B SaaS software
✦ sneak peek
E-wallet supporting a smoother usage-based billing model
Funds from the e-wallet will be used automatically to ensure uninterrupted service.
Automation but with more control
You can set a trigger amount and a recharge amount to automate the minimum balance in an e-wallet.
✦ HOW DID I GET THERE?
End-to-end product design roadmap
Explanatory research since the problem was known
✦ Explanatory User research
the problem was known, so I started with interviews.
User empathy with unbiased data
5 Insights and 2 main themes
Affinity mapping and clustering for insights and themes
trust issues
"What if if they charge me more?"
need for communication
Variable fee bacame a hidden fee
Flexibility required
Building trust takes time
✦ Competitive analysis
How does 30+ competitor provide more "Trust" in payments?
UX/UI audit of competitors to understand market beset practices for automatic payments in B2B platforms
AHA moment!
Twilio offers an e-wallet feature that allows users to withdraw funds from their account more quickly and conveniently based on their usage. Additionally, users have the option to set a minimum balance settings on the platform.
✦ Ideation
Defining success, collaborating with the PM
We defined the essential features that define success for the user. To ensure a balanced approach that considers both UX and budget feasibility, we utilized the Moscow Method to create the Phase 1 product features.
Fail, but fail fast.
Tested Internally with 2 team members.
Visual brand definition + Responsiveness + Accessibility
Developers and the client loved using untitled UI as the design system. It helped in saving time and money.
✦ FINAL DESIGN
Hi-Fi prototype in production
Automate Payments with E-wallet
Now usage charges are taken out of e-wallet for an uninterrupted services.
The client loved e-wallet Automation!
Admin can set a trigger amount and recharge amount to automatically top up their e-wallet.
The client loved this because
1. Happy users
2. Early payment
3. They get to keep the remaining unused money
Invoices
Easily filter between overage charges and other payments
Usage
View overage usage, identify the top consumer responsible, and set a payment method for overages.
Add new payment methods
Add/edit payment method sand set if as default
✦ Is the app easy to use?
Usability testing
making e-wallet featues more prominent
When automatic payment is turned on, the color used in usage disspears, indicating that there are no more limits.
Easy overage charge filtering
Sorting out what’s the monthly subscription charge and what’s the overage has never been easier!
More emphasis overage visual data
Visual call out of overage usage, without compromising information hierarchy.
✦ Learnings
Self Reflection
Takeaways
Next steps