H-E-B
Adding a meal kit feature to an existing grocery store app
Project scope
In a team of 3 UX designers, I researched and designed a new feature for grocery stores chain H-E-B: a meal kit with no subscriptions. With the goal to increase H-E-B customer’s base and sales, the motive was incorporate seamlessly this new feature while providing the easiest experience for the consumers.
Client
For over 114 years, HEB has been providing Texans with a customer-centered grocery store experience. They have 340 stores throughout the state and connect with their clients thanks to a strong digital presence : 1 website, 4 apps and a youtube channel with self produced cooking videos. Some of their current features include grocery shopping, curbside pickup / delivery, locating items in the stores.
Duration
2-week sprint
Tools
Figma, Sketch, Photoshop, Miro, Design Studio
Process
Empathize, Define, Ideate, Prototype, Test
My role
User research, hand sketching, wireframes, interface design, usability testing, project management
H-E-B grocery store chain needs a way to bridge the gap between their YouTube food channel and their physical stores so their customers can easily reproduce the recipes at home while shopping for everything they need at once.
With an increasing amount of people cooking from home due to the pandemic, H-E-B has been supporting their customers by providing meal suggestions online. In parallel, going to the grocery store is no longer the main way to shop. Customers are looking for ways to get everything delivered at home without the hassle of missing ingredients or shopping from various places. There is an opportunity for H-E-B to address these pain points while increasing their sales thanks to a meal kit feature which would enable customers to shop recipes and personal necessities all at once.
DEFINING THE USER
After redacting an interview guide with the team, we conducted 6 interviews with current and non current H-E-B shoppers. Our goal was to get insights on their shopping and cooking behaviors. How did they go about finding recipes? Why would they stick to certain habits of shopping? What were their current concerns and pain points in the grocery shopping process?
We compiled the various quotes into an affinity map and searched for commonalities.
Notable quotes from customers
“Cooking is a part of my self care, time isn’t a factor for me”
“I kept my meal kit subscription for 3 months but then I got bored of their recipes”
“Not having the correct items in the fridge is limiting”
Mapping insights
Reasons why people currently drop of meal kit subscriptions
Lacking of variety & flexibility
Food waste when users skip cooking
Packaging waste since everything is individually packaged
Cost of monthly subscriptions is high
Common ingredients like oil are not included and users are always missing something to cook
Users still need to go grocery shopping for other items
Users have picked up new cooking habits:
Pandemic is making people cook more
People are in need for more meal ideas
Grocery habits have changed: curbside & delivery
Competitive analysis
In parallel of our interviews, we also researched what options the users currently have in terms of meal kits. The goal was for us to discover any successful process our potential competitors were implementing and any opportunities we could add to the H-E-B feature that would make it unique and compelling.
We settled down on the following tools to assess the situation. The most relevant method we used was the competitive analysis.
Competitive analysis
Comparative analysis
Task analysis
Notable features competitors developed
Wine Pairings
Recipe Origin Story
Community Tips
Listed Allergens
Required Utensil List
Built-in Cooking Timer
Ingredient Ratings
Ingredient Substitution Option
Delivery Flexibility
Creating the persona
To synthesize our research, we define 2 persona that would embody our users and sum up their pain points, goals and needs.
Persona 1: The Foodie
“I am a foodie and I want recipes that give me more than a piece of meat on the plate”
Goals
Cook gourmet meals with ingredients that are easy to find
Save money on groceries but still make a good meal
Learning how to cook different thing each week
Frustrations
Meal-kit portions are too small
Not enough recipe flexibility
Recipe difficulty is unclear
Needs
Cut down on research time
Ability to save favorites
A way to view alternatives ingredient options
Persona 2 : The Family Cook
“I want variety in my meals but not everything need to be new”
Goals
Eating healthy as a family Wants to try new foods
Finding things to eat in an easy and efficient way
Wants to try new foods that don’t take a lot of prep time
Frustrations
It is hard to find recipe inspiration
Shopping for kids
Meal-kit commitments
Needs
Meal-kit that does not cost a fortune
A way to get all grocery shopping needs in one trip
To reduce food waste
CREATING THE USER FLOW AND OUTLINING OUR SOLUTION
With the user needs in mind, the next step for us was to create the user flow. How do we enable the user to cook a variety of recipes while doing their basic shopping all in one place? The solution was to incorporate into H-E-B current shopping app a feature that would showcase recipes step by step and allow the customer to add the recipe ingredients to their shopping cart seamlessly.
SKETCHING & WIREFRAMING
With the user flow in mind, we started sketching ideas on paper. We use the method of Design Studio which helped us ideate on several ideas and combined the best components of the solution together.
After some usability testing on the paper prototypes, we moved into Figma to create the wireframes that would enables us to do further testings and refine our solution.
HIGH FIDELITY PROTOTYPE & USABILITY TESTING
Before moving into the high fidelity prototype, we spend some time creating a visual guideline for this new feature that would match the brand image and respect the tone of voice, colors and visuals H-E-B uses. We made sure to use H-E-B native styling elements down to their font, color, app animation, iconography, and sizing/spacing.
With the styling guide in the background, we build the final prototype and fine tuned it thanks to usability testing.
Home page with the “browse recipe” feature incorporated this is where the users can browse and select recipes
Account screen with the “recipe box” feature incorporated
this is where the users can store their recipes
Recipe page
this is where the users can check the YouTube video for the recipe steps, as well as view/add ingredients to their shopping cart or start cooking.
Recipe steps page
this is where the user can follow step by step the cooking instructions for the recipe
Wireframes key points
the users must be able to tailor any recipe to their preferences and purchase only what is missing from their kitchen
it is a two-step process for the user: select a recipe and add the ingredients into your cart first, then once the products are delivered, the user needs a quick way to find the recipe and start cooking. This two-steps must be intuitive and easy to remember for the users
the new feature needs to fit seamlessly into the current app
the users must be able to find recipes in a minimum of interactions, save them and organize them for later use
Our style guide
Left screen: current H-E-B home screen
Right screen: our revisited H-E-B home screen showcasing the new recipe feature
THE FINAL PROTOTYPE - MAIN SCREENS
Recipe box
In the Account screen, there are a couple of sections for shopping lists and clipped coupons. The account section is a natural place for users to store the recipes they like, as users have come to know that they can find stored items in this area of the app. When browsing, users can one-touch “favorite” a recipe that will save to their recipe box here.
Recipe introductory video
At the top of every recipe page there will be an introductory video produced by HEB from their Youtube channel showing the user a brief overview of the steps and time needed.
Curated shopping list
Within a selected recipe page, the ingredients are listed and ready to be added to the cart. HEB will have the most common items preselected but the user can substitute for an organic option or change to their preferred brand.
Community tips
We added a community tips section within each recipe page to get other users’ experience and tips/tricks that made the food better or process more efficient
Dedicated recipe section
HEB has several different categories to explore like “Shop our picks,” “Shop coupons,” and “Shop by department.” We injected this new “Shop our recipes” section to drive discovery of the experiencer
Step-by-step directions
For a selected recipe, the step-by-step directions will guide the user through the process. Each step has a brief summary of the task, an ingredient list, cookware list, and a timer when required by the recipe -- bringing all the pieces together for a successful meal.
Feedback
We thought it was important to gather user feedback at the end of the recipe. This provides valuable data to HEB across key attributes and will enable them to curate the recipe section going forward. This section also collects UGC for Community tips
Usability testing
Servings/Cost Swap (Red Box)
We have the serving size toggle on the the left of the screen and cost on the right
Item Check Marker (Orange Box)
The check mark overlay for selected items kept obstructing the image of the ingredient
View Items Button (Purple Box)
In shopping for meal-kit ingredients, the two “View in cart” buttons were redundant and created confusion for the user. It was unclear whether the items were added to the cart or not.
Servings/Cost Swap (Red Box)
We found that swapping this configuration so the serving size toggle was on the right was more comfortable for the majority of our users being right handed (thumbed)
Item Check Marker (Orange Box)
We recreated the check mark to overlay at the bottom right of the item as well as matching it better to the H-E-B styling
View Items Button (Purple Box)
Cut down to one button and changed the call to action to “View items.”. By separating the sequence of viewing the items vs. adding it to the cart, users understood where they were in the flow.
Takeaways
Managing large content and steps during wireframing and prototyping
Because our feature was a 2-step process, we had many screen and content to manage: from the browsing of the recipe, to selecting it, viewing ingredients, shopping, paying and then of course cooking afterwards. Though the process was long, we made sure to create screens that flowed perfectly and were intuitive to the user.
Any new feature to an existing app must be seamlessly integrated
This is was the biggest challenge: how to we had a new feature that would be visible enough to the customer while not disrupting the way they use the app everyday? The biggest learning was to make sure to use the same interactions and animations in the interface so the user would immediately know how to go about the new feature.