Time-restricted products
Increase visibility of product availability schedules
Key skills
Understanding & untangling data plumbing
Constant collaboration with engineering to understand the different data sources for each piece of product data surfacing and the constraints that placed on the final solution
Clarifying & condensing language
Given a complex set of bespoke product schedules, devised a templated system for content to appear consistently across three separate component types, from the very small (product card) to roomy (dialogue)
Change management
Because the scheduels would continue to be managed by a stakeholder group (site operations), led multiple hand off sessions and created template documentation for a seamless transition to the new process
The opportunity
H-E-B sells hundreds of products online that are only available to order for curbside or delivery during specific time periods—for example, made-in-house rotisserie chickens can only be ordered between 10am and 7pm.
Because customers can add items to their carts before selecting a time slot for delivery or pick up, they could add a rotisserie chicken to their cart, proceed to check out, choose a time slot, and only then would they learn the item isn’t available for the time they chose.
At that point, users were left with few options: remove the items for their cart and proceed with their order at the selected time, or, if they really wanted that rotisserie chicken, select a new time and risk other items being unavailable for that time.
The goals
Improve the visibility of an item’s availability schedule
Alert users of time slot conflicts earlier in their journey
Give users alternate paths when they run into a conflict
Reduce number of "shorts" (item customer orders not included in final order) and "subs" (item customer orders substituted for something else)
the approach
Understanding the partner experience
An integral part of this project was understanding the existing processes in place for internal partners (the site operations team) to manage time-restricted products. Their primary tool for product availability management had numerous limitations to account for before we could tackle a solution:
Highly manual interface, wherein partners set up rules on individual products (or a category of products) based on times and days of the week
Any message shown to users had to be manually entered by those partners, leading to worries about QA, length, and clarity
We could only account for the products we knew about during design, so any new product added into the catalogue that had time restrictions would need to be managed by site operations with no oversight from design
Understanding the data that powers the experience
Another roadblock was the data system that powered the availability management tool. The blackout times were dictated by curbside and delivery times. For example, even though as online shopper you can only order a chicken between 10am and 7pm, if you were to go in-store at 8pm, there may well still be a rotisserie chicken there you could buy. But the data available to us to show customers online, regardless of their shopping mode or intent, were those delivery and curbside blackout times. We needed to determine the risk of showing an item’s availability based on curbside/delivery and whether that would be misleading to customers.
Another issue was once we untangled the data plumbing, we realized that the message generated in the availability management tool was used in multiple places: the product card, the cart conflict sheet (triggered by selecting a time slot that didn't work for items already in your cart), and the cart conflict modal (triggered by adding to cart from the product detail page). This presented a challenge for content: what language would make sense in all three spots (that each had their own very different formatting).
Understanding customer preferences on conflict resolution
The main difference between the two main solutions we were beginning to explore were giving customers the option to resolve time restriction-related conflicts at the product level or at checkout. We developed and executed a usability test using UserTesting.com to gauge customer preference and get additional feedback on how much context users wanted on time restrictions (especially if they didn't have time slot already selected).
We conducted an unmoderated test where users were guided through three prototypes and then answered a series of questions on ease of use and preference.
User preference was for the experience where the conflict was resolved at checkout, with added visibility into availability along the way, on both the product card and the product detail page.
Customers preferred version B, where they got information on the availability of the item, but they could still add to cart. In version A, asking a customer to change their time in the middle of browsing and shopping was too disruptive.
Customers appreciated the opportunity to change their time directly from the cart conflict sheet.
the solution
product card availability message
we created an availability message that would appear on product cards as soon as a customer selected a “conflict” time slot—this way, they could see the items that they weren’t able to add to cart for their desired time, before they actually built their cart. We determined the message should show when the item is available, saving them from the extra calculations and clicks it would take to figure out when and why they can get an item. I developed a templated set of messages for site operations to work from when establishing these messages (see screenshot X).
We opted not to surface an item’s availability on the product card at all times (and only when their time slot is in conflict with availability), determining that it increased cognitive load at a time when the customer’s intent isn’t clear (we don’t want to show too much information when all they might be doing is browsing).
We also added a secondary CTA, “Choose new pickup time” — this provided users with a path to find a time that would work for them
product detail page availability schedule
To alleviate friction, we added the availability details (what we called an “Availability schedule”) on each individual item’s PDP. Instead of having to rely on site operations partners to manually enter this information, we were able to utilize and transform the availability data into a user-friendly summary. I worked closely with backend on that translation (see screenshot X).
We gave the schedule a prominent, dedicated spot on the PDP, knowing from research that users often skip or skim the “Product details” — we didn’t want this important information buried there.
what we wanted to do but couldn't
time slot availability
Outcomes
⬇️ 22%
clickthrough to product detail page decreased, showing users were finding what they needed on the cards
⬆️ 3%
Add to cart rate increased
⬆️ 6%
Overall engagement with product card increased