Cart Experience Redefined
Two screens. Several quiet reasons users were dropping off before paying.
GoMechanic
2 Months
February, 2024
UI UX Designer
Figma, Figjam, Phosphor Icons
Context
A cart screen that was quietly losing
GoMechanic's customers.
GoMechanic's cart screen was driving users away literally with cart abandonment nearing 70% and conversion rates running 20–30% lower than expected, it was clear the checkout experience needed help.
problems
Two screens. Several quiet reasons
users were dropping off before paying.
A close look at the existing cart and coupons screens surfaced problems that weren't just visual. They were behavioural.
01
No visual hierarchy in the Miles section
The actual amount saved through Miles Membership wasn't highlighted enough to grab attention. A genuine value proposition, buried in plain text.
02
Inconsistent, distorted service imagery
Service category images across the cart items list were distorted and overly colourful, with no consistency in visual treatment.
03
Coupons and payment offers, scattered and unclear
Discount codes, bank offers, UPI offers, and wallet cashback all lived without any clear structure, users couldn't tell what stacked with what, or what actually applied to their order.
04
All costs revealed too late
Users couldn't see a full cost breakdown until deep into the checkout flow, creating distrust right when confidence mattered most.
EMPATHY THROUGH RESEARCH
No time for a full research sprint.
Found the truth anyway.
Due to a tight deadline, a full user research cycle wasn't on the table. Instead, I gathered targeted feedback from GoMechanic's customer support team and from friends who'd used the app close enough to the real user base to surface honest pain points.
What users were actually saying:
Too much, too fast
"The checkout process feels cluttered, there's too much going on."
Lost in the noise
"I almost missed the CTA button, it blends in too much."
Value not visible
"I wasn't clear how Miles Membership benefits me."
Costs hidden till last
"I wish I could see all my costs upfront instead at the end."
How might we simplify cart navigation for
a seamless user experience?
How might we increase feature engagement
by improving visibility and clarity?
How might we showcase savings clearly
to enhance perceived value for users?
How might we make coupons and offers
feel rewarding instead of confusing?
How might we highlight checkout to reduce
abandonment and boost conversions?
REFRAMING THE PROBLEM
How might we statements
Complaints are just questions in disguise. So I rewrote every pain point
as one and went looking for answers.
What success
looked like
Simplify navigation
Making the cart intuitive, no more button hide-and-seek.
Boost conversions
Targeting at least a 20% increase by removing friction from the path to purchase.
Lower cart abandonment
Directly addressing the pain points causing users to drop off before paying.
Make savings legible
Ensuring users always know what they're saving, and why, at every step of checkout.
WORKING WITHIN LIMITS
The redesign nobody asked to be easy.
This wasn't a blank-canvas redesign. Backend constraints ruled out structural changes, stakeholders wanted a fast rollout, and the existing design system limited how far visual changes could go.
So I focused where it actually mattered: impactful UI tweaks, sharper hierarchy, and emphasised CTAs, all designed to ship fast without breaking anything downstream.
STRATEGY
Aligning before designing.
The business and product teams ran several rounds of meetings, pioneered jointly by design and analytics. The direction we landed on: build a seamless, low-cognitive-load checkout experience that worked with users' existing mental models not against them.
We also looked at current mobile checkout patterns across the market to understand which UI trends were worth adapting for GoMechanic.
A SNIPPET FROM ONE OF OUR BRAINSTORMING SESSIONS
UX REQUIREMENTS
Translating Strategy into UX.
EARLY WIREFRAMES — miles & NON-Miles version
Add a dedicated section for users to flag any
other concerns or requirements for their order.
Split coupons and payment offers into clear, separate tabs — so users
always know what they're browsing and what's already applied.
Highlight positioning and visual appeal for
Miles Membership and its benefits.
Show related, relevant services in the "Recommended Services"
section, tied directly to what's already in the cart.
drag me..
ITERATIONS ACROSS CART SECTIONS
drag me..
EXPLORATIONs
Sparking curiosity
and encouraging exploration.
I led the design process starting with low and mid-fidelity wireframes for each section of the screen — cart items, Miles banner, recommended services, and the coupons module.
Each iteration was reviewed with the product manager and key stakeholders before moving forward.
THE SOLUTION — CART
A cart that finally shows its work.
FINAL CART SCREEN — WITH EXPANDABLE BILL SUMMARY & coupons screen
The Miles savings banner now leads the screen — ₹599 (44%) saved, stated upfront, with a clear expiry date so users know exactly what they're protecting by staying subscribed.
Applied coupons sit directly inside the cart, not buried in a separate flow — "You saved ₹750 with COOLRIDE25" and "You saved ₹150 with UPISAVE150" both visible with an applied tag, so users see their savings stacking in real time.
The bill summary expands on tap to show a full breakdown — Item total, safety and warranty fees, pickup/drop charges, coupon discount, and payment discount — all itemised before the user ever reaches the payment screen. No more surprises at the final step.
THE SOLUTION — Coupons
From a cluttered list to two clear choices.
The single biggest structural change — Splitting "Coupons" and "Payment Offers" into two distinct tabs instead of one long, mixed list. Users no longer have to guess whether a code is a coupon or a card offer, the tab tells them.
Within Coupons, applied codes are pinned to the top with a clear "Remove" action, followed by "Best for Your Cart" and "For Our Valued Customer" sections, turning a flat discount list into a guided, almost editorial browsing experience.
A "Combine Coupons and Bank offers" banner sits at the top of the screen, reassuring users they're allowed to stack savings — directly answering the research finding that users weren't sure how much they were really saving.
Optimizing the Payment Offers Experience — The Payment Offers tab introduced filter chips (All, UPI, Card, Wallet) so users with a specific payment method in mind don't have to scroll past offers that don't apply to them. GoApp Money balance is surfaced right at the top as its own redeemable block — turning an existing balance into an immediate, frictionless discount.
An Empty State with a Purpose — Even the empty state got intentional treatment. Instead of a dead end, "No Coupons available for Your Cart" comes with a clear explanation and an "Explore More Services" CTA — turning a potential abandonment point into a path back into the app, plus a nudge toward the Payment Offers tab that's still available.
Coupons tab — APPLIED COUPON, PLUS SMART RECOMMENDATIONS
MEASURING SUCCESS
What changed after launch
With minimal backend changes required, the rollout shipped fast — meeting the stakeholder timeline without compromising on the redesign's core ideas.
5% increase in conversion
rate on Android
Average cart value rose from
₹2,500 to ₹4,000
10% increase in conversion
rate on iOS
15% reduction in cart
abandonment
Project Takeaways
Constraints sharpen thinking
Fleet managers aren't casual users. They're responsible for assets and people. Every design decision needed to reduce the mental load of their job, not just make screens look cleaner. I learned to ask "what does the manager fear?" before "what does the manager need?"
Quick research still counts
Nobody in the brief told me to understand geofencing from an operations perspective. I did it anyway. That context changed how I framed every single module in the redesign. Details you discover yourself always hit different than details you're handed.
Clarity is a discount
Not having formal usability testing at launch meant we were flying on intuition and internal signals. It worked this time, but I walked away knowing that next time, I'd push harder to build even a lightweight test cycle into the timeline, even if it's done with just 5 users
Empty states deserve thought
The old dashboard had the same data as the new one. Not a single number changed. What changed was how it was presented, and that alone changed how useful the product felt. That's the most honest argument for good design I've ever experienced firsthand.
Final notes?
This project taught me that checkout isn't just the last step of a purchase, it's the moment where trust either holds or breaks.
Every tweak, from hierarchy to copy to coupon visibility, was ultimately about giving users one less reason to hesitate.
That's the kind of problem I'll keep choosing to solve.
Thank you for reading!
It’s been a pleasure sharing the journey through my design process and final visuals!
fin!
✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER ✦ LET'S WORK TOGETHER
Designed & built by Sanjana Kumari in Framer ✦ 2026
Built with Love 🫶, Spotify on repeat, and four sleepless nights.
okay, your turn
I've shown you the work, the process, and probably overshared a little. Now it's your move.
