How to Build A Site Using HubSpot CMS

When one thinks of HubSpot, the first thing that comes to mind is its powerful CRM and automation tools. However, one of the hubs that can help your business grow the most is CMS.

The CMS (Content Management System) is a hub that allows you to create sales-ready websites that impact your revenue, and not vanity marketing metrics. It really shines when you build your site with HubSpot’s automation in mind, as you can create much more complete and personalized experiences while keeping track of each of your contacts' interactions with your site.

This communication between the CRM and the CMS gives rise to customizable content that generates a truly unique experience for each client, showing them what they really need to see.

Even though the platform is quite easy to use and has many advantages, it is useless if you do not have a good implementation and site creation plan. If your website were a building, the front (or what the end user sees) is the façade, while the data structure, automation, and how it's connected to your CRM, design system, and templates are the foundation. If the facade is perfect but the foundation is not correct, the risk of the building crumbling and falling to pieces is very high.

That is why, through many years of helping clients implement the HubSpot CMS, we have found some key points that you should take into account before you start creating your site:

Content: It is normal to believe that the website should be created first and then filled with content. However, this can generate a bad mapping of the information that is to be provided to the end customer, ending up with a hybrid that does not quite meet the requirements. company's needs. First, you must be very clear about what you want to communicate, and what the function of the site will be (generate leads, inform, transact, resolve doubts, etc.), and based on this idea, begin to devise the content that will be on the website.

Design: Unlike content, the design is what sets the tone of how the information will be presented within the site so that the user can clearly identify the sections of your site. We will talk more about it later.

Development: This depends on the type of CMS you will use. There will be sites that require more structure than others while there are content managers such as Wix or Shopify that require minimum technical development. In contrast, other CMSs can be more robust and customizable but require a coding expert who can translate ideas into functionality. HubSpot is somewhere in between because although its drag & drop system makes it easy to implement and generate new pages and content, the code must first be written by an expert in the field if you want something custom. If you don't want something custom, the marketplace is full of templates available with a few clicks. 

Maintenance: Unlike other entities, your website is something that lives and must be constantly maintained. This includes updating it with new content, updating what is already there, and optimizing it so that its performance constantly improves.

Step by Step: Building A Site Using The HubSpot CMS:

• Data Structure: Before doing anything, one of the key steps in working with HubSpot is having a clear and organized data structure, especially if you plan to integrate other tools such as HubSpot Sales, HubSpot Marketing, Pardot, Salesforce, etc... Having the objects that will be used in your CRM and other tech stack is of the utmost importance if you want to take full advantage of the benefits of this CMS because HubSpot is made for much more than creating a website; it can personalize the customer experience based on their position in the sales funnel and trigger automation based on the user interactions with the site. Not having a good mapping of the data and its structure within your CRM can significantly decrease the capacity of your website.
• Integration with Other Tools: Continuing with the previous point, something that you must take into account is the Tech Stack that you will need or that you already have and want to enhance once your website is ready. From basic tools like forms and calendars to more robust ones like a chatbot or payment gateway, you'll need to consider what can be natively integrated with the CMS and what will need to be done through further development. If you use HubSpot's Sales, Marketing, or Operations Hubs, it goes without saying that it integrates automatically.
• Navigation Map: Now that you know what tools you need and what the data that feeds your CRM will be like, it is time to start with the structural planning of the site. You have to plan the experience your user will have with your website. If you think creating different pages of content means the user will find their way into your site, you are wrong. It is important that anyone who comes to your site can easily navigate and find what they are looking for without friction, otherwise your bounce and abandonment rate will increase. One way to do this is to create a flowchart of the different interactions the user can have on your site to cover as many scenarios as possible.
• Information Architecture: Unlike the navigation map, which is about the different pages your site will have and how the user can get to them, information architecture is the process of creating a blueprint; Generally, you start with a low-definition one, of what elements will be on each of the main pages of the site/ At this stage, it is not yet necessary to have the complete content, but it is necessary to know what will be used. For example, if the Home page is going to have an introductory video about the company, this is an asset that must be planned for and developed while the site is being built. At this stage, all the pages of the site, the menus, and the footer are sketched. Having a well-defined layout helps create better experiences within the site. It makes the development process much simpler as there is clarity regarding how each element should be represented within the site.
  
• Content: This refers to creating the content that you want to upload to the site so that it is ready to be used on each of the pages and sections that were defined in the architecture and navigation map. The content can be in different formats, such as video, text, photographic, or infographic, and must respond to the client's needs. Do not think about making a page that focuses too heavily on your brand and talks about your company constantly. Instead, your pages should be about solving doubts that users may have and providing solutions to your clients.
• Design System: One of the most important aspects of a website is its design system which is about each of the elements that will make up the site and those that can be replicated and adapted. In the design system, the main colors of the site are defined as the secondary ones, and patterns and libraries of elements such as arrows, fonts, tables, heroes, sliders, forms, testimonials, bullets, etc. are created. These elements will later be reused throughout the site, always maintaining the identity. This prevents one page of your website from having a round blue button and the next one from having it in purple and with very sharp angles. A good design system is a foundation that gives uniformity to the website and to other elements that you decide to use later (for example, an email, a form, or a quote).
• Design of Modules and Templates: This is where the website begins to take shape. With the content and design system, the information that will guide the site begins to be built. These modules, like the design system, can be used in a modular way for different templates. For example, if you have a contact form, you can replicate it on informative, FAQ, and home pages. While a blog template can be used hundreds of times, you can also create modules that won't always be there, for example, a video section, which on some blogs can be an add-on, but not necessarily a requirement for every entry.
• Page Creation: Once you have the design system, modules, and content, it is time to start building each of the pages that the site will have, as well as programming what action will trigger each button or interaction on the site. If all the previous steps were meticulously followed, this phase should flow smoothly.
• Testing and Debugging: Even though everything should work fine, it is key to carry out this step before the release, since you want to guarantee that once the site is live there is no margin for error. Here, you must check that each of the actions is triggered as expected and that there are no broken images or any other problems that could hinder the end-user experience.
• Live: It's time to open the champagne and celebrate. A launch date is eventually assigned for the site and it goes live.
• Optimization and Updating: Once the website is live the work is not done. A website is a living entity that requires constant maintenance and optimization. Even when you have planned for all possible scenarios, there will always be room for improvement within the site. However, since everything above was done in detail, updating is a fairly simple task that does not necessarily require a technical specialist. In addition to any improvements you can make to the website, don't forget to keep it current with updated new content; if you have a blog, you should not forget it. Although you should also consider changes to information updates on the site, frequently asked questions, tips for use, and other content that can add value to your users.

Where to Start?

If all this information caused you a bit of stress, don't worry. It's normal and building a good website should not be taken lightly; these steps are key so that you don't have to do this same research again in a few months. If you don't know how to make a design system, build a navigation map, or aren't entirely sure about the sections your website should have, then it's better to leave everything in the hands of an expert in the field who not only know the platform you intend to use but can advise you on the proper use and train you so that you can manage your website in the future without depending on developers. 

A website is a gateway through which your prospects come into contact with you and, as such, it must be able to communicate everything you need to say and trigger the necessary actions to follow up.

At CRM Toolbox we have helped hundreds of companies with their websites and it is one of the parts that I like the most when talking to new clients as it is an opportunity to do something with a large impact in a relatively short time. If you want to know more about how we can help you build a website using the HubSpot CMS, schedule a call with me, I'd love to listen and help you.