When you visit a new place, you look at maps. Digital or paper maps provide directions that are easy to follow, ensuring you don’t get lost and eaten by a bear, or worse, end up in an Irish pub.

The same is true for digital platforms, but website maps and navigation are a bit more subtle.

They’re the behind-the-scenes work that can make websites and apps feel smooth and simple.

Or confusing and frustrating.

This article examines a frustrating website navigation experience, using the example of a university chemistry department.

Some quick housekeeping items before I dive in:

• A website sitemap is the public-facing structure of the website, including the navigational menu and footer. I’ll focus on the navigation menu.
• The sitemap was created using Claude, an AI assistant, and Mermaid, a JavaScript diagramming tool. I was trying to turn a structured text-based list that depicts hierarchical relationships of website navigation items into a visual sitemap without actually creating a sitemap myself. I tried multiple prompts and different object types in Miro AI, but the results needed a lot of tweaking, likely more than if I designed it myself. I asked in a Slack group and someone shared this method. If you need to quickly turn structured data into a diagram that doesn’t need to be pixel-perfect, check out Mermaid 🧜‍♀️
• The dark green nodes depict visible items in the website navigation (also known as level 1 items). The gray nodes depict secondary levels that users only see after interacting with level 1 items.

What makes this university’s chemistry department website frustrating?

First, let’s define some common key website goals for prospective students:

• Finding application deadlines
• Locating specific course descriptions
• Understanding research opportunities
• Accessing faculty contact information (“who I want to be when I grow up”)

A typical user would struggle with locating specific course descriptions

Second, let’s imagine Sergio, an international student considering studying at a university in the US. Sergio lands on the website’s homepage. The homepage includes these sections:

── Welcome
── Campus Highlights
── Quick Links

The welcome statement is sweet, but it’s followed by highlights of what’s happening on campus and quick links that are randomly organized, which add to the user’s mental load of finding the info they need.

Varying navigation styles create mental fatigue and frustration

Academics is the second item on the navigation. Chemistry subprograms (Nuclear Chemistry, Chemical Engineering, Electrochemistry) are deeply nested in the menu, found at the fourth level of the navigation. However, unlike other subdisciplines, Biochemistry is highlighted on the menu as its own item. The BioChem department made sure that was the case. Materials science, an interdisciplinary field of researching and discovering materials, is also highlighted.

Inconsistent organization and requirements spread across multiple pages

Course Catalog is the third item on the navigation. Sounds pretty straightforward, right? But when Sergio clicks here, he finds that the undergrad courses are scattered across multiple pages. It’s difficult to keep track of everything.

The graduate programs have varying requirements for applicants and involve different departments, which has led to inconsistencies in the listing format on the website. Information that is available on some graduate program pages is absent from others, or sometimes, it is listed in a different section.

For example, prerequisite course requirements may be called differently, formatted differently, and found in different locations on pages.

Variation aspect	Nuclear Chemistry graduate program	BioChem graduate program
Prerequisites	Separate “Admissions Requirements” page	Mixed within program description
Format of requirements	Bulleted list of specific courses	Paragraph describing general background
Location on page	Dedicated prerequisites section	Scattered throughout introduction

Similarly to graduate programs, research lab pages aren’t organized the same way. They also look different, and while each group’s uniqueness should shine through, page standardization is essential for clarity and a consistent user experience across all programs.

Critical information like Funding and Apply Now is hard to find, reducing user engagement and application rates

Research Projects are grouped into current and past. Where does funding info live? Information about funding–grants, applications, documentation, fees, timelines–is on the website, but it’s scattered across pages and PDF documents, and not found in the navigation.

The navigation doesn’t serve international prospective students like Sergio, which may be a missed opportunity since nearly half of graduates in U.S. STEM PhD and Master’s Programs are international students.

The navigation may also benefit from including links for current students, alumni, staff, and job seekers.

“This sitemap doesn’t look too bad?” and UX Before and After posts

Even at the navigation level, there are multiple pathways (like Departments, Course Catalog, Admissions) for Sergio to find the right program for him. This is good!

Design Before and After posts typically focus on visuals, spacing, or strategic button placement. I often find the comparisons to be somewhat extreme, as they tend to showcase a significantly flawed design contrasted with a beautiful, idealized version the poster designed, often without considering customer research, business objectives, or contextual nuances. Posters also often seem to presume that the solution is simple and obvious, citing best practices.

My goal was to develop a sitemap that reflects practices commonly used by previous clients. I could’ve made this a jargon nightmare, included 7 levels of nested items, or not included ways for students to apply through the nav to make a point, but I wanted to keep it realistic.

Their sitemaps weren’t perfectly or ​terribly designed​, the navigation simply had room for improvement to make it more useful and clear, and a team eager to make it happen that didn’t settle for a hand-waving “Oh, Sergio’s a chemistry student, he’ll figure out the website.”