How HubSpot Used Data To Redesign Its Academy Website

0:00

Shanaz: Hello and welcome to ConvEx, where we are celebrating experiment-driven marketing. I am Shanaz and I’m a content marketer at VWO. Want to fix leaks in your precious conversion funnel? Try VWO.

Today, with us we have Rebecca Hinton who is a Conversion Rate Optimization Specialist and Copywriter at HubSpot. Before Rebecca starts the presentation, I would like to inform you that you can join ConvEx’s official networking group on LinkedIn, and ask questions from this presentation. With that Rebecca, the stage is all yours. 

Rebecca: Thank you, Shanaz, I’m excited to chat with you today. The topic that I’ll be covering is How HubSpot Used Data to Redesign its Academy Website. So, specifically what I’ll be walking through is the background on what is HubSpot Academy and why we made the decision to redesign. Then, I’ll walk through the process that we followed, the steps that we took to redesign, and in here I’ll weave through some of the research that we included, and then I’ll move on to results and phase two – so, how did it turn out and then what have we been up to since the launch. So, first some background on HubSpot Academy. 

So, the HubSpot Academy has come a long way since it launched in 2012. It launched with marketing content, but now it has content on sales, service, design, business writing; you name it and it has a ton of content that’s been added over the years. So, the way it works is that users sign-up one time, they create an account and they get access to all of the learning centers’ content, plus HubSpot’s free tools. So it’s a really wonderful resource, one that people rely on, and it was something I was really proud to work on the redesign for.

1:59

So why did we make the case to redesign? As I mentioned it launched in 2012, it’s had several years of growth, several years of different marketers working on different campaigns. And, it just had a natural page bloat of things that had been created that we didn’t need anymore. We also just wanted to give it a bit of a facelift so that it could really reflect HubSpot’s high design standards. There were some other micro-sites that had come across along the way that had been built into this site and that had expanded it considerably. I’ll touch on that more in a moment. And so essentially we just had more and more pages being added and we wanted to take stock of what was there and make sure that what we had was the best it could be.

2:54

So, with our redesign, we had some high level goals. First, we wanted to create a consistent design between all of our pages, we’ll get into this more in a minute, but with different people working on different pages, design didn’t always look as consistent as it could. We also wanted to build a framework that could allow us to create pages in more languages. It was possible but it wasn’t easy, so we are hoping to make that a little bit smoother. And then our third goal was to enable our website visitors to quickly and easily find what they’re looking for. Again, because of the way it had expanded, it wasn’t always a straightforward process to find what you were looking for. So that’s something we were hoping to solve for.

3:40

So moving into the redesign process itself, the first step that we completed was our content on it. So we were essentially looking at – What all is here? What do we need? What should you keep? What should we cut?

3:56

Next, we went into the research phase. I’ll spend more time on this since research is the focus of this presentation.

4:05

Then we moved into design, copy. and conversion path – sort of all-in-one as you can imagine that was a big big step.

4:15

And then lastly development and CTA tracking. So, getting the thing actually built and then making sure that we had good tracking so that we could have strong data to use in the future.

4:28

Okay, moving into the redesign process. I’ll start with the content audit. So, what I mean by content audit is just taking stock of every single URL that lived on academy.hubspot.com. So, before we could even jump into the redesign we needed to figure out exactly what we were working on. And, to that end, we audited the entire site, we have really long spreadsheets and lists of website pages, their URL, their monthly traffic, and everything that you see listed here on the screen. We worked really closely with all the teams involved to make sure that we were making smart decisions on what got capped and essentially redesigned, and then what got removed or direct redirected to a different page. So, at the end of this process we had 39 pages that ended up getting cut. And by cut, I mean redirected to an appropriate page to make sure that no one had a 404 error. What you see on the screen here are some of the pieces that we use to make that decision. It was important to keep track of all of these and to make sure that we are working really closely with all the teams who had originally built this content. The other piece that came out of the content audit is on the bottom bullet there – the page type: unique versus template. What we wanted to do is, at the end of this stage we should be able to give a sense to our designer of how many unique bespoke pages he is creating versus how many are templated pages, so that he had a good scope of his design work. 

Moving on into the research phase. Now that we had scoped the project and prioritized our design resources around core pages, we were ready for the longest and arguably the most important step, which is research. You can see from this list here that there were a lot of components of research that we performed. I’m going to get into a few of these specifically, but before that I will just quickly run through and touch on each of these.

So, starting with the sitemap – our designer completed an in-depth sitemap that helped us see how pages were connected, what were the user flows, and as I mentioned with how big this site had gotten this was a pretty large site map.

7:08

For the competitor analysis, we looked at other educational websites just to see what were the basis, what were the table stakes that we needed to make sure that we had covered going into this redesign.

7:23

For user testing, what I’m referencing here is remote user testing where we would show users the designs and ask them a set of questions on how they responded to the designs. In some cases they were open-ended -we just wanted to see how people reacted, and in other cases we were looking for really specific pieces of feedback. The heuristic analysis, the designer and I both just walked through every page on the existing site and took note of any kind of friction point, anything that we thought was confusing or unexpected, and made notes of those as problems that we could solve with the redesign.

For CRO testing, we ran one test on the existing site and then we have a whole roadmap of testing for the new site, which I’ll touch on later. With Google analytics research, we did a ton of stuff just to get our heads around the project itself to see what percentage of people are coming on desktop personal goal, what paths are people taking, are people who use the site search more likely to convert. Just any question we could come up with, we would answer as much as we could with Google Analytics research.

8:48

The homepage conversion map, I’ll touch on in a moment, but it’s just mapping flows directly from the homepage. Heat and scroll maps of all core pages, those were really invaluable to see how were users reacting to our pages, what are they clicking.

9:04

Event tracking analyses – we set up our event tracking in Google Analytics and then did some analysis on people who click this, are they more or less likely to convert. And then lastly a really invaluable piece was interviewing the HubSpot Academy team. They’re the people who know their audience inside and out, they know what complaints have they gotten in the past, what questions do they get frequently, what problems did they think we need to solve for with the redesign; so they were incredibly helpful. Now that I’ve given a general overview of some of the research we’ve done, these 4 highlighted here are the ones that I’m going to touch on in more depth.

9:53

Okay, so in performing a heuristic analysis and building a complete site map, our designer discovered that there were four different navigations and that they would swap out depending on what page a user is on. So, yes, you can be on one page, click something in the nav and get to another page that had a completely different menu as the page you were on before. So, of course, that’s a very confusing user experience. It sort of implies that you’ve changed sites when you haven’t and it can be hard to get back to whatever you were looking at before if your navigation has changed.

10:35

So this was a big problem that we wanted to solve for. A lot of this stemmed from the fact that the Academy has different programs that have their own micro-sites that had been woven into this site itself. So, one thing we did in the redesign is take all those microsites and put them into the footer, so it was more clear that those were in fact separate sites. We set up our event tracking in Google Analytics and analyzed which menu items users were clicking and which of those was highest correlated with people creating an account so that we could see which menu items were actually driving people toward their goal, and helping them find the content that we needed versus ones that either got very few clicks or more correlated with creating an account in any way.

11:31

So once we’ve done all this research, the navigation that we came up with is this one: 

So it’s much simpler, it’s much clearer and it’s tied back to our initial goal of helping people find the content that they were looking for. Moving on to another research story. Another interesting piece of learning came from the homepage heatmap and a conversion map. So, what you see here is the homepage conversion map, and we learned following this yellow line that the highest conversion rate came from users who followed the View All link to the library page and then went on to a course and a lesson page. We also saw from heatmaps that this link was extremely popular. In fact, it was red-hot with clicks. But we couldn’t help but notice how low in the visual hierarchy this link was – it was only a small text link on the right side of the page, it’s not even a full button.

12:34

So what that was telling us is that users wanted to view all of the content that we had available, and then click into a course and go from there. So, when we redesigned we made this CTA, this View All, one of our primary CTAs. So here in the redesign you can see we decided to make view all courses the primary CTA. In fact, it appears as the hero CTA in this visual and also in other prime positions throughout the home page styled as a button. So this also tied back to our original goal of helping people find the content they were looking for. Moving on to the next phase of the redesign process, we’ll look at design, copy, and conversion paths.

13:26

So, once we had distilled all the learnings from our research, we settled on four guiding principles for design – you’ll see they’re really closely tied to our original goals with the redesign. First is Simplicity. So we had seen in the original site there were pretty long conversion paths; we were hoping to shorten those. And there was also a big variety in CTA types: some being text links, some being buttons, different languages. So we wanted to simplify that. Another guiding principle was Consistency. So having one global navigation menu, we wanted to meet HubSpots design standards so that the academy site looks consistent with the .com site and it’s just clear upon looking at it that it’s part of the HubSpot branding.

14:21

Another guiding principle is Clarity. So, we wanted things to be very straightforward particularly with the value proposition and we wanted our content groupings of lessons and courses and certifications to be easily recognized.

14:41

And then lastly Personalization. So this will actually come in a future phase, but what we’re going to be working on is highlighting the most relevant information by segments. So potentially showing different types of courses or lessons to different types of users. Once we had our guiding principles in line, we moved into the first phase which was wireframing. So, our designer created these wireframes in Google Docs and we were able to use those collaboratively across different stakeholders, being able to tag different parts of the doc with a question or a comment any kind of feedback.

15:24

So once we had these wireframes in place, we used them to write copy. Our designer created many different versions of the homepage, many versions of course pages, and we wrote various copy to fit into those designs and got stakeholder feedback on each one of those before we moved into a full mock-up phase. In the mock-up phase our designer created three different styles and then we solicited feedback on those. So the first style you see here is one that’s on a lighter color palette. It’s the one that most closely aligns with the hubspot.com design and branding. He then created a darker style to showcase the fact that this is video content, and sort of similar to Netflix.

16:21

And then this was the third version also in the darker style, but you can see some of the differences there in the top of the page. You can also see that each of the heroes is different: in some case we lead with search, and in some cases we have explore all courses. So there were several variances in the design. What we did at this point is solicit stakeholder feedback, and then also we performed around of remote user testing. We asked questions like – Which design do you prefer, and why? Which top section do you prefer, and why? And then we also asked less explicit questions like – find a course on social media strategy and go do it. So for that example, we would watch users behavior and see could they find something quickly. We also asked users – Did you realize that all courses were free and 100% online? That’s the value prop of Academy that we had written into the copy, and we wanted to see if it was clear. So the good news is that we came back with a really consistent feedback that most users and most stakeholders preferred the design on the left, the lighter version, and it also meshes better with HubSpots’ other designs, and that fit with our guiding principle of consistency. We know which designer direction we wanted to go to. The bad news is that users were not able to clearly state the value prop of Academy. They didn’t realize that all the classes were free, they didn’t realize that all the classes were online.

18:02

We thought we had been really explicit with our copy but users were telling us that we hadn’t been. So what that meant is we needed to go back to the drawing board on our copy and find even more places to show people that our content was free and online. We added additional language around the value prop and even more prominent places. For example, we added placeholder text to the sticky search bar that said ‘search our library of free online training.’ We walked a pretty fine line here of being clear, but not sounding like a broken record. From here we knew the direction we were moving with the design. The designer moved into creating mock-ups for every single page, there were more rounds of stakeholder feedback, and more rounds of remote user testing, but we ended up with a clean and clear design that everyone was happy with. From there we moved into the development and CTA tracking stage.

19:07

So the primary goals for our development team were to automate the process in uploading and updating course data. So, for the Academy team, they’re constantly creating new content, new courses, new lessons, new certifications and we needed for it to be really straightforward and easy for them to add that content in. That was one goal.

19:33

Another was to improve overall page SEO to make sure that the way we’re building the pages was SEO friendly.

19:42

Another of our goals was around accessibility. Academy is for everyone and we wanted to make sure that was really clear by having an accessible website so that users on different browsers, devices, with different dial-up speeds could all have a good experience on Academy. One piece of this was checking the readability of the page to make sure that there was a good contrast. The final goal here was to set up tracking on all primary CTAs so we can see where people were clicking, and where the conversions were coming from.

20:14

We wanted to make sure that we had really good data for the future so that when we moved into phase two and were doing testing and improvements to the pages that we had good data to base it on. Now, I’ll move on to results and phase two.  So what you see on the left here is the former design, and what you can see on the right here is the redesigned. Couple things to point out here: on the left, the above-the-fold material was really just one course, and we wanted to ensure with the redesign that there was more content above the fold so people could see things like popular courses broken into groups of marketing, sales, service tutorials, but also get a sense that there were additional courses there below the fold.

21:07

Another thing that I touched on previously is, the primary CTAs here are more around viewing all of the courses, viewing all the certifications. We also wanted to showcase different kind of topics that we have available so it was clear that people could look up social media, they could learn about SEO, they could learn about content marketing, and really drive people into those topics to pique their interest. I’ll give you a sense of the time here: we launched in early March, and what I’d love to put up as the next bullet is this that we saw conversions skyrocket and everything was amazing, but I think as most people know who’ve worked on a redesign, a lot of times you see conversions drop a bit or remain flat. A lot of that has to do with things that need to be worked out on the site, a lot of that has to do with your returning users coming back feeling surprised by how the page looks different and leaving. So, I’ll give you that spoiler that it’s not all rainbows right away.
The first thing we notice is there were a few bugs, and that happens with any launch, so those fixes were implemented really quickly; everybody acted very quickly on that. As soon as the redesign launched, we started pulling analysis: so one week data versus one week data before launch, and then two weeks post-launch versus two weeks pre-launch, three weeks, and then four weeks. We were really using four weeks as our more gold standard and checking the one, two and three weeks just as a gut check. When we pulled  four week over four week analysis, we saw a dip in both traffic and conversion rate. And while that’s not entirely unexpected, it’s still not what we wanted to see. So the team mobilized and started writing a plan on what we could do to have a positive impact. It looked like the two areas we really needed to focus on were CRO, to get the conversion rate up, and SEO to get the traffic up.

23:16

Throughout the entire redesign process, we had been keeping track of test ideas, and so what we did at this point is we gathered all of those ideas, we ran the numbers to see what kind of impact that we think each one could have, and then we prioritize those to make a plan. So this plan that we wrote actually takes us out through September and we’re currently working our way through it. 

Now, our first test went live in mid-May, so we spent about a month writing the plan and then getting all stakeholder feedback and buy-in on the plan, and then coding out the first test. So the first test launched in May. We’ve got a few under our belt now. The first one was actually inconclusive, and then the second and the third were both big wins: one big win for CRO and one big win for SEO.

24:16

And because of the continued testing that we’ve been doing we actually saw traffic and conversion rate start to level out in mid-June. That’s a pretty quick turnaround for both traffic and conversion rate, so we knew that our plan was leading us in the right direction. And we’re still implementing that and we expect to see traffic and conversion rate both start to really outpace the redesign performance. So we’re looking forward to that.

24:47

There are other pieces of phase 2 as well. Of course, when a site launches, it’s not the end, it’s really just the beginning. So we have different pieces of phase two that we’re working on. Because of the dip in traffic and conversion rate that we saw right away, we pushed the CRO and SEO testing piece of phase two to the beginning. So that’s where we’ve put a lot of our efforts thus far. But the other pieces we’re planning to work on is localizing the site, making sure the Academy is accessible to everyone in all of the languages that HubSpot supports. Next is personalization, which I touched on earlier. Making sure that the experience is a good fit for whoever comes to the site. Lastly, expanding site search functionality. So right now the site search is a bit limited and we want to expand it, so it’s really broad and that users have a good experience with that. These are all the things that are on our roadmap coming up.

25:48

Thanks so much for your time. And thanks for listening about the academy redesign. I hope this was helpful. 

Shanaz: That was a really insightful presentation, Rebecca. I’m confident the viewers would have learned something new and something interesting today. So, I have a few questions for you. Could you tell me a little bit about your background and how you got into Conversion Rate Optimization? 

Rebecca: Yeah, I’d be happy to. I initially studied English education and I was an English teacher for five years. That’s how I began my career. I loved it. It was really interesting. I taught domestically and I taught abroad for a couple of years too, so a lot of travel. And eventually I decided to move away from teaching and a friend had suggested coding and web development. So I checked out some books from the library, and did courses online and learned HTML, CSS, and JavaScript; just focused on front-end coding languages and landed my first job as a web developer. And then my next job after that was specifically focused on CRO and I really haven’t looked back since because testing is just so interesting to me. 

Shanaz: Well, that was really interesting. I started my career in social sciences and now I’ve gotten into content for marketing, so yeah. 

Rebecca: Oh cool. Yeah. I think a lot of people end up making career transitions. 

Shanaz: So moving on to the next question. What’s one thing you wish everybody knew about Conversion Rate Optimization work? 

Rebecca: Yeah. One thing I wish everyone knew is that it’s really all about the data, it’s all about the research, and it’s all about the test results and reaching statistical significance. So to give you an example of a question that I get pretty often that I really wish I didn’t is someone saying- Oh! With your CRO background, what do you think we should do for the redesign? – and it’s really not about my opinion. Of course, I’ve worked on different redesigns; of course, I have, you know test results rattling around in my head from past experiences, but every site is different, every page is different. So, my opinion is really just like anyone else’s opinion, and what we really need is data and we really need testing to make the right decision. So that’s something that I would love people to know about CRO. It’s not about opinions. It’s about facts. 

Shanaz: Yes. I can relate to that a lot actually! I just have three more questions for you. For my third question, what’s one of your favorite test winners from the past, from all the tests, numerous tests that you’ve done till date?

28:40

Rebecca: Yeah, that’s a great question! So one of my favorite test, and I think the reason it’s my favorite is it’s really basic, it’s not flashy or crazy. I was working with a client who had completely redesigned their website., they had hired a design firm, it was very trendy, it was very beautiful. And this was a few years ago, and at that time it was very popular to have a white background with light grey text on it. It was just really trendy for whatever reason. And I noticed that it was really hard to read the text (and) on the page. And their audience was a bit older, and I just thought you know, if I’m having a hard time reading this I imagine someone who’s 65 plus is having a really hard time. So we proposed just bumping up the font color. They weren’t comfortable just making the change because that seems like something you could do without testing, which makes total sense – they had paid this design company, they wanted to follow their designs. So we said well, let’s just test it. So we just kept it a darker gray, they didn’t want to go all the way to black, which is fine. So we just bumped it up a few shades to a darker gray and what ended up happening is we saw about a 15% lift in their conversion rate. And when you map that out for not just one page but their entire website, that ended up being a huge boost in revenue for that company. So, what I love about that test is we can get crazy with tests, we can get really complicated, but, you really have to be covering the basics first. And, one of the most basic things is: can people read what’s written on your website. Just keeping it really simple before you move on to more complex ideas.

30:36

Shanaz: Yes, I think it’s the simple, small wins that give you more satisfaction as a marketer. 

Rebecca: Yeah, I totally agree. I love the simple ones. 

Shanaz: So I’m sure the audience must be curious to know what book you’re reading right now? 

Rebecca: Yeah, that’s a great question. So I’m really big reader. I love to read. I just finished Where The Crawdads Sing, which is a fiction book based in North Carolina, and I had it recommended to me by a ton of different people so I knew it was something I wanted to read. The beginning is so sad that I almost stopped reading it, but I’m glad I pushed through because it’s a great book and I would really recommend it. I’m also well, I’m pregnant right now so I’m reading like three or four different books on pregnancy and then of course on like raising newborns, and what’s kind of interesting that there is so much conflicting data – you should do it this way, you should do it that way. So it’s been interesting. Yeah, there’s a lot of opinions out there. So it’s been interesting trying to figure out what works best for us.

Shanaz:  Congratulations!

Rebecca: Oh! Thank you.

Shanaz: I have one last question for you: How can the audience connect with you? 

Rebecca: Yeah, and so they can find me on LinkedIn, if you search Rebecca Hinton I should pop up pretty readily. That’s really where I spend the majority of my time.

Shanaz: Okay. Perfect. Thank you so much for the answers Rebecca. And I really appreciate the time and effort, you’ve put into creating this wonderful presentation. 

Rebecca: Yeah, I appreciate the opportunity. I really enjoyed it.