Building a Multi-Audience EdTech Platform on HubSpot CMS

Client                                           BookedUp / The Careers Department (TCD)

Industry                                       EdTech — Career Education (Australia)

Platform                                       HubSpot CMS (Sprocket Rocket Pro)

Timeline                                       7 weeks  (Feb 24 – Apr 13, 2026)

Services                                       Web Development, Custom Module Engineering, UI/UX, QA & Training

‍

Key Highlights

• Multi-audience platform: 6 tailored web experiences (Schools, Parents, Employers, University Students, High School Students, Employment Service Providers) in a single HubSpot environment
• 13 custom modules: Drag-and-drop ready components including parallax hero, dynamic mega menu, gated tour with unlock logic, and tabbed pricing
• 13+ pages launched: From School Home and Tour to About Us, Blog, Case Studies, and audience-specific landing pages
• 6 technical issues resolved: Navigation conflicts, font inheritance gaps, HubSpot beta limitations, and user persistence logic
• Full client handoff: Loom training videos, Figma documentation, and a modular system the client manages independently

‍

The Brief

The Careers Department is an Australian EdTech platform trusted by 700+ schools nationwide, with industry partners including CSIRO, Australian Defence, Qantas, Westpac, Salesforce, and Rio Tinto. Their platform delivers career profiling, virtual work experience, digital badges, subject selection tools, and skills training to students across the country.

TCD needed a complete website build on HubSpot CMS that could serve six distinct audience types with tailored navigation, content, and conversion paths — all while reflecting a premium dark-theme brand identity with glassmorphism effects, parallax animations, and custom typography (Neue Haas Grotesk and StretchPro). The platform also needed to be fully editable by the client’s team without ongoing developer dependency.

The timeline was aggressive: a functional, multi-audience platform live in 7 weeks.

‍

The Solution

that&co was engaged as the full development partner, responsible for everything from HubSpot environment setup through to final QA and client training. The build was executed across five structured phases:

• Phase 1 — Foundation & Core Modules: Dark theme implementation, custom hero with parallax and glassmorphism, logo carousel, and a fully editable HubL mega menu navigation with audience-type triggers.
• Phase 2 — Core Pages & Multi-Audience Expansion: School Home, Tour (with gated modal and HubSpot form), Subject Selection, Workshops, Primary pages, plus Parent and Employer clones with audience-specific customization.
• Phase 3 — Dynamic Content: Blog-driven Case Studies system (replacing HubSpot’s restricted beta feature), About Us page, Figma documentation transfer, and Loom client training videos.
• Phase 4 — UX Enhancements: Local Storage persistence for the tour unlock modal, typography refinements, conditional global navigation by page type, and glassmorphism effects on offer modules.
• Phase 5 — Finalization: Custom CSS to force brand fonts across all Rich Text fields, fully dynamic mega menu supporting 6 audience types, redesigned pricing module, mobile navigation build, and final QA.

Every module was engineered to be fully editable through HubSpot’s content editor — the client can create new pages, update content, and maintain the site without writing a single line of code.

‍

Challenges We Solved

Complex builds on HubSpot CMS surface platform-level constraints. that&co resolved six critical technical issues during the project:

• Navigation theme conflict: The Sprocket Rocket Pro theme’s default navigation conflicted with the custom mega menu. We implemented HubL conditional logic to override the theme’s behavior without breaking core functionality.
• Case Studies beta limitation: HubSpot’s native Case Studies feature was restricted and not template-editable. We pivoted the entire architecture to use the Blog Content tool, maintaining full design flexibility while delivering on schedule.
• User persistence logic: The gated School Tour required a form submission to unlock content. We built a Local Storage system so returning users aren’t forced to re-submit — the modal auto-unlocks on reload.
• Font inheritance failure: HubSpot’s Rich Text fields ignored the custom brand fonts. We created a custom-style.css file in Design Manager to force font-family inheritance across all global modules site-wide.
• Mega menu UX bug: The dropdown closed when users moved their cursor from the trigger to the menu items. We re-engineered the hover detection zone to maintain the open state during transitions.
• Responsive image rendering: The SR Tabs Horizontal module was clipping images at certain breakpoints. We debugged and adjusted the module code to ensure integrity across all device sizes.

‍

The Result

6 Audience Types | 13 Custom Modules | 13+ Pages Launched | 7 wks To Delivery

• Enterprise-grade UX on HubSpot: Glassmorphism, parallax animations, dynamic mega menus, gated content with persistence logic, and custom typography — features that push well beyond HubSpot CMS’s typical capabilities.
• Drag-and-drop independence: All 13 custom modules are fully editable through the content editor. The TCD team creates new pages and updates content without developer involvement.
• Tailored audience experiences: Six distinct visitor types each encounter navigation, content, and conversion paths designed specifically for their needs — all managed from a single HubSpot environment.
• Platform constraints mastered: HubSpot’s native limitations (beta restrictions, font gaps, theme conflicts) were resolved through creative engineering, ensuring the client was never held back by the platform.
• Full ownership transferred: Loom training videos, Figma documentation, and a fully modular system that empowers the client to evolve their platform independently.

‍

The Careers Department now has a web platform that matches the sophistication of their product — a multi-audience, conversion-optimized ecosystem built entirely on HubSpot CMS, delivered in 7 weeks, and designed for the client to own and evolve independently.

‍