From Disruption to Delight

Transforming Basket Experience

Introduction

Enhanced the shopping experience by redesigning the basket overlay into a more intuitive, accessible, and conversion-friendly side panel.

Pain Points

Customers struggled with the old basket overlay, which created friction in the shopping journey and negatively impacted conversions.

No visibility of free delivery threshold or progress
Cluttered layout that was hard to scan
Previously added items hidden in a dropdown
Center-screen popup blocking the product page

Defining the Problem

Session recordings (Microsoft Clarity + Hotjar) showed 65% of mobile users couldn’t easily view all basket items, and many were unaware of delivery costs because there was no threshold indicator which was leading to higher abandonment and reduced conversion.

Jobs to Be Done

When customers add items to their basket, they need a quick and clear way to review products, understand delivery costs, and decide whether to continue shopping or proceed to checkout without disrupting their browsing flow.

Here’s a quick glimpse of the wireframe screens

UX Research & Wireframing

Reviewed competitor basket overlays and common interaction patterns.
Used Clarity and Hotjar to identify user frustration points.
Mapped the full basket journey with clear user flows.
Explored and iterated multiple wireframe options.
Worked with product owners to select the best approach.
Used wireframes for early reviews and internal feedback.

Key Solutions

Moved the basket from a blocking popup to a right-side slide-in panel to keep the product page visible.

Added a clear progress bar showing how much more is needed to qualify for free delivery.

Displayed all added items by default with clear hierarchy and easy quantity editing and streamlined layout with clear separation of items, totals, and actions.