Zebra Skimmers Redesign Plan · v0.1 · Internal Draft
Property
zebraskimmers.com
Platform
Shopify Online Store 2.0
Prepared by
Dylan Burkey
Document date
May 2026

A redesign plan

A catalog
that respects
the machinist's time.

The site has earned its complexity — three decades of products, a deep training program, a global distributor network. But the catalog now buries the answer behind eighteen training lessons and two parallel taxonomies. This document proposes a redesign built on a single principle: every page should answer the visitor's actual question in one screen, then offer depth on demand.

What this is

A strategic and visual direction for the redesign. It defines the problems we're solving, the audiences we're solving them for, the proposed information architecture, the visual system, and a phased implementation plan.

What this isn't

A pixel-perfect comp set. The mockups in §06 are directional — they communicate hierarchy, density, and tone. Final Figma comps and Liquid section specs follow stakeholder sign-off on the direction.

§ 01

The site has six structural problems. Three are existential.

Findings from a heuristic audit of zebraskimmers.com against the jobs visitors are trying to accomplish. Severity is calibrated to user impact, not engineering effort.

High · existential

Two parallel taxonomies for the same products.

The nav exposes both Products (organized by type — Tramp Oil Skimmers, Coolant Mixers) and Shop By Solutions (organized by problem — Managing Tramp Oil, Coolant Mixing). The same SKU lives in both trees with different labels. Users hesitate; bounce; ask the call center.

Products → Tramp Oil Skimmers → ZVA8 Tube Skimmer
Shop By Solutions → Managing Tramp Oil → Tube Tramp Oil Skimmer
↑ same product, same URL, two different labels in two different trees.
High · existential

The primary nav exposes 60+ items at once.

Nine top-level items, several with 9–18 nested children. The Free Training menu alone surfaces eighteen numbered lessons (101 through 271). Scanning the nav becomes a job in itself, before the user has even started the job they came for.

Free Training → Lesson 101, 121, 171, 201, 202, 203, 204, 205, 206, 221, 225, 230, 235, 236, 271
↑ this is content management, not navigation.
High · existential

No clear path for the most common visitor.

A maintenance manager arrives knowing she has tramp oil in her CNC sumps but does not yet know which of the seven skimmer types fits. The site offers her either: (a) browse 120+ SKUs, or (b) complete an 18-lesson coolant chemistry course. There is no guided product finder.

Medium · clarity

The Dazzle™ family competes with itself.

Dazzle™ 1, Dazzle™ 2, and Dazzle™ 2.e each have separate PDPs with no comparison view. A visitor researching coolant automation has to open three tabs and reverse-engineer the differences.

Medium · trust

Duplicate FAQ destinations.

Two FAQ pages — /pages/faq and /apps/frequently-asked-questions — with overlapping content and different answers in places. This is a credibility risk on a technical-purchase site.

Low · polish

Visual density without hierarchy.

The current homepage gives equal weight to product callouts, training, blog posts, and trust badges. With nothing dominant, nothing is memorable. The redesign treats hierarchy as a feature, not a styling preference.

§ 02

Who actually shows up — and what they need in the first 10 seconds.

The site serves four distinct audiences with overlapping but non-identical needs. The redesign must serve all four without forcing any of them through the others' hierarchy.

Persona A Maintenance Manager

"My sumps are full of tramp oil and I don't know which skimmer fits."

  • Find the right product without learning chemistry
  • See the ROI math up front
  • Talk to a human if needed
Persona B Plant Engineer

"I'm specifying coolant automation for a 40-machine cell."

  • Compare Dazzle 1 / 2 / 2.e in one view
  • Get specs, drawings, integration notes
  • Request a quote with line items
Persona C Shop Floor Operator

"The belt skimmer's belt snapped — what's the part number?"

  • Find replacement parts by model
  • Read install / troubleshoot guides
  • Reorder fast (mobile, gloved hands)
Persona D Distributor / Buyer

"I need bulk pricing and current stock."

  • Access distributor pricing
  • See lead times and inventory
  • Bulk-import to ERP
