Ivoire

(01) Brief

Le point de départ.

Contexte

Un patient sur trois repousse ses soins par appréhension. Le site de la clinique n’aidait pas : photos de fauteuils sous néon, liste d’actes en jargon, prise de rendez-vous renvoyée vers une plateforme tierce. Les appels au secrétariat saturaient pour des questions simples (créneaux, mutuelle, remboursement).

Objectif

Apaiser avant même le rendez-vous : montrer une clinique lumineuse et transparente, répondre aux trois questions qui bloquent (quand, combien, avec qui) et faire réserver en ligne directement depuis l’accueil.

Public

Adultes de 25 à 55 ans, souvent anxieux face aux soins, parents qui cherchent un dentiste pour leurs enfants, nouveaux arrivants à Nantes sans praticien. Visite majoritairement sur téléphone, souvent le soir.

Contraintes

• Respect du code de déontologie : aucune promesse de résultat, aucun avant / après, pas de ton publicitaire
• Tarifs et conventionnement affichés clairement, conformément à l’obligation d’information
• Prise de rendez-vous intégrée au site et accessible au clavier
• Aucune image de dents ni d’instruments en premier écran

(02) Direction artistique

La lumière de la nacre

« Un intérieur de coquillage : des reflets rose, brume et lilas qui bougent à peine, une serif aux angles adoucis, un portrait en forme de galet. Tout ce qui pourrait inquiéter est arrondi, tout ce qui rassure est écrit en clair. »

• Nacre
• Douceur
• Transparence
• Lumière du matin
• Précision tranquille

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titre, logotype en minuscules, titre du module de réservation, noms des soins

  Fraunces

  300 et 300 italique pour le titre, 400 ailleurs ; axe SOFT à 100, axe optique automatique

  sans appréhension.

  Aa300Aa300Aa400Aa100

  Une serif à taille optique dont l’axe SOFT arrondit chaque empattement : la précision d’un caractère de labeur, sans aucun angle vif. En graisse 300 et interlettrage −3,5 %, elle parle bas.

• Chapô, navigation, champs et créneaux de réservation

  Switzer

  400, 500 et 600 pour le créneau choisi

  Première consultation · 30 min

  Aa400Aa500Aa600

  Une grotesque claire et neutre pour l’information pratique. Les horaires sont en chiffres tabulaires : la grille de créneaux reste parfaitement alignée.

• Libellés de champs, étapes, numéros des soins, mentions tarifaires

  Geist Mono

  400, capitales

  ÉTAPE 2 / 3

  Les petites étiquettes en chasse fixe donnent un repère calme et technique, comme la fiche d’un dossier bien tenu.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le fond animé reste libre à droite ; à gauche un voile nacré garantit le contraste du titre et du chapô.
2. 02Le portrait est un galet, pas un rectangle : aucune arête dans le premier écran.
3. 03La réservation est un vrai module ouvert sur l’étape 2 (jour et heure), pas un bouton : on voit qu’il reste de la place avant de cliquer.
4. 04Les trois garanties (stérilisation, tiers payant, secteur 1) sont des pastilles sous l’appel à l’action, là où le doute apparaît.
5. 05Sur mobile, le titre tient en trois lignes, et le portrait et une version réduite de la réservation (trois jours, trois créneaux, confirmation) se partagent l’écran.

(06) Composants

Les pièces de l’interface.

• C.01

  Module de réservation

  Motif, praticienne, mois, cinq jours (le lundi complet est barré), six créneaux (09:15 déjà pris, en pointillés) et le créneau 11:30 retenu en jade, puis « Confirmer · mar. 14 à 11:30 ».

• C.02

  Pastille de disponibilité

  « 3 créneaux libres aujourd’hui » avec un point jade qui pulse : la réponse à « est-ce que je peux venir vite ? ».

• C.03

  Pastilles de réassurance

  Stérilisation tracée, tiers payant et mutuelles, conventionné secteur 1, chacune avec une icône au trait jade.

• C.04

  Équipe en initiales

  Trois pastilles nacrées (IM, TL, AB) et « 7 praticiens, dont 2 orthodontistes » : on sait qui soigne sans galerie de portraits figés.

• C.05

  Visite de la clinique

  Vignette vidéo de 1 min 40 sur la salle de soins côté jardin : la transparence montrée plutôt que promise.

• C.06

  Rangée des soins

  Six soins numérotés, chacun avec une information concrète : « Dès 30 € », « Bilan offert », « Le jour même ».

• C.07

  Numéro d’urgence

  En haut à droite, en chiffres tabulaires, avec un libellé jade : visible sans être alarmant.

(07) Motion

Chaque mouvement a un rôle.

