Last fall, we were awarded the HubSpot Design Certification to build websites on HubSpot's Content Optimization System (COS.) Now that we've built a few sites on the HubSpot platform, we've hit our stride in incorporating the latest design elements on the HubSpot COS.
Here's how Santiago Restrepo, the head of our Development team describes the HubSpot platform: "I've been developing my skills with HubSpot's Content Optimization System and I've found that it is a powerful, agile and flexible tool. With several ready-to-use widgets, powerful customization and access to HubSpot API I've been able to develop ready-to-deploy products very efficiently with great results. Learning it has definitely paid off."
Here are 3 web design tactics we used on the new Rapidan Inbound website.
There used to be a maxim for website design that all important elements of the website had to be "above the fold." This meant that important information had to be included on the user's screen without the need to scroll down.
One of the latest trends in web design is infinite scrolling pages - web pages that contain information below the fold.
Let's dispel the myth that users don't scroll. According to website UXMyths, "Although people weren’t used to scrolling in the mid-nineties, nowadays it’s absolutely natural to scroll. For a continuous and lengthy content, like an article or a tutorial, scrolling provides even better usability than slicing up the text to several separate screens or pages."
By including infinite scrolling pages in the Rapidan Inbound website, we reduced the number of non-blog pages by 50% and made it much easier for users to access the information they need. To make sure the user knows that there is more information below the fold, we included a button that says, "Scroll Down."
A fixed navigation bar goes hand-in-hand with the infinite scrolling pages. Note how the navigation bar stays in the frame as the user scrolls down the page. This makes it easy for the user to navigate both the page and the site as they don't need to go to the top of the page to go elsewhere on the site.
Our HubSpot customers are interested in using their website to generate leads. After all, HubSpot is an internet marketing software and the people that buy it want to use their websites to sell. That's whey we used conversion-centered design principles on the Rapidan Inbound website. You will note that the homepage (see above) contains three primary calls to action above the fold:
You will note that we used the orange color for the call-to-action buttons. The reason is that this color provides a contrast to the other colors used in the page and draws the user's eye to them.
We added a few other features to this part of the page to improve conversion rates.
We've used conversion-centered design throughout the site. Here's an example of how we used directional cues to draw the user's eye to a CTA. (Note how the yellow highway lines converge on the CTA).