.png)
H-E-B Bakery Microsite Design
As UX designers we were tasked with a flow redesign that would position H-E-B as a strong competitor in the Baked Goods Industry. H-E-B is meant to be the one-stop-shop where Texan families could address all their needs, but our research showed that some customers are not aware of everything the bakery section has to offer.
My Role: UX/UI Designer &
Design Lead
Team: Five Members
Timeline: Six Weeks
The Problem
How might we improve H-E-B’s online bakery service, so that we can increase customer awareness for H-E-B’s bakery, and therefore increase revenue?
The Solution
A microsite that specifically targets users looking for baked goods for their special occasions and showcases how H-E-B’s bakery can address their needs with the variety of options and services they provide.
User Research
Research Goal
We conducted a survey and user interviews to obtain quantitative and qualitative data on the purchasing process and pain-points of our users. We wanted to understand what the favorite bakeries were and why, what was important for users when placing an order, and what were some gaps we could address to make H-E-B stand out.
Survey Findings
The survey received over 100 responses, with an indication that cakes and cookies are the most ordered items from bakeries, the ability to customize baked goods has the highest rate of importance with 41 votes out of 101, and over 50% of participants prefer ordering online versus the phone or in store.
User Interview Takeaways
-
H-E-B is not the first thought for customizing baked goods
-
Customization is very important
-
Preference for online ordering
-
People want an effective way to communicate customizations
Stakeholder Input
The team had the opportunity to meet with one of H-E-B’s Senior User Experience Designers, who shared what H-E-B calls “moods”, H-E-B’s version of a proto-persona, which further instructed us about the broad clientele the stores encounter.
Definition & Ideation
Competitor Analysis
​Strengths
-
Great design, easy to navigate the site.
-
Pre-designed/ themed cakes to choose from or create your own design.
-
Variety of food and sweets.
-
Can filter by occasion.
​Opportunities
-
Cart icon visible before the user has to check out.
-
H-E-B is hiding what makes them special - their custom cakes & licensed content design.
-
Add progress bar for checkout.
-
Have an independent online presence.
User Persona
Our user persona, Samantha O’Connor, represents a majority of H-E-B’s customers. Samantha is a mom who needs to save time where she can, budget and save as much money as possible, and does everything in her power so that her family can have the best life. Samantha is who we had in mind when designing a flow that is straightforward and easy to navigate.
Value Proposition Statement
An H-E-B bakery microsite to plan out special occasions in an easier, more accessible, and engaging way to order baked goods.
Our site offers the most customizations for baked goods.
H-E-B is the #1 grocery store in the US.
Prototyping
Sketches
Keeping in mind users like Samantha who are very busy, but still want to make their loved ones feel special, we realized we needed our flow to be effective but simple. So, first we sketched out two possible designs. Then, our team combined them using elements we liked from each design to become our low-fi prototype.
Low Fidelity Prototype
This prototype helped us test our User Flow.
We wanted our users to be able to find the product, and to customize it as much as they wanted.
Then, we built out the cart with an option to do a login, or create an account or check out as a guest.
Lastly, we built out a check out flow where users could select a Pick Up store, enter their payment information, and place the order.
Testing
In this first round, our testers brought up two concerns:
How were they going to be able to navigate back and forth from H-E-B's website to the bakery microsite, and if they could use their H-E-B credentials to Log In, or would they have to create a separate account? This feedback we took into consideration for our next iteration
Style & Branding
Color Story
Our stakeholder, Andie, provided us with the “Brisket” red, and “cold brew” colors from H-E-B’s style guide. These colors are used in our buttons and other components throughout our microsite. We wanted to keep the H-E-B logo in the top left corner, so we needed to find a color that complimented that bright red. We wanted to use a shade of blue that would also pair well with H-E-B Curbside, Favor, and pharmacy blue, but would give the bakery it’s own tone. We iterated on main color options numerous times in order to find the right shade & tone.
A/B Testing
Style Guide
Along with the already established color story, we kept the H-E-B logo, and chose a limited amount of icons. We chose a serif font called Lora for our H1 and H2 headers to stand out from the Open Sans font on the rest of the site. This Open Sans is prevalent among H-E-B’s main site, so our microsite will still feel familiar to H-E-B customers.
Testing & Iterations
Mid Fidelity Prototype
In the second iteration we applied our final style guide, and added H-E-B's home page to our prototype so users had a better understanding of how they would navigate to the microsite
Testing
During the test for our second iteration, users mentioned they wanted to be able to see what they were selecting when customizing, particularly in the icing section, where they had multiple choices to make.
High Fidelity Prototype
We removed the dropdown menus to keep the options visible so users could keep track of their selections.
Testing
Upon testing the hi-fi prototype, we discovered that it is a priority for our users to be able to search for specific items using the search bar.
Before making this change, additional items were added to be seen when the user added items to the cart, and a pop-up window would suggest frequently purchased items before checkout.
On this last test, we received positive feedback: “I feel like I’m using a more sophisticated version of H-E-B’s page”.
Development
Code Plan
Once the general flow was determined after lo-fi testing and testing amongst our group, we began coding the bones of the website in the early stages. Since the cake customization feature was a primary component, we wanted to guarantee that the design really empathizes with our users. We divided the coding and prototyping between the team to ensure we had enough time to fully implement our design decisions. We used Visual Studio Code to make coding together easier and resources such as Bootstrap and W3 Schools to help with creating code.
Website
Reaching the completion of our coded website, we did one last round of user testing, where we asked users to create an account, search for items to add to their cart, customize a cake, and complete the checkout process. We had a 100% success rate for all four of the tasks, with only minimal constructive feedback on button placement.
In Conclusion...
Final Thoughts
-
H-E-B is a uniquely genuine company that truly cares for its customers.
-
Our team worked well together and everyone was able to work in a preferred role.
-
We wish we had more time to implement feedback from the coded microsite user test.
Next Steps
-
Elaborate on account options.
-
Build out customizations for more baked goods.
-
Explore internal options for H-E-B’s bakeries.
.png){kind=small}