Objective

The item listings (product cards) for Kroger's e-commerce website and app were under pressure to enable new features focused on savings, ratings and reviews, and list-building improvements. We used this opportunity to refine the designs to better match customer needs.

Challenges

• Do no harm to existing product card performance metrics

• Balance business asks, customer needs, and fit cohesively into Kroger Design System

• Collaborate with multiple internal teams that rely on product card components.

Achievements

Multiple customer research studies uncovered key needs to prioritize features against. Competitive audits and Baymard insights informed design options. New features resulted in improved engagement and a 4.11% increase in add-to-cart rates for items with promotional offers.

Discovery

We kicked off the project with an initial stakeholder workshop to align on goals, prioritize features that align with the business needs, and outline key research goals to learn from customers.

Collaborative Design and Peer Review

After reviewing pre-existing research a small design team was organized to explore a number of concepts for the product cards to help ideate potential solutions.

Customer Research

Such an important change to the e-commerce experience demanded careful consideration of how customers’ expectations would impact the changes to the design of item listings.

After internal stakeholder interviews and secondary research was gathered, we ran a usability study with 2 concepts of the new card designs with survey questions geared around learning how customers would respond to clipping coupons and engaging with savings on the item listings. This study was unmoderated evaluative testing with 12 participants.

We used the learning from the qualitative study to refine the designs and launch a larger quantitative study with 100 participants. Survey questions and click testing offered insights to the most important information on product cards. This also allowed us to dig deeper into understanding and measuring the usefulness and importance of information on the product cards.

Defining Business Value

As the project extended into a new quarter it was important to define business value to keep stakeholders aligned on the priority of this effort compared to other opportunities.

Each How Might We statement was leveraged as a hypothesis with key performance indicators that outlined the expected engagement and value for each opportunity.

Due to the sensitive nature of the metrics, I’m unable to include the actual numbers, but they represented a combination of average cart adds per week, expected alternate revenue earned from coupon clipping, and conversion rates for engaged customers.

Refining Results and A/B Testing

After user testing results were socialized our designs were refined once more to align with the findings. We then defined the mocks for all platforms that were needed for handoff to the development team.

Hypotheses were defined to further test in production with customers to make subtle changes that further improved the effectiveness of our e-commerce item listings. The combination of our changes and refinement of the savings label resulted in a 4.11% increase in add to cart rate and improved engagement with Product Detail Views.