Revamping the global navigation of a corporate website that generates over $217.5M in open opportunities.
By consolidating multiple fragmented navigations into a unified mega menu, 70% of overall navigation clicks now originate from the third and fourth levels. This indicates that users are accessing content more efficiently, resulting in cost savings for the company.
Role
UX Lead
End Users
Charles River Laboratories Customers
Project Duration
12 Months+
Responsibilities:
Product Management
Research + Discovery
Usability Testing
Design
The Problem:
Charles River, a company known for its acquisition strategy, holds a dominant position in its industry with a net worth of $8.82 billion. However, due to rapid growth, the organization has become fragmented, leading to overlapping products and services. Internally, employees are not fully aware of the extensive range of offerings. This organizational complexity is reflected in their 7-year-old corporate website, Criver.com, characterized by confusing internal jargon, segmented user journeys, and outdated interaction and visual design.
The Solution:
During the Voice of Customer interviews in the discovery phase of the site redesign, we identified global navigation as a key challenge, emerging as the most critical pain point with the highest potential impact. Treating global navigation as an MVP, we redesigned the entire interaction pattern, restructuring and reclassifying elements of the information architecture. This led to the creation of a brochure-style mega menu, which fundamentally transforms how users engage with the site.
Discover
To gather insights from our customers, we engaged in Voice of Customer activities, conducting interviews with 33 internal employees across 8 diverse business units. Additionally, we established a Customer Advisory Board (CAB) comprising 14 trusted customers, representing various roles from scientist to CEO to academic. This CAB played an active role in our design process, participating in generative exercises like card sorting and usability testing.
A FULL READOUT OF OUR VOICE OF CUSTOMER INTERNAL DISCOVERY READOUT
GOOGLE ANALYTICS SHOWING THE TOP 20 MOST VISITED PAGES ON CRIVER.COM
HEAT MAP SHOWING THE MOST POPULAR LINKS ON THE HOME PAGEDefine
The three biggest pain points of our navigation:
Design Debt
To tackle design debt from the previous redesign, we found that the global navigation stopped at the second level, requiring users to resort to in-page navigation for further progression. Accessing deeply nested content involved navigating to the Product and Service page, then using page-level navigation for further descent.
Information Architecture
Because Charles River has so many different Business Units and a focus has never been placed on the strucuture of pages/ products and services, the results have been a sprawling mess of nested pages within other nested pages.
Taxonomy and Language
Charles River classifies their Products and Services after an internal view of how they perceive themselves, not as a customers use or view their services. For example, Safety Assessment = Toxicology.
Currently, from the global navigation, a user can only navigate to a parent product or service page (Image 1). Once they navigate to a parent product or service page, they are presented with an in-page menu to navigate to a sub-category (Image 2). Lastly, they navigate to a tertiary menu presented as accordions, allowing the user to navigate deeper (Image 3).
This pattern is analogous to navigating two different subway systems just to reach the same destination 🫠.
Two Tracks:
We divided the work into separate tracks, recognizing them as distinct problems to address:
The first track encompassed secondary and transactional actions a user might take. The goal was to facilitate users' easier access to resources, information about events of interest, or connecting with an expert in their vertical.
The second track centered on how users find out information about our Products and Services. The challenge was enabling users to navigate a complex architecture with multiple levels spanning various business units.
Tree Testing:
We started the process by conducting tree testing on our current information architecture and comparing it with the new terminology proposed by our content team. Not surprisingly, our existing terminology outperformed the suggested new terms. Specifically, terms like "Explore" for "Company" and "Learn" for "Resources," despite being more abstract, provided clearer information cues compared to the proposed, more literal terms.
SUMMARY OF TREE TEST FINDINGS AN AN EXAMPLE OF A TASK WITH POOR SCORES DUE TO AMBIGUOUS TERMINOLOGY.
EXAMPLE OF PROPOSED TERMINOLOGY AND INFORMATION ARCHITECTUREArmed with our research we were ready to ask the question,
How might we…
organize a complex information architecture in a logical manner while also promoting discovery?
Ideation
We delved into numerous concepts and designs to reach a solution. Here are some of the ideas:
DISPLAYING ALL THE CHILD AND PARENT SERVICES IN OUR PORTFOLIO MIGHT OVERWHELM THE CUSTOMER.Concept One: Exposed Categories MegaMenu
Taking cues from e-commerce sites where we display all categories/ products and services at once.
Pros:
Familiar pattern
Users get to see every single category/ product and service at once
Cons:
Places very little hierarchy on products and services
Overwhelming
Level of Effort:
Medium
Level of Impact:
High
ZOHO.COM ONLY SHOWS ONE LEVEL DEEP INSIDE THEIR MEGA MENU (Image 2). ONCE A USER NAVIGATES TO A PARENT CATEGORY, ONLY THEN ARE THE CHILD CATEGORIES AVAILABLE IN THE PRIMARY NAVIGATION (Image 3).Concept Two: Parent Landing Pages
Branch off deeper level pages to only be displayed on parent category pages. Explore an “All Products” page for users to be able to access the entire product and services suite from one source.
Pros
Consolidates and streamlines navigation
Orients user
Cons
Hides deeper level Product and Services pages underneath parent pages
Enforces the idea that that our Products and Services are siloed from each other
Level of Effort
High
Level of Impact
High
HOMEDEPOT.COM (Image 1) and NEWEGG.COM (Image 2) employ a brochure-style megamenu paradigm where users and can navigate to both child and parent pages from any level.Concept Three: Brochure-Style MegaMenu
Allow users to navigate deep within the site’s architecture from any point within the Mega Menu.
Pros
Consolidates and streamlines navigation.
Reduces cognitive load by utilizing progressive disclosure.
Cons
It hides deeper level Product and Services pages underneath parent pages.
It takes the user multiple clicks to get to a page.
Level of Effort
High
Level of Impact
Very High
Deliver
DEMO OF THE UPDATED NAVIGATIONIteration
Testing the Brochure-Style Mega Menu
General Statements:
None of the users noticed the Escape Hatch (Close Button) and said that they would return to where they were by clicking the CRL Logo, which would return them back to the home page, not their current location (redesign will solve for that).
A few users mentioned that the navigation was overwhelming and cluttered (redesign will solve for that).
A user mentioned that they would like to see people’s faces when we show photography; he was reacting to seeing just a profile of a scientist’s face.
A few users mentioned that to have Overview and the actual page link is redundant and confusing (redesign will solve for that).
A few users mentioned that they would use Search before using the navigation.
Recommendations:
A larger, and more prominent escape hatch
Remove “Overview” page link and make Category title clickable, style with underline, bold.
Because there are so many options, highlighted/ recommended/ popular menu items will help the user not feel so overwhelmed.
Add to backlog
Flatten IA
In Progress
“
I see the vision and I'm excited, but I feel like we, if we land in a space where it's all these options still there, I don't know if we improve the site for what I was hoping to improve. I feel we gave it a fresh coat of paint which is fantastic and it's a far better coat of paint. But in terms of my user experience, my user journey, if I was to self-serve, I don't know if you made my life any better.”
- STRATEGIC MARKETING SPECIALIST
Next Steps:
From user testing feedback, we learned significant insights and affirmed existing truths. The main revelation is that although the mega menu aids navigation, it still requires users to put in effort. We need a more guided and curated approach to streamline their journey. Whether we achieve this by flattening the information architecture or through another solution, substantial work lies ahead.
Concrete insights revealed users struggled to exit the navigation menu. When asked, many users suggested clicking the masthead, but this led them to the home page, not necessarily where they last were.
To address this, we opted for a significant visual update, shifting from a full-page takeover to a progressive horizontal menu. This redesign offers users a larger escape route — they can now exit the menu by clicking outside it, using the floating Close button to the right, or collapsing the menu from the primary navigation.
Impact
A month and a half after launch, our analytics revealed a 70% increase in traffic originating from our level 3 and 4 pages. This indicated that the mega menu was effective, enabling users to navigate to deeper nested pages and access shallower pages in the funnel more easily.