During the H-E-B website's migration to React, we revamped the Cart & Checkout experience to align with our app’s design language. We improved the grid and layout, updated text hierarchy, icons, and colors to enhance both accessibility and consistency.


Overview

My role

*   Product

*   Design & Research

*   Engineering



Team

Platforms

Timeline

The designs that were live in production were not aesthetically cohesive with the rest of the web experience. In addition to this opportunity to update the visual design there was an opportunity to address some usability issues.

Previously there was no source of truth for Web designs. Designs for Web were scattered across various files with no unique components and a lack of utilization of the Design Library System.


Problem

Design Process

# ↓

### Heuristic Evaluation

I kicked off this design by reading through a Heuristic Evaluation report completed by our Research team on the Cart & Checkout experience. I continuously referenced this report when designing for the updated Cart & Checkout experience.


# ↓

### Creating a Web Design Library

I created a Web Design Library. I made sure to use the tokens from our native Design Library System for colors, iconography and more. I used an Atomic Design System structure to build out components. I then made Page Templates for the most common scenarios.

##### Components

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8UYYGcQW8eF599XbgriTNS%2FCart-%2526-Checkout%3Fnode-id%3D1-2%26t%3DPr5REhE59wjuploq-1" allowfullscreen></iframe>



# ↓

### Handoff to Engineering

I walked through designs of the new Web Design Library with engineering.

##### Page Templates

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8UYYGcQW8eF599XbgriTNS%2FCart-%2526-Checkout%3Fnode-id%3D1-3%26t%3DPr5REhE59wjuploq-1" allowfullscreen></iframe>



# ↓

### Design QA

I led design QA as everything was getting built. I annotated differences between the designs and builds. 

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8UYYGcQW8eF599XbgriTNS%2FCart-%2526-Checkout%3Fnode-id%3D0-1%26t%3DPr5REhE59wjuploq-1" allowfullscreen></iframe>



Final Designs

Creating this Web Design Library allowed our team to have a source of truth for designs. Additionally, this improved our team's velocity by allowing us to quickly grab what we needed from this library and iterate faster.


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

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


*   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

Overview

My role

Team

Platforms

Timeline

Problem

Design Process

Previous Web Designs

↓

Heuristic Evaluation

↓

Creating a Web Design Library

Components

↓

Handoff to Engineering

Page Templates

↓

Design QA

Final Designs

Retrospective

Debit Card 5% cash back

Out-of-stocks

Order Tracker

Cart & Checkout