Designing a delightful loading state experience for the curbside and delivery grocery orders placed on the heb.com website.


Overview

My role

*   Product

*   Design

*   Engineering



Team

Platforms

Timeline

At H-E-B more than 2 million Curbside & Delivery orders are placed on the heb.com website monthly. The loading state for those orders failed to provide customers with feedback that their order was being placed. 

We received feedback directly from customers that they were unsure if their order was being placed and in some cases they even tried refreshing the page or hitting the back button.


Problem

> 3 seconds... On average, that's how long it takes for an order to successfully be placed on the website. With that in mind, I began exploring solutions.

<iframe src="https://player.vimeo.com/video/726231419?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="900" height="654" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="old-place-order"></iframe>


Current Experience

### Explorations

One quick improvement I made was removing an interstitial page from the flow given that required the customer to have to click a "View my order" CTA to view the order they just placed. I shared these explorations in a few cross-squad design feedback sessions to inform my design and iterate.


Design Process

Placing your order loading state with an H-E-B branded spinner

Placing your order loading state with bouncing fruits

My goal for this design was to clearly provide feedback for the action that was just performed and communicate what is currently happening. In addition, I knew that this design has the opportunity to orient the customer to focus on the animation and loading status so they can prepare for the next step, when their order is successfully placed.


Visibility of system status

