PSYONIC

The site for PSYONIC's Ability Hand, a touch-sensing bionic hand sold to people with limb difference and their clinicians, and to robotics integrators.

What they came with

One piece of hardware has two buyers who share almost no vocabulary. Someone fitted with the Ability Hand arrives asking what it weighs, how it charges and which grip does what. A robotics integrator arrives asking about torque control, bus protocols and how the hand talks to an arm already on the shop floor. Behind both sits the prosthetist, who fabricates the socket and needs the right manual for the right device generation.

What the build had to do

A fork at the front door

The homepage hero resolves into two buttons, Humans and Robots, and those routes do not meet again until the footer. Everything above the fork therefore has to be a claim about the hardware that both readers accept, rather than a pitch aimed at one of them.

Two product pages, one device

The Humans page carries weight, grip patterns and charge time; the Robots page carries torque and position control, encoder and touch-sensor streams, and bus options. A change to the hardware has to land in both registers without either page drifting away from the datasheet.

The grip pattern gallery

Under the line about 32 grip patterns, of which the page says 19 are currently pre-defined, sits a photographic grid of the hand holding each position, six across on desktop with each frame opening in a lightbox. It works as a catalogue and as evidence at once, so it has to reflow to a phone without the reader losing which grip is which.

A quote form that configures

The Request for Quote route is an order sheet rather than a contact box: right- and left-hand quantities, a size choice, a wrist choice between the clinical quick-disconnect and the bolt-pattern research wrist, and an optional teleoperation glove package. The mechanical detail lives in the field hints, down to the bolt count on the wrist and the page of the datasheet that describes it.

Documents keyed to hardware generation

The clinician and user hubs serve manuals, a spec sheet and fabrication guides as PDFs from the Squarespace file store, split by device generation and identified to the reader by serial-code prefix: Gen 2 starts with A, Gen 1 with 2. Versioning lives in the filename, so each link has to name its document unambiguously enough that a prosthetist picks the right one first time.

The Learning Center as a book

A numbered eight-part contents page, from limb-loss definitions through amputation levels to control systems, links out to chapters that each sit on their own route and link back to the contents. It is a reference work assembled from flat pages, so the ordering is carried entirely by the contents spine rather than by a collection.

Technical detail

Fluid Engine and the two-grid block model

Each section emits an inline stylesheet under a hashed class: an eight-column grid below 768px and a twenty-four column grid above it, with row height derived from container width. Every block then carries two grid-area declarations, one per breakpoint, so the mobile and desktop positions are set independently rather than reflowed from one another. Geometry travels next to the markup it positions, which is what keeps the layouts editable in place.

Cached HTML, components that fetch themselves

Pages return complete from the Squarespace edge with a weak ETag and, on the content routes, an age counted in days, so the reader gets a full document on first byte. Blocks are website components: each element declares its own stylesheet and visitor script URL, versioned per definition, so behaviour arrives per component instead of in one bundle.

The integration boundary

Three parties own conversion and none of them is the CMS. HubSpot portal 5834629 serves a separate form definition per route — distinct GUIDs for Get Yours, the quote sheet, the prosthetics and robotics order forms, the repair ticket and billing registration — plus a Meetings embed for robotics calls; Qgiv runs the donation widget; the Squarespace form block handles newsletter and SMS opt-in behind reCAPTCHA Enterprise. Because the donation widget reads as a checkout, the page states above it that the Ability Fund is held and controlled by the Range of Motion Project, so the money boundary is legible before the panel mounts.

Routes that resolve by redirect

Discover and Support are folders in the main navigation rather than pages: requesting either returns a 302 to its first child, Who We Are and Users respectively, and the Ability Hand folder does the same to the Humans page. The second domain behaves the same way, with abilityhand.com issuing a 301 onto that Humans route. Grouping stays in the navigation configuration and the alias stays in DNS, so every URL a visitor can land on is a page with real content on it.