Summary

HEB wanted a new refresh of their homepage, which has been the same for the last 4 years. The redesign was done in conjunction with the Maya Modal Project. This new homepage launched in July and is currently live now. I recommend reading the HEB Maya Modal project first, and then reading this as they both relate to each other.

My Contributions

  • Design Lead
  • User flows
  • User research analysis
  • Accessibility recommendations

High-level goals

  • Reduce context confusion
  • Restrict choices

Constraints

  • Must cover the whole page
  • More image heavy
  • Faster loading times

Exploration/Process

The HEB homepage went through two redesigns during a 5-month period. The first iteration launched at the same time as the Maya Modal project. The marketing team created this new layout before I came onboard. It was already approved and slated to launch. The only recommendations I could make was accessibility issues like increasing the thickness of the font on image overlays for a higher contrast and advocating for more semantic markup to describe different elements on the page. I made these accessibility recommendations based on the A11Y Project and WCAG guidelines.

screenshot-www.heb.com-2017-04-24-08-39-34 (1)

Original homepage for 4yrs

Maya HEB Home

New homepage with Maya Modal launch

The homepage and modal were launched in June, but the modal was removed in August. However, the affordance on the left of the search bar was left in place until a new homepage could be redesigned. When the modal was created, three of the four choices served as mini-sites on the larger HEB website. The business didn’t want to undo the work that was done to separate these pieces of the website out, so the solution was to create a simpler homepage that excluded the modal.

I was the lead on this project and started off by creating a user flow for all the different components that needed to live on the website. Then I consulted with the user researcher, my manager, and the PO to whiteboard the flow for common use cases. The user researcher decided the best methodology to use would be an unmoderated usability study. This helped us map out how the user completed a task like finding if their store carried a certain product or how to create a shopping list. When we were done, the user researcher suggested we use UserTesting.com to quickly compare our user map to how actual users completed the task.

NewHomepageUserFlows

Interaction flow for the potential new homepage

For the usability studies, the user researcher wanted to do 2 iterations. The first set of tasks would have the user go through the old homepage, and the next set of tasks would have them go through v1 of my design. I mocked up a design that kept the same elements from the old homepage but with a more modern layout and bigger images. I designed it mobile first, but was asked to just focus on desktop for now. About midway through designing this page, my manager told me that marketing was asked to create a new homepage and they wanted to test with that instead.

Desktopv2

My version of the HEB homepage

My version of the HEB homepage

Homepagehome

Marketing's redesign of the homepage

Marketing’s homepage had two large images. The one on the left would go to a separate site called HEB Curbside, and the one on the right would go to the regular heb.com site. This new homepage was like a “front door” with limited options. Essentially HEB had two homepages. If the user wanted to search for a product, they could use the search bar on the homepage, or click on the right image to go to the full heb.com to search. The icons below the two images were the options from the Maya Modal. Weekly Ad and Coupons were part of the regular heb.com site, while Pharmacy is a separate mini-site. The ship-to-home button that was on the Maya Modal was relegated to the footer as the business wanted to phase that service out.

The user researcher and I conducted 6 comparative usability studies on UserTesting using marketing’s “front door” homepage. The most common tasks were

  • Find if a store carried your product
  • Order from the HEB Curbside Website
  • Check for Weekly Ad and Coupons

We ask three participants to complete each task on the old homepage, and three other participants to complete these tasks on marketing’s homepage. These were unmoderated tests that were recorded. The user researcher and I sat down for two days to analyze, and synthesize our findings. Overall, people preferred marketing’s version of the homepage because of the larger copy and images. However, they were confused about if elements below the homepage were buttons, and couldn’t figure out where the search bar was because the borders were too thin.

We launched this new page as a full page modal at the beginning of October. Users would see marketing’s new redesign when they went on heb.com, and would see the original homepage when they clicked on the right image to “Explore my H-E-B”. The only changes that were approved based on our usability studies were changing the opacity of the ghost text on the search bar and copy changes for the images. I wanted to include more recognizable elements like a login/register element and a navigation bar, but ultimately the purpose of this page was to be a more pleasant, full-page modal. The business wanted limited choices and didn’t want to distract the user from unnecessary elements. Even though the goals of the project changed midway through, I was flexible and tried to communicate changes to various teams as much as I could.

Takeaways

In addition to the usability tests we did, I would have loved to conduct tree tests and card sorting studies. This would have improved the hierarchy and nomenclature of the navigation bar. When redesigning the homepage, we weren’t able to take a look at the site hierarchy or go beyond one page. Doing usability studies on just one page didn’t fully fix the broader issues of confusion further down the user journey.

It’s easy to get attached to your designs, but ultimately it comes down to what the business thinks is best. You should always advocate for the user and speak up when there are usability issues, but it’s the job of a designer to find the intersection of business goals and user goals. It’s important to be kind, diplomatic, and to be thorough in research. Coming prepared in stakeholder meetings to field questions and have multiple iterations of designs that mimic a live page is one of the best ways to advocate for good design. A homepage is not done by one designer, but through the collaboration between designers, managers, researchers, and developers.