Ali Demirbaş - Lab

Category & Listing

2 vs 3 Column Product Grid on Mobile A/B Test

A three-column grid shows more products at once but makes images smaller.

  • Category listing
  • Mobile category-page purchase conversion rate

Option A vs Option B

How many are shown is the variable, not what they look like.

Changed
Quantity
Page
Category listing
Difference
changed

Hypothesis

A two-column grid gives each product more visual space but shows fewer options at a time. The better layout may depend on how much visual evaluation the category requires.

How to run this test

Primary metric

Mobile category-page purchase conversion rate

Compare purchases among mobile visitors assigned to each grid layout.

Other metrics

  • Listing-to-product click-through rateCheck whether click behavior changes.
  • Products seenCount actual product impressions; the same scroll depth may expose different numbers of products in each grid.
  • Add-to-cart rateTrack whether add-to-cart changes.
  • Quick returnsReview rapid back navigation and usability findings; a quick return alone does not prove a misclick.

What to check before and during the test

  • ColumnsCompare a two-column and a three-column mobile grid.
  • Keep constantKeep card content, image ratio, product order and prices unchanged.
  • Downstream behaviorRead product-page visits and add-to-cart alongside purchases.
  • CategoryReview category differences without assuming a winner in advance.
  • Separate testTest simplifying card content separately.

Setup mistakes to avoid

  1. 1Keep touch targets usable in the three-column grid; this record sets a 44 CSS pixel design threshold.
  2. 2Do not simplify card content in the same test.
  3. 3Keep image crop ratios consistent across variants.
  4. 4Keep prices and discount labels readable.
  5. 5Keep product order unchanged throughout the test.