Academic Medical Center
Universal Navigation Design
Designing a seamless navigation system to unify 300+ websites into a cohesive digital ecosystem.
Details in this case study have been obscured to retain client privacy.
Setting the stage
Setting the stage
An academic medical center needed to unify 300+ websites into a cohesive digital ecosystem of four sites. My task: design a universal navigation system that seamlessly connects four key sites while enhancing usability and clarity.
My Role
I led the effort to design and test the universal navigation, executing:
Research: Conducted competitor analysis to explore universal navigation best practices.
Design: Created sketches, wireframes, and clickable prototypes in Figma.
Testing: Facilitated moderated usability tests via Zoom, synthesized insights, and iterated designs.
Collaboration: Partnered with another UX designer and worked closely with visual designers, content experts, and developers.
Goals
Enable intuitive navigation across all sites.
Convey the center's tripartite mission: research, education, and patient care.
Minimize user confusion and cognitive overload.
Phase 1: Research & Strategy
Phase 1: Research & Strategy
Goal: Understand how to connect the four sites while maintaining their unique identities.
Research
Deep Dive Research
To create a unified navigation system, I analyzed competitor websites and cross-industry examples to identify best practices. This research revealed the need for a persistent universal navigation to seamlessly connect all four sites while maintaining their unique identities.
Universal Navigation
Because the four sites have separate distinct audiences, I couldn’t help but ask the question:
“Will a single user really want to navigate across all 4 sites?”
Yes
Having a universal navigation at the top of the page will enable easy crossover.
The academic medical center model will be represented on every page of the site.
No
We can still provide access across all 4 sites, but less visibly than via a navigation menu exposed at the top of every page.
Phase 2: Design
Phase 2: Design
Sketching & Wireframing
Next, I explored concepts balancing visibility and usability, from subtle dropdowns to persistent menus. I addressed potential user confusion between universal and site-specific navigation.
Key Insight: A universal navigation exposed across all pages was necessary to meet client goals, even without initial user data supporting the assumption.
Low-Fidelity Wireframe Explorations
Design
I began with low-fidelity sketches to explore different approaches for the universal navigation. These early designs tested the balance between visibility and usability, addressing potential user confusion between universal and site-specific menus. Insights from this phase informed the next iteration of the navigation system.
Here are some of the first hand-drawn sketches of a universal navigation eyebrow header.
This is a screenshot from the MURAL board with several universal navigation ideas inspired by the competitive research.
Design
Mid-Fidelity Wireframes
The clients emphasized the necessity for the links to all four sites to be consistently visible on every page, prompting a shift in approach assuming users would navigate between all sites. I explored this concept through mid-fidelity wireframes, which included additional page context and navigational elements like the footer.
Phase 3: Testing
Phase 3: Testing
Testing
Usability Testing
Following the presentation of multiple design proposals, the client requested that the navigation be visible and consistent across all pages.
The universal navigation was evaluated through moderated usability tests using a Figma clickable prototype of the Enterprise site over Zoom.
Goals
Assess user understanding of the universal navigation.
Test differentiation between universal and primary site navigation.
Validate the navigation’s language and design.
Insights
Testing the universal navigation within the context of the Enterprise site worked well because we were able to stress test it against the primary navigation of the site. We gleaned insights on both the language and design of the navigational elements on the page.
This is an image of the navigational header that was used during the first round of usability testing. This included the universal navigation and the Enterprise site utility navigation/primary navigation. The visual branding has been removed to retain client privacy.
*The discussion guide has been sanitized to retain client privacy.
Testing
Findings & Recommendations
Following the initial round of testing, it became evident that a different approach for the universal navigation was necessary. Participants showed reduced usage of the universal navigation due to lack of visibility. Furthermore, there was ambiguity in distinguishing between Research, Patient Care, and Education in both the universal navigation and the enterprise site navigation.
Sketches brainstorming ideas to improve the universal navigation.
Recommendation: Pivot to a tabbed navigation approach, emphasizing active states and clarity.
Conclusion
Conclusion
Conclusion
Next Steps
An eyebrow universal navigation menu design featuring tabs for each menu item was developed based on testing findings.
This approach significantly improved performance by clearly indicating the active site. The navigation underwent further testing during usability sessions for the remaining three sites and an unmoderated test via Maze.
Ultimately, the universal navigation successfully facilitated seamless navigation between the four sites while effectively communicating the tripartite mission.
Conclusion
Successes & Opportunities
The final universal navigation system supported users in seamlessly navigating between sites, enhanced understanding of the center’s mission, and reduced wayfinding confusion.
Successes
Designed and validated a complex navigation system through iterative testing.
Testing in real-world context revealed user pain points, enabling creative, effective solutions.
Balanced business goals with user experience, delivering a scalable design.
Opportunities
Conducting initial user research on cross-site navigation needs could have informed early design decisions.
A/B testing navigation versions could provide additional insights.