Cybersecurity

Website Redesign and Dev in HubSpot CMS

Read the case study aloud browser voice

Client: Whalebone
Industry: Cybersecurity
Service: HubSpot CMS website redesign
Status: Main phase done, collaboration ongoing
Technology: HubSpot CMSHubSpot CRMPower ProGoogle Tag ManagerGoogle Analytics

20+pages designed from the content the client provided

50+custom icons and graphics in the new brand style

Summary

Whalebone, a security company, needed a new website after a brand redesign. We designed 20+ pages, built the site in HubSpot CMS on the Power Pro template with custom modules, created 50+ graphic assets and rebuilt GTM. The site loads fast, connects to HubSpot CRM and tracking is clear.

Design elements the Power Pro template could not handle became custom modules.
Over 50 icons and images follow the brand design set by B Tým.
We cleaned up the old GTM and set clear naming rules for tags and events.

Challenge

Whalebone started working on the new redesign while maintaining the original logo. The agency responsible for the redesign prepared 3 main pages to set the base for the design but our job was to:

Design 20+ pages based on content provided by client
Develop the website in HubSpot CMS using template
Create 50+ custom pictures and icons
Custom development of multiple web modules
Old GTM revision and new GTM setup

The solution

Step by step

Development in HubSpot CMS using template

Whalebone opted for the HubSpot CMS template called Power Pro. Our mission was to familiarize ourselves with all the template's modules to effectively craft new pages based on the client's content.

We soon discovered that certain design elements provided by the client couldn't be implemented within the template, leading us to develop several custom modules and features for the new website. This blend of custom development and template usage helped us save time while ensuring that the functionality and design met Whalebone's expectations.

The only drawback is that whenever someone wants to create a new page, they must learn how to navigate the template and its modules, which can be quite time-consuming.
Creation of custom icons and pictures

Following the new brand design established by B Tým, we developed over 50 design assets. These range from beautiful icons to detailed images that assist visitors in navigating the website easily.
GTM cleanup and new setup

After years of utilizing Google Tag Manager, numerous users and agencies had added tags, resulting in a cluttered GTM filled with items whose purposes were unclear. With the website redesign, it was the perfect opportunity to create a fresh and organized GTM structure.

Our task was to migrate the essential elements, develop a new strategy, and establish clear naming conventions for tags and GA events. Now, it’s straightforward for anyone new to the system to understand.

Outcome

A great website is always a work in progress, but we've completed the redesign and made a number of improvements. Here are some of the key benefits:

Fast Website Loading
Website integrated into the HubSpot CRM
New clear and modern design of website and its assets
Clear and structurized Google Tag Manager

Conclusion

Our team included a developer, several designers, a website analyst, a HubSpot expert, a content specialist, and a project manager. This was our first project with Whalebone, and because we delivered great results that the client loved, we are now working together on a much larger scale. We take pride in the complexity of services we can provide, which we believe is our biggest strength.

Frequently asked questions

Is it worth building a HubSpot CMS website on a ready-made template?

For Whalebone, we built the site on the Power Pro template and developed custom modules for the design elements it could not handle. Combining the template with custom work saved time while meeting the client's expectations. The trade-off is that the team has to learn the template and its modules to build new pages.

How do you clean up a cluttered Google Tag Manager?

During Whalebone's website redesign, we migrated only the essential tags, set a new tracking strategy and introduced clear naming rules for tags and GA events. Now anyone new to the setup can find their way around it.

What does a website redesign in HubSpot CMS include?

For Whalebone, it covered designing 20+ pages from supplied content, HubSpot CMS development with custom modules, 50+ icons and graphics, and a new GTM setup. The site is integrated with HubSpot CRM, and the client later asked us for email templates and more graphics as well.