Concevoir pour une femme en renaissance, pas pour un moteur de recherche
Pour le site d'Eva, le public visé a guidé des choix précis : quatre passages en sticky scroll, un hero différent sur mobile et un parcours de lecture à vérifier écran par écran.
L’essentiel en bref
Le public visé par Eva m'a servi à prendre des décisions de mise en page. Son site s'adresse à des femmes de 30 à 50 ans, en période de reconstruction, qui ne se retrouvent pas dans un discours de performance personnelle. Ce positionnement me donne un point de départ pour choisir les textes, leur ordre et la place des images.
Je suis Jim. Après la direction artistique du site de La Puissance de l'Éveil, je raconte ici deux choix de parcours : la présentation des quatre passages d'Eva et l'adaptation du hero sur mobile.
Se servir du persona pour prendre une décision
Un persona, c'est la description du public auquel on veut s'adresser. Celui d'Eva parle de femmes qui ont l'habitude de tenir, de porter beaucoup de choses et qui cherchent à se choisir. Ce sont les termes de son positionnement, que je dois traduire dans le site sans les remplacer par les miens.
Le brief exclut notamment le vocabulaire corporate, le « mindset hustle » et les promesses de transformation en 30 jours. Ça a des conséquences concrètes. Je ne peux pas écrire un appel à l'action agressif puis demander au design de l'adoucir. Le texte, le bouton et la section doivent rester cohérents avec ce qu'Eva propose.
Son vocabulaire revient donc dans les pages : se choisir, traverser, retirer. Il aide à garder le même registre d'une section à l'autre.
Présenter les quatre passages dans l'ordre
Le récit d'Eva est organisé autour de quatre passages : Conditionnement, Rupture, Reconnexion, Renaissance. La première version les mettait côte à côte, dans une grille de quatre colonnes. Eva m'a dit : « je n'aime pas la 4 colonnes ».
J'ai repris cette section en sticky scroll. Le principe est de garder un passage à l'écran pendant le défilement, puis de laisser le suivant prendre sa place. Chaque étape a un chiffre romain en filigrane doré et une barre de progression qui se remplit segment par segment.
Ce changement modifie surtout l'ordre de lecture. Dans la grille, les quatre passages sont visibles ensemble. Dans la nouvelle version, ils arrivent successivement. Ça correspondait mieux à la progression que nous voulions présenter : commencer par le Conditionnement avant de passer à la Rupture, puis à la Reconnexion et à la Renaissance.
Le sticky scroll reste un choix pour ce contenu. Une grille peut très bien servir à comparer quatre offres ou quatre caractéristiques. Ici, nous avions un récit à présenter dans un ordre précis, ce qui rendait la présentation successive intéressante.
Adapter le hero au format mobile
Instagram faisait partie du contexte d’acquisition du projet. Le téléphone était donc un format à travailler dès la conception.
La version bureau du hero utilisait une vidéo d'Eva en plein écran, cadrée en paysage. Sur un écran vertical, le recadrage posait problème : le visage pouvait sortir du cadre, ou il fallait agrandir l'image pour remplir la hauteur. Dans ce cas précis, garder le même média sur les deux formats demandait un compromis que je ne voulais pas conserver.
Sur mobile, j'ai donc remplacé la vidéo par une photo portrait. Le titre a été placé sous le visage, pour rester lisible sans couvrir ses yeux. C'est un changement de composition, pas seulement une réduction de la version bureau.
Les éléments à contrôler restent très concrets : voit-on le visage, peut-on lire le titre, trouve-t-on la suite du parcours ? Le grand écran sur lequel je travaille ne suffit pas à répondre à ces questions pour un téléphone.
La place du SEO dans ce travail
Sur cette étape, je travaillais d'abord le parcours et le contenu avec Eva. Les choix de structure, de performance et de maillage sont traités dans les autres épisodes.
Le référencement et la lecture posent aussi des questions communes : comprend-on le titre, la page répond-elle à une question, peut-on trouver l'information ? Ces vérifications restent utiles sur les deux formats.
Pour garder Eva dans la boucle pendant ces ajustements, j'ai utilisé un prototype que nous pouvions regarder ensemble. C'est la méthode présentée dans HTML d'abord, framework ensuite.
Le bilan de la refonte depuis Wix rassemble les choix que je garderais et les limites de ce récit de construction.