Skip to main content
Clover

Health · patient journey · Homepages

Clover

A patient journey without friction

Scroll to explore

01 · Health · patient journey

Medical onboarding without friction

A patient journey without friction. Fictional direction — same craft as real client work under NDA.

  • 01

    Guided path

    Need → for whom → next — three clear steps.

  • 02

    Triage

    Urgent vs routine, without a 12-page form.

  • 03

    Next action

    Appointment or call — the patient knows what to do.

01b · Engineering

Technical sheet

Stack, shipping and my role on this build — for recruiters and tech leads.

Technologies
  • Next.js
  • TypeScript
  • React
  • Tailwind CSS
Libraries & tools
  • Framer Motion
  • next/image
Deployment

Local /play demo — Next.js front, no business backend

Role

UI direction · integration · interactions

Context

Fictional direction (NDA) — same craft level as real missions

02 · Inside the product

One scroll, one screen

Each section locks to the viewport — keep scrolling past the last screen to return to the brief.

Clover
Clover

Health · patient journey

Medical onboarding without friction

  1. 1

    Guided path

    Need → for whom → next — three clear steps.

  2. 2

    Triage

    Urgent vs routine, without a 12-page form.

  3. 3

    Next action

    Appointment or call — the patient knows what to do.

Clover

94 %

postes pourvus < 45 j

4,9 / 5

satisfaction

6 mois

garantie

Less drop-off before the first visitMy parents got the journey without me explaining.

Clover

Start as a patient

Demo wizard · 3 screens.

Start

Back to the brief

You’ve left the demo screens — next: try it, then the craft notes.

03 · Clinics & patients

Less drop-off before the first visit

My parents got the journey without me explaining.

Sofia · caregiver

We filter urgencies better before the phone rings.

Dr. N. · clinic

04 · Try the path

Start as a patient

Demo wizard · 3 screens.

  • Hero + below-the-fold sections (not just a hook)
  • Visual hierarchy and primary CTA
  • Information density vs readability
Visit the full site
Clover

Step 1/3

Need

Local demo — no data is sent.

05 · Same family

Other directions of the same type — to compare density and mood.

Route Libre — Car & motorcycle licences — clear prices, fast dates
Route LibreCar & motorcycle licences — clear prices, fast dates
Léa Dom — Home cleaning, slots that hold
Léa DomHome cleaning, slots that hold
Atelier Nord — The adventure starts by the water
Atelier NordThe adventure starts by the water
Flux — More clients without living in the app
FluxMore clients without living in the app

06 · What to look at

  1. 01Hero + below-the-fold sections (not just a hook)
  2. 02Visual hierarchy and primary CTA
  3. 03Information density vs readability
  4. 04Interactive states (hover, selection, feedback)

A project in this spirit?

Clover — A patient journey without friction | Ilyesse Hamcherif