BACK
Growth & Revenue / Checkout
📝 MINI CASE STUDY

The Final Click: Transforming upGrad’s Checkout into a Self-Serve E-Commerce Engine

The bottom of the funnel is where user intent collides with friction. For high-ticket educational products—where users are investing lakhs of rupees—that friction is amplified by financial anxiety.

Project hero image
Flexible, self-serve payments for every program with enhanced add-on and international support.

My objective was to completely deconstruct and rebuild upGrad’s payment flow. The goal was to replace an administrative, human-dependent legacy system with an intuitive, self-serve e-commerce checkout experience across all platforms.

The Baseline: Diagnosing a 70% Drop-off

To fix the funnel, we first had to understand where it was breaking. A deep dive into the analytics revealed a brutal reality:

53% Drop-off from application shortlisting to the payment page.
70% Users dropped out between starting a payment and completing it.
31% Abandoned their cart specifically because of the broken structure.

An audit of the legacy UI made the problem obvious. The checkout felt like a bureaucratic form, not a modern consumer experience. Personal information and billing addresses took visual precedence, pushing the actual payment methods and cost breakdowns to the absolute bottom of the scroll.

Payment types were confusing, and users lacked clarity on exactly how much they were required to pay today versus later.

pain point image 1
Personal information and billing addresses taking visual precedence over payment methods, causing user anxiety and confusion
pain point image 2
Payment methods and cost breakdowns pushed to the absolute bottom of the scroll, causing confusion and drop-offs

The Strategy: Designing for Financial Personas

We couldn't just redesign the UI; we had to redesign the decision-making process. I identified three distinct user personas based on their financial realities:

🧗
The Upskiller Eager to learn, but cannot pay the full amount upfront.
Needs: Easy EMI
🎯
The Brand Believer High intent, wants to start immediately, has better financial bandwidth.
Needs: No Cost EMI
The Scarcity Shopper Needs to secure their spot quickly but wants to figure out financing later.
Needs: Reserve a Seat
user personas image
We identified 3 personas which helped us build the desired user experience.

I restructured the entire Ideal User Flow (IUF) to accommodate these realities: Payments Landing → Payment Options (Affordability) → Payment Methods → Summary → Success.

user flow image
The Ideal User Flow
early wireframe image
Some early wireframes to validate the concept

The Execution: A Consumer-First Checkout

The New Payments Flow

1.Intent-Based Categorization & FOMO

Instead of overwhelming users with a massive list of banks, I categorized payment options by user intent. The UI featured clear, distinct tabs:

⭐ Recommended (0% Interest)
📉 Pocket-Friendly (Lowest cost per month)
🔥 Filling Up Fast (Seat Reservation)
user flow image
Easy Payment Options

We paired the "Reserve a Seat" option with a subtle post-application nudge ("Only 25 seats remaining") to ethically manufacture urgency and drive immediate micro-conversions.

user flow image
A post-application FOMO nudge can reduce drop-offs.

2.Giving Control Back: The Downpayment Slider

One of the most significant points of friction in high-ticket EMIs is the inflexibility of terms. I introduced a dynamic downpayment slider. Users could literally drag a slider to choose their upfront payment amount, which instantly updated their subsequent EMI balances. This transferred financial control from the system back to the user, drastically reducing payment anxiety.

user flow image
Adjust your down payment and EMI in real-time with our new interactive slider.

3.E-commerce Dynamics: Cart Views & Hardware Upsells

Education is an investment, but it shouldn't feel devoid of modern shopping conveniences. For specific degree programs, I designed a seamless "Add-on" flow allowing learners to bundle assets (like a laptop or internet dongle) directly into their program payment. A quick, slide-up "Cart View" allowed users to verify exactly what they were paying for before proceeding.

user flow image
Verify your cart contents and total before proceeding.

4.Radical Transparency & Instant Gratification

Hidden fees kill trust. The new checkout featured a highly structured, persistent Summary Card. It explicitly detailed the course fee, referral discounts, downpayments, interest charges, and the final EMI breakdown.

Finally, the success state was redesigned. Instead of a generic "Thank you for your payment" dead-end, the success screen instantly dropped them into their cohort: "You can start learning! Go to My Course →".

pain point image 1
Our structured checkout clearly calls out all payment factors and selected options upfront, giving learners a seamless preview of their course as soon as payment is complete.
pain point image 2
Mobile summary view

Reflections

"Checkout design is not just about routing money; it is about managing cognitive load and financial anxiety at the exact moment a user is most vulnerable."

By shifting the paradigm from a "Billing Form" to a "Guided E-commerce Checkout," this redesign proved that even high-ticket, complex educational purchases can be completely self-served when you prioritize clarity, flexibility, and transparency.

user flow image

Keep Exploring

Previous Project
Part 02
📝 MINI CASE STUDY

Referrals

Next Project
Next Project

Website Redesign

BorderPlus

Home Work case studies About More about Pankhil Lab Digital garden Writing Shower thoughts, really! Contact Let's chat