Back to Blog
Project Overview
A Small, Family-Operated Manufacturer Serving Homeowners and Commercial Buyers
Two Audiences, One Front Door
Our client is a family-run manufacturer of a plastic strip that installs along the base of a fence. It stops dogs from digging underneath and keeps weeds from building up along the fence line, and it gives a property a cleaner edge. The company has sold to commercial customers for years, and schools, parks, and ball fields make up a good part of that work. Within the last couple of years, social media posts that took off brought a second audience of homeowners, and the site’s traffic now skews heavily toward them.
- The website hadn’t kept up with either group. It ran on Squarespace, with four or five pages and a splash page at the front that asked visitors to choose residential or commercial before they saw anything else.
- Past that point there was little to act on. The commercial experience had only two buttons on its entire page, and pricing and product specs sat inside PDFs that visitors had to download.
- Nothing on the site separated a buyer ready to ask for a quote from one still working out whether the product fit.
- The mobile experience and the way images and video loaded had room to improve as well, which mattered because a substantial share of visitors arrive on phones.
The redesign grew out of the larger HubSpot work we’d started with the owners, who were looking for a better way to handle a rising number of inbound orders and inquiries (we cover that side of the engagement in our Customer Agent case study.
Once the sales process was moving into HubSpot, putting the website there too made sense, since its forms and tracking would connect to the same system. The owners also had a clear request for the front page: they wanted visitors to be able to choose their own path. Our design problem was how to keep that choice without making every visitor stop at a gate to make it.
Starting With the Story, Then the System
We began with messaging before layout. Our content team ran the client through a branding exercise, and the product’s simplicity made that easier than it often is. The same material gave us a map for search and AI-answer visibility. The old site already used a number of the right terms by instinct, with gaps in others, and because the site was small, we planned additional pages to give people more ways to find the company.
On the design side, the client handed over a logo and three colors: a medium green, a dark green, and an orange. That was enough to start from and not enough to build a site on. Our designer put together style tiles showing a few conceptual directions, each with an expanded color palette, and the client picked one. We then extended the chosen palette with darker and lighter versions of its colors and a set of neutrals, which gave the site the range it needed and gave the client a design system they can carry into other materials.
Build on a CMS That Works as Hard as You Do
Is Your HubSpot CMS Built to Scale?
Design and Development That Drive Real Growth arrow_forwardWhat We Built
A Header Toggle in Place of the Splash Page
The splash page is gone. Visitors now land on a real homepage with content on it, and the choice between residential and commercial sits at the top.
Clicking either one moves the visitor into that version of the site. Someone who arrives from a search or a social post sees the product right away, and anyone who realizes they’re in the wrong place can switch without backing out. Underneath, it’s one site, so a paid campaign can send commercial traffic straight to the commercial version and homeowner traffic to the residential one. On the homepage hero, the images stay still until a visitor hovers over them, at which point a video or GIF plays. The motion tells people those images are links.
Specs, Pricing, and Answers Inside the Page
The product details that used to live in downloadable PDFs now sit in the flow of each page, organized so pricing and features are easy to find and read. Every page also carries FAQs relevant to what it covers, where the old site had little beyond a single FAQ page. The commercial experience, which had only two buttons, now has calls to action placed through the page.
Visuals That Do Some of the Explaining
We added a before-and-after slider that shows a fence line with and without the product, along with simple illustrations that compare the product’s shapes and sizes. Visuals like these were close to absent on the old site. The price estimate form uses selectable cards with fence icons in place of a plain list of fields.
Mobile Details
With a substantial mobile audience, we kept the menu simple and made the contact details large enough to tap without effort. Shipping lead times moved into a dark green announcement bar at the top of the page, where they stay visible on phones. The footer leads with a large phone number and email address, with the navigation links below them.
Measurement That Didn’t Exist Before
The new site runs HubSpot tracking, Google Analytics, Google Tag Manager, and Hotjar. Hotjar came out of a conversation in which the owner asked, in plain terms, whether there was a way to see what visitors were clicking. A heat map answers that directly, and it gives a small team a way to start looking at their content and layout through data. It also sets up the next phase of the work, where strategy decisions about blog posts and landing pages can rest on what visitors responded to.
We’ve already walked the client through early heat maps on the new calls to action. We also gave the owner a starter prompt to use with HubSpot’s Breeze AI for checking the basics in his portal, such as page views, time on page, and form submissions.
Where It Stands
The site is live on HubSpot, with its forms and tracking tied into the CRM work already underway. The owner was in the site editing content as soon as it went live. The business now has tracking it can access and use, and the early heat map review gave both sides a shared starting point for the next round of decisions.
This was Phase 1: the messaging, the design system, the build, and the tracking. The data the site now collects will shape what comes after it. For more on how we approach this kind of build, see our page on website design for manufacturers.
Planning a Site for More Than One Audience?
If your website has to speak to two kinds of buyers, or your best product details are still locked inside PDFs, our HubSpot CMS team can help you plan the build. Let’s talk it through.
