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

Role

Senior UX Designer

Role

Senior UX Designer

When

Feb 2022

When

Feb 2022

Mock up of navigation on a macbook and iphone

The challenge

Simplify university's navigation without changing the information architecture labelling.

Users got lost

Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.

Users got lost

Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.

Users got lost

Fragmented site structures and cluttered navigation made it hard to stay oriented, with menus and links competing for attention.

Conflicting design needs

The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.

Conflicting design needs

The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.

Conflicting design needs

The navigation had to handle constant IA shifts and many contributors adding new content daily, demanding both stability and versatility.

Mobile design blocked exploration

Users could only see one navigation level at a time, making it hard to explore sections freely.

Mobile design blocked exploration

Users could only see one navigation level at a time, making it hard to explore sections freely.

Mobile design blocked exploration

Users could only see one navigation level at a time, making it hard to explore sections freely.

Constraints were real

We couldn’t touch the top level IA labels or search — the solution had to work around them.

Constraints were real

We couldn’t touch the top level IA labels or search — the solution had to work around them.

Constraints were real

We couldn’t touch the top level IA labels or search — the solution had to work around them.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

+22%

Desktop usability

View source

Mobile ranking

View source

Critical accessibility issues

View source

More projects

Redesigned course pages to make key details clear and scannable for students.

Smarter course pages

Course page tempate (AEM)

Introduced flexible AEM templates and components that empowered authors and scaled across the site.

Designing better building blocks

Web templates & components (AEM)