HYPD · 2023 · Product Designer · Mobile
Seven things were stopping users from completing a purchase. We fixed all of them.
The problem
HYPD's cart and checkout flow was losing users. The experience deviated from the patterns users had already internalised from the platforms they shopped on every day. Every deviation from the familiar was a moment of friction. Every moment of friction was a reason to abandon.
Key information hidden behind a tap. Users had to discover what should have been visible upfront.
An extra step other platforms did not require. Unnecessary friction added before the user could even add to cart.
Unnatural and hard to navigate on mobile. Every other platform the user knew used vertical scroll.
Applied coupons not clearly shown. No way to add more without leaving the flow.
Users could not see what they were paying until they actively asked. A reason to doubt and abandon.
B1G1 and B2G2 scenarios not supported. Promotional purchases could not be completed.
07 / Size change difficult — Friction at a critical decision moment. On smaller devices this was the point users gave up.
My role
Co-designer alongside one other designer. Both designers were heavily involved in competitive analysis and evolving the platform design language and design system simultaneously.
Mapped friction points in the existing cart and checkout flow. Designed the revised cart, checkout, payment and empty state screens in Figma. Collaborated with PM on prioritisation and engineering on feasibility throughout.
The key insight
"The goal was not to copy the big platforms. It was to understand which patterns users had already internalised — and meet them there."
How I approached it
The starting point was understanding what the same audience was already experiencing on the platforms they used most: Nykaa, Myntra, Flipkart and Amazon. These platforms had already done the hard work of building purchase habits. The goal was not to copy them but to understand which patterns had become so familiar to users that deviating from them created unnecessary friction.
A thorough audit of the existing cart and checkout flow mapped every point where the experience deviated from user expectations. Horizontal cart scroll on mobile. Hidden price breakdowns. Low coupon visibility. Compulsory quantity selection. No B1G1 support. No easy size change on smaller devices. Each deviation was a moment where the user had to think when they should not have had to.
Both designers worked in parallel on two things simultaneously: the cart redesign itself and the broader platform design language and design system. The redesign could not happen in isolation from the visual foundation it would sit on. New components were built and documented as part of the process rather than after it.
Revised flows were designed and iterated with the product manager and engineering team throughout. A/B testing and CRO principles validated which changes had the most meaningful impact on conversion. The redesign shipped with measurable improvements while maintaining alignment with business KPIs.
Before and after
Before
After
The prototype
The cart and checkout redesign across six screens: Product Detail Page, Shopping Cart, COD Payment, Express Checkout, UPI Payment and Payment Options.
Interactive flow · Mobile · 6 screensThe solution
Switched the cart from horizontal to vertical scroll with product cards that felt immediately familiar. Each product card showed the discount percentage clearly. Coupon application was given prominent visibility with clear confirmation of coupon applied.
Price breakdown was surfaced inline rather than hidden behind a tap. Extra savings were highlighted clearly during checkout. Payment methods were laid out cleanly with COD pricing made transparent upfront. B1G1 and promotional scenarios were designed into the flow for the first time.
The cart was rebuilt around the patterns users already knew. Vertical scroll. Inline price breakdown. Discount percentage visible per item. Coupon confirmation prominent. Nothing hidden behind a tap.
COD pricing shown upfront. Payment options laid out cleanly. B1G1 and promotional scenarios supported for the first time. Extra savings highlighted at every step.
Impact
Increase in conversion rates
Checkout completion rate post redesign
Every change was hypothesis driven, tested against real user behaviour
Every change was hypothesis driven, tested and validated against real user behaviour, not assumption.
What I would do differently