Product card redesign

Context

Product cards in the catalog are a crucial part of the funnel. They need to interest shoppers enough to open the product page and move toward a purchase. The existing cards were inflexible: every new feature added another row and increased their height, while different teams always had more content to add. We decided to bring all the requests and ideas together in a target card design.

Hypothesis

If we organize product attributes into a prioritized badge system, move discounts next to the price, and place the cart button on the image, then shoppers will navigate the catalog faster and be more likely to order. Qualitative research showed that discount labels distracted from product attributes and that the final price was confusing. We planned to measure order conversion in stages to isolate the contribution of each change.

Problem 1. Alternative colors

We uncovered many problems and requests. One was alternative colors, which we had already explored in another project. Our hypothesis was that large, tappable color options with previews would help shoppers immediately discover more versions of a product they liked.

The experiment did not deliver the improvements we wanted. Large color options increased cognitive load, reflected in reduced catalog browsing depth. Users also said colors often repeated, making browsing take longer.

Solution

We concluded that showing other colors was important, but they needed less visual prominence. We already displayed shades for beauty products on the product image, where they were not always noticeable. I moved the colors below the image, alongside the rating, keeping the card compact without adding height.

Problem 2. Available sizes

Showing available sizes in catalog cards is a competitive advantage. But the existing smallest-to-largest ordering did not serve shoppers who wore medium or large sizes well. We hypothesized that hiding sizes would simplify the catalog without reducing conversion, as shoppers would use filters instead.

The experiment hurt both business metrics and the user experience. The longer journey reduced conversion from the product page to adding to cart, as well as the key metric, order conversion. Users also complained that missing sizes in the catalog made them waste time on unsuitable products.

Solution

The data showed that visible sizes are essential for quick browsing. Instead of removing them, I focused on a new display logic that preserved their value while reducing noise. The new card emphasizes the recommended size and automatically hides irrelevant sizes when filters are applied.

Problem 3. Adding to cart

The existing button was visually heavy and dictated the structure of the entire card. It also created noise and distracted from the product.

I moved the button onto the image to make the card more compact. This allows it to fit different contexts and makes the content beneath the photo more noticeable.

Problem 4. Responsive cards in carousels

Fixed-width cards meant that, at some common screen sizes, the edge of the next card was not visible. Shoppers might not realize they could scroll and could miss content.

The solution was to calculate card width dynamically, ensuring predictable behavior at any screen width.

Problem 5. Badges and tags

Badges and tags created clutter. Without a clear structure, new badges also displaced other important product attributes.

In the new card, I removed separate tags and brought product attributes into one badge system on the image. Discounts and related information now sit next to the price. All new elements have a clear priority, ensuring that the most effective conversion labels are shown.

Target vision and iterations

Introducing all these changes at once would be risky: if metrics fell, we would not know which element caused it. Development was therefore planned in stages. First, badges and tags; then the button and available colors; finally, the complete target design.

Qualitative research

Before handing the designs to engineering, we ran a series of in-depth interviews. Catalog cards are a particularly sensitive part of the funnel, so we wanted to make sure nothing prevented shoppers from scanning the results. We found no critical issues and gained several useful insights.

In the old design, discount labels drew attention away from tags and badges, while the final price, including loyalty discounts, raised questions. The new solution shifted attention to the photography and outfit. Shoppers said the badges were more noticeable and the discount information was clearer, despite its new position.

Results

The first iteration, covering badges and tags, is currently in an A/B test. The rollout is staged so we can isolate the impact of each change. Success for the first stage means higher order conversion through clearer discount information. The button and colors come next, followed by the complete target design.

Based on the qualitative research, we expect order conversion to improve: shoppers said badges were easier to notice and discounts easier to understand.