Gehl Food & Beverage

UX Design | UX Strategy | Website Development

For the past 120 years, Gehl Food & Beverage has been the nation's largest manufacturer of low-acid, aseptic dairy products and is dedicated to providing delicious, nutritious, and convenient foods for the whole family.

The Situation

Gehl Food & Beverage came to Northwoods wanting to redesign their corporate website and also needed a new website for their consumer products.

After our team learned more about their strategy and goals, we provided them with recommendations on how to divide their current content into two websites.

Their traditional marketing collateral and branding for their consumer products didn't match their exisiting online presence.

The Solution

Northwoods helped Gehl Food & Beverage separate their consumer products into a new website, keeping their B2B products on the corporate site, to better meet each audience’s unique needs.

Gehl Food & Beverage already had a strong brand that targeted the consumer side of the business, called Gehl's. Northwoods just needed to effectively translate that brand identity to the digital space to create a stunning new, consumer-friendly website.

A bright color palette, a plethora of outstanding product images, and even some hand drawn illustrations gave the Northwoods team more than enough inspiration to create a design that matched Gehl’s needs.

Homepage & Recipe Detail Page Design

Instead of using a white background throughout the design, Northwoods added a light grey wood texture to help balance the bright colors with an earthy, natural element. The wood texture is meant to mimic a cutting board, which works well for a website focused on food and recipes!

Find a Recipe

Prior to the website redesign, Gehl Food & Beverage had begun to add recipes to its website. Northwoods developed a filter approach to allow users to easily sort through the growing recipe library. The drop-down options within the filter are styled to include icons, as well as provide a subtle movement on hover. These small details help to enhance the overall design and brand personality.

The recipe cards are also purposefully designed to remove information clutter. The imagery and title are enough to entice users to learn more while also maintaining a clean, easy-to-use interface.

Overall Site Design

The site search (show above) drops down from the top of the page to fill the entire screen. This provided plenty of room to include an illustration that Gehl's was already using in their print collateral – helping to unify the brand by tying their print with their web presence and providing a bit of character.

Although many of the layouts divide the content into boxed sections, Northwoods was able to keep the website from feeling too boxy by adding waves and curved lines to the headers of each page.

Northwoods designers also added overlapping elements to break free from an overly boxed look and feel. Examples of this include the form overlapping the footer area and images added behind the recipe cards, as shown below.

The website is also filled with many fun, playful hover effects and subtle movements. These uniquely digital elements help to enhance the brand and user experience without creating a distraction.

The Outcome

Gehl's now has a fun, energetic website that enhances their consumer brand and unifies their brand identity across both digital and traditional marketing efforts.

The web user interface creates a better user experience for consumers who can now more easily navigate the site and its content to achieve their goals.