Context
Users were actively using installment plans but running into a limitation — the interface didn't allow flexible repayment management. It was time to build a service that would give people more control over their payments while also benefiting the retailer.
The Task
Create a clear and intuitive tool that allows users to:
- Pay any amount — from the minimum payment to full repayment
- Immediately see which payments will be closed and how much they'll save on interest, where applicable
- Not get lost in a complex schedule if they have multiple installment plans with different terms
For the retailer, this feature addressed a strategic goal — accelerating the return of funds and improving liquidity, enabling more new installment plans to be issued.
About the Product
First, let's explain how the installment payment product works:
- A customer can receive a revolving credit limit — a credit line within which they can open and repay installment plans
- The customer has a grace period — 30 days to repay the full amount with no interest charged
- On day 31, the balance is split into 12 monthly installments, each with an interest charge added; the first monthly installment is also debited on that day
- A customer can have multiple installment plans, each with its own payment schedule and monthly dates; payments across all plans are merged into a single combined schedule and charged to the customer's card
Even if the user missed the grace period, they can still pay an arbitrary amount ahead of schedule and save on interest — but to do so, they must pay off one of the installment plans in full.
Why does the retailer want this? It might seem counterintuitive — why let users save on interest if it means less revenue? In reality, this approach improves the retailer's liquidity and returns money to circulation, allowing more new installment plans to be issued, which positively impacts the retailer's metrics.
Why do users want this? Many users take a mindful approach to installment repayment and, to avoid missing payments, are willing to make their upcoming payments in separate installments.
Preparing to Find a Solution
We started by analyzing user behavior: how often they made early payments, where they made mistakes, and which scenarios came up most frequently.
Combining this with a competitive benchmark and user interviews, we defined a set of interface principles:
- Add flexibility without breaking the familiar behavior pattern ("pay the next scheduled payment")
- Make the process as visual and manageable as possible
- Don't overwhelm the user with complex early repayment logic
Defining principles before starting work is a valuable practice — it helps resolve disagreements and guide decision-making later on.
The Solution
We began by analyzing user scenarios: what they do most often, where they get confused, and what amounts they're willing to pay. This informed our design — the interface needed to be flexible without disrupting the familiar logic of "I'm paying my next scheduled payment."
We defined the following principles for the interface:
- Any amount can be entered
- Don't complicate the flow for users who pay on schedule
- Clearly show how the payment schedule changes when an amount is entered
Payment entry was implemented as an input field with the next scheduled payment amount pre-filled. Users also see hints showing their upcoming payment amount and how much is needed to fully pay off all installment plans.
The screen also displays an interactive schedule where payments are proportionally "filled in" to visualize the repayment breakdown. If a payment isn't fully covered, the user sees the remaining amount due on that date.
We gave users the ability to enter a payment amount either by typing manually or by tapping tiles on the payment schedule. Since you can't pay a later payment without first covering earlier ones, tapping any tile automatically fills in all preceding payments as well.
If the user enters an amount that fully pays off one of the installment plans, the interest savings are displayed. We intentionally kept the interface simple here — there are separate buttons in the app dedicated to early repayment.
We also worked through edge cases. For example, if a user has overdue debt, that must be paid first before making upcoming scheduled payments. However, for special situations, we preserved the ability to pay less than the overdue amount — for instance, when a user wants to split the payment across multiple cards.
To avoid breaking the user's context, card selection was moved to a separate bottom sheet — the user can still see the amount they entered and their balance.
Additional Notes
Building quality fintech interfaces requires modeling all the underlying math so that amounts add up correctly everywhere. Only then can you properly work through edge cases and understand how a feature should behave. Fintech interface design rarely happens without a spreadsheet. In this project, we modeled various combinations of user debt states — single installment plan, multiple installment plans, plans in the grace period, and overdue debt.
Beyond the payment flow itself, we also designed all the screens in the app that the new feature could affect — such as the installment plan list, transaction history, notifications, and receipts.
Results
We delivered a service that users love and the retailer values:
- Users can see their schedule and understand how any payment amount affects their debt
- Early repayments increased, and with them — the retailer's turnover and liquidity
- The product became more transparent, and the customer experience became easier and more intuitive
