Skip to content

Responsive Redesign

Admittedly, our familiarity with Hormel Foods didn’t reach far beyond its iconic canned meat at our local Wegmans. A few trips to Minnesota changed that profoundly.

Our first peek at the people and the food of Hormel Foods came through the lens of hormelfoods125.com, a site we designed and developed to commemorate the company’s 125-year anniversary celebration. Midway through the project, we were chosen to bring its primary site, hormelfoods.com, into the realm of responsive design.

Hormel Foods makes a whole lot more than chili; since 2001, the company’s portfolio has grown to include Justin’s®, Applegate®, Jennie-O®, Wholly Guacamole®, and Muscle Milk® brands. A large part of the redesign would be effectively communicating its story: a Fortune 500 company with a wide spectrum of popular brands, driven by inspired people and food, determined to make the next 125 years as impactful as the first.

We set out for southern Minnesota to get to know the people of Hormel Foods and better understand how to pull it off.

Previous Site

Discovery

It was crucial to gather as much input as we could, which resulted in talking with nearly 70 (!) members of the company. We canvassed folks from corporate communications, brand managers, and executives, conducting on- and off-site interviews. A common theme developed: the site was widely seen as the opportunity to tell the story of Hormel Foods in the most authentic way possible, while also reflecting its global relevance.

We’re a lot more than bacon and SPAM®

don kremin, group vP, specialty foods

Through the interviews, we were able to surface some of the most critical pain points about the existing site. It was often described as “paper on a screen”, uninviting to read and not user-friendly. The process of editing the site was also arduous. For a company that publishes news in a fast-paced industry, it was important to deliver a CMS as easy-to-use on the back-end as the site is on the front-end.

Arguably, the biggest takeaway from our discovery with Hormel Foods was the impression made by its people. The previous site lacked a sense of their personality, integrity, and generosity (many employees use their own vacation time and resources traveling to Guatemala for the SPAMMY® project). These folks were easy to relate to in person, and we had to make sure the same was true on the screen.

We wrapped up our discovery phase by defining key audiences, business goals for the site, as well as the design goals we would pursue.

Concept

When it came to shaping the content, there was no shortage of approaches. We ultimately determined the most effective way to convey the whos, whys, and hows of Hormel Foods was storytelling.

Our brains are wired to understand and retain stories. A story is a journey that moves the listener, and when the listener goes on that journey they feel different and the result is persuasion and sometimes action.

Jennifer Aaker, Author of The Key to Brand Storytelling Isn’t Telling, It’s Showing

Leaning on the purpose statement, “Inspired People. Inspired Food.”, we centered the content around human narratives. Our goal was to drive viewers to the company’s unique stories about the intersection of people and food. The theme was so strong that we were able to lead each top-level page with a story that encompassed the values of the section. The awesome content team from Attention Span helped guide the creation of stories that would comprise the editorial section of the site, aptly named “Inspired”.

Lo-Fi Prototyping

We’ve found the “throwaway” aspects of paper (and whiteboard) sketches to be incredibly effective when determining content priority and exploring layout possibilities. The project team found a groove early in this process, providing feedback and helping to shape the strategy of landing and detail page templates.

A few rounds of iteration helped solidify useful features and which foundational components we’d need to build out. When confidence was high enough among the group members, we increased fidelity ever so slightly, from marker-on-paper to vector “wireframes” and eventually to gray-box, in-browser prototypes.

All the while, Attention Span worked with Hormel Foods to consolidate and simplify their message. The team leveraged GatherContent to store the first pass of site content. From there, we imported the content into WordPress and kept cranking.

Style Exploration

We often explore the potential visual aspects of the site while we’re sketching and prototyping, since one can inform the other. Many of the project’s design goals challenged us to scour the web for inspiration from both within and outside of the food industry. Fittingly, we used a visual inventory to assess which high-level style aspects (color scheme, type, photography) aligned closest to where the brand wanted to go.

From there, we focused on exploring style in closer detail. We employed a few rounds of element collages in an effort to imagine the presentation of the site’s most signature content (think: grid of brands, large facts, cover images for stories). Each exploration placed emphasis differently on color, type, layout, and even photo treatments.

When we landed on an element collage the team felt best embodied the design goals, we used it as the starting point for what would ultimately become the Hormel Foods design system.

Note: We’ll be diving deeper into the underpinnings of this in the near future.

Hi-Fi Prototyping

We’re quite proud of how some of the signature pieces of the site came together, combining our style and prototyping efforts with top-notch photos and copywriting. We prioritized performance across all screen sizes, loading lightweight, appropriately-sized images at the time they appear in view.

Here’s some of our favorites:

Brand Explorer

We developed an easy-to-use tool for sifting through brands in the portfolio, and naturally deployed it on the Brands landing page. But when you can simultaneously tout Hormel® Black Label® Bacon® alongside Justin’s® brand, we think that warrants being accessible from every page. So, we baked in the brand explorer just north of the footer across the site.

History

Suffice to say, when you’re in business for over 125 years, you tend to have some awesome vintage photos kicking around, which we found to ring true for Hormel Foods as we sifted through the archives. Wall-to-wall timeline nodes were the best and most immersive way to do these photos justice.

Leadership

Genuine, approachable people are at the forefront of Hormel Foods, and it was important for those attributes to come through on leadership bios. We art directed the photos to be relaxed and casual, and complemented traditional biography text with more candid superlatives, like favorite product.

Fast Facts

High-level scannability is key for the target audiences of this site. We met the challenge by featuring facts across top-level pages, which allows content editors to pull out and feature the more significant takeaways from any given topic.

Fast Facts

Inspired

Our favorite of favorites. With human-centered narratives at the core of the site, we aimed to make the editorial nature of this section an immersive, focused, and beautiful experience.

Each story starts with a cover; the title and signature image presented without obstruction.

On large screens, we transition the cover to the body of the article while still retaining the photo in a two-column view.

We leaned on Tiempos Text, a font the Inspired section uses almost exclusively. Its character allowed us to employ it at a generous reading size and its multiple weights provided the necessary variety for breaking up the article with quotes and recipes.

Newsroom

Critical to the success of the site is the ability for the Hormel Foods content team to frequently author and publish news. We designed a news system that permeates the site, pulling in relevant articles to any page’s topic. News articles can be shared to and driven from social media seamlessly.

Hats off to the corporate communications team at Hormel Foods for orchestrating the redesign effort. Their unwavering commitment to design and content throughout the process helped transform hormelfoods.com dramatically.

We couldn’t be more excited for the new site to reach its audiences. The debut of their inspired narratives and brand exploration tool will no doubt help change the perception that this storied company is much more than canned meat. Its highly tailored WordPress CMS will empower Hormel Foods to maintain their world-class website.

Ready to dive deeper?

More About Us Hire Us