HubSpot Academy started back in 2012 as a way to help HubSpot users grow their business by learning and applying new marketing skills. Since then, it has evolved to become a leading education platform for business professionals the world over, with more than 600,000 people taking HubSpot Academy courses in the last 7 years.
But growth often comes with consequence.
As HubSpot Academy grew, so did our website. We had thousands of landing pages for our free online courses and several microsites to support individual programs like the Education Partner Program and HubSpot User Groups. We had many of these pages in more and more languages. The website had four different navigations designs, depending on what page you were on, as well as brand styles representing many years of evolution at HubSpot.
We needed to simplify the website for users to make sure they could always find the most relevant and valuable content for their specific needs — so we decided it was time for a brand new HubSpot Academy website.
The goals for this project were to create a consistent design between all of our pages, build a framework that would allow us to create pages in more languages, and enable our website visitors to find what they’re looking for as quickly and easily as possible.
In true HubSpot Academy fashion, we wanted to turn our project into learnings for our customers. So here’s an inside look at our entire redesign process.
Step 1: The Content Audit
Before we could jump into the redesign, we needed to figure out exactly what we were working with; to that end, we audited the entire site, creating lengthy spreadsheets with lists of website pages, their corresponding URLs, and their monthly traffic. We worked closely with all teams involved in this website to determine what pages needed to be kept, redesigned, or removed. Thirty-nine pages hit the editing room floor in this first content audit.
Step 2: Research Phase
Now that we had scoped the project and prioritized resources around core pages, we were ready for the longest and (arguably) most important step: research.
With data-driven design being forefront in our minds, we performed a myriad of research: a complete site map, competitor analysis, user testing, heuristic analysis, CRO testing, Google Analytics research, a homepage conversion map, heat/scroll maps of all core pages, event tracking analyses, and interviews with the HubSpot Academy team.
Step 3: Design, Copy, and Conversion Paths
Once we had distilled all the learnings from our research, we settled on four guiding principles for design:
- Simplicity: Shorter conversion paths, fewer CTA types
- Consistency: One on-brand global navigation menu
- Clarity: Straightforward value proposition, easily recognized content groupings
- Personalization: Highlighting the most relevant information by segment
To conceptualize the new ideas we had for page layout, we built wireframes of all core pages.
One of the biggest benefits of wireframing is that it saved time in the long run. The wireframes facilitated team collaboration and helped us determine which features were necessary and which could be deemed “nice to have.”
What’s more, seeing pages without the creative elements helped us focus on clarifying the elements that really mattered. Relying on very simple wireframes was paramount in ensuring that everyone on the team stayed focused on the high-level issues and decisions and wouldn’t be emotionally affected by visual design, colors, graphics, etc. We also used the wireframes to plan out user flows and conversion paths, keeping in mind all business, functional, content, and brand requirements.
From a practical standpoint, we used Google Docs for the wireframes, which proved to be very useful because everyone involved was already familiar with how to use this tool and because it made for easy collaboration with comments and suggestions inserted right on the wireframes. That facilitated a smooth transition from wireframes to high-fidelity mock ups.
During the wireframing stage, we wrote the first pass at the copy for these pages, using the wireframes to guide how much copy went where. We knew our key value proposition — that all HubSpot Academy content is free and online — needed to come through, so we referenced it in prominent locations, like the homepage hero and the primary CTA in the sticky header that read “Sign up for free courses.”
We added social proof, inserting the number of people who’d already gotten certified by HubSpot Academy. We used friendly, helpful language to tie back to the HubSpot voice in general and the Academy brand specifically.
After a few rounds of feedback, the wireframes were approved. Then we created three design concepts:
Within each of the design directions, we experimented with new ideas for page elements to better support the business, functional, and brand requirements. Visualizing separate course cards and learning directions (e.g., juxtaposing certifications versus courses) for each of the designs helped the team make strategic decisions on what to include and how users would interact with these elements.
With these concepts in hand, we solicited stakeholder feedback and performed another round of user testing. The good news: There was overwhelming agreement that one of the designs was the way to go. And many of our nuanced design choices, like adding a sticky search bar and prominently displaying course completion time, had been validated. The bad news: Users weren't able to clearly articulate the value proposition of HubSpot Academy in user tests. While they understood that it provided training on business topics, they didn’t realize that all content was free and online.
We still had work to do.
We added additional language around the value proposition in even more prominent places, like adding a line above the sign-up forms that read, “It’s online and completely free” and updating the placeholder text in the sticky search bar to read, “Search our library of free, online training.” We walked a fine line of being clear and visible without sounding like a broken record.
Step 4: Development and CTA Tracking
At this point, our developers took our designs and made them a reality. The site is built entirely on HubSpot. This way, we can continue to grow the HubSpot Academy content library in a scalable and manageable way. Our data analytics team took this opportunity to make sure all CTAs were properly tracked, so we could measure the performance of the site as new users join the HubSpot Academy community.
So, what’s next?
In phase two of this redesign project, we’ll be focusing on localizing the site, personalizing it to every visitor using HubSpot’s smart content features, developing conversion rate optimization, and expanding the site search functionality. We hope you love it as much as we do.
