As web designers, the team at Brandca constantly adopts new tactics to improve user experience while making our customer's brands shine at the same time. We've designed sites on several platforms, including HTML5, WordPress, Magento and many others.
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.
Infinite scrolling pages
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."
Fixed navigation bar
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:
- A call-to-action to download the Ultimate Lead Generation Handbook
- A call-to-action to Request a Consultation
- A pop-out for a phone number to encourage interested people to call the business
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 have a background video playing on the homepage. The movement in the background video draws the visitor's eye to the call to action, but the transparency keeps the calls-to-actions from being overwhelmed by the movement in the video.
- For the Request a Consultation CTA and the Ultimate Lead Generation CTA, the call-to-action changes color when the mouse cursor is over it. This confirms to the user that a click will result in action.
- We'v structured the phone icon so that it pops out with the actual phone number when the mouse cursor is over it.
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).