1

Competitive Analysis
Global Nav Redesign
Table
2 of Contents

1. Competitive Analysis - Header & Footer

a. Zendesk, Salesforce, Atlassian, Marketo, Shopify, Pardot, Drift, Intercom, Mailchimp,
ActiveCampaign
2. Competitive Analysis - Key Insights
a. Products, Solutions, Pricing, About, Careers, Partners, Developers, Subcategories,
Horizontal Arrangement, Hover Interactions, Noteworthy Competitor Practices
b. Relating Insights to HubSpot’s Current Nav Design
3. Navigation Best Practices
a. Mega Menus, Audience-Based Navigation, Relevant NN Group Articles & Videos
4. Site Map Insights
5. Initial Recommendations
3

Competitive Analysis
Zendesk - Products
4

● The two most prominent products

are listed on the left, have more
thorough descriptions, icons, and
have different background colors
● Hovering on each product reveals a
unique animation & color
Zendesk - Top links
5

● Company tab located above the primary nav in smaller copy, includes About Us, Careers, Press, Diversity, etc.
Zendesk - Solutions
6

● “Solutions” tab lists different

personas and use cases

○ Divided into industry,

company type, and use-case
Zendesk - Resources
7

● “Resources” tab includes partners,

developers, customer stories, blog,
etc.
Zendesk - Footer
8

● About us, Investors, Careers, Contact

us, Press are all also in the footer
under Company
Salesforce - Products
9

● Pricing page is located under the

products section

● “What is Salesforce?” listed first

under Products

● Products are listed with their

respective icons

● Hovering on a product reveals a

more detailed description of the
product with specific tools and a
product screenshot
Salesforce - Solutions
10

● Similar to Zendesk - Salesforce has a

solutions tab which is divided by
Business Type, Role, Need, and
Industry
Salesforce - Support & Services
11

● Support & services divided into success cloud, learning and tutorials, communities, and resources

● Contains partners, knowledge base, support, developers

Salesforce - Customer Success
12

● Separate tab for customer success

Salesforce - Side nav
13

● Each product has a side navigation

that includes solutions, features,
related products, pricing, by role,
customer stories, resources, and FAQ
Salesforce - Footer
14

● Footer contains educational links for new users, About section (similar to header about us section), and
popular links
Atlassian - Products
15

● Products are listed under their

respective functions

● Sticky right section includes

marketplace, support, trust &
security, community, blogs,
developers, and university

● Nav items are triggered by clicks,

not hovers
Atlassian - For teams
16

● “For teams” section details

use-cases by team size and team
function
Atlassian - Support
17

● “Support” section includes

resources for users as well as
partners, about us, careers, and
blog
Atlassian - Footer
18

● Footer includes products, resources (not in header), expand & learn (not in header), and about (not in header)
Marketo - Products
19

● Text descriptions for each product

as well as a learn more CTA

● Unique video demos on each nav

section
Marketo - Solutions
20

● Solutions tab lists lists different

product capabilities, industries, and
pricing without sub-categories
Marketo - Why Marketo
21

● Why Marketo section contains customer stories, partners, support, and Marketo University
Marketo - Company
22

● Company tab lists leadership, news,

careers, legal, trust and contact us,
as well as a recruiting video
Marketo - Footer
23

● Footer is extensive and contains same exact categories and items as the header
Shopify - Header
24

● Shopify has four left-aligned header items named as actions which match with common use-cases of the
product

● There are two other right-aligned nav items - pricing and learn (which contains the blog, forums, academy, etc.)

● No search function or “Contact Us” - only a start free trial CTA

Shopify - Start, Sell, Market, Manage
25

● Each nav item links to a main page for

that action, with expandable links located
below to popular features of that
product/function
Shopify - Footer
26

● About Us, Careers, Press are located slightly above the footer in larger copy

● Footer mainly comprised of SEO filler/product features (& contact, partners, support, developers, blog)
Pardot - Solutions
27

● Pardot has no products or software tab -

just a solutions tab which details products
and product features as well as use cases
by industry

● Blog is linked above the primary header

