How Vital Helped One SaaS Client Rethink Their Website Navigation Structure in 6 Steps

Website navigation and information architecture (IA) is a mix of art and science, and it’s tricky to get just right, especially if:

• Your site needs to appeal to multiple audience personas, including existing customers, partners, employees, potential new recruits, etc.
• Your business offers a mixture of products and services, and the line between the two isn’t always clear.
• Your buyer’s journey is heavy on self-education, and you need to make it simple to find relevant information.
• Your product team has been innovating like crazy, and you’ve been adding pages to your site on an ad hoc basis, without slowing down to reassess your navigation structure.
• Your website has a robust resource center, with lots of different post types above and beyond a typical blog.

One of our clients, a leading SaaS company, checked off all of the above boxes and a few more besides. Their website had been just fine when they were smaller, with fewer offerings, fewer resources, and a much narrower audience. But they’ve grown tremendously in a relatively short period of time. As a result, navigating their website has gotten increasingly complicated.

We sent a crew of Vital strategists, web design specialists, and information architects to lead an on-site, hands-on workshop with the client’s marketing and web team. They brought the food, the audience personas, and the deep understanding of their business. We brought the research, the 20+ years of web design experience, and the sticky notes. Lots and lots of sticky notes.

We lived to tell the tale, and we returned with a fresh perspective on architecting navigational menus for complex business models. Here’s a step-by-step process for evaluating your own website’s navigational structure to determine whether it’s intuitive and easy for your audience to use — and, if not, some options for tackling the problem.

Step 1: Get Feedback on Your Existing Website Navigation

The best way to find out how your audience experiences your site navigation is to ask them. Depending on how relationships work in your business, you can solicit feedback directly or via a feedback tool such as Userback. We recommend not just asking your long-standing customers — they’re likely to be as deep in the forest as you are, and just as unable to see the trees. Instead, hit up newer clients, and even people who are totally unfamiliar with your business, to see if your menus make sense to them.

Step 2: Check Your Data

Google Analytics will tell you which pages on your site get the most traffic, and from which sources. Layer that over a heat mapping tool (we like Crazy Egg) to learn about how actual users interact with your site, and you can get a lot of information to guide your navigation design. For example, we found that several pages that were prominent in our client’s main nav were duds in terms of traffic and interaction. To reduce clutter, we recommended pulling those links into the footer instead.

Step 3: Assess Your Navigation Options

There is no one right way to structure a website’s navigational menu. But, if you’re looking to optimize your menus, it’s helpful to know what’s out there. For the purposes of our workshop, we broke it down into two main approaches: task-based navigation and audience-based navigation.

Task-based navigation

Task-oriented users come to a website with a goal in mind. Information organized by topic, by product/service, and (duh) by task works well for this type of user.

Examples of task-based navigation:

Bilberry

Bilberry is a digital services provider that’s gone all-in on the task-based navigation approach. They didn’t back into this structure by accident, either. They wrote a whole article on their site about why they use task-based navigation. Read it here.

Blue Herring

Vital client Blue Herring uses an elegant task-based navigation menu that makes it super easy for users to find the type of insurance they’re looking for.

Vital

Hey, that’s one good-looking task-based mega-nav! Our own website navigation is geared toward tasks — finding a service, meeting our team, exploring our portfolio, and diving into resources like this blog post.

Audience-based navigation

With an audience-based navigational structure, users are asked to identify with a particular audience group, and then they’re offered curated content and features relevant to them.

Examples of audience-based navigation

Key Bank

Like a lot of banks, KeyBank sorts its users by audience type: Personal, Small Business, Wealth Management, and Businesses & Institutions. Depending on the audience you select (this example has “Personal” selected), you get a customized page with the content relevant to you.

Adobe

Adobe’s Creative Cloud products and services are targeted at specific audiences. Depending on which you select, you’ll see the products and pricing that are best for you.

Ernst & Young

Ernst & Young blends task- and topic-based menus with audience-based navigation that serves up curated content to C-suite personas.

Step 4: Map Your Site’s Navigation as it Is

This is where the sticky notes come in. For our workshop, we recreated our client’s existing site navigation, using different sizes and colors of sticky notes for the header nav, the main nav, dropdowns and meganavs, and the footer nav.

Step 5: Keep, Kill, Combine, Relocate

Armed with our data (see step 2), we worked our way through each navigational element, starting at the top, and asked ourselves these questions:

• Are all the important navigational categories accounted for?
• Is this page important enough to be included in the nav?
• Do the main navigation categories make sense?
• Are there any categories that can be removed or combined?
• Do all the sub-navigational items make sense together?
• Does anything need to move into a different category?
• Is this how our audience thinks? Does it match their mental map?

We moved sticky notes around, renamed them, and removed some altogether, until we were reasonably satisfied that we’d created a navigational structure that would make it easy for users to understand our client’s offerings and find the information they needed to move through their buyer’s journey. But we weren’t done yet…

Step 6: Consider Your Audience

Of course, the entire exercise was done with the website’s audience in mind. But before we called it a day, we ran one more test to make sure all potential users would have an easy, positive website experience. We pulled out our client’s buyer personas and made a list of topics and information each persona needs to make a decision to buy. Then we compared those lists against our fresh new sticky-note nav. In our case, this led to a few minor tweaks, but it just as easily could reveal a need to add audience-based navigation options if they don’t already exist — or even to create new pages or other content to fill in any blank spots.

How Vital Can Help You Create an Easier, More Intuitive Website Navigation

Whether you’re building a brand-new website and want to get the navigation right from the start, or you have an existing site that’s outgrown its menu structure, it can be helpful to bring in outside expertise to help you think through your options. If you’d like to talk information architecture and website navigation options, get in touch.