H&H
Products Case Study

How can a food and beverage company excite its customers?

H&H Products Company is a specialty manufacturer of beverage, syrup, and ingredient products for the food service industry. They’re a tight-knit team that has been operating like family (and treating their customers the same way) since 1964.

Their current website didn’t convey that. While kicking off the redesign during a 2019 website discovery workshop, the H&H team wasn’t shy to say, “We’re fun, dammit!” in response to their frustrations with their website’s outdated, corporate appearance. As a customer-oriented team, they were also concerned that visitors couldn’t find the information they needed.

“Right now it’s a lot about us and not who we serve,” said H&H President Morris Hartley during our Website Strategy Workshop. “We’re accommodating and like family in how we interact in our day-to-day life. Currently the website feels like a catalog.”

This partnership centered around the goal of building a website that lets customers quickly find what they need, showcases H&H’s product selection in an unexpected way, demonstrates H&H’s industry experience and superior customer service, and lets the personality of this long-tenured team shine through.

Designing Around the Product

As a beverage, syrup, and ingredient manufacturer, H&H's products aren't exactly the most exciting. Think gallon jugs of tea sweetener, or the bag-in-box beverage syrups that feed into the soda fountain at the movie theater.

But there's also a lot of love and fun that comes from these products: splitting guava snow cones with friends at a carnival; sweet, drizzling warm syrup over a stack of the fluffy pancakes you ordered from room service while on vacation; sipping a pretty, fruity drink on a hot summer day.

A photo of HH product bottles
A icon of a liquid drop

Products are used as design elements and fun props to create and stage show-stopping imagery, conveying emotion and connection to the products in a whimsical way.

A photo of HH product bottles

Product Photography

H&H’s photography style is bright, imaginative, fun and a little over-the-top. The beverage manufacturing company dreams up the products that people create with, so naturally, their products needed to shine. The challenge: How do you make a photo of a plastic container exciting?

H&H Product Bags
H&H Product Bags
H&H Product Bags

We found the answer in the secret ingredient of all H&H products—creativity. The photography focuses on the ingredients themselves in the simplest form, as well the potential to build beautiful yet complex creations when mixed together. Showcasing the industrial-grade bottles, jugs, and colorful liquids in their unadorned containers and bags captures both.

A icon of a liquid drop

A new color palette complements H&H’s existing brand colors and gives them a distinctive, bold, fun look within the food manufacturing industry.

The revitilized style needed to balance the sweetness of a family company with the tactical sophistication of an online distributor. This is what sets H&H apart.

Illustration

Good design rarely succeeds because of how far an idea was pushed. The illustrations for H&H are a lesson in balancing style with restraint. H&H needed to present the sweet, fun personality of the customer experience but also promote the technical and tactical achievements of its service. The color palette and photography are energetic and conceptual. So we paired them with illustrations that land somewhere between blueprints and infographics, reminding the viewer H&H is in the collaboration business.

H&H Product Illustration
H&H Products Drop icon

Since accuracy and simplicity are important for their customers, easy, instruction-like illustrations of bottle sizes, box sizes, case quantities, and product details help avoid confusion.

H&H Product Bags
H&H Product Bags
H&H Product Bags

Designing Around Brand Values

A family business, H&H takes pride in their close-knit culture that spans over decades. They frequently go on group outings, host office potlucks, volunteer in the community, and make other conscious efforts to be together as a team.

H&H also has a major focus on customer service. They’re proud to talk about their quick turnaround time for inquiries, their promise to go above and beyond for customers, and how they score on distributor report cards.

Team Photography

The family at H&H is genuine, and so are their headshots. They reflect the team’s personality and show the real humans that customers are engaging with, accompanied by quotes about life at H&H and their favorite thing about working there.

Designing Around Customers

H&H has four main customer targets, and its website serves the needs of each one. Whether it’s ensuring a retail customer ends up at the online store or that a potential contract packing client can easily find a list of H&H’s certifications, the website is built for an intuitive experience.

E-Commerce

H&H’s e-commerce experience needed to feel equally as straightforward to help customers find the information they’re looking for and make their purchase decisions quickly. Their online store has multiple flavors and size options, and each product has different uses. Easy-to-digest product details and page filters make it easy for customers to understand what they’re purchasing and how it fits their needs.

Understanding the expectations of the customers were crucial to the success of the web experience.

H&H Products Site Image
A photo of HH product bottles

Product descriptions are packed with useful information on packaging, nutrition, storage, flavors, and mixing ratios that ensure customers have the best experience possible using H&H’s products.

A photo of HH product bottles

Everything from product filtering to mixing instructions are presented in an atypical way that doesn’t feel templated.

Understanding the expectations of the customers were crucial to the success of the web experience.

H&H Products List

UI/UX Design

Whether they’re new or returning, subtle details like cursor effects and page transitions boost the customer experience while interacting with H&H.

A icon of a liquid drop

Unexpected touches like cursor designs bring a sense of whimsy to the beverage manufacturing industry.

H&H Products Cursors
A photo of HH product bottles

A drop-down navigation drip that mimics the liquid nature of many H&H products.

Information Architecture

When arriving to the website before, it wasn’t clear where potential new customers needed to go, how to find the products or services they were looking for, or what their next step would be to partner with H&H.

H&H Products Site Image
A photo of HH product bottles

Useful pages were added that help customers track down the answers they need quickly—like where to find H&H products.

H&H Products Site Image
A photo of HH product bottles

Copy and content was updated to reflect the brand’s voice, values, professionalism, and commitment to the customer.

H&H Products Site Image
A photo of HH product bottles

Headlines, keywords, and meta tags were rewritten to help get H&H’s products in front of the customers who are searching for them.

Want a sample?

The electric new website launched June 2020. Its punchy photography, vibrant colors, and whimsical design elements help set H&H Products Company apart from its competitors while showing the beverage manufacturing company is, well, fun. Check out the site. If you like it, fill out the form below or call Alyse so we can come alongside your big vision.

Interested in what Big Vision can do for you?

866-595-9138