3-Step Process of Applying a New Design for Your HubSpot Site

HubSpot users – like you – are a lucky bunch.

Do you know why?

Because you're almost guaranteed to reap the benefits smart HubSpot users are getting right now:

• 4 times more visitors per month within one year
• 3 times more leads per month within a year
• 72% increase in sales revenue within one year

That’s if you play your cards right, like redesigning your HubSpot COS site every 3 or 5 years.

You probably know by now the importance of website redesign in growing your business online. I even talked about how to collaborate with your team on a website project.

Today, you’ll learn how to implement the new design to the letter.

By following this short and easy guide, you'll be able to see your new website come to life in 5 to 14 days without hindering business operations.

But before we proceed, let me give you a quick explanation of the terms I used:

COS or Content Optimization System - HubSpot is one of the pioneers of COS. This platform has the capacity to detect the needs of your visitor and will only show content relevant to them. This means a long-time customer will see your latest promos while a first-time visitor gets to read your company intro – and they're both on the same site.

CSS or Cascading Style Sheet - These are your website’s “style rules”. So based on your rules, every headline has a red, bold font while every paragraph text has a yellow, italicized font – I know it looks weird, but I hope you get the point.

JS or JavaScript - It's a scripting language that runs most of the programs you see on the web right now. Some examples are online calculators, games, forms, and pop-up messages. You can visit Creativebloq for more examples.

Step 1 – Build the homepage template and other assets (CSS/JS)

Once you have the assets needed for the new site (icons, new images, content, fonts, etc.) it's time to implement it on COS.

I start by looking at the design and breaking it into buildable pieces, such as the header, footer, and any custom modules that I need to build.

Then, I separate new templates or files from the current ones. I do this to organize everything so that it makes applying new templates to pages easy.

Step 2 - Building the other templates

I always build the homepage first because a homepage is the most complicated part of a website and offers the most variety of content to apply CSS to.

Then, I create the global module groups like the header (with and without navigation bar) and footer, as well as other custom modules like hero areas, full-width calls-to-action, etc. On this stage, I build other templates as well. These templates include the product pages, inner pages, and landing pages.

Next, I create the CSS and JS files using the homepage template as a test to double-check the design. Lastly, I link the new JS file in the global footer module.

Speaking of links, always have a spreadsheet of your old URLs and new URLs. You can import them afterward into HubSpot's URL mapping tool.

Step 3 – Applying the new templates

With the hardest template and the custom coding for design complete, it's time to build the other templates and apply the CSS file to them.

Make sure to put every module inside a flexible column as it will keep the site flexible for future redesigns. Once I build the new templates, the final piece is applying them to the site’s live pages.

I like to start with the less-populated pages and work towards the homepage. I always keep a spreadsheet to track which pages are done.

How well this process goes depends on the flexibility of your old templates. If everything was in flexible modules before, then it should just be a matter of moving the modules around. If not, you may need to rebuild the pages.

There you have it, my simple 3-step process of putting a new design on your HubSpot website.

Always remember to put everything into writing (e.g. documents, manuals, spreadsheet, and screenshots). That way, you'll have a reference when it's time for another round of redesign.

Here's a surprise for you

Going through this process could be time-consuming, especially if this is your first time doing so.

I tell you what, why don't you download my free eBook where you can learn the actual process of redesigning your site?

Just click the image below:

This eBook lays out the blueprint for a successful redesign – from planning to knowledge transfer. I'll even cover who you should be working with and why.

So get your copy now by clicking on the link below:

“How To Survive a Website Redesign”

Let's talk

Based on my clients' experiences, it's challenging to plan, brainstorm, and implement a redesign. That's the reason why most business owners give up on re-designing their website even if the odds are in their favor.

That's why I'm here to help you.

I can work with your team to create a stunning, SEO-optimized HubSpot website that speaks well about your business.

Just shoot me a message right now.

We can talk about how to use modern web design best practices and come up with actionable ideas on how to build a website that doesn't only look good but drives hot opportunities to your business.