Product cards
simplified

Company
Wayfair

Role
Product Design Lead, Design Systems Ambassador

Project Date
2019

About the project

Product cards held significant global relevance across Wayfair's extensive website. However, multiple stakeholders addressing user needs led to a creation of varied versions of these cards. As a result, inconsistencies increased with excessive information cluttering the cards and compromising their visual representation. This ultimately impacted user engagement negatively.

My main goal was to redefine the product card's role and establish guidelines to streamline its presentation.

Discovery

I conducted an audit to find out the common reasons for the inconsistencies across all type of product cards.

  • Long product names

  • Too many metadata

  • Inconsistent image sizing

  • Promotional cards

Audit of Wayfair’s product cards

Simplifying the cluttered product cards

Among the inconsistencies, the cluttered product cards were identified as the most problematic card type. I redesigned these product cards to be easily scannable, offering relevant and actionable details at a glance.

Flash sales product card (before)

Flash deals product card (after)

A cluttered product card (before)

A simplified product card (after)

Global guidelines for the product card

Continuing to redesign each instance wasn't feasible without adding debt to design and development of each team’s roadmap. Throughout this project, I collaborated often with the design systems team, leading to my role as the design system ambassador for the component. This responsibility involved defining the global guidelines for the product cards.

Outcome

This collaboration resulted in consistency across product cards, leading to increased user engagement, improved conversion rates, and reduced time and effort across the team's roadmap.

Product cards on brand pages

Flash deals cards on deals pages