§ 03

Information architecture — collapse the nav by 60%, route by intent.

The current nav has nine top-level items and ~60 visible children. The proposed nav has five. Content that was dragged into the nav out of habit (eighteen training lessons, every parts category, every blog) moves into purpose-built hubs reachable from the relevant context.

Current 9 top · ~60 visible

  • Home
  • Products
    • Tramp Oil Skimmers (+9)
    • Coolant Mixers (+4)
    • Sump Odor Control (+6)
    • Coolant Automation (+2)
  • Lifetime Warranty Skimmers
  • Parts and Accessories (+13)
  • Shop By Solutions
    • Managing Tramp Oil (+9)
    • Coalescers (+2)
    • Coolant Mixing (+3)
    • Managing Concentration (+5)
    • Fluid Management (+5)
    • CNC Coolant Process Automation (+3)
  • Specials (+5)
  • Blog (+5)
  • Free Training (+18 lessons exposed)
  • Resources (+8)
  • Contact Us

Proposed 5 top · ~20 visible

  • Shop
    • Tramp Oil Skimmers
    • Coolant Automation (Dazzle™)
    • Mixing & Concentration
    • Fluid Health
    • Parts & Accessories
  • Find Your Fit
    • Guided product finder (3 questions)
    • Compare tool
  • Learn
    • Coolant 101 (consolidated training)
    • Application guides by problem
    • Glossary & FAQ (single source)
  • Support
    • Find parts by model
    • Install & troubleshooting
    • Warranty & returns
  • About
    • Made in USA · Since 1994
    • Distributors
    • Contact

Architecture rules · non-negotiable

  1. One product, one canonical home. No parallel taxonomies. "Solutions" become marketing landing pages, not a second tree.
  2. The 18 training lessons collapse into one hub at /learn. Individual lessons are reachable but not advertised in primary nav.
  3. Every product category page surfaces a "Find Your Fit" entry point above the fold.
  4. The Dazzle™ family gets a comparison page at /dazzle that anchors all three product PDPs.
  5. One FAQ. The duplicate /apps/frequently-asked-questions redirects (301) to /pages/faq.
  6. Mobile mega-menu uses the same five top-level items. No second collapsed tier.
§ 04

Design direction — industrial editorial, not industrial-themed.

The current design and the in-progress hero comp both lean visual: animated particles, gradient meshes, glassmorphic floating cards. That's part of why the site feels busy. The redesign goes the other way — disciplined, editorial, technical. McMaster-Carr meets Dieter Rams. Confident typography, hairline grid, monochrome with one accent, motion only when it serves comprehension.

Principle 01

Density when it earns its keep.

Spec tables, parts diagrams, and PDP technical info should feel like a Hoffman engineering catalog — packed with information, but composed. Marketing pages get generous breathing room. Match density to user intent.

Principle 02

Photography over illustration.

Real product shots on neutral backdrops, plus on-site installation photography from customer shops. No stock images of generic CNC machines. The brand's authority comes from being made in Ohio since 1994 — show that.

Principle 03

Motion for comprehension only.

No floating cards, no animated grids, no parallax tilts. Reserve motion for: state changes (filter applied), accordion reveals (spec details), and a single hero entrance on the homepage. Everything respects prefers-reduced-motion.

§ 05

Design system — the components that compose every page.

A small, opinionated kit. Tokens live as CSS custom properties (no preprocessor required). Components are Liquid sections, snippets, and blocks — designed to slot into Online Store 2.0 without compromising semantics.

Palette

06 tokens
Paper#F4F2EC
Ink#0F1115
Brand · navy#003D79
Accent · ignition#E2410E
Safety · caution#F2C200
Status · ok#1F7A3A

The brand navy stays — three decades of equity. Orange tightens to a hotter "ignition" accent used surgically: primary CTAs, "new" badges, alert states. Safety yellow appears only in warning callouts (technical spec gotchas, hazard notes). The neutral system uses warm grays, not cool, to keep paper-and-print feel.

