This project was a collaboration between myself, Jackie Perez, Daniel Piedra, and Chelsea Ryan. My roles included ux/ui design for mobile app and website, research and concept development, assisting with copywriting, naming the service, and brand development.

The Client

HEB is the primary local grocery store in Texas. They have a reputation for offering the best selection of goods at the lowest prices. When HEB purchased Favor (the Uber of food delivery), it opened the door for them to provide more services to their community.

The Opportunity

We worked within HEB's strong brand system to develop an original concept for a meal kit delivery service that brings the convenience and freshness of HEB straight to your kitchen. A main challenge of this project was to study existing HEB brand elements and draw inspiration from them for our own work, while also drawing lines for what was out of bounds for our brand. Our goal was to create a brand extension with a fresh look and feel, while staying true to HEB's existing graphic standards.

meal kit competitor comparison chart

COMPETITORS

Researching what our meal kit competitors are doing helped us determine what role HEB's service should play in the market industry. We decided that HEB's meal kits would not be subscription-based, but rather pre-made kits that the user can order quickly whenever they need. Because HEB would manufacture their kits locally, this also gave our service a leg-up on the competition in terms of affordability, accessibility, and freshness of the kits.

graphic showing the structure of heb supper's service

SERVICE STRUCTURE

Many of our competitors offer an overwhelming amount of options for their meal kits. We implemented a simple system of organizing ours. First, by size (Classic and Family) and then by basic meal categories (Balanced, Light N' Healthy, Hearty, and Vegetarian). Four to five recipes are offered within each category per week, with certain recipes being fully vegan, gluten-free, etc.

graphic of target audience qualities. tech-savvy, working professionals, and curious

Brand Voice

A good neighbor is a valuable thing. We target users through the use of friendly and caring language with fun and helpful applications.

photo of a delicious burger with tagline now youre cookin

Tagline

This tagline works as a double entendre, highlighting what consumers will literally be doing with the meal kits, while also emphasizing the success the kit will bring to their home cooking.

photo of farmers market crates with heb supper logo beside it

Naming + Logo

For this service, we wanted a name that used playful language to convey warmth and a feeling of familiarity. "HEB Supper" was my solution as it gives the feeling of HEB sharing a meal with you by bringing it directly to your home. Additionally, "supper" is an ambiguous term that doesn't restrict the service to providing one type of meal.

Our logo was designed by Jackie Perez and Chelsea Ryan, who drew inspiration from typography found on farmer's market crates and signage. The HEB logo is not our creation, but we referenced HEB packaging to determine where to place their logo within our mark.

Identity

color palette with produce images
heb typefaces

Our primary type palette consists of Alternate Gothic, Open Sans, and Georgia. We used two secondary display typefaces so that we would be consistent with HEB's brand, which utilizes a variety of type.

Icon System

I drew inspiration for our icon system from table set dinner plates and the stamp seal that was created for our packaging.

For the HEB Supper icon, I drew inspiration from HEB's existing Home Delivery and Curbside icons.

icon set for heb supper

Pattern + Packaging

We use a modular grid system as a pattern within our brand, which comes from the interior of the HEB Supper meal kit packaging.

We looked at the interior of bento boxes to inspire our packaging and designed the meal kits to have removable interior dividers to organize the ingredients. This limits costs for HEB, as they would not need to order several boxes with various interior layouts.

images of package with pattern
Packaging was created by Daniel Piedra, with concept assistance by me.
ipad sitting on kitchen counter with heb mobile order site up

Purpose

Because our service is not subscription-based, we decided that designing an online order site would be more convenient for our users. The mobile order site makes ordering HEB Supper quick and convenient.

Paper Prototypes + Usability Testing

lofi sketches of heb mobile order user flow with call-out comments

Final Design

The user is able to choose their preferred HEB location, delivery method, and the date and time for their Supper order. This makes the process easier for users who work or lead active lifestyles and need more control over when and where they get their meal.

iphone mockup of heb mobile order
iphone mockup of meal kit type selection

Recipe Card Screen

Users can view the recipe card for the meal kit digitally before choosing to go through with the order.

heb supper digital recipe card
checkout flow

Checkout Process

Users have the option to send their order to the HEB Home Delivery site, if they would also like to order their regular groceries at the same time.

heb supper digital recipe card continued
create account screens

Advertising Strategy

Advertising is primarily done online, allowing us to reach broader audiences and take advantage of HEB's strong online presence.

mockup heb website with supper branding

To create this design, we pulled from HEB's current website and added our original content to it.

heb website with supper ads
iphone mockup of heb instagram feed
iphone mockup of heb instagram animation gif
Instagram animation was created in collaboration with Jackie Perez.

Instagram

We referenced our pattern within the HEB Supper instagram feed, using bold color and type to create an interesting layout. An animation ad was created, which shows a simple step-by-step of how to prepare the Lonestar Steak Fajitas.

heb youtube channel

Recipe How-To's

A branded YouTube channel would archive tutorial videos that teach the user how to cook HEB Supper recipes. This allows users to prepare meal kit recipes even without the purchase of the kit itself, since all of the ingredients would be available at their local HEB.

Pop-Up Event

HEB is an active participant within their community, so we conceptualized a pop-up event where HEB chefs would prepare and sample meal kits for the public. The event would be advertised over Facebook to generate consumer interest.

heb facebook event page
fork with type reading gracias, y'all