← WorkWarm clinical editorialClient work · Live

KANA

A home blood-draw service in Chełm, told as the journey of a sample.

Type
Healthcare service website
Role
Design and development
Year
2025–2026
For
Client work
Stack
Next.js 15 · React 19 · TypeScript · Tailwind 4 · SVG · Vercel
KANA homepage in Polish: “My przyjeżdżamy. Ty zostajesz w domu.” - We come to you. You stay at home. - with the route of the visit drawn beside it.
Live site

02

Context

Normally the patient travels to the laboratory. KANA reverses that: someone comes to the patient’s home, and the sample continues the journey instead.

The people who need this most - seniors, parents of small children, people after surgery - are also the people most likely to struggle with a typical service website.

03

Role

Client work delivered through Binary Brain Technologies. I designed and built the site, from its first version in 2025 to the redesign that went live in September 2026.

04

Idea

Follow the sample.

The page is one story in the order the service happens: from the home, to the sample, to the laboratory, to the result online. A single route line is drawn in the hero and then follows the reader down the page.

Colour carries the same story. Warm paper is the home, one cool surface is the laboratory, and lavender appears in exactly one place - the cap of the sample tube.

5 · 10 kmDomHomePobranieSampleLaboratoriumLaboratoryWynik onlineResult
Drawing: the sample’s route - home, sample, laboratory, result.

05

Experience

  • Large, calm typography chosen for legibility; a typeface designed for low-vision readers carries the body text.
  • A service-area diagram computed from real coordinates: towns sit at their true bearing and distance, with rings at 5 and 10 km - drawn in SVG, without a map library, and described in text.
  • Questions answered with native disclosure elements. A call bar on phones that steps aside while another call button is on screen.
  • Reviews appear only when real, verifiable reviews exist. Until then the section does not render.

06

System

  1. InterfaceNext.js App Router, one static routeTailwind 4 configured in CSSSVG diagrams
  2. MotionOne small script: IntersectionObserver + a throttled scroll handlerServer markup driven through data attributes
  3. ContentA single source of truth for the business factsPlaceholders are never rendered
  4. SEOMedicalBusiness and FAQPage structured dataGenerated social images and icons
  5. InfrastructureVercel, statically prerendered

07

Details

The redesign removed more than it added

The previous version used three.js, Framer Motion and a map library. The redesign dropped all of them and replaced 3D, glass and parallax with CSS, SVG and one small script.

Motion that cannot break the page

Motion is opt-in: a tiny inline script enables it only when the visitor has not asked for reduced motion, and removes it again if the motion script does not report back within four seconds. Without JavaScript the page is a complete document.

Typographic care in Polish

Single-letter Polish words never end a line - a small rule applied in code to every paragraph.

08

Output

A live, indexable single-page site at kanabadania.pl.

09

Reflection

The redesign dropped the 3D, animation and map libraries of the earlier version. The page got lighter, and its visual idea now comes from the service itself: the route of a sample.