The Challenge

For accessories, customers browsing listing pages had to navigate to product detail pages just to select size or color variants before adding to cart.

The brief:
Enable variant selection and cart add directly from listing pages, recommendations, and cart modules—without disrupting the browse experience.

Constraints:
Work within Canyon's existing design system - Function across mobile and desktop - Support multiple product variant types (size, color, compatibility)

Approach

Research:
15+ customer interviews revealed shopping pattern differences—accessories are often repeat purchases where customers know their size and prefer quick transactions.

Design:
Explored interaction models: modal overlay vs. inline selector

Prototyped mobile and desktop flows

Tested variant selection patterns and confirmation states

Defined edge cases (out of stock, single variant, compatibility checks)

Collaboration:
Worked with Senior UI Designer on visual design and design system integration. Partnered with merchandising team to understand product variant complexity.

Deliverables:
User research findings - Interaction flows and prototypes - UX specifications for engineering

What We Built

Desktop:
Modal overlay for variant selection

Mobile:
Inline selector for one-tap flow Integrated into Canyon's design system as reusable components across listing pages, recommendation carousels, and cart cross-sells.

Outcome

Shipped & Deployed:
Feature live across Canyon's accessories catalog, now a core part of the shopping experience. 

What I Learned:
How to balance user needs with design system constraints

Designing for different product edge contexts (accessories require different UX than bikes)

Collaborating across disciplines (Merchandising and Engineering) to ship features

Team