Checkout in two steps, not six

The research team identified several issues on SNAP — the checkout popup merchants embed to take payments — that were potentially leading to a large drop-off in transaction completion: inefficient payment steps, unclear instructions and technical errors.

The brief was clear: create a credit-card checkout that is quick and easy with no more than the necessary steps, keep information crisp and scannable, and make the experience sleek enough that merchants proudly integrate Snap with their site.

• It took users 5–6 steps to complete a payment where competitors closed the task in two.
• The popup had little to no merchant branding — users didn't relate it to the site they were buying from.
• The look and feel was dated, making merchants reluctant to add it to their websites.
• Removing a saved card wasn't easy, and promos and offers weren't clearly stated.

We started with competitive analysis — Midtrans, Xendit, Adyen and others — to map the baseline flow the market expected. Then we got to know users' preferred payment methods through interviews and Mixpanel data.

• Paying by credit card felt cumbersome compared with the alternatives.
• GoPay was quick and easy — the bar everything else was measured against.
• Bank-transfer instructions weren't clear, leaving users stuck mid-flow.
• There was no success page — users never got confirmation they'd paid.
• The UI was old and ineffective.

We framed the target plainly: enable a frictionless and state-of-the-art experience, powered by product innovation, that reinforces merchant trust and reliability in our products.

Among multiple nested problems we chose a priority: focus on adding merchant branding, saved cards, and a minimal, sleek design.

I explored two layout hypotheses and tested the trade-offs:

• Hypothesis 1 — a clean, minimal popup showing only the important info. Easy to scale and maintain.
• Hypothesis 2 — surface the order ID and details so users can quickly scan and close rather than expand and scroll. Looks innovative and still easy to scale.

I tested the concept and wireframes with eight users, watching where they hesitated and refining the wording and hierarchy off the back of it — clean design, much clearer instructions for bank transfer and the Permanent Payment Code, and saved cards layered into the credit-card flow.

The final pass layered in the refinements that mattered most:

• Added a saved-cards flow inside the credit-card option.
• A real success screen with the order ID, so users always know the payment went through.
• Made EMI selection easy and quick.

Snap turned a multi-step, unbranded popup into a quick, branded and trustworthy checkout — closing the gap with the best in market, giving merchants something they're proud to embed, and pointing every decision at one number: completed transactions. Shaped by competitive research, Mixpanel data and validated through testing with eight users. The payoff: checkout conversion climbed from 15% to 70% across three phases.

• 15% → 70% checkout conversion — 15% at baseline, up to 35% in phase one, and 70% by phase three.
• GoPay one-click payment — integrated in phase two; the lever that drove conversion from 35% to 70%.
• 6 → 2 steps to pay — brought in line with the best in market.
• 8 users tested — concepts and wireframes validated before build.