15 Nov 2018

The future of HubSpot CMS: Luke Summerfield reveals all

We got the chance to interview Luke Summerfield, Founder of Growth Driven Design and CMS and Developer Advocate at HubSpot.

See what Luke has to say about his Growth Driven Design journey, the future of HubSpot CMS and how he’s working on building an amazing HubSpot CMS Developer experience and community.

A re-cap on Growth Driven Design

Growth Driven Design (GDD) is the process of redesigning a website using agile development methods. GDD aims to buildout a website in increments and to make continuous improvements to your website backed by data and analysis. In essence, GDD does away with traditional website design methods which focus on designing and building every single element of your website page to perfection before letting it sit to go stale very quickly.

As Luke succinctly put it:

“Growth Driven Design alleviates all those frustrations that come with traditional website redesigns, such as launching on time and going over budget.”

When Luke asked agencies what their average website launch timescales were compared to what their estimate was, Growth Driven Design came in on time versus traditional websites, which on average were two weeks late.

Growth Driven Design is usually seen as being split into three phases: creating the strategy, building a launch pad website, and making continuous improvements. Find out more about the methodology here.

Luke’s Growth Driven Design Journey

Luke told us that three years ago he had one mission: “to transform the world of web design with Growth Driven Design and HubSpot.” To accomplish this, he started to build a strong GDD program, which included releasing HubSpot certifications and supporting agencies who were delivering GDD to their clients. While 50% of his time is spent on this, he tells us he has had a much bigger challenge - helping people use HubSpot to build and optimise their website.

Luke admits, “historically, we have not given a lot of love to the developer community (those who are actually doing the coding and building of their site), in terms of their experience and how things are organised and how they were getting trained. We had very old resources all over the place.”

In the last 8 months, Luke’s focus has been on developer experience, making sure those building on HubSpot are learning effectively, are supported and are part of the community, but most importantly are enjoying using the tools.

Previously, support around Growth Driven Design was more related to the UX design and strategy, such as figuring out what to build and why. Luke and HubSpot are taking it a step further by focusing on the how: How do you code that? What tools are available? Where do you go for questions?

If you'd like to learn more about Growth Driven Design or become more involved in the community, Luke shared with us some of the best resources:

So how has HubSpot evolved to suit GDD?

In September at INBOUND 2018, HubSpot announced it was entering the CMS market with its standalone CMS product. Luke tells us why this came about and the main benefits of Hubspot CMS:

“In the past we had made it very difficult for anyone to just use the core functionality of the CMS. You had to have all the marketing tools in order to then add on the CMS to be able to do some of the website design stuff.

We were coming across a lot of businesses that wanted a website redesign, but weren’t interested in inbound marketing or maybe wanted to focus on that later down the line. That’s why we made it a standalone product. Now you can use the CMS without having to purchase a HubSpot marketing license.

The standalone CMS also comes with the CRM and all of the free tools. It’s a lot more than just a content management tool - it brings together all of the tools you need for personalisation and lead generation under one roof so you can easily build a website that works. Now there are less barriers to get started with doing your website on HubSpot, especially when you sign up with Growth Driven Design in mind.”

Previous to this, because of the difficulties of using the HubSpot CMS, a lot of businesses were referring to other CMS options like Wordpress.

Watch our video below to find out more about the standalone CMS and how it can benefit your business, or read more about it here.

Growth Driven Design is all about finding new ways to build creative solutions on your site, and HubSpot CMS allows you to do just that.

The overall theme we’ve seen is that HubSpot is allowing us to create more and more custom modules. While the Hubspot CMS’s ease-of-use means you don’t need to have coding, designing or developing knowledge to build web pages, the more HubSpot opens up their API, the more it allows users to create custom solutions. It’s a really exciting time for businesses.

Furthermore, over the past year, HubSpot’s platform ecosystem has more than doubled in size, empowering customers with a wide range of innovative features and services.

Today, people expect easy journeys when they visit websites. They want tailored recommendations, personalised content and relevant ads. They want to have an experience – not just make another purchase.

Designing your website on HubSpot means getting more than a new look. It’s about having an all-in-one solution that gives your website visitors exactly what they are asking for when they need it.

If you’re unsure about exactly what you need to include as part of your B2B website redesign project, download our free checklist to help you get started and ensure you don’t miss a vital component.

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.

Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:<a class="gate-trigger-button" href="#" id="The future of HubSpot CMS: Luke Summerfield reveals all - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>

Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('The future of HubSpot CMS: Luke Summerfield reveals all');
}
});
</script>

CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - The future of HubSpot CMS: Luke Summerfield reveals all"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('The future of HubSpot CMS: Luke Summerfield reveals all');
}
});
</script>
</div>