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