What does H-E-B look like?
If you can walk into the store, the answer’s easy. The bright red carts, smiling Partners, and endless aisles of products greet you as soon as you step through the door. But what would H-E-B look like if there was no door? That’s the biggest challenge we, as product designers, face: translating the in-store H-E-B experience into a digital space.
At your H-E-B store, all five senses are engaged. Your shopping trip is rich with the smells of baking bread, the colors of fresh produce, the thrill of abundant samples and lively conversations. Most grocery apps don’t feel like that at all.
Looking at the competitive landscape, it seems as though other retailers struggle to translate that feeling into their digital products. When we designed our new app, we wanted to do more—to truly reflect H-E-B IRL.
Putting a digital face to a name
To bring this in-store experience to digital life, we established a strong visual style that we could use as our guiding light throughout the design process
As we started working, I thought about my own H-E-B experiences. I was born and raised in Texas and when my town got an H-E-B it was a big deal. My mom would always time her shopping trips around a particular cashier. When she got to the store, it didn’t matter if the lines were long, she waited in that cashier’s line. Not to sound sappy, but I wanted to translate that into our app.
But how? Every store at H-E-B is tailored to its neighborhood. It’s almost impossible to recreate.
The logo
As simple as it may seem, we found inspiration in our logo. When you look at the finished app design, everything began here.
If our logo were a person, it’d be warm and friendly, not intimidating whatsoever. The curves of our navigation come from the logo’s geometry—all of our buttons are rounded, not harsh squares. We borrowed from our other logo as well. The blue color of our call-to-action buttons comes from our Curbside logo. Every piece of the design is considered. You see it in small touches—micro interactions when you engage a photo, slight shading on our illustrations, those rounded corners.
By focusing on our own brand, we created an app that feels distinctive, not trendy. We wanted graphics that felt as unique and timeless as our logo, our stores, and the people who work in them.
Illustrations
Time and time again, customers say it’s our Partners who make their H-E-B special. To bring that humanity to the app, we utilized a suite of illustrations.
We based our illustrations on the variety of our store Partners—from the teenagers working their first job to the certified meat cutters in the Deli. We strove to create a diverse cross-section of characters who could representative the breadth of Texas.
To define what those characters looked like, we had some choices to make. We worked through a few iterations.
Option A (shown above): Strokes, with some detail to convey realistic human features and emotions
Option B: Option A, layered with grain texture, shadows, and subtle gradients.
Option C: More playful color application with more stylized/classic shapes.
While each was charming, Option A felt the most H-E-B. The illustrations had a modern approach to depicting humans without feeling overly photorealistic. This style set also allowed us to add movement to create those individual moments of delight—just like our customers have in store—without overcomplicating what was needed to execute animation.
These illustrations aren’t just to fill space: they bring the humanity of our Partners to life digitally. One day, we hope to make those illustrations even more realistic—traveling store-to-store to sketch Partners. Imagine illustrations recognizable enough that customers could spy their favorite cashier in the app.
Photography
Photography brings more of the warmth that’s so deeply associated with our brand. Obviously, you want to present food in a way that’s appealing and inspires people to cook and eat well. But what’s aspirational to one person doesn’t work for another.
Gorgeous food photography is everywhere—from super Scandinavian-style magazines with sparse props to recipe blogs with sumptuous moody shots of cheeseboards. But H-E-B feels different. The food we photograph and the scenes presented should feel very authentic to the way we cook and eat in Texas.
That means our home state inspired our food styling— wood textures, concrete, marble. Same with the menus. On one photoshoot, someone suggested grilled lettuce, which sounds delicious, but the average Texan does not grill lettuce. The dishes we showcase should feel approachable and recognizable. We don’t want food that feels trendy or precocious, but it shouldn’t look basic either. Even if it’s a simple tortilla it should radiate that it’s been made with love. And just like the produce in our stores, the app imagery rotates with the season.
Overall, our goal is to mirror the level of care of the families who shop with us. As the app evolves, we’ll tailor our visuals even further. Seasonality can specifically reflect each individual customer. Beyond simply reflecting seasonality, we can specifically reflect each individual customer. When a vegetarian opens the app, we don’t want to show them a Thanksgiving turkey. We want to show items that resonate with Texans of all stripes, whether they’re barbecue enthusiasts, vegetarians, or of the pescatarian persuasion. If you live in Westlake, your “home” cooking feels different than the cajun-influences of Houston or the Tex Mex-infused food of the Valley.
In the end, whatever you need to make your dishes with love is in the app, including the love we put into making the visuals. By honoring our heritage, our Partners, and the backgrounds of our customers, we hope every Texan feels the My H-E-B pride in the My H-E-B app.
Luis Gutiérrez is a Principal Product Designer. You can connect with him on Linkedin, or you can explore his work on our new My H-E-B app.
