Redesigning a #HigherEd Primary Nav

While most of my colleagues at JU were (I hope) enjoying two weeks of holiday vacation, away from the office, I was implementing some major changes to the Jacksonville University website. It’s been a month now since I launched the new site navs, and I’m pleased to say they’ve been a big hit.

Background

Since I started at JU a year and a half ago, I’ve been familiarizing myself with the site, getting to know the higher education industry, and learning tools like SharePoint, Google Tag Manager, and C#. Three months ago, I decided it was time to use what I’d learned to launch the first round of changes to the site, starting with the architecture of the primary navigation systems.

The old JU header and primary nav.

Before, the menus were poorly organized and not very user-friendly. At wider browser widths, the main menu required hover to access the dropdowns, and items in each dropdown used labels that were unlikely to be familiar to people outside of higher ed, a real problem given that our highest priority audience is meant to be prospective students.

Getting Started

I knew the solution for this would involve two parts: reworking the architecture of the menu information and redesigning the menu experience.

The visual and interaction design of the menu seemed pretty obvious to me. Instead of relying on hover to activate the dropdown menu, I could change the trigger to a click, and I could rebuild the menu so that all of the dropdown menus activated on one click, rather than requiring users to click each header to see their options.

The information, on the other hand, required more work. I felt like it was important to create a menu that was rooted in data, not just for the sake of the users, but also so that I could better justify my decisions to the on-campus entities that would be affected.

Step 1: Research

I decided to start by researching other universities’ menus so I could see what kind of patterns and labels prospective students were becoming familiar with. I analyzed the home page menus of 49 universities, which included:

  • 11 top national universities according to U.S. News
  • 11 top national liberal arts colleges according to U.S. News
  • 10 universities with highest application rates according to U.S. News
  • 10 competitor schools identified by the Chief Communications Officer
  • 7 CASE Circle of Excellence: Institutional Website winners
The top results of my analysis of other universities’ primary navs.

I broke the menus down into primary and secondary navs based on visual priority, i.e. the biggest, most distinct collections of links were primary navs, and I inventoried the items in each one. When I analyzed the results of the content analysis, I found that the most common primary menu items were:

  • Admissions (included in 89.8% of sites’ primary navs)
  • Academics (85.7%)
  • About (79.6%)
  • Campus Life (49.0%)
  • Research (44.9%)
  • Athletics (34.7%)
  • Support/Give (30.6%)
  • Alumni (24.5%)
  • News & Events (18.4%)
  • The Arts (18.4%)

Our primary menu wasn’t far off in terms of headings, but the items we listed under those headings were a bit less typical. I couldn’t say for sure how the previous menu came to be, but, if I had to guess, I’d say it was a combination of educated guessing and workplace politics.

I also realized as I was looking at the other schools’ sites that 87.7% of them had a menu of links for specific audiences, such as links labeled “Prospective Students,” “Current Students,” and “Alumni.” The popularity of these links, which I’ve taken to calling portals, made it likely that site visitors were looking for something similar on the JU site.

Step 2: Refining the Results

With all of that research in hand, I decided my next step needed to be our analytics account. I pulled reports about our most visited pages and the search terms our visitors used most often.

Armed with the data about JU’s top content and the content folks were seeing on other universities’ sites, as well as my own knowledge of JU’s marketing goals, I developed the new primary menu headings and items.

The new header with expanded primary nav.

Step 3: Implementation

Building it all was the easy part, really. I was worried, at first, because I’m still quite new to SharePoint and to the C# that the previous web developer used to make some pieces of the site work. It turns out modifying C# is a lot like modifying JavaScript; if you can read the latter, you can read the former well enough.

I built everything in a new master page that I applied only to a hidden subsite I use for testing these things. I also developed the portals in a hidden environment so that I could launch those at the same time that as the new primary menu. When I was satisfied that everything was as complete as it could be in my isolated development environment, I prepared for launch.

Step 4: Wrap Up

To minimize the potential impact on our visitors, I scheduled the launch for the first week of our holiday break. The weeks surrounding Christmas are our lowest traffic period of the year, so I launched a week before Christmas Day and spent the following two weeks watching the site, the analytics account, and my inbox.

I also implemented Google Tag Manager to let me track clicks on each individual navigation item. I’ll be using the data that rolls in from Tag Manager and from our other reporting systems to determine whether or not the menu is effectively pointing people towards the content they’re looking for (and the content we in the Office of Marketing want them to find).

Conclusion

There’s still a lot of work to be done on the site, like optimizing performance and redesigning it for accessibility, but we’re on the right track to a better user experience and a more effective website.


Originally posted to Medium.

Share your thoughts