Refonte Mü être v2
- Rôle
- Audit, UI/UX, design system, supports imprimés
- Durée
- 4 semaines
- Outils
- Figma, Adobe Xd ; Illustrator ; Canva
- Contexte
- Client réel : Entreprise de QVCT
Brief : Refondre le site d'une marque de bien-être et de développement personnel dont la navigation, la hiérarchie de l'information et la typographie nuisaient au message.
Objectif : Alléger la charge mentale : trouver la page de contact ou comprendre un accompagnement sans effort.
Livrables : Audit et refonte UI/UX, design system et UI Kit, charte graphique, carte de visite, plaquette.
Point de départ : l'audit
Mü-Être est une marque de bien-être et de développement personnel. L'audit page par page du site original a relevé trois défauts : une navigation confuse, aucune hiérarchie de l'information et des choix typographiques peu lisibles. Ces défauts allaient à l'encontre du message de la marque.
Réduire la charge mentale
Trouver la page de contact ou comprendre un accompagnement ne doit demander aucune recherche. Le zoning identifie 8 zones à retravailler en priorité. Les wireframes testent plusieurs agencements pour les contenus denses : la FAQ et les articles de blog.
Design system et supports
J'ai conservé l'ADN de la marque et recalibré les couleurs, les mascottes et les éléments graphiques pour gagner en cohérence. La mascotte existe en 3 versions (violet, jaune, noir et blanc) et en variantes d'émotions. Le design system et l'UI Kit sont déclinés sur la charte graphique, la carte de visite et la plaquette.
Lisibilité et parcours
Les blocs de texte denses sont remplacés par des sections aérées, avec des espaces blancs plus larges. Les contrastes sont renforcés (ratio de contraste du texte : 2.28 → 11.84) et l'interlignage est ajusté pour la lecture des articles de blog. La hiérarchie guide le visiteur de l'accueil jusqu'à la prise de contact et la réservation (8 comparaisons avant/après ci-dessous).
Ce que j'en retiens
Sur un site lié au bien-être et à la santé mentale, j'ai privilégié la sobriété à l'effet visuel. L'accessibilité et la clarté du parcours ont primé : le design du site ne comporte pas d'animation. La réduction de la charge cognitive est devenue le critère de validation de chaque écran.
Résultats
Tous les livrables,
dans un seul dossier.
Tous les documents du projet au format PDF, réunis dans une archive prête à télécharger.
