Hi fellow HubSpotters!

We are ClickRay - a team of techies dedicated to making the Internet an easier place to manage, one website at a time. With our company mission in mind, we are proud to present our newest and most advanced HubSpot theme yet - The TURBO Theme.

Inspiration

The inspiration behind the TURBO Theme derives from a pool of pain points experienced by our customers. We have seen many companies struggling with attracting website traffic, high bounce rates, and working in disorganized and cobbled systems. We are very familiar with these issues because we have experienced them first hand while expanding our own company. That is why ease-of-use and versatility lay at the heart of the TURBO Theme.

What it does

The name “TURBO” symbolizes a supercharger that powers the flywheel of HubSpot to deliver a remarkable customer experience. And hence, we put together all of the pioneering HubSpot functionalities, complemented by our own design creations, into one theme, providing our users with an all-in-one tool that can transform any website from “just a business card” into a lead-generation machine.

Our goal was to provide HubSpot users with the least amount of modules to manage, while giving them the largest amount of possibilities with only 33 (!) website, landing, and blog modules. Because our modules contain different layout options, users can create countless page variations that best fit their needs (e.g., one module can be used for presenting different types of content such as employees or products / services). All of the modules are also adapted to the Sections functionality, which allows users to create different module layout variations. We also created two types of blog post layouts, so that the user can differentiate blog feeds for case studies and standard blog posts. Each module utilizes the HubSpot CMS-native “Content” and “Styles” editing modes, giving users greater flexibility in adjusting the theme to the look and feel they want to achieve. Also, users can apply a Light or Dark color scheme to their theme in order to match their brand identity but also adapt to the needs of their target audience (think: reading accessibility). Lastly, the state-of-the-art designs used in the TURBO Theme, such as “Floating images” (graphic elements that float over the layout) and “Overlays” (module frame designs that act as visual section dividers), were created to capture the attention of website visitors with a unique motif that sets the TURBO users apart from the competition.

By default, the TURBO Theme conforms to HubSpot technical optimization and accessibility standards as speed and performance are at the core of the TURBO mission statement. With an intuitive navigation path and strategically-placed conversion points, the TURBO becomes a powerful tool for lead generation purposes. Each functionality was designed in mind to attract and engage visitors during their buyer's journey. While the TURBO Theme acts as the foundational tool for lead-generation, it can also be easily adapted to specific needs of our clients by further expanding the theme with custom HubSpot functionality (e.g., create a password protected membership area) to strengthen the Engage and Delight phases of the flywheel.

All in all, the TURBO Theme was designed to elevate the user experience by strengthening the company growth through lead generation and scaling the business by reducing resources spent on managing the website.

How we built it

We based the design of the TURBO Theme on our own website rebranding. The idea was to revamp the functionality of each module to the highest degree possible. The development work began after we received the new designs from our UX and UI designer. During the theme-building process, we partnered with a new design company to create state-of-the-art graphic elements that evoke the core values of TURBO - power, strength, and speed. Thanks to this theme, we have begun to collaborate with up-and-coming digital artists to bring our users the newest trends in website design.

Our developers used the standard technologies, such as HTML, HubL, CSS, and jQuery. We also used a Gulp environment, which compiled our code for production mode and uploaded the changes directly into HubSpot. In addition to building the modules, we also utilized the possibility to create styles inside modules for dedicated layouts. The styles created according to this method have a closed scope only for the module area and give us flexibility to style the modules depending on the layout. The idea behind this is: if the user selects e.g. color (between color and gradient) as the module background, then the styles (background color picker) are generated only for color and not e.g., gradient and so on. This method has great power in terms of code saving.

The development work was aligned with the naming convention work, which supported the entire documentation of the Theme. After each of the modules was completed, the documentation process began to create an in-depth guidance on how to navigate the entire theme.

Challenges we ran into

Because the TURBO Theme is our most powerful and advanced theme yet, there were a lot of challenges that we came across from different areas of work.

One of the main lessons we have learned was that modules with expanded functionalities need to be well thought-out from the very beginning. That is because one of the biggest challenges we came across was combining several layouts with the same editing options, all in one module. In order for the same editing option to work flawlessly in one layout and not collide with other layouts, we implemented great detail in our work and ran rigorous testing to overcome this challenge.

Our developers also came across limitations in HubSpot, where certain native functionalities were not working up to the standards. For example, layouts were not adjusting accordingly to the changes made in the on page editor preview (the page had to be refreshed for the changes to become visible and the functions to work properly). Another example would be the disappearing blog content from layouts. Although the help desk was contacted, their assistance was also limited.

