Building a content strategy

for H-E-B's smallest (and most valuable) piece of real estate

Key contributions

Project details

Approach

Content decisions

Results

Before

After

We redesigned the legacy product card to be mobile-first, have a stronger hierarchy, and provide future flexibility

Key contributions

Scalable content architecture

Made complex content hierarchy choices with limited real estate by defining the relationship between the product card and product detail page

Component governance systems

Created and documented a scalable system for an ever-changing feature to accommodate future additions and design extensions of the product card

Cross-functional stakeholder alignment

Secured buy-in from multiple stakeholders with competing needs through strategic positioning and collaborative work sessions

Project details

Role

Lead UX content designer

Team

Product design, search engineering, merchandising, product management

Responsibilities

Content hierarchy, stakeholder alignment, microcopy, governance framework

Opportunity

The H-E-B product card needed a refresh due to:

Lack of real estate: no room to add new features like low stock alerts and dietary/allergen highlights
No clear content hierarchy: design elements were not organized for importance or scannability
Inconsistent design elements: Information types were presented in several conflicting styles
Outdated mobile approach: we were still using a two-column design on mobile sizes and wanted to move towards a single-column design

Goals

For our customers:

Speed up decision-making
Simplify the content hierarchy to reduce mental load

Internally:

Allow for feature growth and flexibility
Improve delivery time for future product card enhancements

My approach

Pull from research insights

The team had previously conducted user research to identify key pieces of information that customers prioritized looking for on the product card: visibility and clarity of price, image, and name. We also wanted to increase visibility of product availability, another priority for our customers.

Create an information hierarchy

Before establishing visual design, I ensured full team alignment on the information hierarchy for current product card content, which included:

Auditing/documenting existing product details
Meeting with stakeholders to identify future content needs to accommodate for scalability
Card-sorting to group like information
Defining “zones” to align with customer intent models as defined by earlier research

Craft product card tenets

As an ever-changing entity, the product card needed documented tenets to guide current and future decisions on what information to accommodate. These tenets serve as an evaluation tool for stakeholder requests across the business, establishing rules to point to when we need to push back.

Tenet 1: Product cards need to work for all customer intents.
The same product card for a particular product lives across all search experiences, regardless of customer intent — e.g. the same product card shows up in a broad search for “chips” as does in a specific search for “Fritos.” Therefore, the product card has to balance a diverse set of needs across the customer intent spectrum and digital shopping modes. It can’t be everything for everyone, but needs to be enough for most.
Tenet 2: What they want to know first, what we want them to know second.
We prioritize visibility of the information we know our customers look for and use to make their shopping decisions, and then provide the space our merchandising and marketing partners need to provide additional shopping guidance.
Tenet 3: Context matters.
Product cards do not live on their own, but within a larger experience, be that the search results or a Discover page. We must consider the information customers may get from the context that surrounds the product card—the product card doesn’t need to solve for every piece of information on the page, some of that can and does live elsewhere.
Tenet 4: The product card is not another PDP.
Product cards and PDPs work hand-in-hand, with PDPs being an extension of a product card. We present enough detail on the product card to help customers make shopping decisions in the moment, while keeping in mind that additional information is available to a customer on a PDP, just one click away.
Tenet 5: We think mobile-first.
We design product cards with the smallest screen size in mind: we know that the bulk of our digital shoppers are shopping on mobile devices so, while we meet customer needs for both segments, designs are led by the platforms where most of our customers are.

Design

Because we took the time to establish a component information architecture, ideation was efficient and painless.

We converted the outdated and disparate UI elements into new ones that reflected the groupings we'd defined in the content hierarchy exercise.
I built out a robust document that catalogued the rules and hierarchy of each product card element.

Because we took the time to establish a component information architecture, ideation was efficient and painless.

We converted the outdated and disparate UI elements into new ones that reflected the groupings we'd defined in the content hierarchy exercise.
I built out a robust document that catalogued the rules and hierarchy of each product card element.

Content decisions

Product title length

To determine product title length and truncation rules, I pulled our longest product titles to test against. I knew users could always click through to the PDP to get the full title, but I still wanted to ensure enough of the name was visible in most cases. Three lines before truncation allows our users to see nearly every full product name without needing to scroll.

Terminology

My rule of thumb here was "if it ain't broke, don't fix it." We already had well-established ways of talking about items on promotion and I didn't want to confuse users by introducing anything new. We kept the wording on promotional labels the same, save for striking the "On" from "On sale." Every character counts!

Product size

In the previous product card design, product size was shown appended to the product name separated by a comma. We felt pressured to keep the current data mapping, which sent product title and size as a single piece of data to the front end, so I didn't push to change the way product size is shown. I wish I had. The size isn't always truncated, but enough that it bugs me every time I see it.

Results, impact & learnings

3%

Add to cart rate from product card

6%

Engagement with product card

22%

Click to product detail page (suggesting users were getting the info they needed directly from the product card)

If you build it (a framework), they will come.

The product card framework is one of the most referenced strategy documents across our design org. It's been leveraged to re-design the product detail page, the coupon detail card, and more.

Scalability that worked.

Since launching the new product card, we've seamlessly added two new pieces of information to the hierarchy because we'd planned for it: labels indicating SNAP eligibility and availability information. What could have been a quarter's worth of work was accomplished in a couple sprints.

Sometimes, one size doesn't fit all.

Because the product card is used in so many different spaces and within several different types of components, we find ourselves having to make decisions per specific context, rather than having one set of information that works everywhere. It can make assessing new information difficult.

Reimagining the homepage

Navigate

Connect