Payments
IOS & Android
The checkout rebuilt for 5M+ homes
Redesigning the payments experience. A new checkout flow, saved cards, and a transaction history that actually makes sense. Shipped at 1M+ transactions a month.
Role
Product Designer
Platform
iOS & Android
Status
Live
Year
2026
CONTEXT
why checkout mattered
Mygate is a community management platform that helps gated societies manage security, visitor access, payments, and daily operations from a single app.
While payments appear across many parts of the product, they ultimately flow through a single checkout experience. This made checkout one of the highest leverage surfaces in the platform, where even small improvements could have a meaningful impact on both users and the business.
The business wanted to grow card transactions, while users consistently reported fee confusion and payment friction.
5M+
Active Households on the platform
1M+
Transactions processed every month
55–60%
of payments NPS feedback flagged fee confusion
3
PG partners the checkout had to work across
Fees you could barely notice
The amount updated when users switched methods, but it sat in a small corner of the screen. People felt the price change at the last second without understanding why. This was the single biggest driver of negative payments feedback.
A flat, undifferentiated list
Every payment method sat in one long list with no hierarchy. Nothing guided the user, and cards, the method we wanted to grow, were buried among everything else.
Redirected out of the app
Selecting a method pushed users to a third-party gateway page. The experience broke the moment it mattered most, and there was no way to save a card or retry a failed payment in flow.
No room to grow
Saved cards, unified post-payment states, and new payment surfaces were all on the roadmap. The existing checkout could not support any of them.
in their own words…
The decisions behind this checkout were not assumptions. The same problems kept surfacing in payments support, month after month. Reading through a batch of these tickets, residents described the exact friction the redesign set out to remove, often more bluntly than any research summary could.
Adapted from real customer support tickets. Personal information has been modified
GOALS
what we set out to do
Three clear goals shaped the redesign from the start. Not all of them were equally visible to users. All of them mattered to the product.
"Why do fees feel like a surprise right before paying?"
"How do we increase card transaction volume to grow revenue?
"Can one checkout serve every payment surface in the app?"
Reduce payment drop-off and NPS complaints around fees
Make what users are paying completely clear before they confirm. No pricing table, no cognitive load.
Introduce saved cards to grow card transaction volume
Card payments carry better margins than UPI. Saved cards lower the barrier. At 1M+ transactions a month, even a shift in method distribution compounds fast.
Build a checkout that could scale across the whole app
Society dues, amenity bookings, utility bills, BBPS. One unified checkout for every payment surface.
APPROACH
key product decisions
Before designing screens, I worked through the decisions that would shape the whole experience. A few mattered more than the rest, and each one came with a tradeoff.
01
Fees should appear when they become relevant
Showing every fee upfront solved transparency, but risked turning checkout into a pricing table.
02
The hierarchy should reflect the business goal
One objective was increasing card transactions. I wanted the layout itself to encourage the behaviour by making saved cards the easier path.
03
Users should enter a card, not choose a card type
Asking users to classify their card added an unnecessary decision. I wanted a single entry point and let the system handle the rest.
04
Card saving should be earned, not assumed
Saving a card requires trust. I wanted to explain the value and safeguards before asking for consent.
THE NEW CHECKOUT
the complete
payment journey
The redesigned checkout owns the full payment journey inside Mygate. Saved cards are surfaced as the primary path, while the amount header carries context throughout the flow. Payment methods are organised into categories, making the experience easier to scan and navigate.
First time users are prompted to add a card for faster repeat payments.
Saved cards become the primary path for returning users.
Card selected. Amount updated and payment action stay visible together.
All payment methods, organised and easy to browse.
Card authentication happens within the app. No gateway redirects.
A complete post payment experience, not just a success message.
THE FEE MOMENT
no surprise at the
last step
The fee used to sit quietly in a corner and change without warning. Now it appears the moment a method is selected, in plain words, while there is still time to decide.
Why this matters. Fee confusion was the most common payments complaint. This is the screen that answers it.
HIERARCHY
your card, first in line
Saved cards sit above every other method. The fastest way to pay is also the first thing you see, which is how the screen carries the business goal without ever pushing.
The decision. Growing card payments was the goal. Rather than a banner or a nudge, the layout itself makes cards the obvious choice.
ONE ENTRY POINT
one field for every card
Credit or debit, Visa or Amex, every card starts in the same field. The type is detected as the number is typed, so no one has to sort their own card before they can pay.
Why this matters. Residents kept hitting card options that were shown, then failed. One validated entry removes the dead ends.
CARD VISUAL SYSTEM
designed for instant recognition
Saved cards are only useful if users can identify them quickly. Rather than creating bespoke designs for every issuer, I looked at card distribution across the platform and found that Tier 1 and Tier 2 banks accounted for approximately 92% of cards used in Mygate.
These issuers received distinct visual identities, while the remaining banks fell back to a generic template. The result was a system that improved recognition for the vast majority of users while remaining scalable to maintain and extend.
POST-PAYMENT
the moment after
Most payment journeys do not end in success. Pending, failed, and cancelled states were redesigned with the same care as successful transactions, giving users clarity, support, and a clear path forward.
TRANSACTION HISTORY
from transaction logs
to payment history
Alongside the checkout redesign, payment history received a series of hygiene improvements. Transactions now surface meaningful context, visible status indicators, and filtering, making it easier to scan, understand, and find past payments.
BEFORE
Every transaction appeared as "Online Payment" regardless of context.
AFTER
Payment purpose, status, and filters are visible at a glance.
OUTCOME
pilot rollout
The redesigned checkout was first rolled out across 100 societies before a wider launch. To understand its impact, we compared payment behaviour in these societies before and after rollout, tracking a set of metrics tied to both user and business outcomes.
14%
Payment Drop Off Rate
Fewer residents abandoned payments mid flow, particularly during card transactions where external redirects had previously introduced friction.
12%
Card Transaction Share
Saved cards, in app authentication, and a more prominent card experience led to greater adoption of card payments across pilot societies.
11%
Transaction Success Rate
Clearer fee visibility, improved payment flows, and stronger recovery paths contributed to more successful payment completions.
reflections & learnings
The most impactful design decisions came from changing the system, not the screens.
Understanding why the existing solution existed was critical to designing a better one.
Fee transparency was a problem of timing, not information density.
The best business outcomes came from reducing friction and building trust, not adding persuasion.