Our new top-level website navigation

Introducing streamlined navigation as part of the wider development work for the homepage of the website

4 min read

July 2020

Making navigating easier for our users

We have introduced a new streamlined navigation menu as part of the wider development work for the homepage of the website.

This is a replacement to the previous website navigation bar for desktop and mobile devices. Our new design includes a drop-down menu which shows users important parts of the website in one click.

In conjunction with other new design elements, refocused content and integrated social media, our new top-level navigation menu will allow our users to understand the University – its brand, pioneering work and unique location – and help them navigate to their goals more efficiently.

The University supports many different audiences and introducing a megamenu allows us to show multiple levels of our website's information architecture to cater for every choice.

 

What's on the menu?

Megamenus are a type of expandable menu in which a number of choices are displayed in a two-dimensional drop-down layout as part of a website's top-level navigation. [Nielsen Norman Group user experience research]

For large organisations they are an excellent design choice for highlighting key sections (study, research, international, business) at a single glance. Think browsing the BBC website, shopping on Amazon or eBay...

Regular drop-down menus don't usually support useful grouping of content, but megamenus visually emphasise relationships between content items, which not only helps users understand their choices, but makes them more confident their choices will be correct, efficient and satisfy their goal.

Screenshot of 'Study' section of megamenu.
Content themed into sections and calls to action
 

Benefits of a megamenu

Following standard usability guidelines to 'keep it simple', we didn't want to flood users with links, but offer suitable entry points into main sections of our site. Developing our megamenu brings many user benefits:

  • Everything visible at once – sections are quick to scan, with no scrolling.
  • Website chunked into related content, signposted with concise language.
  • Organic flow between sections – an inherent order empowers user choices.
  • Common user journeys are themed within the megamenu.
  • Menu options are revealed on click of 'Menu' button.
  • The search box is continuously visible on every page across devices.

 

A more fulfilling user journey

A user journey is a path a user may take to reach a goal when visiting a website. 

Analysing user journeys is integral to designing websites in order to identify the different ways to help users achieve their goal quickly and easily – our new megamenu helps users with this process.

It is important to understand, and constantly review, our users' journeys – their feelings, motivations and experiences – because it helps us guide them towards their goals as simply and effectively as possible. 

A well-devised megamenu is the beginning of a good user journey, making our site experience more efficient, helping users to build trust in our content and successfully navigating through to meet their goal.

Image of post-it notes for user planning.
Thought-shower session on user journeys
 

Reviewing user needs

To begin, we conducted a thorough review of our top-level landing pages and sections. 

Informed by ongoing analytics and qualitative feedback, we were able to review what our users want to see, what the priorities are and the quickest way to get to these places.

As we considered our previous navigation, we discussed in detail: was every user's main path of entry catered for? Did our users have their needs met in a satisfying way? Did our menu navigation work best for users first, rather than reflect an internal organisational framework? 

These conversations allowed us to make decisions about the megamenu that were informed by quality analytics and empathy for the user.

Image of post-it notes reviewing top-level navigation.
Reviewing top-level menu items
 

What's new?

  • Replacement navigation bar for desktop, tablet and mobile.
  • Drop-down menu – entire website in one click.
  • Tools for the content team to edit all menu items in the Content Management System (CMS).
  • Ability to highlight important calls to action at the very top menu level, e.g. ‘Collaborate’ under ‘Business’.

And this is just the start of a content review process...

Moving forwards, there will be further auditing of content and a refresh of other sections of the website. 

We will continue to review analytics and engage in conversations with relevant stakeholders during future phases.

 

Website Refresh Project 2020

The University's external website is undergoing a refresh to update certain design elements, functionality and content, as part of a project ending on 31 July 2020. 

Keep up to date with everything that's happening – from the latest new content design features, to the next developments on the horizon

Post-it notes used for Agile planning.