The product card made Add to Cart hard to find.The product card made Add to Cart hard to find.
I inherited Card 1.0 from an outside agency. Testing showed that it did not support the menu's main job. The horizontal layout broke the grid, the image was too small to evaluate, brand names and THC were missing, and Add to Cart looked disabled. Pickup shoppers needed a visible action and enough product information to decide.
- OrientationHorizontal only. Broke the grid. Unresponsive.
- ImageThumbnail too small to describe the product.
- Add to CartGhost CTA. Weight and quantity looked disabled.
I need to find dispensaries near me, that offer the option for pick up or delivery.
Usability testing · pickup shoppers · Mixpanel on the live menu
Browsing and configuring needed different states.Browsing and configuring needed different states.
Card 2.0 separated browsing from configuration. The rest state showed image, lineage, name, price, and Select. The selected state showed weight, quantity, a live total, and Add to Cart as a primary button. Add to Cart was the second most valuable CTA on the site. Tapping Select opened configuration; adding confirmed the choice; closing returned the shopper to the same place in the grid.
- RestImage, lineage, name, price, Select.
- Select modeWeight, quantity, live total, Add to Cart.
- ReturnClose lands back on the same card in the grid.
A denser grid needed a dedicated product page.A denser grid needed a dedicated product page.
Operators asked for more cards per row. Card 3.0 reduced the image and tightened the stack, moving configuration into a product detail page with details, nearby stores, pickup or delivery, and the newly launched recommendation engine. I ran A/B tests across six breakpoints and tracked launch behavior in Mixpanel.
- GridTighter card. More SKUs per swipe and per row.
- PDPDetails, store map, pick-up or delivery.
- RecommendMatch percent on the row beneath the product.
Launch results
- 7% → 10%Conversion after Card 3.0
- 15% → 60%Responsive mobile use
- +$17.00Average order value
Mixpanel · Google Analytics · Product Card 3.0 · early 2019
Mixpanel · Google Analytics · page views +12% · checkout +8% · blind test vs Leafly and Weedmaps