B2B SaaS Payment Automation for Marketeq Digital
Blend metrics is a web app where a team of devs can create applications without coding. When they exceeded their monthly quota, they were charged for overages. Most chose to pay manually, but many forgot to do so on time, leading to automatic downgrades and a poor user experience.
How might we increase trust in payment automationfor developers so that they can create applications without interruptions?
Who
What
Why
Solution
An automated payment system with more user control. My solution is an e-wallet with set limits and trigger alerts, so users can manage how much goes in and out, without losing peace of mind.
Project details
Role : UX Researcher and Designer
Team : 2 Project Managers, 4 Developers
Duration : 4 Months
Tools : Figma
Result
Achieved an NPS of 75%
15% more user retention is expected based on survey results

✦ sneak peek

When e-wallet balance falls below 100 dollars, 900 dollars will be transferred form the default payment method. This enables more controlled automation of payments.

✦ End-to-end

Product Roadmap

✦ Explanatory User research

The problem was known, so I started with interviews.

3 user interviews, 20 min each - remote, Semi-open questions

Trust issues

Mike: "What if they charge me more?"

Need for clear communication

Sarah: "Variable fee became like a hidden fee"

Lack of trust in auto-payments

because they weren’t notified about extra fees on time. They needed timely updates to avoid surprise charges.

✦ Competitive analysis

How does 30+ competitor provide more "Trust" in payments?

AHA moment!

Twilio have an auto-recharge feaure but with more control

When the balance falls below $10, the wallet will be recharged to $20.

This way, the balance never runs out, which makes it the best solution for automation with trust.

✦ Ideation

Defining success, collaborating with the PM

Fail, but fail fast.

Low fidelity was chosen for wireframes because speed of iteration and refinement was more important in a startup environment than fidelity.

Design system

Visual brand defenition

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

Usage

View overage usage, identify the top consumer responsible, and set a payment method for overages.

✦ Is the app easy to use?

Usability testing

3 Participants, 2 hours and 7 tasks per person
100% success
All users passed the test
94% easiness
Difficulty in sorting overage charge
94% Confidence
Confusion in understanding e-wallet

Making E-wallet and realted features more prominent

When automatic payment is turned on, the color used in usage disspears, indicating that there are no more limits.

Before

After

More emphasis on visual data

Sorting out what’s the monthly subscription charge and what’s the overage has never been easier!

Before

After

Easy overage charge filtering

Sorting out what’s the monthly subscription charge and what’s the overage has never been easier!

Before

After

✦ Learnings

Takeaways
Adhering to the cleint requirement, I used an open-source design system -  Untitled UI for a faster hand-over.
Client loved e-wallet, because if users abandoned the app for some reason, they get to keep that money.
Next steps
I take user retention very seriously. So I proposed a cold email saying "hey you have some money in your wallet"
A/B test the use of onboarding tutorial. Will that help in faster user aquisition is what I will be testing.