Summary

HEB is a grocery company based in Texas. For a year, they have gotten 10-20 complaints a week on the website about how hard it was for customers to find what they were looking for. The Maya Modal project was a homepage pop-up that began half a year before I arrived at HEB. The purpose of this modal was to reduce context confusion for users on the site. By forcing four choices for the users on any page of the website, traffic could be directed to specific services they wanted to highlight. As the lead designer, I worked closely with the UI developers, marketing team, and lead researcher to implement and iterate on the modal.

My Contributions

  • User interviews
  • Research analysis
  • Copywriting
  • Design—Lead
  • Mobile improvements 
  • Project management
OriginalModal

Original Maya Modal

High-level goals

  • Direct traffic to HEB Curbside website
  • Simplify choices for users down to curbside, HEB website, pharmacy, and shippable items
  • Reduce context confusion of where the user is on the website

Constraints

  • Must work on mobile and web
  • Could not click out of it
  • Must be implemented in 2 months

Exploration/process

I came into the project as the third iteration of the modal was being reviewed for approval. I led the design at the beginning of May and it was in flight to go live at the end of June. This modal would appear on the user’s screen for every 20 minutes of inactivity on the site and would not have a close button. The designs were created by the marketing team, and the development team was in the process of building out the functionality. Initially, I felt disoriented since there were so many teams on this project (internally and externally) and was unsure of how to start. I expressed my concerns and asked the UX manager about what I should do in my position, and he said he wanted me and the lead researcher to find usability issues with the modal. Excited about getting to talk with users, I helped the researcher with recruiting participants and analyzing our results. I also put together an environment on a mirrored site that mimicked the functionality of the live modal as closely as possible.

OriginalMobile

Mobile Maya Modal

The lead UX researcher and I led two full days of moderated usability testing on mobile and web. We had seven in-person participants and asked them to perform various tasks. I took notes, listened, and observed how they used the modal to navigate. One of the most interesting behaviors I saw was that four out of seven people used the navigation and sub-menus to complete their tasks instead of using the search bar. Almost all seven participants hesitated at the pop-up and tried to click out of it to get to the homepage. Once they realized they were unable to bypass the modal, they read the description below each choice to figure out where they could go. On mobile, people complained about the text being too small and the icons being too vague. On both mobile and web, users didn’t think the options looked interactive and didn’t know that they were supposed to click on one of the four choices.  

OriginalvsNew

The blue box highlights the content changes. The cancel button on the upper right-hand corner was also added.

The blue box highlights the content changes. The cancel button on the upper right-hand corner was also added.

The only revision implemented before launch was changing the image on the modal. When we launched, the modal looked the same despite the recommendations based on our findings. Post-launch, we received 300+ complaints within a week about not being able to dismiss the modal, confusion about the purpose of the modal, and inability to find what they were looking for. My proposed changes launched in the next two sprints and the complaints dropped off about 10%. However, the modal was officially removed at the end of the August due to a new homepage redesign to alleviate the need for a pop-up.

Takeaways

There are many moving parts in a large company and communication is important to keeping everyone informed. Stakeholders play an important role in the product development process, and their unique concerns and obligations require the ability to understand their point of view to keep the product as high-quality as possible. I learned how to be succinct in my presentations, my goals, and to listen to feedback. Design isn’t just about visuals, it’s about effectively communicating and empathy to different perspectives.

Another key takeaway is that analytics can only tell what the users did. It cannot tell why they did them. Attending the user interviews in person and watching them go through the site was amazing to see because each person had a different way of completing the task. Some people used the menu, some people used the search bar. It reinforced that there are different paths to arriving at the same place, and that a user will never do what you think they'll do.

This was one of my first projects during my time at HEB, and I grew into a better designer because of it. Even though the modal was eventually removed at the end of August, I interacted with more than half of the digital team and learned the best way to communicate with remote contractors. I attended daily stand-ups with the development team, sprint planning, retrospectives, etc. as well as learned best practices for usability testing. It was such a fun project to see develop on a three-month timeline.