Hy-Vee.com

Visual Design, Leadership, Mobile

Bringing a historic brand in grocery into the modern web era

In aligning with Hy-Vee’s strategic vision, our team set out to revitalize the hy-vee.com website. One of our main focuses was on highlighting Hy-Vee’s culinary expertise which was previously showcased only in their print publications. Hy-Vee has over 300 grocery stores across the US, and their brand is very well loved and recognized, making it a unique design challenge to bring a new online presence to a historic brand. We had a large team of designers and engineers working in tandem through the whole process. It was an awesome opportunity for all of us to lead with our strengths and create something special.

I was brought into the project early on for my strengths in visual design and motion design as well as proven track record with other projects at our agency. My goal was to come in and drive the design of a fresh, modern experience that we could all be proud of and would delight our users on both mobile and desktop experiences.

My role in the project

I led visual design efforts, provided art direction and supported in other tasks like wireframing and prototyping. My starting point was designing Hy-Vee’s Culinary experience.

Culinary was all about bringing Hy-Vee’s decades of recipes and wonderful food photography online, while also creating strong tie ins with their online grocery service. I worked extensively with my team to meticulously design every aspect of the visual design from the fonts to the colors, to how we used photography and motion. Additionally, I was central in ensuring the designers we brought into the project were able to support with any production work we needed as the project went on. This meant ensuring designers had clearly defined tasks, and didn’t work over each other in a very big project.

Project phases

  1. Research. Conducted strategic alignment and competitive analysis
  2. Conceptual Design. Developed aesthetic direction and initial concepts
  3. Collaboration. Set up style guides and managed team efforts
  4. Wireframing. Created wireframes for key mobile and desktop pages
  5. Hi-Fi Mockups. Designed high-fidelity mockups and prototypes
  6. Launch & Evaluation. Launched the site and analyzed impact

Honing the aesthetic direction

I had a blank canvas to survey Hy-Vee’s entire identity, both in store and in print. Knowing that we wanted to elevate our status in food and recipes online, I conducted extensive competitive analysis, drawing inspiration from the best in breed experiences for finding recipes online. With that, I was able to begin to pull together the beginning conceptual directions that would drive the aesthetic of the site.

A big part of my job was to help oversee our design team and the visual production work that was being done across multiple channels, and ensure it was folded it into a cohesive visual identity that could be leveraged for years to come as Hy-Vee continued to create content.

The samples below are from a creative direction presentation I gave to our key stakeholders at Hy-Vee in order to ensure we had alignment on direction and create a runway to move forward with design.

Creating a system for collaboration

I tried to push the envelope of collaboration with the project. I set up a framework that outlined the different style guides and ways we should manage the huge amount of visual assets we were generating every day.

In the example below, our Culinary project is only one channel of a global project. The process I created and my attention to detail allowed us to pull in other designers extremely quickly to support the large amount of production that needed to be completed.

Desktop and mobile wireframing

I was also involved in working through the wireframes for key pages of the experience. Visual design and Interaction design was going in tandem, so this step was really about finalizing both the mobile and desktop designs and then the next step was moving to visual production where we applied our aesthetic direction. It was an awesome experience to be able to design the entirety of these experiences and made the production go much faster given I was already familiar with what we were trying to accomplish.

I had to consider flows for some smaller widgets like feedback and social sharing as well as define a tagging system for recipes. We felt this was a great way to motivate users to interact and provided Hy-Vee a way to improve their recipes and see what was or wasn’t working.

Results & impact

Heading the visual design for Hy-Vee.com was a gratifying challenge. Our success in achieving our goals can be attributed to effective leadership, emphasizing a positive and collaborative mindset. As a UX leader, orchestrating the project involved not only visual design but also strategic thinking in enhancing user experience, giving constructive criticism and knowing when to make compromises.

Hy-Vee.com serves over 6 million users to their site per month, and it’s been exciting to see how little has changed from our initial designs direction, and it’s been gratifying to see that the scalable systems we built for creating and displaying content are working well for the company. We worked tirelessly to make something that we all would enjoy using, and that still shows today.

Caleb McGuire

I'm a father, husband and musician living just a little east of the Twin Cities. I've been designing awesome experiences professionally for over 15 years.

View Resume Get in Touch