Challenge

Customers were experiencing friction when they had to open a product detail page just to select a size or variant before adding an item to their cart.

This led to slower checkout flows and potential drop-offs.
The challenge was to create a seamless way for users to choose a product variant and add it to their cart directly from product listing pages, recommendation sliders, and cart layers — without disrupting the shopping journey.

At the same time, the solution had to work consistently across mobile and desktop, and fit into Canyon’s modular design system.

Approach

I started by analysing customer pain points and identifying friction in the purchase flow through research interviews.

Based on these insights, I sketched multiple interaction models for adding items directly from the listing page, testing modal overlays versus inline behaviours.

I created prototypes for both mobile and desktop, which we validated through usability sessions.
Iterations focused on variant selection, confirmation states, and interaction speed.

After finalising the concept, I produced a detailed UX specification with behaviour rules and edge cases, ensuring developers had a clear blueprint for implementation.

What We Built

The final design introduced a seamless Quick Add-to-Cart flow that allowed customers to select product variants and add items directly from listing and recommendation components. 

On desktop, a modal overlay supported size and color selection without redirecting to the product detail page. 

On mobile, a simplified inline selector provided an efficient one-tap flow. A clear confirmation state reassured customers that items were added successfully, while recommendation sliders encouraged further exploration. 

The solution was integrated into Canyon’s modular design system, ensuring consistency and scalability across touchpoints.

Team