| H-E-B Grocery
Overview
From MVP to V2. Designs for an out-of-stock experience with an estimated $5 million bi-weekly impact.
My role
Product Designer - leading both MVP and V2 efforts
Team
Product
Design & Research
Engineering
Platforms
iOS app
Android app
Responsive web
Timeline
MVP - 4 months
V2 - 4 months
Problem
Our online inventory is updated once nightly, leading to customers ordering out-of-stock items throughout the day which in turn leads to item substitutions or items being left out of their order entirely.
We were losing sales by allowing customers to purchase items that are out-of-stock. Over 50% of orders have substitutions. For those substitutions, H-E-B pays the difference if the substitution costs more.
“Sometimes it’s unclear whether your out of stock items are really out of stock. For example, my order for pick up today. There were 4 changes to it. 2 items were out of stock. 2 were replaced. But in the case of each item, I could still add them to my cart if I were to start another order.”
Opportunity
An extensive data pipeline project was completed to connect real-time inventory with the H-E-B grocery stores and eCommerce platform. With real-time inventory, we would be able to notify customers when items in their cart go out-of-stock. Additionally, we could prevent customers from ordering out-of-stock items.
Success Metrics
Decrease % of order substitutions
Lower financial loss to substitutions
Maintain conversion rate
MVP Design Process
Explorations
Initially, I explored 4 different options for handling out-of-stocks in cart.
↓
Initial proposals
I explored 2 designs further, one leaner version that would meet the customer needs and one that would allow the customer to replace the out-of-stock item in cart.
↓
Engineering feasibility & scoping
After reviewing initial proposals with our engineering team, we decided to go with option 1 as an MVP given that we didn't have a similar item algorithm to power option 2.
↓
Usability testing flow
I worked with our Design Research team to complete moderated usability testing of our key MVP flow. I moderated two 1-hour interviews and helped with research synthesis.
↓
Post-research iterations
I referenced the research findings & recommendations and began iterating on the design.
↓
Final review
I walked through the final MVP flow with our stakeholders, engineers and product team to make sure we were all aligned with the designs.
↓
Stakeholder request for more research
The designs had called for out-of-stock items in cart to not be included in the order subtotal, however our engineering team pointed out that in order to accomplish that, they would have to do work on the pricing engine which would take a considerable effort. The stakeholders requested that we specifically research a flow to understand customer expectations around pricing to see if was worth the engineering effort.
↓
Detailed designs & handoff
Research from testing the pricing flow concluded that customers DO NOT expect out-of-stock items to be included in their order's subtotal. After communicating findings to stakeholders and engineering, we had determined that we would move forward with designs that DO include the out-of-stocks in the subtotal given that touching the pricing engine would delay this project and any chance of releasing to customers. I then completed detailed designs for all platforms (iOS, Android & Responsive Web).
Final MVP Designs
V2 Design Process
Explorations
I worked on exploring different ways for replacing an out-of-stock item.
↓
Research
I led research for V2 by preparing a prototype for replacing out-of-stock items, drafting up a testing plan and setting up an unmoderated usability test on Usertesting with 9 participants. I reached out to folks on my team to help with watching the usertesting videos and synthesizing findings by Affinity mapping.
↓
Research findings & iterations
I communicated the research findings to my team and the Data Science team that would be responsible for building the similar item algorithm. Overall, the flow we tested was successful with only some minor viusal design iterations needed to help customers understand that there are more similar items to view by scrolling horizontally.
↓
Final review of detailed designs
I walked through the final designs with stakeholders at the end of July 2022 for final approval.
↓
Handoff & Launch
After receiving approval from our stakeholders, I handed off final designs to our engineering team. Engineering started building V2 in October 2022 and shipped designs in December 2022. The V2 experience is still live today as of July 2024.
Measuring Success
Next steps were to measure how well V2 performs comparatively with the MVP. These designs are expected to have a $5 million bi-weekly impact.
Retrospective
I enjoyed not only delivering an MVP to our customers, but advocating and delivering the V2 experience to make their grocery shopping journey a bit less cumbersome by providing convenience & building trust in our product.
Projects
.png)
PayPal
Debit Card 5% cash back
Led design for the 0-1 experience of choosing a 5% monthly cash back category with the new PayPal Debit Card.
H-E-B Grocery
Out-of-stocks
From MVP to V2. Designs for an out-of-stock experience with an estimated $5 million bi-weekly impact.
.png)
H-E-B Grocery
Order Tracker
End-to-end design of an order tracking experience for ~2 million monthly Curbside & Delivery orders.
H-E-B Grocery
Cart & Checkout
Updating the visual design for the H-E-B Cart & Checkout experience while creating a new design system library.