Universal Navigation Redesign

Central Michigan University (CMU) is a prominent public research institution situated in Mount Pleasant, Michigan. Shortly after I joined, CMU successfully launched a comprehensive website migration, encompassing a full redesign and rebranding in January of 2022. Given its extensive history, CMU's website architecture is intricate and deeply ingrained in user expectations for content accessibility

My Role

I am the project lead, UI/UX designer, and QA lead for the universal navigation redesign. I collaborated closely with a diverse team that consisted of a content strategist, a data analyst, several developers, and more. My responsibilities included gathering requirements, conveying outcomes to stakeholders, and ensuring the product aligned with business goals.

Project Duration

Time: 21 Weeks

Scope: Desktop and Mobile navigation design, search bar redesign, updated 21+ templates and template clean up, usability testing

Tools

  • Adobe XD

  • CrazyEgg

  • Google Analytics

  • Wrike

  • DevOps

 

Identifying the Problem

While most universities have multiple subdomains to manage their many departments, colleges, and community resources, the main CMU website absorbed all these additional sites. The solution to help manage these “subdomains” was to create a template with a unique navigation for the college/department. This created a deep and complex IA with essential pages several clicks away. Additionally, the Azure search algorithm was still undergoing refinement, further hindering user satisfaction. Prospective students faced challenges in locating crucial information, potentially influencing their decision to apply.

 My objective was to enhance the website's navigation experience without altering the existing IA.

 

How we solved it

Desktop Solution

We prioritized functional usability to elevate the website's navigation experience while building in scalability and flexibility for future information architecture updates.

This entailed introducing IA-driven drop-down menus with top-level children pages, a related links section for essential pages deeper in the IA, and integrating a user-friendly search bar for swift access.  By offering multiple means of navigation, this solution accommodated both confident and less confident web users.

 

Mobile Solution

For mobile users, we took on the challenge of completely overhauling the hamburger navigation menu to enhance user experience across CMU's digital landscape.

The redesign consolidates sub-menus into a single, multi-level menu for seamless transitions between main, top-level, and college/department pages. The modern, responsive design enhances user-friendliness, with prominent CTAs and a visible search bar to improve navigation and support diverse wayfinding behaviors.

Demo of CMU's mobile navigation from the main menu to submenu .
 

The Process

A Closer Look at the Design Process

  1. Research & User Testing: We engaged 19 high school juniors in a moderated usability test to uncover their main pain points and preferences in navigation, providing us with critical insights for improvement.

  2. Ideation: Through competitive research and brainstorming sessions, we explored various innovative solutions that align with our project objectives, paving the way for a transformative user experience.

  3. Wireframes & Strategic Alignment: Our team developed multiple wireframes for desktop, mobile, and tablet interfaces, refining them in collaboration with stakeholders to ensure they align perfectly with our strategic goals.

  4. Mockups, Prototypes, and Accessibility: High-fidelity mockups and interactive prototypes were created, emphasizing a stronger brand identity, intuitive user navigation, and smooth interaction. A keen focus was placed on ensuring accessibility standards were met throughout the design process.

  5. Develop and QA Testing: The website underwent extensive testing with external testers, followed by the development of a comprehensive deployment strategy. This phase was crucial for identifying and fixing any issues, guaranteeing a smooth launch.

  6. Launch: The culmination of our hard work and dedication - the project was successfully launched, marking a significant milestone in enhancing user engagement and satisfaction.

The Goals

  • Minimize user clicks for efficient navigation

  • Ensure intuitive navigation to lower level pages

  • Establish a seamless and consistent navigation experience across all devices

The Impact

The universal navigation redesign project for Central Michigan University led to significant improvements in user engagement, navigation, and overall website performance. Here are the key impacts of the project:

28.6% Increased Engagement Rate

The average time users spent engaging with the website increased by 28.6%, showing that users found the website more engaging and easier to navigate, leading to longer and more meaningful interactions.

6 Restructured IAs

Six units within CMU restructured their content strategy and realigned their information architecture (IA) to take full advantage of the new navigation.

Enabled Left Navigation Optimization:

The previous left navigation was a major pain point due to its complexity, which was necessary to accommodate the deep architecture of the website. With the new universal navigation, the left navigation could be simplified. This change made the navigation work as users expected and familiarized them with a more standard web navigation experience.