HEB Checkout Web

OVERVIEW

Redesigned H-E-B’s web checkout to remove ambiguity in cost and delivery promise (ETA), reduce late-stage drop-off, and speed up completion. We componentized the solution in the Design System to scale changes across adjacent flows and ship faster.

A laptop with a h32 word on it.
Image of 3 pixelated flat icons

YEAR

2025

ROLE

LEAD PRODUCT DESIGNER

SERVICES

PRODUCT DESIGN

DESIGN SYSTEM

USABILITY TESTS


About the project

We unified the review/payment experience with a clarity-first order summary, explicit fees/taxes, and a consistent ETA copy system (e.g., “Ready today 5–6 PM”). Operational rules (capacity, cut-offs, store closures) were translated into UI guardrails and standardized status chips across review, payment, and post-purchase. Patterns were built as reusable DS components for web/app parity.

Outcomes (Targets/Early): −5–10% drop-off at Review/Payment, −8–12% median checkout time, −10–20% support tickets about fees/ETA per 1k orders, +20–30% delivery velocity via DS reuse.

Resumen-de-compra
Mobile devices Checkout
Smooth Scroll
This will hide itself!

HEB Checkout Web

OVERVIEW

Redesigned H-E-B’s web checkout to remove ambiguity in cost and delivery promise (ETA), reduce late-stage drop-off, and speed up completion. We componentized the solution in the Design System to scale changes across adjacent flows and ship faster.

A laptop with a h32 word on it.
Image of 3 pixelated flat icons

YEAR

2025

ROLE

LEAD PRODUCT DESIGNER

SERVICES

PRODUCT DESIGN

DESIGN SYSTEM

USABILITY TESTS


About the project

We unified the review/payment experience with a clarity-first order summary, explicit fees/taxes, and a consistent ETA copy system (e.g., “Ready today 5–6 PM”). Operational rules (capacity, cut-offs, store closures) were translated into UI guardrails and standardized status chips across review, payment, and post-purchase. Patterns were built as reusable DS components for web/app parity.

Outcomes (Targets/Early): −5–10% drop-off at Review/Payment, −8–12% median checkout time, −10–20% support tickets about fees/ETA per 1k orders, +20–30% delivery velocity via DS reuse.

Resumen-de-compra
Mobile devices Checkout
Smooth Scroll
This will hide itself!

HEB Checkout Web

OVERVIEW

Redesigned H-E-B’s web checkout to remove ambiguity in cost and delivery promise (ETA), reduce late-stage drop-off, and speed up completion. We componentized the solution in the Design System to scale changes across adjacent flows and ship faster.

A laptop with a h32 word on it.
Image of 3 pixelated flat icons

YEAR

2025

ROLE

LEAD PRODUCT DESIGNER

SERVICES

PRODUCT DESIGN

DESIGN SYSTEM

USABILITY TESTS


About the project

We unified the review/payment experience with a clarity-first order summary, explicit fees/taxes, and a consistent ETA copy system (e.g., “Ready today 5–6 PM”). Operational rules (capacity, cut-offs, store closures) were translated into UI guardrails and standardized status chips across review, payment, and post-purchase. Patterns were built as reusable DS components for web/app parity.

Outcomes (Targets/Early): −5–10% drop-off at Review/Payment, −8–12% median checkout time, −10–20% support tickets about fees/ETA per 1k orders, +20–30% delivery velocity via DS reuse.

Resumen-de-compra
Mobile devices Checkout
Smooth Scroll
This will hide itself!

Create a free website with Framer, the website builder loved by startups, designers and agencies.