Rethinking University Navigation
Helping users move effortlessly through a large and complex website by designing a cohesive, user-centred navigation system.
Overview
Deliverable
A website navigation system that simplifies movement across the university’s complex digital ecosystem, improving usability, accessibility, and consistency for all users.
My role
Senior UX Designer and project lead
Team
1 x User researcher (via Askable+)
2 x AEM Developers
1 x Business analyst
1 x Visual designer
When
2023
Rethinking University Navigation
Helping users move effortlessly through a large and complex website by designing a cohesive, user-centred navigation system.
Overview
My role
Senior UX Designer
Team
1 x User researcher (via Askable+)
2 x AEM Developers
1 x Business analyst
1 x Visual designer
Deliverable
A website navigation system that simplifies movement across the university’s complex digital ecosystem, improving usability, accessibility, and consistency for all users.
When
2023
Final design and features
Discovery
Conducting in-depth user research and competitor analysis to inform our design strategy.
The problem
Complex and ineffective navigation
The university's website faced significant navigation challenges due to cluttered menus, inconsistent navigation systems across micro-sites, and a mobile experience that forced unnecessary page loads. This led to a confusing and frustrating user experience.
Heuristic analysis
Uncovering navigation issues
Through a heuristic analysis, I identified a number of problem areas that could be investigated.
Visibility of system status: Users couldn’t easily understand their location within the site due to the deep and fragmented navigation.
User control and freedom: The mobile navigation restricted users by forcing page loads for deeper exploration, limiting their ability to browse freely.
Minimalist design: Multiple top-level navigations, such as Corporate navigation on micro-sites, led to confusion and inconsistent user experiences
Design process
Competitor analysis
Exploring complex navigation systems to inform design
I conducted competitor analysis by researching complex navigation systems used by other universities and companies like Qantas and Woolworths. Both companies utilise seamless navigation across interconnected services—such as booking, shopping, and rewards—without overwhelming users.
Ideation
3 solutions with 1 key principle.
I developed three prototypes on one core principle: user freedom and control. With a large site and complex information architecture, users needed to navigate three levels deep and recover from error paths easily. The IA itself couldn’t be altered due to internal constraints, therefore my goal was to design a flexible, intuitive navigation system to enhance user experience within those limits.
#1 Immersive
Create a bold, full-page navigation that maximises visibility and simplifies deep navigation. Clicking on a site section (e.g., "Study") opens a full-screen navigation with ample space for key CTAs (e.g., "Find a course") and promotional highlights (e.g., "Open Day").
✅ High visibility: Ample space for promoting important links and events.
✅ Distinctive experience: Feels modern and stands out from traditional nav systems.
✅ Simplified exploration: Easier access to deeper site sections.
⚠️ Disorientation risk: Full-screen takeover may disorient some users.
⚠️ Overload potential: Too much content could overwhelm users.
#2 Compact
Similar to Version One, but the navigation opens in a more compact format without taking over the full screen. This provides users with a less disruptive navigation experience while still offering access to site sections and CTAs
✅ Less intrusive: Keeps users anchored to their current page, making navigation feel less overwhelming.
✅ Streamlined experience: Reduced visual clutter compared to full-page navigation.
✅ Familiar design: More in line with traditional navigation systems, reducing the learning curve for users.
⚠️ Limited CTA space: Less room for promoting important links compared to Version One.
⚠️ Less immersive: Might feel less impactful for users looking for a more immersive experience.
#3 Multi-nav
A breadcrumb-based navigation system that guides users through site sections (e.g., "Study"). Selecting a section takes users to a top page, revealing a new sub-site navigation that is consistent across sub-sites.
✅ Clear user flow: Breadcrumb navigation helps users easily track their location within the site hierarchy.
✅ Consistent experience: Navigation stays consistent across sub-sites, reducing cognitive load.
✅ Scalable: Works well for large sites with multiple sub-sites, offering structure and flexibility.
⚠️ Learning curve: Users unfamiliar with breadcrumb navigation may require time to adapt.
⚠️ Navigation depth: Users may need extra clicks to explore deeper sections, slowing down the process.
Test and iterate
Initial round of testing
Type
Duration
Participants
Format
Tools used
Comparative usability session
45 mins
6 participants
Moderated video call
Askable sessions w. Figma prototypes
We conducted user testing by asking participants to complete specific tasks on the website, such as finding child pages, navigating deeper into the site, and recovering from mistakes. During the sessions, we observed how they interacted with the navigation, including how easily they understood their orientation within the site. Additionally, we asked follow-up questions ws to gather user feedback on their experience and thoughts on the navigation design.
Key findings
#1 Immersive
No critical usability issues
Full page too disorientating
Least favoured by users due to disorientation
No to little interaction with CTAs or spotlight items.
“I wasn’t expecting a whole thing to drop down and essentially obscure the other page”
– Jonothan (test participant)
#2 Collapsed
No critical usability issues
Favoured by some
Cited as familiar and intuitive
No to little interaction with CTAs or spotlight items.
“The design of this page is quite similar to those pages that I have used before” – Karen (Test particpant)
#3 Multi-nav
No critical usability issues
Full page too disorientating
Least favoured by users due to disorientation
No to little interaction with CTAs or spotlight items.
“So there’s an additional menu for each page is it? Seems a bit more involved"
– Barbara (test participant)
Addressing feedback and pain points
Merging immersive and collapsed designs
To address user feedback, I combed elements of the immersive and collapsed elements. A large panel now pulls out from the right, offering more space without the disorientation of a full-screen takeover.
Repurposing multi-nav approach
I used the 'multi-nav' approach to create a unified navigation system for the university’s micro-sites, ensuring consistency and ease of use across all areas, from the corporate site to niche micro-sites. This streamlined the user experience and reduced confusion.
Additional rounds of testing
A/B unmoderated test
Goals
Compare two refined prototypes to evaluate how users interacted with the top site navigation versus the global/utility navigation
Increase statistical significance of previous findings.
Format
20 participants testing either version A of B prototypes in unmoderated setting (via Maze.co)
Key learnings
Users consistently relied on the top site navigation as their primary method of exploration.
The global/utility nav was used mainly when items seemed out of place or not contextually relevant, demonstrating the need to prioritise context-specific, immediate navigation options.
Accessibility tests
Goals
Assess usability for screen readers and magnifiers.
Format
3 testers who use assistive technology comparing Figma prototypes
2 screen reader users testing early builds.
Key learnings
Identified disorientation issues with magnifiers, overwhelming colour contrast, and optimised ARIA labelling and landmarking to enhance navigation for screen readers.
Results and impact
22% increase in desktop navigation performance
The navigation redesign led to a 22% increase in desktop usability according to annual benchmarking by an external agency (Global Reviews) that evaluates digital performance across universities.
Climbed to #1 ranking in mobile experience
Climbed to #1 spot in mobile experience for domestic prospective students, according to benchmarking by the same external agency.
Major accessibility impact
Worked with an ICT specialist to identify and resolve all major navigation accessibility issues, resulting in a significant improvement in compliance and usability for users with disabilities.