From clutter to clarity
I redesigned the University of Sydney's site navigation system to simplify movement across a massive and fragmented digital ecosystem — all without being able to change the underlying IA.
Employer
University of Sydney
Employer
University of Sydney
Employer
University of Sydney
Role
Senior UX Designer
Role
Senior UX Designer
Role
Senior UX Designer
When
Feb 2022
When
Feb 2022
When
Feb 2022
The challenge
The challenge
The challenge
Simplify university's navigation without changing the information architecture labelling.
01
Users got lost
Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.
01
Users got lost
Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.
01
Users got lost
Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.
02
Conflicting design needs
The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.
02
Conflicting design needs
The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.
02
Conflicting design needs
The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.
03
Mobile design blocked exploration
Users could only see one navigation level at a time, making it hard to explore sections freely.
03
Mobile design blocked exploration
Users could only see one navigation level at a time, making it hard to explore sections freely.
03
Mobile design blocked exploration
Users could only see one navigation level at a time, making it hard to explore sections freely.
04
Constraints were real
We couldn’t touch the top level IA labels or search — the solution had to work around them.
04
Constraints were real
We couldn’t touch the top level IA labels or search — the solution had to work around them.
04
Constraints were real
We couldn’t touch the top level IA labels or search — the solution had to work around them.
Discovery
Discovery
Discovery
I started by unpacking design, studying what we did wrong, and what others did better.
Existing UI failed basic usability heuristics
A heuristic analuysis showed site nav failed nearly all of Nielsen’s 10 principles — a clear signal that the navigation was fundamentally broken. It reflected real user pain: lack of orientation, inconsistent cues, and limited ability to recover from mistakes.
Studying competitors and big brands uncovered smarter ways to handle navigation
I analysed leading universities (e.g. Melbourne, UNSW, Deakin) and enterprise brands (Woolworths, Qantas, ABC) to understand how they manage navigation across large, multi-audience websites.
Key takeaways
01
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
01
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
01
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
02
Sub-sites help focus, but risk isolation
Some universities use sub-sites with tailored navigation, however this can assume too much about user intent and can trap users in isolated site structures without their knowing.
02
Sub-sites help focus, but risk isolation
Some universities use sub-sites with tailored navigation, however this can assume too much about user intent and can trap users in isolated site structures without their knowing.
02
Sub-sites help focus, but risk isolation
Some universities use sub-sites with tailored navigation, however this can assume too much about user intent and can trap users in isolated site structures without their knowing.
03
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
03
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
03
Simple global elements can unify ecosystems
Brands like ABC use a persistent, global navigation layer (e.g. a hamburger menu) that connects verticals like News, iView, and Listen.
Ideation & testing
Ideation & testing
Ideation & testing
I tested 3 different approaches real users to see what gave them true freedom and control
01
Immersive prototype: Can full-screen panels make deep navigation feel easier and more engaging?
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
I wasn’t expecting a whole thing to drop down and obscure the page.
– Jonothan (test participant)
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
I wasn’t expecting a whole thing to drop down and obscure the page.
– Jonothan (test participant)
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
I wasn’t expecting a whole thing to drop down and obscure the page.
– Jonothan (test participant)
02
Top drawer prototype: Will a familiar, anchored nav help users stay oriented while reducing cognitive load?
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
It feels like something I’ve used before.
– Karen (test participant)
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
It feels like something I’ve used before.
– Karen (test participant)
Result
Users found the full-screen experience disorienting and unexpected. The sudden takeover broke their sense of place and made it harder to understand where they were within the site.
It feels like something I’ve used before.
– Karen (test participant)
03
Multi nav prototype: Will separating site and local navigation help users focus and feel more in control?
Result
Most users preferred this model for in-section tasks. But when they needed content outside the local nav, the split navigation caused confusion.
So there’s an extra menu on each page?
– Jordan (test participant)
Result
Most users preferred this model for in-section tasks. But when they needed content outside the local nav, the split navigation caused confusion.
So there’s an extra menu on each page?
– Jordan (test participant)
Result
Most users preferred this model for in-section tasks. But when they needed content outside the local nav, the split navigation caused confusion.
So there’s an extra menu on each page?
– Jordan (test participant)
Learnings and decisions
01
Users wanted clarity, not full-screen immersion
We replaced the full-screen nav with a large right-hand panel. It offered more space for exploration without overwhelming users or hiding the page entirely.
01
Users wanted clarity, not full-screen immersion
We replaced the full-screen nav with a large right-hand panel. It offered more space for exploration without overwhelming users or hiding the page entirely.
01
Users wanted clarity, not full-screen immersion
We replaced the full-screen nav with a large right-hand panel. It offered more space for exploration without overwhelming users or hiding the page entirely.
03
We redesigned the top drawer to handle a large, variable IA
We moved the panel to slide in from the right, creating a consistent, scrollable space that avoided jarring height shifts and better supported long, section-specific lists.
03
We redesigned the top drawer to handle a large, variable IA
We moved the panel to slide in from the right, creating a consistent, scrollable space that avoided jarring height shifts and better supported long, section-specific lists.
03
We redesigned the top drawer to handle a large, variable IA
We moved the panel to slide in from the right, creating a consistent, scrollable space that avoided jarring height shifts and better supported long, section-specific lists.
02
We scaled local nav to unify micro-sites
The multi-nav design was repurposed for USYD’s micro-sites, creating a consistent experience across faculties, research centres, and corporate pages.
02
We scaled local nav to unify micro-sites
The multi-nav design was repurposed for USYD’s micro-sites, creating a consistent experience across faculties, research centres, and corporate pages.
02
We scaled local nav to unify micro-sites
The multi-nav design was repurposed for USYD’s micro-sites, creating a consistent experience across faculties, research centres, and corporate pages.
Final design
Final design
Final design
A navigation system that balances depth, flexibility, and consistency across the entire USYD website.
Three-level mobile navigation enables users to move freely across sections before committing to a page.
Three-level mobile navigation enables users to move freely across sections before committing to a page.
Three-level mobile navigation enables users to move freely across sections before committing to a page.
Desktop three-level exposure shows past clicks, giving users orientation and helping them recover quickly.
Desktop three-level exposure shows past clicks, giving users orientation and helping them recover quickly.
Focused micro-site mega menus simplify exploration by keeping attention on a single faculty or centre.
Focused micro-site mega menus simplify exploration by keeping attention on a single faculty or centre.
Consistent global side drawer unifies the corporate site with micro-sites, connecting a fragmented ecosystem.
Consistent global side drawer unifies the corporate site with micro-sites, connecting a fragmented ecosystem.
Branded search design blends function with identity, reinforcing trust while guiding users to answers.
Branded search design blends function with identity, reinforcing trust while guiding users to answers.
+22%
Desktop usability
+22%
Desktop usability
+22%
Desktop usability
#1
Mobile ranking
#1
Mobile ranking
#1
Mobile ranking
0
Critical accessibility issues
0
Critical accessibility issues
0
Critical accessibility issues
