J'ai concrétisé ce projet de mon Bachelor sur Webflow pour en démontrer la réalité et faire comprendre sa faisabilité technique.
3 semaines
Product Designer & Webflow Developer
Figma, Webflow
Visitez en direct le
Site Web CA'ZEN.Initialement, ce projet de Bachelor se limitait à la conception d'un site et à l'élaboration d'une stratégie marketing pour CA'ZEN, une agence de rénovation sans présence digitale. Cependant, j'ai décidé de dépasser le brief académique. Pour prouver ma capacité à combler le fossé entre le design et le développement, j'ai pris l'initiative de développer intégralement le site sur Webflow. Mon objectif était double : donner vie à ma stratégie UX et me confronter concrètement à l'intégration pour garantir la faisabilité technique de mes designs.
Pour une clientèle exigeante, la rénovation évoque une lourde charge mentale. Au-delà des travaux, le client achète une garantie de sérénité. L'inexistence de vitrine digitale constituait un obstacle majeur : il manquait un support tangible pour prouver la faisabilité et rassurer sur la maîtrise totale du chantier avant même la prise de contact.
L'objectif était de supprimer le stress lié aux travaux. Le site ne se contente pas de la décoration : il explique simplement comment se déroule le chantier. En mélangeant un style calme et des infos précises, l'interface transforme l'inquiétude du visiteur en confiance.
La principale peur du client vient de l'inconnu. Ne pas savoir comment les travaux vont se dérouler crée de l'anxiété. J'ai donc créé une Timeline verticale animée pour structurer la partie Services. C'est un guide visuel simple (Écoute et concept, Conception et plans, Chantier et suivi et enfin Livraison clé en main) qui permet au visiteur de comprendre le processus en un coup d'œil. En clarifiant les étapes, on lui redonne le contrôle.
C'est difficile de faire confiance à une entreprise sans visage. On a souvent peur d'être considéré comme un simple dossier. Pour la section Qui sommes-nous ?, j'ai donc tout misé sur la proximité. En affichant un portrait réel et des engagements clairs, on brise la glace. Le visiteur voit tout de suite qu'il y a une vraie personne derrière l'écran, prête à l'écouter, et ça crée un lien immédiat.
Quand il s'agit de signer pour un gros budget travaux, la peur de se tromper est immense. C'est souvent ce qui empêche de se lancer. J'ai donc utilisé les témoignages comme un véritable outil de décision, pas juste pour faire joli. En affichant des avis authentiques et précis (basé sur les personas), je laisse les anciens clients convaincre les nouveaux. C'est une validation par les pairs qui rassure bien plus qu'une promesse commerciale
Le plus dur pour un client, c'est souvent d'imaginer le résultat final quand il est face à des travaux. Pour l'aider à se projeter, j'ai misé sur l'efficacité d'un comparatif Avant/Après. En plaçant simplement la photo de l'existant juste à côté du résultat rénové, la transformation saute aux yeux. Pas besoin de longs discours : le client constate la métamorphose en un regard et comprend tout de suite la valeur ajoutée de CA'ZEN.
Rien de pire qu'un formulaire à rallonge pour décourager quelqu'un qui hésite encore. Pour la page Contact, j'ai fait le ménage : on ne demande que l'essentiel. Mais surtout, j'ai ajouté un petit texte explicatif juste à côté. Il précise exactement ce qui va se passer après l'envoi (délai de 48h, appel téléphonique). Le client ne lance pas une bouteille à la mer : il sait qu'il sera pris en charge, et ça change tout.
Du Statique à l'Interactif
Le passage sur Webflow était une initiative personnelle visant à dépasser le stade de la simple maquette. Je ne voulais pas seulement imaginer l'interface, mais la construire. Cette étape m'a permis de confronter mes choix de design aux réalités du web, notamment en matière de comportement responsive et de fluidité.
Fidélité et Adaptation
L'objectif principal était de préserver l'identité et l'ambiance apaisante définies lors de la phase de conception. Comme le montrent les comparatifs ci-dessous (Maquettes Figma vs Site live), j'ai veillé à conserver la hiérarchie typographique et l'équilibre des espaces blancs, essentiels à la promesse de sérénité. Le développement a permis de transformer des images statiques en une structure HTML/CSS propre et cohérente.
L'Apport de l'Animation
Le déploiement sur Webflow a également permis d'intégrer la dimension temporelle absente de Figma. J'ai ajouté des micro-interactions (effets de survol, apparitions progressives au scroll) qui guident l'œil de l'utilisateur et renforcent le sentiment de fluidité et de modernité de la marque.
.png)
Maquettes Figma
Ces maquettes représentent l'aboutissement de la phase de design sur Figma. Chaque élément, de la typographie aux couleurs apaisantes, a été choisi pour incarner la sérénité et la confiance. Elles définissent la structure UX/UI pensée pour résoudre les points de douleur du client.
Déploiement Webflow
Visitez en direct le
Site Web CA'ZEN.