After reviewing [Spotify's "Design & Building for Constraints Heuristics",](https://spotify.design/article/assessing-constraints-making-products-for-all-users) I wanted to ensure that this design not only targeted the average wait time (3 seconds) but also considered customers on slow networks & less performant devices since they will frequently experience longer loading states.


Provide Entertainment

Successfully placing an online grocery Delivery or Curbside order with H-E-B is a big deal! I wanted to make sure that the loading state celebrated this huge moment of the customer's journey. Additionally, I wanted this design to express H-E-B's friendly brand personality.


Celebrate Journey

Design Intent

# ↓

### Detailed Designs

After reviewing feedback from the team, I landed on the following flow and decided to re-purpose a bouncing grocery items animation from our animation library.


# ↓

### Handoff & Launch

This loading state animation launched to all heb.com customers on the week of June 27th, 2022! The skeleton load didn't make it in with the initial launch and would be added separately.

<iframe src="https://player.vimeo.com/video/726230762?badge=0&autopause=0&player_id=0&app_id=58479" width="900" height="563" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="Place-order-animation"></iframe>
---

<iframe src="https://player.vimeo.com/video/726233866?badge=0&autopause=0&player_id=0&app_id=58479" width="900" height="563" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="place-order-animation-mobile"></iframe>


This was truly a fun project to work on and deliver to our customers! There was so much excitement in the design reviews and from our engineering team around this loading state. Immediately after launch we heard customer feedback that the new experience after placing an order was delightful.


Retrospective

Led design for the 0-1 experience of choosing a 5% monthly cash back category with the new PayPal Debit Card.


I was directly responsible for designing the 0-1 experience of choosing a 5% monthly cash back category with the PayPal Debit Card across all surfaces. I designed the end-to-end flows for all 5 initial categories (Gas, Groceries, Restaurant, Clothing and Health & Beauty).


My Role

[CNBC article](https://www.cnbc.com/select/paypal-debit-card-earns-5percent-cash-back/)

#### Design Challenges

*   Ensure that customers can easily select their preferred monthly category.

*   Provide clear, timely reminders for category selection at the start of each month.

*   Simplify the process of understanding the monthly cap of $1,000 and how much cash back they can earn.

*   Encourage customers to combine with merchant offers for greater rewards.



Designs

This feature was highlighted in the official marketing campaign with Will Ferrell

Marketing

To comply with my non-disclosure agreement, I'm unable to share specific design process details from my work at PayPal.

[Learn more about PayPal Debit Card Cash Back here](https://www.paypal.com/us/digital-wallet/manage-money/paypal-debit-card)


Disclaimer

Projects

PayPal Everywhere

UK Summer cash back

Debit Card 5% cash back

From MVP to V2. Designs for an out-of-stock experience with an estimated $5 million bi-weekly impact.


Product Designer - leading both MVP and V2 efforts


*   Product

*   Design & Research

*   Engineering



*   iOS app

*   Android app

*   Responsive web



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.


Voice of the Customer feedback

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.


Opportunity

Decrease % of order substitutions

Lower financial loss to substitutions

Maintain conversion rate

Success Metrics

### Explorations

Initially, I explored 4 different options for handling out-of-stocks in cart.



MVP Design Process

# ↓

### 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

### Explorations

I worked on exploring different ways for replacing an out-of-stock item.


V2 Design Process

# ↓

### 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.

<iframe src="https://player.vimeo.com/video/741297915?badge=0&autopause=0&player_id=0&app_id=58479" width="900" height="600" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="Web-replace-oos"></iframe>
---

<iframe src="https://player.vimeo.com/video/726809261?badge=0&autopause=0&player_id=0&app_id=58479" width="900" height="600" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="oos-replace-similar-item"></iframe>
---

<iframe src="https://player.vimeo.com/video/726809238?badge=0&autopause=0&player_id=0&app_id=58479" width="900" height="600" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="oos-replace-in-cart-search"></iframe>



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.


Measuring Success

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.


Title of the video

Out-of-stocks

Curbside & Delivery customers needed a way to track the status of their order. Customers have an expectation that we would have an order tracking system for when they place an order.


At H-E-B we have roughly 600K weekly Curbside & Delivery orders. For those orders, customers lacked reassurance that the order status we were providing was accurate.


Help customers feel more in control of their in progress order and provide them with reassurance that H-E-B is actively working on their order.


How Might We

Provide customers with a step-by-step look at their order progress in real time.


Solution

*   SWOT analysis



*   Competitive analysis

Discovery

*   Provide reassurance

*   Scalable

*   Add delight



Product Goals

*   Reduce # of calls to Contact Center about Order Status

*   Improve NPS score

*   Increase engagement to Order Details page



Strategy

### Bad, Worse, Good workshop

I facilitated a workshop were we started by designing a bad order tracking experience, then we built off of each other's bad experience and made it worse, and to end we built off of each other's worst experience and made it good. This was a fun workshop that ultimately led to us identifying that in order to make this order tracking experience good, we need to humanize the experience.


# ↓

### Journey maps

In an effort to empathize with our customers, I created journey maps for the 6 types of shoppers at H-E-B.


# ↓

### Crazy 8's

Crazy 8's workshop with the Brand Designer and Senior Experience Designer on my team. We dot voted on our favorite trackers before starting low-fidelity wireframes.


# ↓

### Priority Guides workshop

I facilitated a cross-squad workshop to collaboratively define and prioritize content we are displaying on the Order Details page.


# ↓

### Low-fi wires

I pair designed with the Senior Experience Designer on my team to design flows that we would eventually test with users.


# ↓

### Usability testing findings & iterations

I worked with the Senior Design researcher on our team to test our happy path order tracking experience. I took insights from the research findings and determined what was in scope for design iterations. Push notifications for the Order Tracker was not in scope for our effort.


# ↓

### Engineering review

I reviewed net-new components with engineering for all platforms (iOS, Android, and Responsive Web). I documented engineering feasibility and considerations.


# ↓

### Requirements pivot

Our squads forecasting of engineering capacity changed and Web engineers were in need of starting on work. We pivoted to having Web only designs as required deliverables for this order tracker.


# ↓

### Visual design explorations

With advice from my Design Mentor, I explored a Safe, Medium and Extreme visual design of the Order Tracker


# ↓

### 5 second testing

The Senior Experience Designer I was working with on this project suggested we conduct an unmoderated 5-second test of the "Medium" Order Tracker Design. Overwhelmingly, we received positive feedback that this design was very engaging and clearly communicated the Order's status and details.


# ↓

### Detailed designs

Due to engineering capacity, I had to lean out the design and go with a "Safe" version for the MVP.


# ↓

### Handoff & launch 🚀

Curbside and Delivery customers on Web can now track the progress of their orders on their Order Details page. Launched Fall 2021. Additionally, all previous orders on the website now have a completed progress bar.


Unable to measure if the order tracker decreased contact center calls


Unable to measure if the order tracker increased NPS


✅ Engagement to the Order Details page did increase


After this Order Tracker initially launched, our engineering team had capacity to update the visual design to my medium exploration. As a team, we felt this design was more reflective of H-E-B's brand and more in line with customer expectations. I worked on some updates to new design after reviewing customer feedback and multiple rounds of design feedback. The updated design launched in December 2022.

V2 Updates

I kicked off this project when I first started at H-E-B and navigated a mid-project requirements pivot to decrease the scope of this effort. I learned that communication is key to a successful launch. Roadmaps and forecasting engineering capacity is critical to overall product goals and scoping.


Mockup of mobile phone with H-E-B Order Tracker experience

Order Tracker

Animation: Background of H-E-B checkout page for desktop web with a darken background overlay and a modal on the center of the screen with a grocery bag animation of various grocery items bouncing and swapping with text that reads "Placing your order" and switches to "Hang tight"

Loading State Entertainment