Stur Steerable Guiding Sheath Form

TL;DR: I designed and coded an interactive order form for steerable guide sheaths. SVG components animated with GSAP provide real-time feedback, turning a long, error-prone technical form into an engaging experience.

Context

Ordering steerable guide sheaths online typically means one of two things:

1. Filling a long, static form with dozens of technical inputs; or
2. Downloading an interactive PDF, completing it offline, then emailing it back to the OEM.

Both paths are slow, easy to mess up, and offer almost no feedback as you go.

Concept & Brand

To frame the experiment, I created a lightweight brand: Stur; derived from the Dutch word “stuur” (steerable). With the tagline "Steer With Precision".

Goal

Reduce friction and errors during submission by:

• Making the form interactive and self-validating.
• Providing visual previews of selected specs in real time.

My Role

• Product & UX design
• Visual identity for Stur
• Motion design (SVG/GSAP/After Effects)
• 3D design for landing page animation (Blender)
• Front-end development (Nuxt)

How It Works

• Reactive specs: As users choose diameter, curve, length, and tip options, the on-screen sheath illustration updates instantly (path morphs, labels, and dimensions animate into place).
• Inline validation: Invalid combinations trigger hint text instead of page-blocking modals.

Why This Solves the Original Pain

• Fewer errors: Immediate visual feedback catches impossible combos early.
• Less cognitive load: Users see the effect of each choice, not just a input fields.
• No downloads: Everything happens in-browser.

Note: This is a work in progress. If adopted by an OEM, I’d instrument with analytics to quantify error rate, abandon rate, and completion time.

A New Version Is Coming!

Started working on a new version with some improvements in mind. Like tracking steps for the form complition.