In our recent workshop on HubSpot page design, we dived into the essentials of building effective, high-performing pages using HubSpot's drag-and-drop editor. Here’s a recap of the key insights and tips shared, including valuable tools that will enhance your page design process.
We kicked off the workshop by exploring the use of Crazy Egg, a heat mapping tool, along with alternatives like Hotjar and Lucky Orange. These tools offer valuable insights into user behavior on your site, allowing you to visualize clicks, scrolls, and interactions. Whether you’re improving a high-traffic homepage or reworking a landing page, heat mapping tools help you see where users are engaging the most and where you’re losing them.
💡 Pro Tip: If you aren’t using heat mapping tools yet, start by installing the free version on one page—either your homepage or a high-traffic landing page. You’ll gain immediate insights that can shape your design and improve conversions.
A common challenge for HubSpot users is transitioning from the older template editor to the newer drag-and-drop editor. Many sites are still on the old system, which can hinder modern design capabilities. I emphasized the importance of updating to the latest version, especially if you're looking to integrate advanced features.
Why Make the Move?
User feedback, combined with data from tools like Crazy Egg, is a key driver of design decisions. By understanding how users interact with your content, you can design with intention. For example, if your heat map shows a lack of engagement with certain sections, consider moving critical content higher on the page.
One of our case studies was a redesign project for a client where we noticed high engagement with the "Explore Courses" CTA via anchor links, but limited scrolling through the rest of the page. This insight informed our decision to place the course content higher on the page.
The concept of atomic design was another major point of discussion. By breaking down page elements into smaller, reusable components, you can create a flexible, scalable design system.
Steps for Implementing Atomic Design in HubSpot:
While desktop design often takes priority, we discussed the growing importance of mobile-first design, especially for businesses with high mobile traffic. Some B2B sites may skew towards desktop, but optimizing for mobile is critical as mobile traffic increases.
💡 Pro Tip: Use HubSpot’s analytics or Google Analytics to track mobile conversion rates. If mobile conversions are lagging behind desktop, it’s time to rethink your mobile UX.
A highlight of the workshop was showcasing how ChatGPT can assist with coding simple HTML and CSS. Whether you’re creating custom buttons, animations, or styling, ChatGPT offers an easy way to generate code without the need for deep technical expertise.
For example, I demonstrated how to create a custom button using ChatGPT by feeding it a screenshot and receiving both the HTML and CSS needed to implement the button in HubSpot’s rich text editor. This is a great method for those who aren’t developers but need quick coding solutions for their site.
Steps for Using ChatGPT to Customize HubSpot Pages:
We concluded the workshop with a Q&A, where participants asked about specific use cases for page speed, mobile optimization, and advanced HubSpot features. If you have any questions or need further assistance, feel free to reach out.