McMaster-Carr

Designing Visual Systems for Industrial Scale, Invention, and Repair

Rather than treating images as static assets, we approached them as infrastructure: components governed by rules, constraints, and measurable outcomes, designed to support real-world work—repair, prototyping, and invention—under pressure.

Context: An Interface Where Precision Is Non-Negotiable

McMaster-Carr operates at a scale where optimization is cultural. Millions of SKUs, lightning-fast search, and an expectation of correctness shape every design decision. Customers are often mid-task—repairing equipment, fabricating parts, or building prototypes—where errors cost time, money, and momentum.

This was especially true during the COVID era, when supply chains were volatile and substitution became routine. In those moments, visual clarity was not cosmetic: it helped users assess compatibility, material differences, and form factors quickly when ideal parts were unavailable.

The rendering team had already produced high-quality mechanical CAD–derived models for much of the catalog. The UX challenge was not whether imagery was accurate, but how accuracy should be translated—what to preserve, what to abstract, and what to emphasize—at each stage of the journey.

I joined as an experienced hire, collaborating across UX, engineering, analytics, and rendering to help formalize how imagery could support navigation, comparison, confidence, and serendipity without introducing noise or unnecessary computational overhead.

My Role: Embedding Design Judgment into a System

Working cross-functionally, I focused on translating visual intuition into shared systems and constraints that could scale.

My contributions included:

• Defining levels of detail and lighting rules for imagery across interface tiers (search, category, product detail)
• Developing a T-shirt sizing model (XS–XL) for image resolution and usage, allowing imagery to scale consistently across contexts
• Establishing material and specular reflection thresholds to preserve realism without clutter
• Helping connect visual decisions to measurable outcomes, framing design changes as testable hypotheses
• Exploring when abstraction (icons, pictograms, spec art) outperformed realism for comprehension at scale
• Contributing early foundations for a shared visual design system spanning UX, rendering, and analytics

Throughout, the goal was not visual flourish, but predictability, legibility, and trust—especially for expert users who returned daily.

Design Challenges

Image Size as a System, Not a Style Choice

High-fidelity renders were visually compelling but expensive to produce and serve. The T-shirt sizing model enabled teams to select imagery dynamically based on context and importance—preserving visual hierarchy while reducing redundant rendering, storage, and bandwidth usage.

This system allowed images to grow in fidelity as users progressed, supporting confidence without overwhelming earlier stages where breadth mattered more than detail.

Supporting Mechanical CAD Without Exposing Its Complexity

Mechanical CAD models encode tolerances, assemblies, and engineering intent—not visual priority. Supporting CAD meant deciding what information users needed to reason about parts visually, and what could safely be suppressed.

Imagery became a translation layer between engineering truth and human perception, faithful enough for experts while legible enough for fast decision-making.

Manual Craft vs. Scalable Generation

Some products required careful manual modeling; others benefited from faster photogrammetric approaches. We explored hybrid strategies that balanced accuracy, speed, and cost—allowing the catalog to scale while preserving material understanding and dimensional clarity.

Parallelism, Grid Harmony, and Visual Order

With thousands of products varying in shape, aspect ratio, and material, visual consistency mattered. I helped define compositional rules that maintained grid harmony and perceptual alignment, so pages read as intentional systems rather than mechanical accumulation.

This parallelism supported comparison, substitution, and rapid scanning—critical behaviors in MRO and prototyping contexts.

Designing for Serendipity and Invention

Many McMaster customers weren’t “shopping” so much as reasoning through materials mid-build. The experience needed to support serendipity—seeing adjacent possibilities, understanding unfamiliar components, and discovering workable alternatives.

This goal echoed the cognitive role of McMaster’s physical catalog, famously celebrated by Adam Savage in his discussion of the big yellow book as a tool for invention rather than mere ordering. The web experience aimed to preserve that same thumb-flipping discovery—faster, more precise, and with greater dimensional clarity.

3D imagery functioned as a tool for mental simulation, helping users imagine how parts might feel, fit, or behave before committing—especially valuable for prototyping and experimentation supported by overnight shipping and rapid iteration.

Impact

• Introduced a scalable image sizing framework that reduced rendering workload and improved performance during rollout testing
• Delivered lighting and material guidelines adopted by the visualization team
• Helped formalize a data-validated approach to visual design evaluation
• Supported confident substitution and rapid iteration during periods of supply-chain uncertainty
• Laid groundwork for a unified system connecting imagery, UX patterns, and analytics

Reflection

McMaster-Carr sharpened my understanding of how small design decisions propagate through large, automated systems. It reinforced that rigor is not about visual excess, but about clarity under constraint—and that empathy for users and colleagues remains essential even in environments defined by efficiency and pressure.

What made the brand a sleeper hit was not flash, but reliability: perceptual clarity paired with logistical trust, supporting the real work of making, repairing, and inventing every day.

Related: Adam Savage — McMaster-Carr Catalog