Au fond, c’est quoi, un site web ?

Je peux vous expliquer en quelques minutes ce que je fais chez Not a Monkey. En général, je pars de ce qui vous amène, je vous pose deux ou trois questions et je vous raconte un projet qui ressemble au vôtre. Sur mon ancien site, vous deviez faire une bonne partie de ce travail vous-même. C’est pour ça que j’ai voulu le refaire.

Un nom, et puis quoi ?

Depuis le premier jour, j’avais un nom dont les gens se souviennent. Ce qui manquait à Not a Monkey, c’était une identité qui dise quelque chose de ma façon de travailler. On peut très bien se souvenir du singe et n’avoir aucune idée de la raison pour laquelle on devrait m’appeler.

Avec la direction créative, on a mis plusieurs versions du même écran côte à côte dans Figma. En haut, les initiales NM et les mots « Stay grounded ». Plus bas, deux cartes d’articles. En gardant le texte et sa place à l’écran, on pouvait discuter d’une seule chose à la fois. Le vert vif attirait-il d’abord l’œil vers le dessin ou vers le titre à lire ? Que devenait le logo sur fond noir ?

Sur le site que vous lisez, les couleurs se sont adoucies. Les deux lettres et la signature sont restées. « Stay grounded » me ressemble assez bien. Quand une équipe hésite entre trois technologies, mon premier réflexe est de lui demander ce qu’elle doit livrer, à qui et dans quel délai.

Donner un rôle à chaque page

Avec la personne qui m’a accompagné sur l’UX, on s’est servi de Figma pour examiner une autre question. Sur un téléphone, comment présenter plusieurs services à quelqu’un qui ignore encore lequel lui conviendrait ? Si chaque offre prend un écran entier, comparer la première à la quatrième demande déjà un effort.

Sur la maquette mobile, on pouvait parcourir les intitulés, déplier une offre pour en lire le résumé, puis suivre « voir plus » si elle correspondait au besoin. On a aussi dessiné la page d’arrivée. C’est là qu’on avait la place d’expliquer à qui s’adressait l’accompagnement et de proposer un premier appel.

C’est la différence entre deux rubriques du site. Dans les services, « Clarifier » vous permet de comprendre ce qu’on peut faire ensemble quand les priorités sont floues. On peut examiner l’existant, trier les demandes et décider de ce qui mérite d’entrer dans la prochaine version. Dans les études de cas, vous pouvez voir à quoi ressemble ce travail chez un client.

Pour chaque client actuel, j’ai donc un texte à écrire qui demande de revenir au métier. Prenez Makisu. Je pourrais résumer le projet en deux mots, « commande en ligne ». Mais il manque alors toute la partie intéressante. Une fois que vous avez choisi vos makis, comment la commande arrive-t-elle en cuisine ? Et quand un ingrédient vient à manquer, qui peut le retirer de la vente ? Ces deux questions racontent bien mieux mon travail avec Makisu qu’une liste de fonctionnalités. Elles demandent aussi plus de temps à écrire qu’une rangée de logos.

Choisir une technique à la mesure du site

Une fois les contenus posés, le choix d’architecture était assez simple. Deux personnes qui ouvrent l’étude de cas Makisu doivent pouvoir lire la même histoire. Je peux donc préparer cette page une fois, au moment où je publie. C’est ce que fait Astro sur ce site. Le texte vit dans des fichiers Markdown, Astro génère les pages HTML et Firebase Hosting sert les fichiers aux visiteurs.

L’endroit où ce choix se voit le mieux, c’est le bouton de contact. Vous êtes en train de lire un projet et vous voulez m’en parler. Un clic ouvre mes coordonnées sans vous faire perdre la page. Vous pouvez m’écrire ou choisir un créneau sur Calendly, qui s’ouvre alors dans un nouvel onglet. Pour cette petite interaction, j’ai utilisé React et un composant de dialogue shadcn/ui, habillé avec Tailwind pour reprendre les couleurs et la typographie de la maquette. Le texte que vous étiez en train de lire, lui, est déjà là en HTML.

Que faut-il mesurer dès le lancement ?

J’aimerais savoir si une personne qui découvre mes services poursuit sa lecture avec une étude de cas. J’ai donc ajouté Google Analytics au projet Firebase, avec une mesure d’audience qui ne démarre qu’avec votre accord. Vous pouvez la refuser ou changer d’avis depuis le pied de page. Si vous me contactez, je peux aussi vous demander quelle page vous a donné envie d’en discuter. Votre réponse m’en apprendra plus sur ce premier échange qu’un compteur de visites.

Le parcours de contact m’a aussi servi de fil conducteur pour rédiger la politique de confidentialité. Lire un article, m’envoyer un e-mail et réserver un rendez-vous sont trois gestes différents. Le texte explique le rôle de Firebase dans l’hébergement et celui de Calendly si vous choisissez de réserver. Depuis le pied de page, vous pouvez aussi consulter les conditions générales qui encadrent mes prestations.

Décider que la première version peut sortir

J’aurais aimé lancer le site avec une histoire bien écrite pour chacun de mes clients. En faire une condition de lancement aurait eu une conséquence assez prévisible. Vous seriez encore en train de visiter l’ancien site.

J’ai donc retiré de la première version les contenus trop incomplets pour vous apprendre quelque chose. Pour la suite, je me réserve un créneau chaque semaine avec une tâche assez petite pour être terminée, comme reprendre un cas client et expliquer une décision qu’on a prise ensemble.

Ce que j’attends de cette première version tient en une phrase. Si quelqu’un vous a envoyé ici en disant « tu devrais parler à Jean-Charles », j’aimerais que vous puissiez ouvrir une page et vous dire « oui, c’est de ça que j’ai besoin de discuter ». Et si le projet Makisu vous a donné envie de savoir comment une commande arrive en cuisine, vous savez déjà par où commencer.