Transforming Education from Lead Gen to User Acquisition.
I led the UX strategy and redesign of HubSpot’s global education platform, shifting the acquisition model from simple lead forms to authenticated user accounts to future-proof the business against privacy regulations.
• Role: Lead Product Designer / UX Strategist
• Scope: Global Platform Migration, Design Systems, Mobile Optimization
• Partners: Web Strategy, Engineering, PM, Product, SEO
• Timeline: Oct 2018 – March 2019
Context & Constraints
• Regulatory Pressure: With the rise of GDPR, our traditional "gate content behind a form" model was becoming obsolete. We needed to transition from anonymous "Marketing Leads" to authenticated "Registered Learners" to ensure long-term compliance.
• Fragmented Experience: The existing site suffered from severe "nav bloat," utilizing four different navigation menus that swapped unpredictably depending on the page type, causing user disorientation and heavy reliance on the browser "Back" button to self-correct.
• Infrastructure Migration: The project required migrating the entire Academy website infrastructure from a legacy silo to HubSpot’s core CMS to unify data for future personalization, requiring strict adherence to SEO benchmarks.
• High-Stakes Conversion: We had to prove that asking users to create an account (higher friction) could achieve conversion parity with the old model of simple forms (low friction).
The Problem Framed
We needed to enable an account-based learning model that was:
• Undeniably "Free": User testing revealed a critical blind spot—users did not realize the content was free, creating hesitation at the sign-up flow.
• Discoverable: Users were overwhelmed by vague "Categories." We needed to implement specific "Topic" filters and expose "Time to Complete" metadata upfront to aid decision-making.
• Conversion-Resilient: We needed to prevent a predicted drop in conversion that comes with forcing user registration.
"How might we shift from a transactional lead-form model to a relationship-based user account model without losing our 18% landing page conversion rate?"
Role & Ownership
• Led Experience Strategy: Defined the information architecture, reducing site bloat by removing 39 unused pages and unifying the global navigation.
• Partnered on CRO Strategy: Collaborated with the Web Strategy team to design and interpret A/B tests regarding CTA placement and user flows (specifically the "Start Course" vs. "Learn More" conflict).
• Owned Visual Execution: Directed the visual overhaul, moving from a custom "Chalkboard" aesthetic to the "Canvas" design system to align with the core product.
• Did Not Own: Content creation or the backend technical migration of the "Knowledge Base" to the support domain.
Strategy & Approach
Key Decision 1: The "Learn More" Paradox (Data vs. Opinion)
• Option A: Listen to qualitative user feedback. In interviews, users claimed they wanted to "look at the course curriculum" and syllabus before signing up.
• Option B: Trust the quantitative friction model. Reduce steps by sending users directly to sign-up via a "Start Course" button.
• What I Chose: Option B (Start Course).
• Why: We ran an A/B test. The "Learn More" path (Option A) resulted in a 16.41% drop in conversion. The data proved that for a free product, additional informational steps are perceived as friction, not value.
◦ Design Adjustment: I compromised by keeping "Start Course" as the primary button but adding a discreet "Read more" text link on the card for the minority of users who truly needed to vet the syllabus.
Key Decision 2: Visual Trust (Professionalism over Personality)
• Option A: Keep the legacy "Chalkboard" aesthetic (Dark theme, illustrations).
• Option B: Align with HubSpot’s "Canvas" system (Light theme, photography).
• What I Chose: Option B.
• Why: Preference testing showed a 99% statistical significance in favor of the lighter design. Users described the dark theme as "cartoon-like" and "disjointed," whereas the Canvas design was perceived as "professional" and "mature," which increased trust in the certification’s value.
Key Decision 3: Card Architecture & Hierarchy
• The Conflict: Cards were visually uneven, destroying scanability.
• The Solution: I standardized the aspect ratios. Based on user testing, I elevated "Time to Complete" and "Lesson Count" to the top metadata layer because users cited these as their primary decision-making metrics.
Design Artifacts
[Visual Placeholder 1: The "Learn More" A/B Test Result Table]
• Content: Display the table showing the -16.41% drop.
• Caption: "CRO testing revealed that adding the 'context' users asked for actually hurt conversion."
[Visual Placeholder 2: Heatmap "Before" vs. Hero "After"]
• Content: The heatmap showing the "View All" link was red hot but buried, side-by-side with the new Hero design featuring "View All Courses" as a primary button.
• Caption: "Heatmaps revealed users were hunting for the library. We elevated this behavior to the primary H1 interaction."
[Visual Placeholder 3: Mobile Card Stack]
• Content: The mobile view of the search results.
• Caption: "Mobile optimization focused on vertical scanability, ensuring 'Time to Complete' remained visible without clicking."
[Visual Placeholder 4: Mind Map Logic]
• Content: A clean version of the Card Architecture Mind Map.
• Caption: "Mapping metadata priority based on user decision metrics: Effort (Time) > Topic > Instructor."
Mobile Design
Mobile traffic for learning was growing, but the complex filtering system was unusable on small screens.
• Stacked Architecture: I redesigned the course cards for mobile to stack metadata vertically, ensuring the "Start certification" tap target was the full width of the screen for thumb-reachability.
• Simplified Search: We moved from a complex sidebar filter (Desktop) to a "Sticky Search" on mobile that persisted as users scrolled, addressing the user complaint of having to scroll back up to refine results.
Outcomes & Impact
Quantitative Results:
• Conversion Parity Achieved: Successfully migrated the acquisition funnel without the feared drop-off associated with GDPR compliance.
• Operational Efficiency: Removed 39 obsolete pages and redirected traffic, improving SEO authority and reducing maintenance debt.
• Preference Validation: Achieved a 99% statistical confidence rating in preference testing for the new "Canvas" visual system over the legacy design.
Qualitative Impact:
• Brand Perception: Users shifted from describing the site as "cartoon-like" to "professional" and "computer-based education," validating the move to a cleaner UI.
• Value Clarity: Post-launch testing showed improved understanding of the "Free" value proposition due to the "100% Free & Online" badges added to the hero.
Future Opportunities & Learnings
What I Learned:
• The "Say/Do" Gap: Users said they wanted a syllabus first, but did the opposite. This project reinforced the danger of relying solely on qualitative feedback for conversion-critical flows.
• Value Prop Blindness: Never assume "Free" is obvious. We had to be aggressively explicit with "100% Free & Online" copy to overcome user skepticism.
Future Opportunities (Phase 2):
• Personalization: With the migration to the company Core CMS Infrastructure complete, the next step is to use the authenticated data to dynamically display content based on the user's lifecycle stage (e.g., showing "Sales Hub" courses to Sales Pro users).
• Localization: The current architecture is ready for localized content deployment to support the growing LatAm and EMEA markets.