Navigation

Menus are one of the two key pathways for users to find information on your website. Large organisations like Universities have an enormous digital footprint and navigating around its parent and sub-sites can quickly disorient users.

At UWA I redesigned the university’s site map and navigation menus to create a singular harmonious interface for public facing sites.

 

-CHALLENGE-

Design coherent, scalable navigation patterns for small and large sites across the entire network.

-SOLUTION-

Mapping the network

I started mapping all the public facing sites of the University into a single easy to understand mind map.

With the majority of these sites now listed, I began organising these into logical categories in accordance with common practice.

-SOLUTION-

Sort it out

Evaluating our existing parent navigation menus and structure I ran a card sort test to find agreement on where some items that were listed more than once would logically sit for most users to remove duplicate labels.

I also ran a tree test to establish a baseline on how usable our current navigation was for users to successfully navigate to our core business areas.

 

-SOLUTION-

New vs Old

With the results from our first round of card sorting and tree testing we can craft our new information architecture with higher confidence. To further push ourselves we created a challenger IA with inspiring results.

In the challenger IA we elevated Student Life to a tier 1 category which aligns to the university’s priorities as well as surfacing relevant content for both current and prospective students.

 

-SOLUTION-

Preparing for scale

Beyond the navigation and IA for the parent site we will need to cater for sub-site navigation of varying sizes. Best practice is to only have 2-3 tiers in your site, however some sites may be unable to trim down. 

The navigation menus were optimized for both mobile and desktop. On desktop we designed a horizontal primary menu capable of navigating the users to tiers 1 and 2. To accommodate deeper sites, desktop pages could also contain a secondary left-hand menu to facilitate easier transition to sibling and child pages within the tier 1 section.

Child sites would now have any extraneous global menus removed, and replaced by a single link to the parent site homepage. With these menu options removed the mobile experience was simplified and reduced errors in the user activating the correct menu option to navigate around their current position.

 
Navigation-card 5.jpg
Previous
Previous

Design Capability

Next
Next

Motion Graphics