nav, along with the customer hub (user
resources)
Pardot - Resources
28

● Resources tab includes customer hub,

FAQ, developers, events, and releases
Pardot - About
29

● About tab includes careers, partners, and

contact us
Pardot - Footer
30

● Footer mirrors header with several links removed

Drift - Platform
31

● Platform tab includes both use-cases by teams, a list of product features, and a integration CTA
Drift - Customers & Resources
32

● Customers tab includes three links: what customers love, customer success, and case studies

● Resources tab includes blog, books, insider, webinars, events

● Both are significantly less thorough and smaller in size compared to the platform tab
Drift - Footer
33

● Company subsection includes about, jobs, press, partner (not in header)

● Rest of the footer mirrors the header, with a couple added links
Intercom - Solutions
34

● Solutions tab divided into two sections: the first

has Intercom’s use-cases, the second business
types
Intercom - Why Intercom
35

● Why Intercom tab includes product features,

help center support, and integrations
Intercom - Resources
36

● Resources tab contains blog, customers,

developers, help center, etc.
Intercom - Footer
37

● Footer mirrors header with added Company and From the blog section

● From the blog section displays recent blog articles

Mailchimp - Marketing Platform
38

● Marketing platform tab includes an overview of all products, as well as four major mailchimp product
features with specific tools listed underneath

● Illustrations are used to differentiate each product

Mailchimp - Resources
39

● Resources tab contains overview, 101, tips, guides, and entertainment

Mailchimp - Footer
40

● Footer divided in two: Mailchimp Presents content on left, and Company, Product, and Community on right

● Company section exclusively in footer: our story, careers, contact, newsroom

● Developers, status, help, partner program, agencies, help all exclusively in footer
ActiveCampaign - Features
41

● Features tab divided into five major product subsections which each have a list of respective features

● Both product subheaders and features are clickable

ActiveCampaign - Solutions
42

● Solutions tab divided into two sections: first contains By Vertical, By Team, and Partners, next contains
action-oriented use cases

● Use of color and iconography to differentiate persona-based vs. action-oriented links

ActiveCampaign - Footer
43

● Footer contains products, general resources, developers, integrations, about (partners, blog, jobs)
44

Key Insights
Products/software
45

● 10/10 competitors has a section in the header nav that listed products/product features and capabilities

● 7/10 competitors listed specific product features in the header nav (beyond just product names)

● The section language used in header nav:

○ 4/10 “Products”
○ 2/10 “Platforms”/”Marketing Platform”
○ 2/10 “Solutions”
○ 1/10 “Features”
○ 1/10 “Start”, “Sell”, “Market”, “Manage”

● 8/10 competitors had a similar section in the footer

○ 6/8 listed actual products & product names
○ 1/8 used SEO filler/didn’t mention actual product names (current HubSpot footer)
○ 1/8 didn’t list actual products, used persona-based terms instead (“For Sales Teams”)
Solutions/Use-cases
46

● 8/10 competitors had a section in the nav that detailed solutions/use-cases by industry, company size,
use-case, role, need, team function, and/or vertical (audience-based navigation)

● The section subheader language used:

○ 6/8 “Solutions”

○ 1/8 “For Teams”

○ 1/8 “Platform”

● 5/8 of these competitors also included a list of product features/capabilities in this tab

○ 1/8 included partners

Pricing
47

● 8/10 competitors have a distinct pricing section in the header nav

○ In every case, pricing was placed to the right of products & solutions

● 1/10 (Salesforce) has a pricing link within the products section

● Language used:

○ 9/10 “Pricing”

○ 1/10 “Buy now”

About/Company
48

● 4/10 competitors had an About/Company section in the header nav

○ 1 of these (Zendesk) had Company above the primary nav in smaller copy

● 10/10 competitors had an About/Company section in the footer

○ 6/10 competitors placed About/Company on the right end of the footer

● Subheader language used:

○ 5/10 “Company”

○ 2/10 “About Company Name”

○ 1/10 “About Us”

○ 1/10 “About”

○ 1/10 No subheader, placed directly above footer (Shopify)

Careers/jobs
49

