Skip to content
← Back to portfolio

Coupon partial redeem: designing every payment combination

Project release4 min read
Payment UXFintech UXState DesignCheckout

When one payment is really five

In a checkout, coupons are never a standalone feature. They appear next to wallet balance, PSP discounts, cashback and bonuses, and every combination has its own rules: is the wallet enough, can a coupon stack with a PSP discount, what shows when only one method is used. I mapped every if situation onto one combination board and confirmed each branch's screen and copy before detailing anything. That board is also the heart of partial redeem: one coupon can cover part of the total, with wallet or card paying the rest.

A dense flow board mapping every combination of payment, coupon, discount, cashback, bonus and wallet, with if-situation branches
The combination board: every if branch of payment plus coupon plus wallet, mapped before any screen was final.

Designing the available coupon sheet

The available coupon sheet has to answer a lot inside one small layer: which coupons do I have, which cannot apply to this order, what does the total become after adding one, what happens on a bad code. I designed the full state set: default, search, add, remove, error, partial and empty, plus a 320 pixel wide responsive version that keeps the list scrollable under an open keyboard. The lesson: the more complete the state design, the fewer engineering round trips, because every what-if already has an answer.

Available coupon sheet states: add and remove coupons, error, partial and empty states, plus a responsive 320 pixel version, brand names blurred
The available coupon sheet: add, remove, error, partial and empty states, and the same sheet compressed to a 320 pixel wide screen.