About the project

Kotak Payment Gateway powers over 40,000 merchants across industries, enabling them to accept secure digital payments from Kotak customers. It acts as a vital link between businesses and their customers, seamlessly integrating with websites and mobile apps to support transactions at scale.

But when the product team approached us to add a new EMI feature into the existing payment journey, it quickly became clear that the gateway needed more than just an addition. Beneath the request, we uncovered deeper issues: usability gaps, outdated patterns, and design inconsistencies across the flow. What should have been a smooth, trustworthy process for customers and merchants alike had instead turned into a source of friction.

Problem

Kotak’s payment gateway was built to support merchants, but over time, the experience had started to work against them. The old checkout flow was cluttered, confusing, and unnecessarily complex—making a critical moment of payment feel like a chore. Instead of guiding customers with confidence, it left many stuck in extra taps, vague copy, and unclear next steps.

Old user flow

Selecting a payment method forced users to deal with an accordion-style menu. Instead of quickly spotting their preferred option, they had to expand and collapse cards—adding an unnecessary extra tap right at the start.

After tapping on the “Secure Checkout” CTA, a 10-second countdown appeared to check whether the user had the Kotak banking app installed. This countdown created an unnecessary sense of urgency and often led to user drop-offs.

The account selection field was given top priority on the screen—even for users who only had a single account. This field felt redundant and pushed more relevant inputs, like remarks, further down the hierarchy. Since most users have only one account, it added friction rather than value.

The screens were cluttered with too much information, crowding out essentials. Instead of guiding users to complete a confident payment, the layout introduced hesitation and friction.

Research and insights

Through stakeholder discussions and competitor benchmarking, a few key patterns emerged that shaped the redesign:

Mobile banking was the clear winner

Data showed it was the most frequently chosen payment option, yet the old design buried it among multiple taps. Prioritising it upfront could speed up decisions significantly.

Trust signals matters

Merchants highlighted that customers often abandoned payments due to lack of clarity on who they were paying. Small cues like merchant name and logo could build instant confidence.

Consistency reduces drop-offs

The old payment flow looked and felt different from other Kotak payment experiences. Inconsistency broke trust. Aligning the gateway screens with Kotak’s wider design system would make the experience feel familiar and safe.

Streamlining payment method selection

User data showed that mobile banking was by far the most preferred payment option, yet in the old flow it was hidden behind unnecessary steps. To fix this, I placed it right at the top of the list, ensuring users could access it instantly. The accordion-style selection was removed to cut down extra taps, while the familiar card-based layout was retained for consistency with other Kotak experiences. To draw attention to the optimal choice, I added an animated FASTEST tag, guiding users toward quicker checkouts without overwhelming them. Kept the Kotak logo to the top of the screen, giving users a clear sense of entering a trusted environment

Guiding users through the wait

Post user selects mobile banking app as the payment method, the old flow left them staring at a redirection countdown timer without context causing stress instead of clarity. In the new design, I introduced a subtle animation that runs during the redirection to the Kotak Mobile Banking app.

This animation not only keeps users engaged during the brief 10-second wait, but also makes it clear what’s happening in the background. Paired with revised copy and gave high emphasis to it, the experience avoids uncertainty and builds reassurance, ensuring users feel guided rather than left hanging.

Confidence at the point of payment

At the moment of payment, users need one thing above all: confidence. To deliver this, I kept the design consistent with other Kotak payment screens so customers instantly recognised the familiar interface. I added the merchant’s logo and name at the top to reassure users they’re paying the right party a simple but powerful trust signal that directly reduces drop-offs.

To make the flow more intuitive, I replaced the manual remark field with a smarter, more relatable option: “Expense type.” Instead of typing freeform text, users could now choose from dynamic categories tailored to the merchant. For example, paying on Swiggy might show options like Food or Grocery vs Paying on Amazon might show Shopping or Bills. To preserve flexibility, an “Other” option was included for custom expense types.

These changes not only reduced friction but also made payments feel clearer, faster, and more personal giving users the confidence that every detail was in their control.

Easy EMI selection

Choosing an EMI plan can often feel overwhelming, with hidden costs and unclear terms discouraging users from opting in. My goal here was to make the process transparent, simple, and confidence-building. Each EMI option clearly displayed the monthly instalment, duration, total payable amount, and interest rate ensuring users understood the true cost of borrowing upfront. To make decision-making easier, I added a “Recommended” tag that nudged users toward the most balanced option without limiting flexibility.

Once a plan was selected, the original payment amount was struck through and the updated EMI amount highlighted, making the impact of their choice instantly visible. This subtle visual feedback reinforced transparency.