Typography

3 families · 6 roles
DisplayIBM Plex Sans · 600
Reduce coolant cost.
EditorialInstrument Serif · 400 italic
Made in Ohio since nineteen ninety-four.
H1 / PageIBM Plex Sans · 600
ZVA8 Sidewinder Tube Skimmer
H2 / SectionIBM Plex Sans · 600
Specifications
BodyIBM Plex Sans · 400
Sidewinder mounts directly to the side of standard CNC sumps and removes tramp oil at up to 4 gallons per hour. Stainless steel construction; lifetime warranty on the mechanism.
Mono / SpecIBM Plex Mono · 500
SKU ZVA8-115V · MOQ 1 · LEAD TIME 2-3 BUSINESS DAYS

IBM Plex Sans was designed by IBM for technical and industrial contexts — it carries the right authority for this brand and avoids the Inter/Roboto generic. Plex Mono pairs natively for SKUs, specs, and meta. Instrument Serif appears italicized for editorial moments only — page heroes, pull-quotes, the company stamp. Three families, sharp roles, no drift.

Core components

Buttons · Pills · Spec table

Primary CTA

Find your fit →

Used once per view for the dominant action. Ignition accent. Square corners (2px), no shadow.

Secondary CTA

Browse all skimmers →

Ink fill on paper. Inverts on hover. Used for navigation actions and supporting paths.

Tertiary

Read the install guide →

Outline only. For supporting links inside content blocks. Inherits the dark text on light surface.

Status pills

In stock Built to order Last 12

For inventory state, lead times, and scarcity. Tied to live Shopify inventory data.

Spec table

Capacity4 gph
Reach (depth)8 in
Power115 VAC · 24 VDC
MountSide / clamp
WarrantyLifetime · mechanism
§ 06

Page concepts — three views that together prove the system works.

Directional mockups, not pixel-perfect comps. Each one demonstrates how the IA, type system, and components compose to answer a specific user job. Photography is intentionally absent — it goes where the placeholder boxes are.

Mock A · 06.1

Homepage

Three things above the fold: the brand statement, the featured product (live data), and three intent paths. No carousel. No "Welcome to Zebra Skimmers." The first scroll proves authority — bestsellers with real specs, not lifestyle marketing.

www.zebraskimmers.com/
ZEBRA SKIMMERS
Shop Find your fit Learn Support About
Cart · 0

Made in Ohio · Since 1994

Less coolant.
More uptime.

The most-trusted line of oil skimmers and CNC coolant automation in North America. Lifetime warranty. Ships in two business days.

Find your fit → Talk to sales
DAZZLE™ 2.e
Industry 4.0 sump automation
Capacity12 sumps Coolant savings~50% ROI8 mo WarrantyLifetime
$3,840 USD · ships in 5 days
01

I have tramp oil.

Tube, belt, disk, or coalescer? Three questions, one match.

→
02

I want full automation.

Compare the Dazzle™ family in one page. Quote in two clicks.

→
03

I need a part for my existing skimmer.

Find by model. Reorder previous purchases.

→

Bestsellers, with the specs that matter.

Updated daily
ZVA84 gph

Sidewinder Tube Skimmer

$682 USD
BLT-PS6 gph

Poly Belt Skimmer

$914 USD
FZ1717 gpm

Muscle Coalescer

$2,140 USD
DZL-11 sump

Dazzle™ 1 Sump Controller

$1,295 USD
Mock B · 06.2

Product detail page

Spec-first, marketing-second. The price, variant, and CTA are above the fold on every viewport. The lifetime warranty and stock pill replace anonymous "trust badges." Tabs collapse the technical depth (drawings, install, downloads) without burying it.

www.zebraskimmers.com/products/zva8-sidewinder-tube-skimmer
PRIMARY PRODUCT IMAGE
SHOP / TRAMP OIL SKIMMERS / TUBE

ZVA8 Sidewinder

Tube oil skimmer · 115 VAC

Mounts to the side of any CNC sump and skims tramp oil at up to four gallons per hour. Stainless construction, no maintenance, ships in two business days.