● 9/10 competitors placed careers/jobs under About/Company

○ Shopify has no subheader - Careers is placed directly above the footer

● Language used:

○ 8/10 Careers

○ 2/10 Jobs
Partners
50

● 9/10 competitors have a partner program

● 6/9 competitors had partners in the header nav
● 9/9 competitors had partners in the footer
● 0/9 competitors have a section of the nav exclusively for partners (in the header or footer)
● So where is partners located?
○ 1/10 “Resources”
○ 1/10 “Support & Services”
○ 1/10 “Support”
○ 1/10 “About”
○ 1/10 “Solutions”
○ 1/10 “Why Company Name”
○ 1/10 “Company Name” (Exclusively in footer - Shopify)
○ 1/10 “Company” (Exclusively in footer - Drift)
○ 1/10 “Community” (Exclusively in footer - Mailchimp)
Developers
51

● 8/10 competitors have a developers page

● 6/8 competitors have developers in the header nav

● 5/8 competitors have developers in the footer

● Where is developers located?

○ 4/8 “Resources”

○ 1/8 “Support & Services”

○ 1/8 - Sticky across entire nav (Atlassian)

○ 1/8 “Product” (Exclusively in footer - Mailchimp)

○ 1/8 “Learn” (Exclusively in footer - ActiveCampaign)

Subcategories
52

● 8/10 competitors used subcategories within header nav sections - to organize products, resources, solutions,
etc.

○ Though sometimes subcategories are exclusively in certain sections (i.e. Zendesk uses subcategories
to organize Solutions by industry, company type, and use-case, but doesn’t use subcategories within
Resources)
Horizontal Arrangement of Header Sections
53

● In 8/10 competitors, header sections were aligned in this order (the language used varies):

○ Products -> Solutions -> Pricing -> Resources -> About

● 1/10 competitors placed Resources to the left of Pricing (Intercom)

● 1/10 competitors placed Pricing between Products and Solutions (Zendesk)

Hover Interactions
54

● 9/10 competitors have a unique hover state that indicates that a header section is hovered over
Hover Interactions
55

● 9/10 competitors have a unique hover state that indicates that a header section is hovered over
○ 8/9 competitors activate nav dropdown on hover
○ 1/9 competitors (Atlassian) activate nav dropdown on click
● 3/10 competitors have header nav dropdown section headers which are clickable (Salesforce, Pardot,
Mailchimp)
Current Nav Inconsistencies
56

1. On the pricing page, the header nav section headers are not clickable, while they are throughout the rest of
the site

2. On the pricing page, an extra link (Events & Talks) is placed under News & About, and Press Resources is
renamed to Press Coverage & Awards

3. On the Become A Partner and Careers page, hovering over a nav section changes the copy color to calypso,
while it doesn’t on all other pages
Noteworthy Competitor Practices
57

● Placing blog & video content in the footer

● Using the solutions section to detail use-cases

not only by team & vertical, but also by the user’s
goals - using action-oriented language that links
to specific products/product features
Comparing Common Competitor Practices with Current
58
HubSpot Nav

● Software (language used)

○ Is there any historical reason we chose to use the term “Software” instead of “Products” which is more
commonly used by competitors and seems a bit less outdated?
● Product features
○ 7/10 competitors listed product features in the header nav - is this worth exploring within the context
of HubSpot’s products?
● Solutions
○ 8/10 competitors had a “Solutions” section in the header nav - could this be the way to integrate
personas within the global nav?
● Partners
○ 0/10 competitors had a header section exclusively for partners, and instead placed it in other sections
- mainly Resources/About/Solutions
○ Is there any significant historical reason why partners has its own nav section?
Comparing Common Competitor Practices with Current
59
HubSpot Nav
● About & Careers in the footer
○ 10/10 competitors had About & Careers in the footer - this seems like an established pattern
○ Is there any reason why we shouldn’t follow along with this pattern?
● Location of developers
○ The majority of competitors placed developers under Resources
● Subheader categories
○ 8/10 competitors used subcategories to organize links within a header section, though sometimes
exclusively in certain sections (i.e. Zendesk uses subcategories to organize Solutions by industry,
company type, and use-case, but doesn’t use subcategories within Resources)
● Hover interactions
○ 9/10 competitors have a unique hover state that indicates that a header section is hovered over - this
gives the user immediate feedback which I think is lacking in the current design
○ 3/10 competitors have header nav dropdown section headers which are clickable (Salesforce, Pardot,
Mailchimp) - is this best practice for UX on HubSpot’s nav?
60

