ben.
← All work
UX/UI DesignResearch & StrategyPrototypingB2B

Case Study

·

2025 / 2026

Vlier.com_

Restructuring a legacy industrial product page so that the most valuable user action — downloading a CAD file — became unavoidable.

100+Product variants
2Workflows mapped
1Critical CTA surfaced
B2BEngineer-first audience
The Client

Vlier — precision hardware since 1946

A division of Hutchinson Aerospace & Industry, manufacturing spring plungers and positioning hardware for aerospace, defense, and industrial manufacturing. Their buyers are engineers who need exact specifications before placing an order.

The Brief

Redesign the product page UX

My role spanned UX research, visual design, and interactive prototyping — delivering two layout comps and dev-ready interaction specs for engineering handoff.

The Problem

The most valuable action on the page was the hardest to find.

A CAD download is Vlier's strongest purchase signal — an engineer who downloads a CAD file is more likely than not to eventually buy. On the old page, that action was a tiny icon buried inside a spec table row. The only visible CTA was "Find a Distributor" — a mid-funnel action that skipped the most critical step entirely.

"A CAD download more likely than not turns into a sale — whether that's 2 months or 12 months from now."

— Vlier Sales Team
01
Wrong CTA hierarchy

‘Find a Distributor’ was the only visible CTA — a mid-funnel action placed before the user had any reason to trust the product. The highest-value action (CAD download) was invisible.

02
Two workflows, one layout

Engineers browsing product families and engineers ready to download CAD files have completely different needs. The old page tried to serve both in a single flat scroll with no separation.

03
No path to conversion

Getting from a product page to a CAD download meant reading a dense table, finding a tiny icon in the right row, and hoping you clicked the right one. There was no scent trail.

Research

Same user. Two different moments.

The Browser

An engineer with a positioning problem. They’re comparing options across vendors — Vlier, JW Winco, Carr Lane. They need to scan product families, understand force ranges, and bookmark candidates. They’re not ready to download anything yet.

The Specifier

The same engineer, later. They’ve narrowed it down. Now they need exact dimensions — A through G, thread size, end force. They’re going to drop this into a CAD assembly. The download is the conversion. Everything else is friction.

The page needed to serve both workflows without forcing either to wade through what they don't need. That meant a tabbed layout where browsing and speccing each get their own space.

Design Decisions

Every decision traced back to the engineer.

01Information Architecture
Separate browsing from speccing

The old page was a single scroll serving both discovery and precision-data phases. I split these into two explicit tabs — Product Info and CAD/Specs. Clicking any part row automatically activates the CAD/Specs tab, moving the user forward without extra navigation.

Knurled Knob Plungers

Standard spring plungers offer long travel, large bearing surfaces and numerous material and design options.

02CTA Hierarchy
Make CAD download the primary action

I repositioned the CAD download as the most prominent CTA in the right column — persistent, always visible, and surfaced the moment a part row is clicked. ‘Find a Distributor’ moves to the Product Info tab where it belongs: after the engineer has validated the spec.

Available — not primary
Sets up the download
Primary conversion
03Filtering & Navigation
Accordion tables with ANSI/Metric filtering

Vlier serves both domestic (inch) and international (metric) markets. The old table dumped all variants together. The redesign uses collapsible accordion sections with filter buttons — engineers working in one system don’t have to mentally filter out the other.

PartAB
SL19010-320.40
SL2501/4-200.50
04Row Interaction
Click a row to surface the full spec

The original table had all dimensions inline but no way to isolate a single part. The redesign adds row-click behavior: selecting a part number populates a dedicated specs panel in the right column with all dimensions labeled A through G, and auto-activates the CAD/Specs tab.

Part No.InitialFinalAB
SL1900.53.010-320.40
SL2501.04.01/4-200.50
SL3121.06.05/16-180.625
Click a row
Experience It

Try the redesigned product page.

Click rows to see specs populate. Switch tabs. Filter tables. Use the calculators. This is a working prototype of the production spec.

vlier.com — interactive prototype

Knurled Knob Plungers

Knurled Knob Plungers Tables

Click any row to see CAD, more information on part, and add to quote.

CAD line drawing

Click any row to see CAD, more information on part, and add to quote.

Part No.With
Thread
Lock
End Force
(Lbs.)
ABCDEFGROHSCADCAD
W/
Lock
InitialFinal
SL190SL190P0.53.010-320.400.0940.104**0.380.2500.19SL190SL190P
SL250SL250P1.04.01/4-200.500.1250.1230.500.3130.19SL250SL250P
SL312SL312P1.06.05/16-180.6250.1880.1540.630.3750.25SL312SL312P
SL375SL375P1.08.03/8-160.7500.2180.1850.750.5000.31SL375SL375P
SL500SL500P1.010.01/2-130.8750.250.2481.000.6250.38SL500SL500P
CAD line drawing

Click any row to see CAD, more information on part, and add to quote.

Part No.With
Thread
Lock
End Force
(Lbs.)
ABCDEFGROHSCADCAD
W/
Lock
InitialFinal
SL190LSL190LP0.53.010-320.400.0940.1040.380.2500.19SL190LSL190LP
SL250LSL250LP1.04.01/4-200.500.1250.1230.500.3130.19SL250LSL250LP
CAD line drawing

Click any row to see CAD, more information on part, and add to quote.

Part No.With
Thread
Lock
End Force
(Lbs.)
ABCDEFGROHSCADCAD
W/
Lock
InitialFinal
SL190HSL190HP1.05.010-320.400.0940.1040.380.2500.19SL190HSL190HP
SL250HSL250HP2.07.01/4-200.500.1250.1230.500.3130.19SL250HSL250HP
CAD line drawing

Click any row to see CAD, more information on part, and add to quote.

Part No.With
Thread
Lock
End Force
(Lbs.)
ABCDEFGROHSCADCAD
W/
Lock
InitialFinal
SLM5SLM5P0.53.0M5×0.810.02.52.69.56.55.0SLM5SLM5P
SLM6SLM6P1.04.0M6×1.012.03.03.112.08.05.0SLM6SLM6P
SLM8SLM8P1.06.0M8×1.2516.04.54.016.010.06.0SLM8SLM8P

Conversion Calculators

Enter known value in place of X to view results.

Metric & Inch conversion:
Inch=mm
Lbf/Newton Conversion:
lbf=N
Product Image

Knurled Knob Plungers

Product Description

Standard spring plungers offer long travel, large bearing surfaces and numerous material and design options including an optional locking element.

Typical Uses

  • Positioning
  • Indexing
  • Ejecting
  • Latching
  • Detents
Outcome

Delivered for development handoff.

Deliverables included two full layout comps, interaction specs, responsive breakpoint guidance, and a CTA hierarchy rationale tied to Vlier's conversion data. The core shift: stop treating the product page as a catalog — start treating it as the beginning of a sale.

Deliverable
2 full layout comps + dev-ready specs
Primary CTA shift
‘Find a Distributor’ → ‘Download CAD’
Interaction model
Row click → spec panel → format → download