Skip to content

The Steady Work of Design System Building

Quick Recap
Design System
Since 2017, our teams have steadily updated, extended, and redesigned Hormel Foods’ design system. Here are a few of the highlights along the way:
hormel foods website on an ipad and phone laying on a wood table

Style Refresh

In late 2019, we noticed that two years of design system additions created more options for editors but oh-so-disparate styles. We ran an exhaustive audit to better highlight divergent paths, which provided the project team with the opportunity to further commit to clarity, accessibility, and an editorial style.

Through a series of focused phases (type, color, photo, icon, layout, and overlay adjustments), our teams worked to refresh the look and feel of the design system—and it’s primary product, hormelfoods.com—while avoiding significant foundational restructuring. The result? A timely redesign based on equitable styles and a more responsible, leaner set of building blocks to use across all extensions of the system.

Corporate Responsibility

The CR report was the first microsite to leverage Hormel Foods’ design system in 2017. When the aforementioned system redesign was launched in 2021, CSR inherited all the style-y goodness (yay design systems!). Since there were a few microsite-only components (a slightly different header, footer, and some reporting-specific elements), a quick round of unification brought those elements up to date and consistent with the rest.

One of the softer effects from the refresh was the change in available options to lead off pages—making the previous CR home hero difficult to justify. We worked with the CR team to enhance one option to include video, which now every extension of the system can enjoy.

Features

Storytelling is a foundational element of hormelfoods.com. As such, we’ve designed a special group of components to really lean into the reading experience of the Features section (thematically, “Inspired”). In 2021, we updated, improved, and added to those components to introduce ideas like media types, template flexibility, and bio pages.

More Hormel Foods