H-E-B Catering Platform
Elevating the online presence of a developing department
for the #1 online grocer in the US
Overview
ROLE
Project Manager
UX Research
​
TOOLS
Miro
Figma
Google Suite
Zoom
Trello
DURATION
4 Weeks
TEAM
5 Designers
PROBLEM
SOLUTION
IMPACT
We believe that customers are underserved in the current online experience at HEB Catering which leads to user frustrations and lack of knowledge of all that HEB offers.
The existing online catering platform lacks visibility, a streamlined experience, and sufficient product information.
Create a streamlined and intuitive catering order process within the existing H-E-B mobile app and website to enable customers to discover and utilize H-E-B’s catering services.
Expand their already successful online grocery experience to cater to the 56% of customers that prefer to place catering orders online and the 92% that want to view catering options online.
Wireframing & Prototyping
ACCESSIBILITY
Especially with red as their primary branding color we wanted to make sure the website is accessible in a variety of ways.
ORIGINAL - AA COMPLIANT ONLY
Color contrast AAA failure for the secondary red color with white text
REDESIGNED - AAA COMPLIANT
Darkening the secondary color enables the site to be accessible to the most amount of people
MISSING ALT TEXT
The shopping cart icons are lacking alt text - a visually impaired user tabbing through the site or app would NOT be able to check out easily, if at all
USER FLOW OVERVIEW
To lay the groundwork for prototyping, we built out user flows for each of the primary functions. This gave us an idea of the screens we would need and the actions taken on each of them.
Determine catering type: pickup/delivery/staffed
1
Gather relevant store & order info
2
Customer shopping section with filters, search, and detail pages
3
Login/account creation
and checkout
4
DESIGN SYSTEM
To ensure brand consistency and accessibility across all pages and content, we followed the existing design system as closely as possible without official documentation.
COLOR - TYPOGRAPHY - LOGO
WEB COMPONENTS
Headers
Checkout
Order Information
Product Cards
Drop Downs
MOBILE COMPONENTS
Product Cards & Nav Bar
Buttons
Headers
LOW FIDELITY PROTOTYPE
In our first iteration, we wanted to establish a general layout primarily of the screens specific to catering that have not been developed by H-E-B before, as opposed to product display pages that have already been designated by their design system and branding.
SELECT WEB CATERING SCREENS
SELECT MOBILE CATERING SCREENS
User Research
HYPOTHESIS
If we create an online catering order process that is streamlined, intuitive, and clearly presents all menu options, then we will enable customers to successfully cater an event. This would lead to an increase in HEB Catering’s overall engagement and customer satisfaction.
H-E-B RANKING
H-E-B was named the best online grocer in the U.S. by "customer science" company Dunnhumby. The article highlights the emotional connection H-E-B has with customers above other grocers.
WHAT SET THEM APART:
Ease of use of the H-E-B app
Ease of paying for purchases
On time order deliveries
CURRENT CATERING CAPACITY
1 PHYSICAL CATERING LOCATION
- Lubbock, TX H-E-B has the only in house catering department
- 2 additional stores being built this year will have catering departments
EXTERNAL CATERING FOR H-E-B RESTAURANTS
- catering offered by any H-E-B owned restaurants is done by third party vendors such as EZCater below
PARTY TRAY PICKUP/DELIVERY
- does NOT include full catering menu
- CANNOT accommodate a catering staff
PROJECT CONSTRAINTS
1
Different products sold in each store
2
Company privacy - little public info/data
3
Existing design system
SURVEYING USERS
To validate the need for this product, we conducted an online survey of over 40 individuals that have catered an event previously.
68% did NOT know H-E-B offered catering
68% unaware
aware
INCREASE VISIBILITY
Increasing visibility and access to catering will result in more awareness of service and engagement
92% PREFER to view catering menus online
92% online
INCREASE INFORMATION
Shows the need for at least a detailed current online presence of catering options
56% PREFER to order catering online
in person
phone
56%
online
VALID CUSTOMER BASE
Shows that when it comes to catering, much like groceries, a large portion of customers want to take care of it online
USER INTERVIEWS
We conducted 10 remote user interviews with users that have previously placed a catering order for an event.
KEY TAKEAWAYS
price and quality are primary concerns when catering
a variety of food choices are important, especially diet/allergy
customers want better communication from vendors in their catering experience
USER PERSONA
Following our research, we created a user persona to create a realistic representation of one key segment of our primary audience.
needs quick and easy way to place an order
wants clear communication from vendors
STORYBOARD
We wanted to continue to weave a story for our user to further understand what opportunities we could implement in the redesign.
NEED
ESTABLISHED
Cara's manager tells her the BIG bosses are coming
in town and they need her to cater lunch for the big meeting.
She looks around but cant find anything online and no one is picking up their phones! She is busy prepping for the meeting doesn't have time to go in-store.
It's 2 days before the big meeting and Cara still hasn’t found catering or gotten ahold of anyone!
The stress and pressure are setting in. It’s really important to put their best foot forward in this meeting.
PROBLEM &
DEFEAT
AWARENESS &
PURCHASE
Cara enlists help from her colleagues to find something that is quick, has a large variety, is good, and won’t break the bank.
Eventually, they find out H-E-B offers Catering. They had doubts but time was running out and this seemed to be their best option.
SUCCESSFUL
CATERING & LOYALTY
The meeting turned out GREAT! The food was hot and ready when everyone got there and there were options for all tastes! She will for sure be catering with H-E-B again.
HIGH FIDELITY PROTOTYPE
We then applied the colors and designs from the design system and branding along with button prototyping to finish everything out.
MOBILE CATERING PICKUP
ORDER FLOW
HIGHLIGHTS
-
Advertise catering on the homepage & department page for more visibility and awareness
-
Choose stores by their distance and specialty restaurant variety
-
Maintained branding/design system: seamless and easy for customers to transition into
-
Clear expectations and opportunities for customers to add special instructions
-
Filter for a variety of needs including allergy/dietary
WEB CATERING HOMEPAGE
STAFFED EVENT WEB ORDER FLOW
Reflection
NEXT STEPS
Given the scope of this project, there were some things we did not get to, but that would be ideal.
Non-food Catering
If additional time was provided, we would want to build out the catering platform to better accommodate the floral and custom cake catering options.
Prototype Testing
Given the time constraints and that the majority of the screens in both prototypes were designs already validated and in use by the company, we did not get to test our final prototype to iterate.
KEY TAKEAWAYS
Coming to the end of the project, our team took a moment to reflect with the team about what went well and what we could have done better.
Existing Design Systems
Working within an existing design system challenged our creativity to find solutions within specified parameters.
Unhappy Path Screens
In this project we learned that with a complex user flow, there are many more possibilities for unhappy paths or errors that need to be considered with a way to guide the user back on track.