Wayfinding by default: one navigation system for every MSU site
MSU sites had no consistent wayfinding, so visitors got lost and couldn't retrace their steps and editors had no visible structure to keep their sites organized, because navigation was whatever each editor chose to build.
At a glance
What I did. As the Design Engineer on MSU's web team, I designed the navigation system and page templates: three nav layers that give every page the same wayfinding, a standard and a landing template for different kinds of content, and a visible structure that helps editors keep their sites organized.
- Role
- Design Engineer
- Team
- 7-person web team at MSU Web & Digital Communications, with stakeholders at Billings and Northern
- Scale
- 3 campuses, 1,800 users, built to serve 800+ sites
- Stack
- Statamic, Laravel, Antlers, PHP, Figma
- Timeline
- 2024 to present. Core build largely complete, first pages live (including About and Student Life), migration not started.
The problem: navigation depended on each editor
On the old sites, the main nav and the global nav appeared only on the homepage. Past it, the only navigation was a sidebar, and only if the editor chose to include one. That also meant no consistent recruitment-focused links on most pages.
The sidebar could be different on every page, depending on how that editor built it, and it could link out to other sites. A click could land somewhere unexpected.
Nothing in the navigation showed how a site was organized. Editors could lose control of their own structure without noticing, and visitors could rabbit hole: find something once, forget the path back, or find similar information on several different pages.
The approach: wayfinding that doesn't depend on editors
The new system replaces editor-built navigation with three layers that work the same way on every page.
Global nav, always. It shows on every page, so campus-wide links, including recruitment-focused ones, are always one click away.
Site nav, always. Seven items on every page of a site (formerly called the megamenu). It changes when you move to another site.
Section nav, dynamic. It is built from the children of the current page, so it follows the site's structure instead of an editor's choices, and it never sends visitors off to another site.
The result is one consistent wayfinding experience on every page.
Each layer is narrower than the one above it, so a visitor always knows what is shared across the campus, what belongs to this site, and what sits under this page.
Two page templates, two jobs
Every page used to share one template. There are now two, chosen by what the page is for.
Standard pages are focused, content-first pages. The section nav sits in a sidebar beside the content, so visitors can see what else is in the section while they read.
Landing pages introduce a broad idea and lead into more focused topics. They open with a hero image, and the section nav collapses into an "In this section" menu under it.
Making the structure visible to editors
The navigation is built from the site's structure, so it also reveals that structure to everyone who uses the site, including the editors who maintain it. Before, a disorganized site looked fine to the person who made it. Now the disorganization shows up in the nav, which should encourage editors to keep their sites understandable.
Where it stands
Migration of the remaining sites hasn't started, so this is a system built to do something rather than one with results behind it.
Built: the global nav, the site nav and the dynamic section nav, live on the first pages, including About and Student Life.
Built to do, not yet proven at scale: visitors retracing their steps instead of getting lost, and editors keeping their site structures understandable now that the structure is visible.
Once migration starts, the real test is whether visitors can find their way back to something they found once, and whether editors keep their structures tidy.
Glossary
Wayfinding: How well a visitor can tell where they are, where else they can go, and how to get back.
Information architecture (IA): How a site's pages are organized and related to each other.
Global nav: The navigation shown on every page, with links that apply across the campus, such as recruitment links.
Site nav: The seven-item navigation shown on every page of a site (formerly called the megamenu). It changes when you move to another site.
Section nav: A navigation built automatically from the child pages of the page you are on.
Standard page: A focused, content-first page template, with the section nav in a sidebar.
Landing page: A page template for a broad idea that leads into more focused topics, with a hero image and an "In this section" menu.
Editor: A person who creates and maintains pages in the CMS, usually as one part of a different main job.