Étude de cas : Refonte de site Wix

Résumé

En tant que consultante UI / UX designer pour la société Bonheur de naître : réaliser un audit d'expérience utilisateur rapide puis proposer des maquettes simplifiées. Les maquettes devaient ensuite être intégrées sur un site Wix.

 Une nouvelle mission réalisée avec succès, discussion fluide, suivi impeccable. Force de proposition ++
Merci beaucoup je recommande les yeux fermés ! 

Contenu pour les lecteurs d'écran

Présentation du projet

Refondre le site d’une spécialiste naissance et bien-être.

Besoin

Été 2024. La société Bonheur de naître souhaite optimiser le design d’interface de son site et fluidifier le parcours de ses clients.

Contexte

Le site web initial présente une architecture complexe, des problèmes de lisibilité et de densité de l’information. Quelques soucis d’équilibre visuel impactent également la clarté de l’information et l’engagement.

Objectif

Refondre le site pour lui conférer un aspect épuré, moderne, plus intuitif, afin d’améliorer la confiance et l’engagement.

Objectif secondaire

Créer une landing page contenant un produit gratuit dans le but d’inscrire des utilisateurs à une newsletter, également à concevoir.

  • Audit UX
  • Conception
  • Intégration

1. Audit UX

Prendre connaissance du site existant et de son contexte.
  • Quelle cible ?
  • Quel univers graphique ?
  • Quelle ligne éditoriale ?
  • Quels parcours types ?
  • Quelle concurrence ?
Analyser les principaux critères d’une expérience utilisateur optimale.
  • Objectif et ciblage
  • Architecture et navigation
  • Interactivité
  • Organisation à l’intérieur des pages
  • Rédaction et graphisme
  • Accessibilité
  • Responsivité
Résultats clés de l'audit rapide
  • Complexité du parcours de réservation de service : il existe deux façons de réserver au lieu d’une et le feedback est perfectible
  • Arborescence non intuitive : certains contenus peuvent être mieux regroupés et les intitulés des onglets peuvent être plus clairs
  • Problèmes de lisibilité et de cohérence visuelle occasionnant une surcharge cognitive
  • Page d’accueil peu engageante : toute l’étendue du savoir-faire ne transparait pas et les avis sont trop discrets

2. Conception

L’arborescence actuelle est mise à plat et retravaillée.
  • Enjeu : proposer une arborescence compatible avec les exigences de référencement naturel
  • Résultat : une navigation contextuelle est ajoutée pour une navigation plus efficiente
Une veille concurrentielle et créative est initiée.
  • Repérer les meilleures pratiques du secteur
  • Créer des maquettes filaires (wireframes) - à ce stade, on se concentre sur la disposition des éléments et non l’aspect final

Création de Moodboard pour synthétiser les intentions de design d’interface

Améliorations effectuées
  • Les pages de second niveau sont conçues selon la même structure pour faciliter l’apprentissage de l’utilisateur
  • Un raccourci permet d’accéder directement à la section de réservation, et un second d’atteindre la page parent
  • Des blocs très visuels sont intégrés, avec des pictogrammes, des arrière-plans variables et une disposition en boîtes - le but est de compartimenter l’information pour faciliter son appréhension par l’utilisateur

3. Intégration

Intégration de bonnes pratiques d’accessibilité (dans la mesure du possible).
  • La mise en place d’accessibilité via le CMS Wix est très complexe du fait de la non possibilité de modifier le code html. Dans la mesure du possible, les images décoratives ont été pourvues d’un attribut alt vide et les couleurs ont été optimisées au maximum pour ne pas dénaturer la charte et offrir un contraste suffisant.
Marge de progression
  • Accessibilité, il faudrait : que l’ordre de focus soit cohérent sur tout le site, personnaliser l’attribut “alt” (ou “title” selon le cas) des boutons, un contraste encore meilleur, il faudrait également pouvoir zoomer la page sans tronquer, ...
  • Éco-conception, il faudrait : 
des images plus légères, moins de Javascript et de requêtes externes, du lazy-loading, un hébergement peu polluant, retirer un des deux formulaires de la landing page, ...
La mise en place de la landing page suit une stratégie précise :
  • Un titre attrayant : donner envie de consulter la page
  • Un mockup du produit : “teaser” le produit à l’aide d’un visuel attrayant
  • Deux formulaires d’inscription : conclure le cheminement de l’utilisateur par une action
  • Une section “Témoignages” : engager le visiteur à l’aide de preuves sociales
  • Une section “Qui je suis” : mettre en avant la personne et les valeurs derrière le produit

Un nouveau logo est conçu et décliné pour s’adapter aux différents besoins du site : favicon, puce de liste, logo avec le texte seul, logo avec le graphisme seul

Résultat

La refonte est en ligne depuis juillet 2024, on constate aujourd’hui :

  • Les pages détaillant les services sont consultées en moyenne 1 minute 30
  • 18 % des utilisateurs arrivant sur l’accueil quittent le site et 82 % explorent le site
Lien vers le site Bonheur de naître (nouvel onglet, des changements ont pu être apportés depuis la refonte)