Redesigning Envirolite's site navigation and information architecture
As the in-house designer at Envirolite, I had a unique vantage point into how the website was serving and failing its users. I took on a self-directed redesign initiative, conducting a UX audit and proposing strategic improvements to the site's information architecture, trust signals, and conversion flow.
ScopeUX Research · UI Design · Shopify Dev
companyEnvirolite · Troy, Michigan
toolsFigma · Shopify
01 - The beforeWhere the experience was breaking down
While the site was visually pleasing, and the information architecture was way more organized than previously, there was still work to be done.
Confusing IA
"Products" vs. "Shop"
This is the biggest structural problem. The nav has both a "Products" dropdown and a "Shop" dropdown, and they contain largely the same categories with overlapping product listings. A visitor landing on the site has no way to understand the difference between these two sections. The intent is that "Products" is the full catalog and "Shop" is the subset you can buy online, but that distinction is never explained and forces the user to guess.
Credibility
Low Trust Signals
CertiPUR, FDA, and ISO certification badges appear on the About page, but they should be on the homepage and product pages where purchase decisions happen. These are powerful credibility markers for a company selling medical and industrial foam, and they're tucked away where most visitors won't see them.
Call-to-actions
Weak CTAs
The homepage hero area has no primary CTA. It mentions Envirolite as a "global provider" but doesn't direct the visitor to do anything, no "Get a Quote" or "Browse Products". The Products/Catalog page notes that "all medical products are completely customizable" but doesn't explain how to start that process. For a company where custom fabrication is a core offering, the path to "let's talk about my project" should be front and center on every page.
03 - Behavioral AnalysisHeatmap Testing & User Interaction Insights
Before proposing structural changes to the site’s information architecture and navigation, I wanted to understand how real users were interacting with the existing experience. Rather than relying solely on heuristic evaluation or subjective critique, I conducted a behavioral analysis using a custom heatmap testing script.
To do this, I used Claude Code to generate a lightweight script that could be implemented directly within the Shopify theme’s Liquid file, allowing interaction data to be captured without introducing third-party tooling.
Key Findings
The heatmap analysis paired with Shopify analytics revealed several important behavioral patterns:
Most users were navigating immediately to Products.
A significant number of clicks landed on Products, despite many of those items not being directly purchasable, creating a potential mismatch between user expectations and available actions.
Unexpectedly high engagement appeared around Capabilities, indicating that visitors were actively trying to understand what Envirolite does and the scope of services or expertise offered.
Insight
These behavioral insights became a critical foundation for the next phase of the redesign, restructuring the information architecture and navigation to better align with user intent, clarify pathways, and reduce friction in the decision-making process.
03 — nav barCard sorting information architecture
I started with card sorting to make sense of the information architecture. The current site has two separate navigation sections "Products" and "Shop" that contain largely the same categories with overlapping SKUs, which creates confusion about where a user should go to find what they need.
The recommended structure consolidates everything into a single "Products" section organized by industry vertical. Instead of dumping 20 flat product links under a category like Medical, I introduced intermediate sub-groupings: Positioning & Support, Surgical Accessories, Protection & Comfort, so users can scan and orient themselves faster without being overwhelmed by a wall of SKU names.
The same logic applies across verticals: Athletic & Recreation breaks down into Carpet Bonded Foam, Pit Cubes & Covers, Mats & Padding, and Accessories rather than listing every individual product in the mega-menu.
Navigation: before & after
beforeafter04 - Hero Strategy DecisionDuring the audit and redesign of the Envirolite website, one of the primary UX challenges was determining how the homepage hero should represent a company serving multiple industries. Envirolite sells solutions across several markets, which initially suggested a common approach used by many B2B companies: a rotating homepage carousel showcasing different industries.
But I knew carousels were not best practice.
The Problem with Carousels
Carousels are often chosen as a compromise when stakeholders want equal visibility for multiple audiences. However, research and usability testing consistently show several issues:
Low engagement: The vast majority of users never interact with additional slides.
Message dilution: Rotating headlines prevent users from quickly understanding what the company does.
Performance and accessibility concerns: Auto-rotating elements can negatively impact load speed, readability, SEO and accessibility compliance.
Reframing the Role of the Homepage Hero
The homepage must answer four questions within seconds:
What does this company do?
Who is it for?
What makes this company different?
What should I do next?