Un nouveau regard.
Le Blog
Le Contexte
50 ans dans le vent est un blog consacré aux femmes quinquagénaires, mêlant conseils, actualités et humour autour de la beauté, de la santé et du bien-être. Repris par Claire, il reflète un état d'esprit assumé : dynamique, léger, plein de bonne humeur.
Lors de notre première rencontre, la cliente a partagé ses attentes pour la refonte et nous avons discuté des contraintes liées au template WordPress existant.
Challenge
Comment moderniser le blog pour qu'il reflète le dynamisme et la légèreté des femmes quinquagénaires, tout en améliorant la visibilité de la boutique ?
Processus & Rôle
Contexte
Mission freelance :
Proposition de refonte
Mon rôle
UI Designer
Processus
Audit UX
Architecture de l'information
Wireframes
Design d'interface
Audit UX
Pour identifier les points bloquants du blog actuel, j'ai réalisé un audit UX en m'appuyant sur les critères d'utilisabilité de Jakob Nielsen.
| Critères | Gravité | Identité |
|---|---|---|
| Homogénéité | 2/3 | Deux univers visuels distincts cohabitent : l'un enfantin, l'autre sérieux. |
| Clarté | 3/3 | Surcharge d'informations, publicités envahissantes et boutique peu visible. |
| Récupération | 2/3 | Le panier ne se maintient pas lors de la navigation entre les pages. |
| Facilitation | 1/3 | Site partiellement responsive. Cliquer sur l'image plutôt que le titre pour lire un article. |
Wireframes
Architecture de l'information
L'audit a mis en évidence deux priorités : la clarté et l'homogénéité. J'ai restructuré le menu en séparant les catégories principales et secondaires pour une navigation plus intuitive. Le menu a été validé avec quelques ajustements avant de passer à l'étape des wireframes.
Wireframes
À partir de la nouvelle architecture, j'ai conçu les wireframes de la page d'accueil en prenant comme référence le site La Bonne Gueule. Ce site a séduit la cliente par son esthétique sobre et professionnelle, tout en véhiculant une image conviviale et accessible.
Ces wireframes ont servi de base de réflexion. Certains éléments ont été réorganisés lors de la conception des maquettes.
Design d'interface
Charte graphique
Le blog n'avait pas de charte graphique définie, uniquement un rose foncé et un vert identifiés comme couleurs principales. En m'inspirant du site La Bonne Gueule, j'ai choisi de simplifier la palette en conservant le rose comme couleur principale, en supprimant le vert pour éviter la surcharge visuelle, et en introduisant des tons jaunes pour transmettre la bonne humeur et la légèreté recherchées par la cliente.
Propositions de maquettes
Maquettes haute-fidélité
Les maquettes finales ont été présentées et validées avec la cliente. En raison des contraintes techniques liées au template WordPress existant, la refonte est restée au stade de proposition.
Conclusion
Ce projet m'a permis de mener une démarche UI complète, de l'audit jusqu'aux maquettes responsives et d'expérimenter la relation client en freelance.
Avec le recul, j'aurais dû anticiper davantage les contraintes techniques liées à WordPress dès le lancement du projet. Cette expérience m'a appris qu'il est essentiel de cadrer les aspects techniques en amont, au même titre que la démarche de design.
Ressources
- Figma : L'outil Figma.
- 50 ans dans le vent : Le blog
Découvrir les autres projets
- Pen Pal App : Connecter des enfants ougandais au monde entier.
- EmoDaily : Un espace pour exprimer ses émotions.
Prendre contact
Rejoignez-moi sur les réseaux sociaux pour voir plus de contenu.