HNH header

H&H Products

A beverage manufacturer needed a digital presence that let the personality of their long-tenured team shine through.

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.

Everything from product filtering to mixing instructions are presented in an atypical way that doesn’t feel templated. Whether they’re new or returning, subtle details like cursor effects and page transitions boost the customer experience while interacting with H&H.

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.

HNH header

How can a food and beverage company excite its customers?

H&H Product's Florida Key West Deluxe Frozen Drink Mixes
H&H Product's Nitro Infused Frozen Beverages
H&H Product's Hartley's Snow Cone Syrup 16oz - 12 Packs
H&H Product's Color Palette

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

The revitilized brand style balances the sweetness of a family company with the tactical sophistication of an online distributor.

H&H Product's Syrup Bags
H&H Product Concoctions

H&H’s photography style is bright, imaginative, fun, and a little over the top. It focuses on the ingredients themselves in the simplest form, as well the potential to build beautiful yet complex creations when mixed together.

H&H Product Photography
H&H Product's Shipping Illustration
H&H Product's Packaging Illustration
H&H Product's Box Illustration

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; drizzling sweet, 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.

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? 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.

City Skyline
City Skyline

Illustration

The revitalized 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.

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.


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.

City Skyline

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.

Ecommerce

H&H’s ecommerce 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.

Everything from product filtering to mixing instructions are presented in an atypical way that doesn’t feel templated. 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.

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.

Useful pages were added that help customers track down the answers they need quickly—like where to find H&H products. Copy and content were updated to reflect the brand’s voice, values, professionalism, and commitment to the customer. Headlines, keywords, and meta tags were rewritten to help get H&H’s products in front of the customers who are searching for them.

City Skyline

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. What do you want to serve up to customers? Fill out the form below or call Alyse so we can come alongside your big vision.

© Big Vision 2021