Navigation Best
Practices
Mega Menus
61

● “Mega Menus Work Well for Site Navigation” - Nielsen Norman Group

○ “Big, two-dimensional panels divided into groups of navigation options”

○ “Navigation choices structured through layout, typography, and (sometimes) icons”

○ “Everything visible at once — no scrolling”

○ “Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand
navigation, they might appear as mega fly-outs”

○ “Menu options revealed on hover, click, or tap”

○ “Don't make response time for a mega menu be too fast: the mouse should remain stationary for 0.5 seconds
before you display anything that's hover-dependent, such as a mega menu or a tooltip”

○ “Alphabetize for scannability: columns, not rows”

Mega Menus - Grouping
62

● “Mega Menus Work Well for Site Navigation” - Nielsen Norman Group
○ “Chunk options into related sets, such as those you discover after doing a card-sorting study of users' mental
model of the features.”

○ “Keep a medium level of granularity. Don't offer huge groups with numerous options that require extensive
time to scan. Conversely, don't make the individual groups so small that the mega menu has an overabundance
of groups that users have to spend time understanding.”
○ “Use concise, yet descriptive labels for each group. Remember the standard rules for writing for the web:
enhance scannability by starting with the most information-carrying word and avoid made-up terms.”
○ “To keep words short and direct; the base form of verbs ("shop") is usually better than gerunds ("shopping").”
○ “Order the groups. You can do this using an inherent order among the features (as for a workflow) or according
to importance, putting the most important or frequently used group in the top-left corner (assuming a
left-to-right language like English).”
○ “Show each choice only once. Duplicating options makes users wonder whether the two occurrences are the
same or different. Also, redundancy makes the entire interface bigger and more cumbersome.”

○ “Menus must focus on enabling users' choices and on guiding them as rapidly as possible to their desired
destination.”
Audience-Based Navigation - How to Make It Work
63

● “Audience-Based Navigation: 5 Reasons to Avoid It” - Nielsen Norman Group

○ Make audience categories mutually exclusive and jargon free. Audience groups should be distinct and
descriptive, so that users can quickly identify themselves. Category names should use plain-language
terms that people can easily relate to.

○ Indicate if the category contains information for that group. Users are much more successful with
audience navigation that includes the additional word(s) “for” or “Information for”.

○ Only use audience-based navigation when the content truly justifies it. Role-based navigation works
best when the content is unique to that audience group. There should be enough information
specifically for that group to justify its own section. In our 2015 Intranet Design Annual, many of the
winners successfully incorporated role-based personalization into their intranets. For example, one
company created special sections that only appeared for managers or for users on certain teams.

○ Add additional context by showing subcategories early on. Surfacing deeper links (for example, with a
mega menu) introduces users to the scope of a section and affords a shortcut to the content. This way,
users can scan the options and better understand each category and its contents.
Audience-Based Navigation - How to Make It Work
64

● “Audience-Based Navigation: 5 Reasons to Avoid It” - Nielsen Norman Group

○ Design navigation that allows users to easily switch between audiences. As with any navigation
system, users should be able to understand where they are in the site, and where else they can go.
Avoid portals that lock users into an audience section with no obvious way to move between sections.

○ Prioritize topics and tasks over audience categories. Remember that web users are task-oriented: they
come to a website with a goal in mind. Information organized by topic or by frequent tasks is often
easier to navigate because it immediately addresses what people seek. Audience-based navigation
can be used as secondary or tertiary navigation when the content merits its own section.
Deep Linking
65

● “Deep Linking is Good Linking” - Nielsen Norman Group

