Tested Product Blocks

Readers land on long product roundups, and the block that shows each product decides whether they click through to buy. I design those blocks for brands in sleep, supplements, health and fitness, then hand them to product to test. The tests decide what ships, not opinions, including mine.

Product lists were long and slow to scan, so I borrowed the grid shoppers already use on big retail sites: two columns on mobile, three on desktop. Each card packs a superlative, brand, product name, image, rating, promo and one CTA.

The first test split. More readers engaged with the cards, but fewer converted, and clicks through to the full product page jumped. People wanted more detail than the card gave them. V2 put that detail in the card: product tags above the rating, styled apart from the superlative so the card stays scannable.

An expandable block lost on a health product page, and desktop did worse than mobile. The easy move was to throw out the pattern. But the layout had removed every product image, in a category where people want to see the thing before they consider it. Desktop, where missing images stand out most, fit that story. V2 brought images back in the carousel the full product page already uses, so any change in results traces to the images, not a new interaction.

On another brand the same block did well on desktop and trailed on mobile, where fewer readers opened it. That pointed at discoverability, not the idea. V2 changed two things. The label names the product instead of a generic “details,” and the control reads as a button you can tap. Nothing else moved.

The brief was to feature the top brand in a list. The risk: recolor one slot and every other brand reads worse by contrast. So the goal became adding prominence without taking any away. One version adds a border or banner and follows the rankings automatically. The other inserts a smaller block for the top pick, full width so the page rhythm holds, but shorter, so it stands out by being different, not louder.

Most of the design time went to edge cases: an odd number of cards, names that wrap to two lines, empty fields that hide instead of leaving gaps, and a toggle between a product photo and a brand logo. One file went to a partner’s outside engineering team with no access to our systems, so I built it closer to a prototype, with hover states and interaction notes. The bar: a team I’ll never meet can build it without asking me anything.