Introduction
Le projet
📌 Quoi :
Le site web Sound Garden a été conçu pour être utilisé par des personnes de tous âges et de tous niveaux d'expérience qui souhaitent découvrir et apprendre la musique classique.
👩💻 Mon rôle :
UX/UI Designer, Développeur No-Code – Responsable de la recherche, de la conception, du prototypage, de la mise en page et de l'intégralité du développement.
⌛ Durée du projet :
2 semaines (pour les premiers user flows)
📱 Plateforme :
Site-web
🏭 Industrie :
Arts et culture
Résolution de problèmes
Le problème:
Les auditeurs de musique classique rencontrent souvent des difficultés pour :
-
Trouver et accéder à des informations adaptées à leur niveau de connaissance.
-
Découvrir des expériences captivantes correspondant à leur parcours.
-
Se sentir confiants pour s’engager avec la musique classique, quel que soit leur niveau d’expérience préalable.
L’objectif : -
Concevoir un site web intuitif permettant aux utilisateurs de :
✅ Découvrir des playlists sélectionnées et du contenu engageant.
✅ Accéder à des informations et ressources pertinentes.
✅ Explorer des options d'apprentissage en ligne ou en 1:1.
✅ S’engager avec la musique classique de manière simple et accueillante.
Impact:
Au début du projet, le site enregistrait en moyenne 86,67 sessions par mois et 713,33 visites de blog (à partir de janvier 2024).
Le projet de conception s'est achevé en juillet 2024 ; après un mois de mise en œuvre de la conception, l'impact était déjà évident !
Données:
1-27 septembre vs. août 2024 analytics :
+349% de sessions sur le site
+ 409 % de consultations d'articles
+321% de visiteurs uniques
Processus
Recherche sur les utilisateurs
Méthodes :
-
🔎 Groupes sur les réseaux sociaux et forums en ligne – pour identifier les discussions courantes et les points de douleur.
-
🎤 Interviews informelles – recueilli des informations auprès d'amis, collègues et étudiants.
-
📖 Articles et billets de blog – recherche des perspectives sur l'accès à la musique classique en ligne.
-
📊 Enquêtes – collecté des données sur les besoins des utilisateurs concernant le contenu de musique classique en ligne.
Principales conclusions :
-
🚧 Design obsolète et encombrant – De nombreux sites de musique classique semblent dépassés et manquent d'informations centralisées.
-
📚 Barrières de navigation – Les utilisateurs ont du mal avec des interfaces remplies de jargon et des structures de sites peu claires.
-
🔎 Surcharge d'informations – Le contenu excessif rend difficile la recherche de ressources pertinentes.
-
📵 Accessibilité limitée – Des designs non responsives cachent ou compliquent l'accès aux contenus essentiels.
L'utilisateur
J'ai créé quatre personas sur la base de mes recherches et créé des user journeys pour chacun d'eux afin de prédire comment ils pourraient utiliser le site. Cela m'a permis d'identifier les problèmes potentiels et de réfléchir à des solutions.
Sarah Smith – Une mère qui enseigne à la maison, à la recherche de ressources engageantes en musique classique.
❌ A du mal à trouver des matériaux adaptés à l'âge de ses enfants.
❌ Besoin de ressources claires et adaptées aux enfants.
❌ Souhaite que l'apprentissage soit à la fois excitant et efficace pour ses enfants.
💡 Solution :
Créer une plateforme bien organisée avec un contenu éducatif attrayant et adapté aux jeunes apprenants.
Analyse de la concurrence
J'ai réalisé un audit concurrentiel de plusieurs sites de musique classique et d'enseignement général pour :
-
✔ Analyser leur présentation et leur expérience utilisateur.
-
✔ Comprendre comment ces sites web présentent le contenu et engagent les utilisateurs.
-
✔ Identifier les défauts de conception potentiels et repérer les domaines dans lesquels mon site pourrait offrir une expérience supérieure.
Wireframes : papier et numérique
Wireframing et prototypage :
-
📝 Wireframes papier – Esquissé 5 versions des pages d'accueil, Découvrir et Apprendre pour explorer différentes idées de mise en page.
-
💻 Wireframes numériques – Combiné les meilleurs éléments pour créer un design affiné, incluant des versions responsive pour tablette et mobile.
-
🎯 Structure centrée sur l'utilisateur – Assuré une navigation intuitive, guidant les utilisateurs vers du contenu pertinent selon leurs intérêts et leur niveau d'expérience.
Études d'utilisabilité
Après les phases de basse fidélité et de haute fidélité du processus de conception, j'ai réalisé des études d'utilisabilité pour évaluer si mes conceptions fonctionnaient comme prévu sur le plan technique, identifier les problèmes survenus pendant le parcours utilisateur et mettre en évidence les domaines à améliorer. Le même groupe de personnes a réalisé les deux tests d'utilisabilité.
Commentaires sur le prototype basse fidélité :
🔹 Section inutile sur la page "Apprendre" combinant les leçons, produits et cours.
🔹 Boutons superflus pouvant être remplacés par un CTA unique et clair.
🔹 Absence de texte de remplacement, rendant la navigation peu claire.
✅ Modifications apportées : Contenu simplifié, suppression des boutons redondants et ajout de texte guide pour plus de clarté.
Commentaires sur le prototype haute fidélité :
🔹 Absence de chemin direct entre la page "Découvrir" et la page "Apprendre".
🔹 La page "Apprendre" semblait trop axée sur la vente - les utilisateurs voulaient des ressources gratuites.
🔹 Besoin de plus de cours/produits variés pour répondre aux différents profils d’utilisateurs.
✅ Modifications apportées : Ajout de la navigation directe entre les pages clés, intégration de ressources gratuites et élargissement des options d'apprentissage pour améliorer l'engagement des utilisateurs.
Conception finale
Du prototype à la conception finale
Conception finale au cours du processus d'étude de cas.
Mise en œuvre la plus récente, avec des éléments actualisés.
🎨 Améliorations :
✅ Conçu des pages supplémentaires pour compléter le parcours utilisateur et garantir une fluidité complète du site. J'ai dû adapter mon design aux contraintes du logiciel Wix Studio et à mes compétences en no-code.
✅ Simplifié le flux utilisateur en réduisant le nombre de boutons sur chaque page, en mettant l'accent sur la clarté et la facilité de navigation.
✅ Planifié du contenu ciblé pour mieux répondre aux besoins des utilisateurs.
✅ Amélioré la conception responsive en appliquant de nouvelles compétences techniques pour optimiser les versions mobile et tablette.
Réflexions
🔜 Améliorations futures :
-
✅ Continuer à évaluer les besoins des utilisateurs (enquêtes, retours d’utilisateurs, analyses, etc.) et à améliorer le design grâce à des insights basés sur les données.
✅ Développer et intégrer du contenu supplémentaire adapté aux personas utilisateurs.
✅ Affiner continuellement l'interface utilisateur pour offrir une expérience plus immersive sur l'ensemble du site.