Before/After: Why Driftly Swapped Its Product Grid for a Card-first Layout

Design · 4 min read

The Driftly product team inherited a legacy grid: 5 columns, tight gutters, and minimal metadata. The design was optimized for density but left shoppers unsure about differences between listings and discouraged exploration. Heatmaps showed users scanning certain areas and ignoring details that influenced purchase decisions.

The redesign prioritized scannability and seller storytelling. Cards expanded on hover to surface three key signals: price certainty, delivery window, and a curated seller badge. Images were cropped more generously and product titles were limited to one line with an ellipsis and a contextual tooltip available on tap for mobile users.

After launch, Driftly reported a 9% increase in add-to-cart rate and a 17% lift in click-through to product detail pages. Mobile bounce rates declined by 12%, attributed to clearer affordances and the card affordance encouraging vertical exploration. Designers also noted an indirect benefit: seller pages began to show higher quality imagery, presumably because cards rewarded visual clarity.

The team emphasized that the change was not purely visual but behavioral: they chose to reduce cognitive load, highlight trust signals, and use motion sparingly to guide attention. For other marketplaces the lesson is to test density vs clarity in real contexts and prioritize the signals that directly drive trust and conversion.