SaaS product page design: 7 best-practices [with examples]
Oct 28, 2024
C.H.I. Overhead Doors partnered with us to elevate their brand and overhaul their website on HubSpot Content Hub. The results have been transformative for their business. In just 12 months, their website has driven significant increases in discoverability, website traffic, conversion rates, and customer acquisition. Read on to discover how we did it.
C.H.I. Overhead Doors, based in Illinois, have been manufacturing quality garage doors since 1981. Their product line includes both residential garage doors for homeowners, ranging from traditional designs to modern styles, as well as heavy-duty commercial doors for warehouses and industrial facilities.
Working through authorised dealers across the US, C.H.I. has built their reputation on American manufacturing, quality construction, and dedicated customer service. Their commitment to producing durable, well-crafted overhead door systems has established them as a household name in both residential and commercial garage door solutions.
C.H.I. partnered with us on a brand and website redesign project to address several critical issues and align their online presence and market position. The key challenges were:
We created a new website using HubSpot Content Hub, enabling C.H.I. to overcome their challenges. There were five key components of the project:
The first stage of the project was to create a visual language that captured their rich historic brand but extended its use for the web.
We identified that the current colours and visual styles like icons and imagery weren't demonstrating premium value. So, we started by exploring an extended colour pallet that complimented their iconic red, with new iconography and lifestyle imagery packs.
From here, we applied these new visual elements to three different concepts. C.H.I. had a clear favourite, which we then applied to the website design.
The showreel below shows how the elevated brand style came together.
Before creating the new website, it was essential to have an effective website strategy that would inform the information architecture and user experience. This ensured the website not only looked great but met the requirements of the end-user too.
To enhance website discoverability and drive more visitors through search, we created a keyword strategy to identify core commercial keywords that we'd want to target to bring buyers to the website.
We worked with C.H.I. to establish a sitemap for the new website, outlining the new pages that will be necessary. This was built from a mix of internal and market research, which identified the most important things and then created pages to serve these needs.
We incorporated the keyword strategy into the sitemap, ensuring the pages targeted identified keywords.
_page-0001-min.jpg?width=4090&height=2584&name=CHI_sitemap_24_03_2022%20(1)_page-0001-min.jpg)
Crafting copy for C.H.I.'s core website pages allowed us to weave together every element of the brand and strategy.
The copy integrates their brand messaging with our strategic keyword approach, ensuring strong alignment with the visual design. The result is website copy that captures C.H.I.'s brand voice, drives organic traffic growth, and enhances user experience.
With the strategy and content in place, our creative team worked on designing a website that:
The homepage gets right to the point, highlighting their premium garage doors as the perfect finishing touch for homes and businesses.
A clear message sums up their offering: "garage doors with style and substance", working together with the hero images to show C.H.I.'s range of designs and functions, with some hand-drawn graphics that add a crafted, premium feel.
During the strategy phase, we identified the importance of splitting content for home and business customers. This makes it easy for visitors to find exactly what they need, whether they're looking for a residential or commercial solution. Each section provides tailored information, helping users get to the right product and information faster.
A core section of the website is the model catalogue, which lets users find all of C.H.I.'s doors in one place, using multi-faceted filtering, or the search function to find the right product.
It was important to present products in a visually impactful way whilst ensuring that key product information was easily consumed. The design combined the intuitive, familiar e-commerce-like experience with a high-end appearance.
In the process of selecting a garage door, colour choice plays a crucial role for many buyers. Recognising this, we designed an intuitive multi-step form to allow potential customers to request colour samples directly through their website.
Overall, the design of the website helps C.H.I. to overcome their challenges by:
We built C.H.I.'s website to be both performant and easy to manage. The website framework strikes the right balance between flexibility and structure, making it simple for C.H.I.'s team to manage their content.
Beyond the core framework, we also developed several custom elements to address C.H.I.'s specific needs.
C.H.I. required a robust and flexible solution for their product pages, which are crucial to the buyer's journey. The main requirements were:
To meet this need, we developed a dynamic product page module that combines centralised data management through HubDB with intuitive on-page editing capabilities.
The solution uses layered HubDB tables that store product information hierarchically - from common attributes shared across products to specific details for individual models. This eliminates data duplication while maintaining consistency across the website.
The module features dynamic content population that automatically pulls relevant information from HubDB to populate appropriate pages, while still allowing C.H.I.'s team to customise the visual presentation through on-page editing. The scalable architecture can handle thousands of products without performance issues, making it future-proof for C.H.I.'s growing product range.
The sample request form is a key conversion point on the website, and CHI needed a solution for their website that would:
To address this, a bespoke multi-step sample form was developed, combining visual colour selection with HubSpot's native form functionality.
Using HubDB to dynamically manage colour options, the streamlined three-step process guides users through product selection, colour choice, and contact submission. The fully responsive form automatically records selections in HubSpot's CRM, providing an engaging user experience while simplifying lead management for C.H.I.'s team.
C.H.I. needed a sophisticated search and filter system to accommodate diverse customer preferences - from those just browsing to those seeking specific models. The solution needed to balance advanced filtering capabilities with direct model number search, while maintaining an intuitive, e-commerce-like experience that presents products visually.
A comprehensive model catalogue was developed by layering HubDB tables into a custom front end. The system features an advanced filtering interface where users can refine products by multiple criteria (door type, colour, insulation) with real-time updates, alongside a dynamic search bar for model numbers.
Product results are displayed in a visual grid layout with key specifications at a glance, pulled directly from interconnected HubDB tables.
While adding custom features, we maintained optimal website performance by using HubSpot's built-in tools and writing clean, efficient code to add functionality on top of them. This focused approach helped us pass Google's Core Web Vitals Assessment while delivering the specific functionality C.H.I. needed.
The development of the website helped C.H.I. solve their challenges by:
The transition from the old website to the new one resulted in a 15% increase in traffic, equating to over 140,000 more sessions. This reflects the improved user experience, optimised code, and more effective SEO strategies implemented with the new design.
The updated request a quote page, with its improved user experience resulted in a 35% increase in conversion rate from page views to quote requests.
The new website not only generated more quotes but also converted them into customers at a higher rate. The 26% increase in new customers from quote requests showcases the impact of the enhanced user journey and streamlined quote process.
One of the most striking impacts of the new website was the dramatic increase in sample requests. Compared to the previous year, the new website had over 5700 more sample requests, a 1397% increase. This surge can be attributed to the introduction of a new, visually engaging form that was made much more accessible and easier for buyers to use, significantly improving the user experience.
C.H.I. Overhead Doors' partnership with us has delivered transformative business impact:
