The Journey of Redesigning HubSpot’s Global Navigation (Again)

I remember the last meaningful change we made to our product navigation. It was 6 years ago when we introduced a new product for conversational messaging and customer service teams. At the time, we were transitioning to a cohesive suite of products.

Since then, we've almost doubled our product offering and built out a more robust customer platform. We can now power a company's full front-office relationship with its customers. In doing so, we've added more value for our customers. But through this growth, it's become more difficult to use.

Our main goal has always been to help our customers do their jobs easily and efficiently in HubSpot. Over the past few years, we took a look at how people get their job done in our product. We noticed the customer platform's organic growth has made this more difficult.

We know large changes are disruptive and we try to avoid them. But we've reached a point where we need another meaningful change to improve how people use HubSpot and to allow for future growth.

So how did we go about it? Read on for more!

Problem Discovery & Solution Validation

First, we started with the top three problems we uncovered:

• Findability
  We found that customers were struggling to find what they were looking for when they needed to do work across the platform (across Hub lines).
  
  
• Efficiency
  For example, navigating between Contacts and Deals or Contacts and Tasks is critical based on day-to-day usage; yet, these pages were spread across different categories.
  
  
• Scale
  The navigation wasn’t scaling with the growth of our product. We’ve more than doubled the amount of navigation links since the last update in 2018. We needed a UX pattern that better scales with our pace of development.
  

As a result, we focused on three main goals:

1. Increase findability
2. Increase efficiency
3. Scale better

This project has been a multi-year journey. In the concept stage, we anchored everything to our customers. We used insights from more than a dozen usability studies, ranging from qualitative interviews, click tests, surveys, treejack studies, diary studies, card sorts, and unmoderated usability testing. After multiple iterations to the user experience, we saw these navigation changes as the most valuable to customers:

• A vertical layout. This is a more familiar paradigm that tested more efficiently. It also helps accommodate the growth of the product.
  
  
• A new menu organization. It prioritizes the most frequently used tools together front and center and better supports customer flows.
  
  
• A new Bookmark feature. This lets customers save their frequently used pages to meet their personalized needs.
  
  

A preview of the changes to the navigation

Principles & Findings

The menu organization took the most deliberation and required the most iteration. We tried to stay rooted in the principle of focusing on improving efficiency first, then findability. This helped us make decisions and tradeoffs about placement and priority.

The new structure prioritizes high-frequency usage and direct 1:1 customer communication.

Information Architecture Guidelines

We saw a measured improvement in efficiency when we removed the top two primary navigation switches between Contacts and Deals (10.16% of daily switches) and Contacts and Tasks (9.3% of daily switches), with the remaining top 10 navigation changes staying flat or slightly reduced.

Comparison of the top primary nav switch flows for power users across nav versions

While working on efficiency (how quick it is to do something), we made sure to pull direct customer insights around findability (how easy it is to find something). We were thrilled to see an overall increase in the Ease Of Use Score we measured based on task completion rate.

Customer Feedback & Iteration

Our original design had the navigation menu open and always present. We heard loud and clear from customers during testing that it was taking up too much space on the page. After reviewing the feedback trends and going back to our original principle of efficiency before findability, we added the ability to collapse and expand the menu.

But the feedback was overall positive. Here are a few examples that represent what we heard:

“It seems very intuitive. I was able to find what I was looking for, complete the task, and get whatever information I needed.” - Anonymous

“I like it on the left side, frankly. I didn't think I would and tend to like menus placed horizontally along the top of the page. I was pleasantly surprised. The categories also make sense and are used to what I usually see in a CRM. Clean and simple design.”  - Anonymous

“The new nav is great and gives room to position the new updates as they are released. In addition, this new side nav clearly indicates that HubSpot has evolved to more than just a CRM, but a business growth management platform that empowers businesses to customize the entire buying journey, streamline marketing and sales alignment, deliver true closed-loop reporting and much more." -  RevOps Professional

"The navigation is laid out very well and I don't think I'd even need training to start getting significant use out of the system." - Sales Professional, Manufacturing Company, 201 - 500

Rollout & Next Steps

We’re excited about this change and its potential to make HubSpot easier to use. But we recognize it will take some getting used to. So we’ve been rolling out the changes with the ability to opt in and out for some time. This has allowed people to get comfortable with the new experience and provide us with feedback. We’ve been tracking how many customers stay in the new experience after 4 weeks of use, which has been a positive signal.

Now that the navigation is available to all HubSpot customers, our journey isn’t over. A software product is never done. We will continue to find ways to make this experience better, easier to use, and more personalized. We plan to do this by listening to and learning from customers like you. If you would like to share any feedback about the refreshed navigation experience please use the survey under the Account Menu.  

How to share feedback on the refreshed navigation

Thank you to every customer who provided us with feedback along this journey. We're lucky to get the opportunity to partner with you on improving our product.

PS: For a full walk-through of the new experience and an overview of how the HubSpot navigation is organized, check out our Knowledge Base guide.

Want to play a role in developing exciting products like this one? Check out our careers page for your next opportunity! And to learn more about our culture, follow us on Instagram @HubSpotLife.