Product card redesign

Context

A catalog card helps shoppers assess a product and decide whether to open its page. It needs to show the photo, price, discounts, and product attributes in a small space.

Over time, different teams introduced new requirements for the card. Information was added in separate rows, making the card taller and leaving less room for new messages. We decided to rethink its structure and establish consistent rules for displaying content.

Problem

Badges, tags, and discount labels competed for attention. Without a shared priority system, new messages could displace important product attributes.

Qualitative research also showed that discount labels drew attention away from other attributes, while the final price, including the loyalty discount, raised questions.

We needed to organize the information while preserving the ability to quickly assess the product and the available savings.

Hypothesis

If we organize product attributes into a prioritized badge system and place discount information next to the price, then shoppers will find it easier to navigate the catalog and assess the offer, because product attributes and available savings will be presented more coherently. We will measure product page visits and order conversion.

Solution

I proposed a structure that brings product attributes into badges on the photo and displays discounts next to the price. I defined priorities for badges so that the most important information would remain visible as new messages were added.

This solution was part of a broader target vision for the product card. To evaluate the changes gradually, we included only the updates to badges, tags, and discount information in the first A/B test.

Validating the first solution

Before development, we conducted qualitative research. We found no critical barriers in that study: participants said the badges were easier to notice and the discount information was clearer.

However, the first A/B test did not confirm the expected effect. Most metrics showed no conclusive change, while we observed a decline in add-to-cart actions and product page visits.

We revisited the solution to understand what might be making product selection more difficult.

Quantitative research

We hypothesized that the discount presentation might be contributing to the problem: the additional color used for the Club discount could make the catalog harder to scan, while the label itself might suggest that the discount was unavailable to the shopper.

To explore these hypotheses and select a design for the next A/B test, I conducted three rounds of quantitative research, using the findings from each round to refine the designs.

First iteration: discount color and font size

In the first round, I explored whether a consistent discount color and a larger font would make personal savings easier to identify. I removed the separate color for Club discounts in the new designs and prepared two font sizes for comparison.

I also restored the familiar order of information from the current card to focus the study on discount presentation. I compared the new designs with the current card.

31% of participants found the personal discount in the current card, compared with 20% and 18% in the new designs. The current card performed best, but even there, only about a third of participants found the discount. None of the designs met our needs, so I began the next round of revisions.

Second iteration: discount emphasis and wording

In the second round, I prepared designs that made the loyalty discount more prominent. I also compared different labels to understand which wording helped shoppers recognize a personal discount.

Variant 3, labeled “for you,” had the highest rate of personal discount identification. However, in every design that emphasized the personal discount, participants were less successful at finding the regular discount. We hypothesized that the stronger emphasis on the personal discount was drawing attention away from the regular one.

This result did not meet our needs: shoppers need to notice both types of discounts. The wording “for you” became a promising direction for the next study. I moved on to a third iteration to retain a clear label for personal savings while balancing the visibility of both discount types.

Third iteration: balancing discount visibility

In the third round, I kept the wording “for you,” which had performed best in the previous study. To avoid drawing attention away from regular discounts, I removed the additional emphasis: both types of discounts appeared on the same line as the price and used the same color.

I compared the new design with the current card and the version labeled Club to assess how successfully shoppers could find the personal discount and other product information.

In the new design, 77% of participants found the personal discount, more than in either of the other two designs in this round.

Based on the study, we selected this design for further development and an A/B test. It made the personal discount easier to identify while preserving the visibility of other information. Its impact on add-to-cart actions and order conversion remains to be tested in the live product.

Target vision and rollout stages

Using the design selected through quantitative research, I updated the target vision for the product card and divided its rollout into stages. This defined the final design we wanted to achieve and the sequence of changes needed to get there.

The first stage focuses on discount presentation. We launched a new A/B test with this iteration to assess its impact on user behavior before introducing further changes.

In later stages, we plan to improve the presentation of alternative colors and the add-to-cart button, then extend the solution to every part of the product that uses product cards.

Results

After the first A/B test, I conducted three rounds of quantitative research and refined the discount presentation. In the selected design, 77% of study participants found the personal discount. This finding informed our choice of design for the next A/B test.

The new A/B test has launched and is currently running. Results are not yet available: the impact of the updated card on add-to-cart actions and order conversion remains to be assessed.