$682 USD In stock · ships Mon

Voltage

115 VAC 24 VDC 230 VAC
Add to cart → Request a quote
Lifetime warranty Made in USA Free shipping over $500
Specs Drawings Install Reviews · 142 Downloads
Capacity4 gph
Reach (depth)8 in
Reach (lateral)14 in
Tube length22 in OAL
Power115 VAC · 60 Hz
MountSide / clamp
Material316 SS · viton seals
WarrantyLifetime · mechanism
Mock C · 06.3

Find Your Fit — guided product selector

The single most important new page. Three questions: what are you skimming, what's your sump configuration, what's your budget. Output: a ranked match with two alternatives and a "talk to a human" exit. Replaces the parallel "Shop By Solutions" tree entirely.

www.zebraskimmers.com/find-your-fit

Step 02 of 03

What are you skimming?

The fluid type drives almost everything else — tube, belt, disk, or coalescer.

Choose one

A
Tramp oil floating on coolant

Most common. Tube or belt skimmer territory.

B
Emulsified oil mixed in

Coalescer needed. Belt won't catch it.

C
Hydraulic / way oil from leaks

Different chemistry — usually disk skimmer.

So far · Single CNC, ≤200 gal sump · Tramp oil

Recommended path: Tube skimmer (likely ZVA8 family)
§ 07

Implementation roadmap — four phases, ship value at every step.

Each phase produces something live and learnable. We don't go dark for three months and re-launch a Big Bang. Phase 1 alone — IA cleanup and the new homepage — fixes most of the audit's high-severity findings.

Phase 01Discovery
Audit, IA & design system finalization
  • Stakeholder review of this doc
  • Analytics deep-dive · top exits, search terms
  • 5–8 customer interviews (each persona)
  • Final IA in Figma · sitemap diff
  • Design tokens locked · Plex / palette
2 weeks
Phase 02Foundation
New homepage, header, footer, PDP template
  • Liquid section library (theme toolkit)
  • Homepage live with three intent paths
  • Unified PDP template with spec tabs
  • Nav collapsed to five top-level items
  • 301 redirect map for legacy URLs
4–6 weeks
Phase 03Conversion
Find Your Fit, Dazzle™ comparison, parts finder
  • 3-step product finder with persisted state
  • Dazzle™ 1 / 2 / 2.e comparison page
  • Parts finder by model (metaobject-backed)
  • Quote request flow with line items
4 weeks
Phase 04Depth
Learn hub, support hub, distributor portal
  • Coolant 101 unified training hub
  • Application guides by problem
  • Single-source FAQ (kill duplicate)
  • Distributor login & pricing tier
  • GA4 + Clarity → BigQuery dashboard
6 weeks
§ 08

Performance & accessibility — non-negotiable.

These are launch gates, not aspirations. They get measured per-page in Lighthouse CI and axe automated runs against staging on every PR.

Lighthouse · Mobile
90+

Performance, Accessibility, Best Practices, SEO. Measured against the homepage, a PDP, and the finder. Failures block deploy.

Core Web Vitals
All green

LCP < 2.5s on 4G, INP < 200ms, CLS < 0.1. Hero image preloaded; web fonts swap with fallback metrics; no layout shift from late-loading content.

WCAG · Compliance
2.2 AA

Color contrast verified per token pair. Keyboard paths for every interaction. Screen reader pass on the finder, PDP, and cart. Motion respects user preference.

Tech notes

Modern CSS, no framework lock-in.

The system is built on CSS custom properties, container queries, grid and subgrid. No Tailwind. No CSS-in-JS. Liquid sections own their semantic structure; Alpine handles the small JS surface (filters, finder state). Anything that can be HTML-only stays HTML-only.

Open questions

Decisions still owed.

Photography refresh — budget and shot list. Whether to add live chat or stay with phone-first sales. Distributor portal scope (read-only pricing vs. full ordering). The exact RFM data feeding the finder's recommendation logic. These all flow into Phase 01.