UM-Dearborn Microsite Navigation Menu
Overview
In the Drupal 7 version of the main UM-Dearborn website users were only able to see a single level of site structure in the local navigation links. Previous internal research showed this non-standard presentation caused usability issues for site visitors which made it difficult and slow for users to navigate to other levels and to understand the full scope of section content. We updated the local navigation to better fit with the user’s mental model based on how navigation typically works on other websites, reflect the information architecture of a section and provide a sense of place.
Problem statement: How can better facilitate user navigation between related pages?
Role
UX/UI Designer
Deliverables
Secondary Research, Wireframes, High-fidelity Mockups
Role / Activities
I was responsible for the UI and interaction design and ensuring the menu would mesh with our microsite information architecture.
Project Details / Process
As part of a CMS upgrade from Drupal 7 to Drupal 9 our team took the opportunity to improve the local navigation as we move to a microsite model. In Drupal 9 for certain areas of the website there is a visible "siteroot," which is the start of a very large section of the site (e.g., colleges) and a "microsite," which is a subsection of that siteroot, like a department. The goal was to have a menu structure for these sites that doesn't exceed three levels and to combine certain sites that have content in many places.
I worked with the website director to develop detailed wireframes, high-fidelity mockups, and an interactive prototype for the microsite menu structure for both large screens and mobile. I also created and presented a slide deck to our website editors at a virtual “coffee hour” to help communicate the new microsite model and the benefits of the new navigation menu.
Before
After
Results
The new expandable microsite navigation design reflects the multi-level information architecture of a section, provides users with a better sense of place and orientation, demonstrates the full scope and breadth available content and allows users to navigate pages within a section more quickly.