• boucle

  Fond de nacre

  Dégradé maillé en WebGL (coquille, brume, lilas sur nacre), vitesse 0,14, grain 0,03. Il apparaît en fondu de 1,2 s ; avant, un dégradé CSS aux mêmes teintes le remplace.

• entrée

  Éclosion du portrait

  Le galet passe de 90 % à 100 %, d’un flou de 10 px à net et de transparent à opaque en 1,1 s (ease-out-expo) à partir de 100 ms, pendant que la photo dézoome lentement.

• entrée

  Titre

  Trois lignes qui montent hors de leur masque à 0, 80 et 160 ms ; le chapô, les boutons puis les garanties suivent à 280, 340 et 420 ms.

• RéservationRéservation

  transition

  Réservation

  Le module arrive par la droite à 260 ms, les jours montent un à un toutes les 40 ms à partir de 340 ms, puis les créneaux apparaissent toutes les 45 ms à partir de 440 ms : on lit la disponibilité dans l’ordre où on la choisit.

• boucle

  Respiration du galet

  Le contour du portrait se déforme imperceptiblement en 14 s, aller-retour, pendant que le liseré irisé tourne en 12 s (angle animé par @property).

• CréneauCréneauCréneauCréneauCréneauCréneauCréneauCréneau

  emphase

  Créneau retenu

  Tant que 11:30 est le créneau retenu, une onde jade s’en échappe environ toutes les 2,4 s : l’appel visuel répété de la page.

• boucle

  Ombre de palme

  Une ombre de feuille de palme, en multiplication à 20 %, dérive en 26 s sur le mur en haut à droite, comme la lumière du matin en salle d’attente.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  En boucle de 13 s, un curseur ouvre le menu « Soins », choisit 10:00, confirme : le module se transforme en confirmation (coche tracée), puis la page défile jusqu’aux tarifs, survole les aligneurs et remonte, l’en-tête compact glissant en haut.

(08) Choix expliqués

Ce qu’on a décidé, et pourquoi.

1. 01

   Choix 1 : Pas de dents en premier écran

   Gros plans de sourires, molaires en 3D, instruments : c’est exactement ce que redoutent les patients anxieux. Le premier écran montre un visage apaisé, au soleil, les yeux fermés. On vend le calme qu’on ressent après, pas l’acte.

2. 02

   Choix 2 : La réservation ouverte, pas un bouton

   « Prendre rendez-vous » seul oblige à cliquer pour découvrir s’il y a de la place. Le module déjà ouvert sur mardi 11:30 répond avant la question et réduit les appels au secrétariat.

3. 03

   Choix 3 : Une serif adoucie plutôt qu’une linéale médicale

   Les sites de santé utilisent des linéales bleues et froides. Fraunces avec son axe SOFT au maximum garde la rigueur d’une serif tout en arrondissant chaque terminaison : précis, mais jamais coupant.

4. 04

   Choix 4 : La nacre comme matière

   La nacre est la matière qui protège l’intérieur du coquillage, et la plus proche de l’émail. Elle donne une palette rose, brume et lilas qui évite le blanc clinique sans perdre la propreté.

5. 05

   Choix 5 : Les garanties là où le doute arrive

   Stérilisation, tiers payant, secteur 1 : ces trois mots répondent aux craintes d’hygiène et de coût. Placés juste sous l’appel à l’action, ils lèvent l’objection au moment où on hésite à cliquer.

6. 06

   Choix 6 : Des prix d’appel honnêtes

   « Dès 30 € », « Devis détaillé », « Bilan offert » : une information concrète par soin, conforme à l’obligation d’information et sans ton promotionnel, que le code de déontologie interdit.

7. 07

   Choix 7 : Un seul mouvement répété

   Le fond et le galet bougent si lentement qu’on ne les remarque qu’en s’arrêtant. Seul le créneau retenu émet une onde régulière : le regard sait où revenir.

8. 08

   Choix 8 : Animation réductible

   Avec « réduire les animations », le fond se fige sur une image, le galet ne respire plus, l’onde et la dérive de l’ombre s’arrêtent. Le module de réservation est un vrai formulaire accessible au clavier.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

Objectifs visés — projet fictif, aucun chiffre mesuré

Rendez-vous pris en ligne

60 %

Part visée des nouveaux rendez-vous réservés sans appel, six mois après la mise en ligne.

Appels au secrétariat

−30 %

Les questions de créneau, de tarif et de mutuelle doivent trouver leur réponse sur l’accueil.

Rendez-vous non honorés

< 5 %

Avec la confirmation explicite du créneau et le rappel par SMS.

LCP sur mobile

< 2 s

Titre en texte, portrait en AVIF de 14 Ko, fond WebGL chargé après le contenu.