UX E-commerce

From Audit to Redesign: Rebuilding Envirolite's E-Commerce Experience

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.

Scope

UX Research · UI Design · Shopify Dev

company

Envirolite · Troy, Michigan

tools

Figma · Shopify · Claude Code

01 - User Personas

Who’s buying foam?

Envirolite serves vastly different buyers through one website, from gymnastics facility owners ordering custom pit cubes to hospital supply managers sourcing surgical positioning products. Understanding these users reveals why a one-size-fits-all navigation doesn't work.

M
Mike Brennan
Gymnastics facility owner
Age
42
Order frequency
2–4× per year
Typical order size
$3,000–$15,000
Goals
Replace aging pit cubes and mats before competition season
Find a supplier who understands fire safety compliance
Get bulk pricing without a lengthy back-and-forth
“I just want to find what I need and be in control of my own selections and purchase without waiting for a sales rep to get back to me.”
S
Sarah Chen
Parent
Age
32
Order frequency
1-2x per year
Typical order size
$45-$250
Goals
Find safe, durable foam play products for her toddler
Verify materials are non-toxic and meet safety standards before purchasing
See the product in use, real photos or videos of kids actually playing with it, before committing
“I found the Splocks page through Google, but I couldn't find a single review or see the foam up close. I have no idea what 'cross-linked polyethylene foam' feels like — is it soft enough for a two-year-old?”
R
Rachel Okafor
Medical supply procurement
Age
36
Order frequency
Monthly (ongoing supply)
Typical order size
$1,500–$8,000
Goals
Source customizable positioning products for surgical use
Verify FDA compliance and ISO certification before recommending a vendor
Easily see if a vendor sells everything I need instead of purchasing from fragmented companies
“I need to justify this vendor to my VP. If I can't find the ISO cert on the product page, I'm moving on to a supplier who makes it obvious.”
02 - heuristic Evaluation

A heuristic evaluation to quantify the problem

I began with a heuristic evaluation using Jakob Nielsen's 10 usability heuristics as my framework. The goal was to move past subjective gut reactions and systematically identify where the experience breaks down and more importantly, to quantify the severity of each issue so I could prioritize what to fix first.

03 — Audit Findings

Major issues uncovered

The UX audit revealed 8 high-to-medium severity issues directly impacting conversion, trust, and user retention across all buyer segments.

High severity
Redundant navigation paths
Overlapping "Products" and "Shop" sections with duplicate categories increase cognitive load and cause drop-off before users reach a product page.
High severity
Missing trust signals
No customer reviews, certifications, or social proof on product pages, a dealbreaker for first-time buyers and procurement teams vetting vendors.
High severity
No custom quote request
B2B buyers needing custom foam cuts or bulk pricing have no self-service quote form, forcing them to email and wait, losing high-value leads.
High severity
No B2B reorder process
Recurring buyers like medical procurement managers rebuild orders from scratch each time. No saved orders, reorder flows, or automated email triggers.
Medium severity
No breadcrumb navigation
Users lose their place in the catalog, especially when browsing across industries. No way to step back to a parent category without using the browser back button.
Medium severity
No product filtering or sorting
A multi-industry catalog with no ability to filter by material, size, certification, or price forces users to scroll through irrelevant products.
04 - Behavioral Analysis

Heatmap Testing & User Interaction Insights

Before proposing 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, which includes all shoppable and non-shoppable products. Does this make Shop obsolete?

  • 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.

05 — nav bar

Card 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. 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.

06 — benchmarking

Competitive Matrix

I evaluated Envirolite’s top competitors using the same heuristic framework to identify common industry patterns, strengths, and gaps.

One recurring pattern I noticed was that many competitors clearly communicate product backorder status and lead times. Implementing this on Envirolite’s site could significantly improve the customer experience while also reducing the volume of sales inquiries related to product availability and shipping timelines.

07 — the pitch

Presenting to stakeholders

With findings in hand, I built a presentation to pitch the navigation consolidation and IA restructuring to leadership, framing every recommendation around customer impact and revenue, not design theory.

The Redesign

Navigation: before & after

before

after

Filtering options

We introduced relevant filters by product type and tagged each item accordingly.

Custom inquiry form

Designed a custom inquiry form so B2B buyers can request bulk pricing or custom cuts directly on-site, eliminating the friction of composing a separate email that often gets abandoned before it's ever sent.

Added trust signals

Added FDA and ISO trust badges to the homepage to strengthen brand credibility and increase customer trust.

Integrated Judge.me to automate customer review requests and imported existing Amazon reviews to establish social proof early on.

08 — Measuring Success

How we'll know it's working

↓35%
Navigation bounce rate
Consolidating Products & Shop into one structure should reduce confusion-driven exits from category pages.
↑20%
PDP to cart rate
Adding reviews, certifications, and material details to product pages builds confidence to add-to-cart — especially for first-time buyers.
↑2.4×
Quote requests / month
A dedicated self-service quote form replaces the current dead-end "Contact Us" flow, capturing high-value B2B leads directly.
↓50%
Repeat order time
Saved orders and reorder flows let recurring B2B buyers repurchase in minutes instead of rebuilding carts from scratch.
Conversion funnel targets
Homepage / Landing
100%
Category page
38%
Category page
52%
Product page
18%
Product page
30%
Add to cart
5%
Add to cart
12%
1.8%
Purchase
4.5%
Current estimated
Post-redesign target
Redesign success criteria
Reduce avg. clicks to purchase from 7 to 4
Streamlined IA and persistent cart cut steps from the conversion path.
Increase average session duration by 25%
Better navigation and trust signals keep users exploring instead of bouncing.
Capture 15+ qualified B2B leads per month
Custom quote form creates a measurable pipeline that didn't exist before.
Reduce support tickets for product questions by 40%
Surfacing specs, certs, and reviews on PDPs answers questions before they're asked.
Increase returning customer rate from 12% to 25%
Reorder flows, saved carts, and email triggers bring B2B buyers back without friction.
Mobile conversion rate parity within 15% of desktop
Responsive nav, touch-optimized PDPs, and mobile cart close the device gap.
Previous

The Autonomous College Commute, Reimagined (Category) (UI) (UX) (Product) (Research) (DesignSystems)
Next

The Future of Fitting is Here (Category) (Product) (UX) (Research)