CONTEXT
Shining light into the darkness
Over 100 high-grossing products in H-E-B's catalog have recurring time restrictions. These H-E-B brand items set us apart, but their time restrictions are inadequately communicated. As a result, customers remove items from their cart or worse, abandon their cart altogether.
Taking the lead on this project, I worked closely with Product, Engineering, Content and UXR to design when and how these time restrictions should be communicated across the digital shopping experience. I presented designs for Native, Mobile Web and Web formats to user test and ship later in the year.
sneak peek
Holistic content strategy, 'smart' time slot picker and more
01. Motivation & Purpose
What's the background? Why do blackout products matter?
background
What is ATP?
The available to promise (ATP) initiative enhances the shopping experience by maximizing customer control over order fulfillment.
Blackout items, like rotisserie chickens, sushi, and alcohol, have specific time restriction rules. Our initial question was How might we enhance the shopping experience around blackout products?
The EMERGING problem
Customer frustration and cart abandonment
Customers are confused when shopping for time-restricted items because of a lack of clear expectation setting.
A H-E-B UXR study on ATP showed that customers are more likely to shop elsewhere if they receive confusing messaging without being guided to a clear solution. However, when easily directed toward a solution, customers were happy to remain shopping with H-E-B, even if it meant shifting their original plan by going to a different location or changing their fulfillment times.
In the last 90 days,
50K+
time related conflicts
106K
blackout items removed from carts
62K
time slots changed due to conflict
Digging deeper…
Dive into the data
THE GOAL
Unlock a holistic solution to minimize and resolve time-restriction related conflicts across the digital shopping experience.
02. Understand
How can we get a lay of the land?
Reviewing existing ux research
What do we already know?
To understand the landscape, I reviewed the ATP research study to understand customers' feelings towards the current and ideal shopping experience.
01. Unclear language
'Not available' means an item is unavailable only at a specific time, but is being misunderstood as not being sold.
02. Mixed signals
When a time related conflict occurs, CTA messaging and conflict modals are inconsistent and unclear. Lacking a source of truth around time availability.
03. Lack of an actionable solution
At time slot selection, customers cannot understand what time slot works for them and their items — resulting in over 100k conflicts on that page in the last 30 days.
competitive analysis
How do competitors handle time-restricted products?
Next, I sought to better understand how blackout products were handled outside of our digital experience through a competitive audit of 5 omni-channel grocery stores offering ready made items across four key screens.
Research findings
An opportunity to stand apart from the rest
03. Identify and Strategize
How can we identify use cases and set an overall strategy to guide our decisions?
identify
Two distinct use cases
Through research and comparing H-E-B's experience alongside others, H-E-B's shopping journey is notably divided into two scenarios where the customer either:
a) waits until checkout to select a time slot or
b) selects a time slot before or while adding items to cart.
identify
Three item and rule types
To better work on content strategy, I divided up the most popular blackout items into three categories and defined their distinct rules.
STRATEGIZE
Two solution strategies
To guide my iteration, I proposed two solutions that took two distinct approaches in UX strategy. I was encouraged to explore both strategies as concept designs.
Strategy 1: Address and prevent errors ASAP
Similar to H-E-B's current strategy. Resolves errors as they occur. Aims to prevent future surprises by educating users about time restrictions during the shopping process.
Strategy 2: Consolidated errors
Prioritize allowing customers to add items to cart, even if it creates a potential conflict. Address all conflicts in checkout.
Strategy 1
Visual real estate
Takes up valuable space on the product card (slated to be used for other info)
Mental load
Potential for information overload if information is repeated with no regard if it applies to customer's cart or not
Solution guidance
Upfront solution for individual item restrictions but customer could repeat process for items with different rules
Strategy 2
(Recommended)
Product card stays compact and relevant to customer as they are deciding what to add to cart
Allows customers to focus on building their cart — prevents us from solving a problem we are unsure they have
Solution is presented and immediately resolvable when time restriction is presented
04. Ideation
How is the recommended strategy incorporated throughout the customer's flow?
UI Ideation
Ideation on the most complex use case: time slot selected
Since I decided on Strategy 2: Consolidate errors, I had my overall roadmap for the key screens and interactions I needed to design. I generated ideas based on the key screens while keeping the big picture in mind — how they would fit together to deliver information to the customer.
I addressed the most complex use case: a customer shopping with a time slot selected. In this use case, a user's intent is known via their pre-selected time slot so displaying blackout messaging before checkout is justified and the more opportunities to redirect a user to a solution are available.
Product detail page
The product detail page is the instruction manual for any product. It is the effective source of truth, holding everything from nutrition information, allergies, location in-store and now, availability information.
Option 1
(Recommended)
Glanceable
🟩 — Availability easily viewable upon PDP open and not competing with price, which is important to customers.
Context & Explanation
🟩 — Provides further context about how time restrictions apply.
Scalable
🟩 — Easily scalable to include products with multiple restrictions (i.e. lead time) + future availability info.
Option 2
🟨 — Small banner is close in proximity to price but visually difficult to read.
🟥 — No further information beyond availability times.
🟥 — Difficult to scale for multiple availability rules and restrictions.
Option 3
🟥 — Overly visible and takes up large amount of space, pushing important information down.
🟨 — Provides further explanation but is repetitive. Alert format makes information seem temporary.
🟥 — Difficult to scale for multiple rules and alert would be annoying if on multiple PDPs.
Option 4
🟩 —Time availability is visible upon opening the PDP.
🟥 — Availability is lumped in with in-store fulfillment information despite applying to all shopping modes.
🟨 — Scalable to include multiple restrictions but would expand an already dense in-store section.
Cart
The cart is the final step before a customer decides to place an order by starting checkout, typically viewed when finalizing an order prior to checkout. The screens below show errors because the customer has already selected their pickup or delivery time.
Option 1
(Recommended)
Error visibility
🟩 — Items not available pinned
Actionable
🟩 — 'Choose a new time' CTA is close and easily actionable from error
Relevant labels
🟩 — Labels are responsive to customer's time slot by showing how it applies to them vs. general availability
Option 2
🟩 — Banner is clearly visible
🟨 — No obvious CTA or solution to the error besides starting checkout
🟩 — Labels are responsive to customer's time slot by showing how it applies to them vs. general availability
Option 3
🟨 — Error is not easily visible, only through reading text in labels
🟥 — No obvious CTA or solution to the error before starting checkout
🟩 — Labels are responsive to customer's time slot by showing how it applies to them vs. general availability
Option 4
🟥 — Error not visible at cart, only after customer starts checkout
🟥 — No obvious CTA or solution to the error before starting checkout
🟨 — Labels have fixed messaging but are consistent with PDP
Time slot picker
The time slot picker is where the customer needs relevant information to determine what time they want to select or change to.
Option 1
Relevant labels
🟩 — Labels explain how the customer's cart will be affected by choosing a time.
Explanation
🟩 — Temporary alert gives more context first time user encounters labels + isn't permanent.
Glanceable
🟩 — Easy see at a glance what time slots are affected + can collapse times with restrictions and expand to see all.
Option 2
(Recommended)
🟩 — Labels explain how the customer's cart will be affected by choosing a time.
🟨 — 'Not available' labels provide context as customers can visually see what time slots have limited items.
🟩 — Easy see at a glance what time slots are affected + can collapse times with restrictions and expand to see all.
Option 3
🟨 — Label only shows that a time is suggested + lacking customer intent info to make recommendation.
🟥 — No explanation as to why customer should choose the suggested time.
🟥 — If suggested label is repeated, majority of time slots will be labelled which makes selection clunkier.
05. Final Recommendation
What's changed?
IMPACT
Fully revamped product discovery and
checkout flow
The end result is a cross-platform, product discovery and checkout flow that contains responsive availability information to reduce drop-off. By streamlining error notification, a customer can freely shop without thinking about order fulfillment logistics until they are ready.
6
ready to test flows
3
platforms (Native, Mobile Web and Web)
$500,000
in potential revenue reclaimed
MVP Recommendation
Future State: Time slot
Next steps
Gradual implementation
My final recommendation won't be shipped immediately due to some backend tech and data silos, particularly for the time slot picker functionality. However, components like PDP messaging and cart to be implemented soon.
User testing
Despite my recommendation being research based, validating the new flow with user testing would be the next step. The time slot picker and cart in particular present new information and interaction patterns.
Key takeaways
Importance of a roadmap and north star tenets
There were some points where I felt unsure and undecided in my approach, but having written out tenets and a roadmap helped me make important decisions with confidence.
Having a defendable but flexible opinion
I found bringing in a recommendation for others to poke holes in and test out garnered the best feedback.
Designing across platforms
Each platform — Native, Mobile Web and Web — had unique characteristics that needed to be taken into account while designing. The experience of working to concept and ship a feature across all of three was invaluable.
You made it! Want to see more?
Ava jiang © 2025
Last updated:
September 2025