Client Spotlight: About Inbound - HubSpot Website Re-Design

22 Aug, 2018

About Inbound is led by Vourneen Taylor, who worked at HubSpot for almost four years as one of their top Principal Inbound Marketing Consultants in charge in Classroom Training in EMEA and APAC.

She provides Inbound Marketing training and consulting for B2B companies by delivering personalised experiences that have the power to transform in an impactful way. If you are looking for help with your Inbound Marketing, I would highly recommend reaching out to her!

 

About Inbound HubSpot Website Re-Design

Recently I helped Vourneen freshen up her website by creating a new set of templates for her to use throughout her website. 

 

The Homepage

 

Screenshot of the About Inbound Homepage 

 

Compare it to the original homepage which used HubSpot's default Vast theme with less vibrant colouring: 

 

Screenshot of the original About Inbound Homepage 

The About Page

 

Screenshot of the About Inbound About Page 

The Contact Page

 

Screenshot of the About Inbound Contact Page 

The Blog Listings Page

 

Screenshot of the About Inbound Blog Listings Page 

A Landing Page

 

Screenshot of an About Inbound Landing Page 

 

The Design Process

The design process started with a conversation on the requirements for the website. In this case, the goal was to "freshen up" the design while keeping the same elements throughout the website. 

Prior to jumping into development, I created a mockup of the UI elements and several layouts on Adobe XD to ensure everyone was on the same page with the design. 

 

About Inbound XD Mockups

Original Mockups of the website on Adobe XD

 

After discussing any feedback on the design, I jumped into the HubSpot CMS and began building the templates. This particular re-design consisted in a number of specific templates, general templates and custom modules.

And in true growth-driven design fashion, we've launched the site quickly and will continue to optimise based on results.

 

Features

Full Set of Templates

The website re-design consists of a full set of templates includes: 

  • Page-Specific Templates
    • Homepage Templage
    • About Template
    • Contact Template
  • Website Templates (Full Width Template, Three Column Template, Two Column Equal Template, Two Column Left Template, Two Column Right Template)
  • Blog Templates (Blog Listings and Blog Posts)
  • Landing Page Templates (Full Width Template, Three Column Template, Two Column Equal Template, Two Column Left Template, Two Column Right Template)
  • System Page Templates
    • 404 Error Template
    • 500 Error Template
    • Password Template
    • Search Results Template
    • Email Subscription Templates (Unsubscribe, Subscription Preferences, Confirmation)
  • Numerous Custom Modules
  • Email Template

 

Customisable Background Image Headers

Throughout the site, all hero images can be set directly from the Website and Landing Page tools using the Hero Image Chooser custom module I built.

 

Hero Image Chooser

The templates allow you to set the hero image for the page

 

Dynamic Blog Design

Similarly, all blog posts automatically pull the blog post featured image and automatically sets it as the background image in the header.

 

Blog Image

The blog hero image uses the post's featured image 

 

Testimonial Slider Module

The website uses a testimonial slider module to show testimonials. You can learn how to build your own step-by-step here

 

Custom Slider Module

Testimonial slider custom module

 

Blog RSS Listings Modules

This highly customisable module allows you to add blog posts to any page on your site that updates automatically. It will soon be available on the HubSpot Marketplace and you can learn more about it here.

 Blog Module

The RSS Blog Feed module allows you to quickly customise the blog feed on your site, no coding required!

 

You can take a look at her website here

If you're interested in discussing a re-design of your own, why not get in touch?

 

New call-to-action

Topics: portfolio

Join the Conversation!

Do you have a question, feedback or comments on this post?