What’s smallcase?
What’s smallcase?
What’s smallcase?
smallcase is an all-in-one financial app that offers portfolios of stocks, fixed deposits & mutual funds to help people build a stable portfolio and grow their money.
smallcase is an all-in-one financial app that offers portfolios of stocks, fixed deposits & mutual funds to help people build a stable portfolio and grow their money.
smallcase is an all-in-one financial app that offers portfolios of stocks, fixed deposits & mutual funds to help people build a stable portfolio and grow their money.
Why did we need a new checkout?
Why did we need a new checkout?
Why did we need a new checkout?
As the company was expanding to newer products, we identified a need for a centralized payment flow.
As the company was expanding to newer products, we identified a need for a centralized payment flow.
As the company was expanding to newer products, we identified a need for a centralized payment flow.
Before
Subscriptions
Subscriptions
Loan repayments
Loan repayments
Investments
Investments
Payment flow 1
Payment flow 1
Payment flow 2
Payment flow 2
Payment flow 3
Payment flow 3
After
Centralized
payment flow
Subscriptions
Loan repayments
Investments
After
Centralized
payment flow
Subscriptions
Loan repayments
Investments
After
Centralized
payment flow
Subscriptions
Loan repayments
Investments
So, I made
So, I made
smallcase Checkout
smallcase Checkout
A customizable payment experience that can be used everywhere on the app!
A customizable payment experience that can be used everywhere on the app!
So, I made
smallcase Checkout
A customizable payment experience that can be used everywhere on the app!
Payment summary tailored to the product you are paying for
Payment summary tailored to the product you are paying for
Payment summary tailored to the product you are paying for
Transparency of how recurring payments are debited
Transparency of how recurring payments are debited
Transparency of how recurring payments are debited
Faster checkout with saved payment methods
Faster checkout with saved payment methods
Faster checkout with saved payment methods
Identifying users’ pain points
Through a study of customer support queries, I found 2 major problems to solve in the payment page...
Reusing payment methods across the app was not possible, increasing average checkout times.
Reported by 120+ CX tickets
Where’s the card
I saved last time?
🤔
What does
“Autopay” mean?
Didn’t I have a
₹500 offer on this?
😟
People did not understand how recurring payments for subscription plans worked.
Reported by 250+ CX tickets
Creating product-based customizability
I started by designing the payment summary section with our largest use case in mind – subscriptions.
Final design
Version 1
Version 2
Version 3
What you’re paying for
Simplified by collapsing details and only showing the final amount.
Entire payment breakdown visible on expanding
As amounts were not always calculated the same way, I scaled this to have 2 variants that can cater to all payment cases.
While some use cases have conditional rationale attached to the pricing, others have a more arithmetic breakup. To cater to this, I came up with 2 variants of the component:
List format
When the breakdown is conditional, requires more textual information.
Table format
When the amount is calculated based on addition or subtraction of components.
D = (For product A, plan amount for B) - C
D = A+B+C
Designing for smoother recurring transactions
Indian guidelines require you to set a limit on auto-debits to avoid overcharges. But, this caused confusion for users with one-time offers.
🤩
“Oh wow, a ₹500 discount!”
😰
“Wait what?! Where did
the discount go?”
😮💨
“Oh okay, they only charged ₹1000”
🙂
“I’ll go for the ₹1500 plan”
31% users dropped off here
To better communicate this, I included an information bar on the payment page that is transparent about how future debits would occur.
By giving this information it’s own space, we can call out the mismatch before it causes any confusion later.
Final design
Initial ideas
Explanation of how the user will be charged over time and thus, the limit of the autopay.
Thinking of the returning user experience
I created a section that shows users their top saved methods based on relevance for faster payment.
Card layout adds emphasis on these methods through color and size.
If you save more than 2 methods, the lesser relevant ones are shown as part of their categories.
Iterating on payment flows
Upon pilot testing initial designs, we found 38% users clicked on one-click methods by mistake.
So, I added intentional friction to reduce the risk of error.
The person selecting the option gets to a second to review their selected option.
Outcomes
Outcomes
Outcomes
The new payment flow improved success rates with a better user experience.
The new payment flow improved success rates with a better user experience.
The new payment flow improved success rates with a better user experience.
21%
increase
21%
increase
21% increase
in payment conversions across the platform
in payment conversions across the platform
34% decrease
34% decrease
in CX tickets regarding offer not being applied at checkout
in CX tickets regarding offer not being applied at checkout
34% decrease
in CX tickets regarding offer not being applied at checkout
36% payments
36% payments
made using saved payment methods
made using saved payment methods
36% payments
made using saved payment methods