○ “Deep linking enhances usability because it is more likely to satisfy users' needs. Generic links , such
as links to a company's homepage, are less useful than specific links that take users to an individual
article or product.”

○ “Tell users their arrival point, and how they can proceed to other parts of the site by including these
three design elements on every single page:
● Company name or logo in upper left corner
● Direct, one-click link to the homepage
● Search (preferably in the upper right corner)”
Relevant NN Group Articles & Videos
66

● Top 3 IA Questions about Navigation Menus

● Footers 101: Design Patterns and When to Use Each
● How Many Items in a Navigation Menu?
● Better Link Labels: 4Ss for Encouraging Clicks
● Polyhierarchies Improve Findability for Ambiguous IA Categories
● How to Avoid Bias in Card Sorting
● Card Sorting: Pushing Users Beyond Terminology Matches
● Card Sorting: How Many Users to Test
● Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories
● Tree Testing Part 2: Interpreting the Results
67

Site Map Insights

Link to Full Site Map

Link to Nav-Only Site Map

Nav-only Site Map
68

For reference
Blog Conversion
69

● The blog receives 19.85% of total clicks on the Header nav and receives the 2nd most
organic unique pageviews across all pages on HubSpot.com (behind Pricing)
The blog
● The blog is the 3rd least likely to convert

● Why? It doesn’t link to any product/get started pages or sign up flows

● Is this a missed opportunity? How much of a difference would it make if

we introduced a CTA that linked to a get started or sign up flow?

○ Or is the blog supposed to be solely focused on lead-gen?

Contact Sales Page
70

● This page is linked:

○ 7 times total across the product pages (CRM, Marketing

Hub, Sales Hub, Service Hub)

○ On the pricing page

○ On the toolbar

● Not compliant with Canvas & accessibility concerns

● “Contact Us” on the top right links to itself

Contact Sales Page (continued)
71

● “Contact Us” is listed under About and on the toolbar

● The link on the toolbar links to the outdated page which includes
three different ways to contact sales (call, chat, book a meeting)

● The link under About links to a more recently built page which
includes call sales, customer support, and global offices

● Consider: updating the outdated page to be compliant with

Canvas, and change the copy of one of the links to indicate that
they link to different pages
Feature Pages Sign Up Flows
72

● 9/15 Marketing Hub feature pages link to Get a HubSpot Demo, 4/15 lead to the
Marketing Hub Sign Up, 2/15 lead to the CRM Sign Up
● 7/11 Sales Hub feature pages link to the Sales Hub Sign Up, 2/11 link to Get a
HubSpot Demo, 2/11 link to the CRM Sign Up
● 3/6 Service Hub feature pages link to the CRM Sign Up, 2/6 link to the Get a Service
Hub Demo, 1/6 link to the Service Hub Sign Up

● Marketing Hub links to pricing in the same place that Sales Hub and Service Hub link
to contact sales (visually outdated page)

● Is it a concern that half of the Service Hub feature pages link to the CRM Sign Up?

● Note: this probably isn’t in the scope of the Global Nav redesign - just something that
I noticed
73

Initial
Recommendations
Initial Recommendations
74

1. Consider renaming “Software” to “Products” or “Growth Platform”

2. Consider exploring whether product features have a place or purpose in the global nav (deep linking)
3. Consider introducing a “Solutions” tab which integrates personas in the global nav
a. Consider including action-oriented links in this tab (i.e. Capture & Convert Leads) which cater to users who are in a
“task mindset” and/or don’t identify with any of the personas listed
4. Consider removing the partners tab and placing partners under Solutions/Resources/About (dependent on card sorting)
5. Consider placing About in the footer
6. Consider placing Developers under Resources
7. Consider re-evaluating & refining our use of subcategories to organize links within our nav sections (dependent on card
sorting)
8. Consider implementing a unique hover state that gives immediate feedback that a tab is being hovered over
9. Consider listing links to product pages/pages that convert well in the footer (depending on SEO)
10. Consider moving links in the header which get very little clicks to the footer (Board of Directors, HubSpot News, Press
Resources, Speakers, Investors, HubSpot User Groups)