Another challenge that our team came across was building page templates, which was done through reverse engineering. While the module-based page templates (which list the modules e.g., CTA page break) were created alongside the module development process, the page templates (e.g., Home, About etc) were created after the module development process concluded. While building the theme, we focused all of our efforts on the modular design. The requirements for page templates (specifically matching the demo website) came as a surprise since the users can easily create their own pages with drag-and-drop functionality that HubSpot Themes offer, in contrast with the past method of having to work with only pre-defined templates. Therefore our developers had to create the page templates through reverse engineering, based on the already existing demo website. That left us with little time to develop all of the page templates as we wanted to because we were running out of time. However, we plan on building more TURBO templates in the future.

From a less technical perspective, one of the biggest challenges was to create a naming convention (that is e.g., module and template titles, groupings, functionality names, inline help text) that not only conforms to HubSpot’s requirements but also remains clear, concise, and understandable for users while offering the most detail about each functionality. In the end, we learned how to overcome this challenge by creating an in-depth documentation, with a special TURBO Vocabulary section, that offers guidance for users who want to learn more about each functionality. So users seeking more detail, can cross reference the TURBO Documentation, which offers an expanded description of each functionality of the theme.

Accomplishments that we're proud of

One of the biggest technical accomplishments that we are proud of is creating modules with a wide range of functionalities, layouts, styles etc. so that the user can customize the module to their own needs. For example, our developer Artur’s favorite feature is the blog listing page, which provides 7 (!) layout options for presenting blog post feeds. Creating these multifunctional modules presented a challenge however there’s nothing that we love more than finding innovative solutions to challenges. And according to our developer Karol, the coolest feature is the overlays with the possibility to change their shape and colors.

Creating these multipurpose modules comes hand-in-hand with providing greater flexibility for customization for users in order to help them represent their voice through the TURBO website theme. And that’s something we are especially proud of as well. We always keep the end user in mind and our mission was to provide the users with the least amount of modules to manage, while giving them the largest amount of possibilities to express their voice.

What we learned

First and foremost, we learned the value of organization and planning large projects. When working with clients one-on-one on custom website development, a lot of times we plan a strategy according to their pre-defined goals that they provide us. Now, we needed to create a project structure according to our own goals. For example, while creating an organized and descriptive naming convention is the key to a successful CMS, next time we would define it prior to beginning the coding instead of at later stages, which would make the development process more efficient.

On a less technical note, this project required us to increase the level of communication between the marketing and development teams. We have learned the importance of team management and working together as a team. Overall, we can say that this project made our team members grow closer as we spent more time on Slack and video conferencing together (also get to know each other on a personal level through sending memes related to the project’s inside jokes).

What's next for The TURBO Theme

So far, this is our only theme available on the Asset Marketplace however we plan to continue working on it and roll out updates in the near future. For example, in the upcoming updates, we will be adding more text alignment functionalities to certain modules. Another update we will be working on is to add an interactive map module to present in the contact page. In the later updates, we would like to expand the page templates for additional purposes, e.g., careers listing and single pages, as well as video webinar page templates, so that the page templates are better fitted towards the needs of the present-day online environment.

In addition, ClickRay will be offering additional customization services to supplement the TURBO Theme. That is full customization according to their look and feel of the client as well as adding on additional features strictly fitted towards their needs and goals. Since ClickRay’s goal is to help HubSpot users grow and scale, we believe that uniting different Hubs together would offer the users more areas for growth. This would entail finding solutions that would expand the users’ TURBO Theme with additional features, such as expanding their theme by creating a custom Membership area (available in the CMS Hub Enterprise) and connecting it to their TURBO Theme.

In 2022, we plan to publish 3 (!) applications on the App Marketplace. For example, one is a Self-Service App, which will leverage the HubSpot CMS and CRM together and connect to an ERP software (SAP) to create self-service solutions via HubSpot’s Membership Area. This app could be connected to the TURBO Theme through ClickRay’s customization services. In the end, the goal would be to create an all-in-one place that would decentralize the customer data (giving customers an outlook on their data) - and that is what HubSpot’s Dharmesh Shah calls the opposite of “Frankensystems” and “the future of websites”. And that’s what we believe by making a website “more than just a business card” and “making the Internet an easier place to manage, one website at a time”.

Built With

Share this project:

Updates