Introduction
Project Overview
📌 What:
The Sound Garden website was designed to be used by people of all ages and levels of experience who are interested in discovering and learning about classical music.
👩💻 My Role:
UX/UI Designer – responsible for research, design, and prototyping.
Solving Problems
The problem:
Classical music listeners often struggle with:
-
Finding and accessing information relevant to their level of knowledge.
-
Discovering engaging experiences suited to their background.
-
Feeling confident engaging with classical music, regardless of their prior experience.
The goal:
Design an intuitive website that allows users to:
-
✅ Discover curated playlists and engaging content.
-
✅ Access relevant information and resources.
-
✅ Explore options for 1:1 or online learning.
-
✅ Engage with classical music in a simple and inviting way.
Impact:
At the beginning of the project, the site was averaging 86.67 sessions per month and 713.33 blog visits (from January 2024).
The design project was completed in July 2024; after one month of design implementation, the impact was already evident!
Data:
1-27 September vs. August 2024 analytics:
+349% site sessions
+ 409% post views
+321% unique visitors
Process
User Research
Methods:
-
🔎 Social media groups & online forums – to identify common discussions and pain points.
-
🎤 Informal interviews – gathered insights from friends, colleagues, and students.
-
📖 Articles & blog posts – researched perspectives on online classical music access.
-
📊 Surveys – collected data on users' needs for classical music content online.
Key Findings:
-
🚧 Outdated & clunky design – Many classical music websites feel old-fashioned and lack centralised information.
-
📚 Navigation barriers – Users struggle with jargon-heavy interfaces and unclear site structures.
-
🔎 Information overload – Excessive content makes it difficult to find relevant resources.
-
📵 Poor accessibility – Unresponsive designs hide or complicate access to key content.
The User
I created four personas based on my research, and created journey maps for each one in order to predict how they might use the site. This enbabled me to identify potential issues, and brainstorm solutions.
Sarah Smith – A homeschooling mother seeking engaging classical music resources.
❌ Struggles to find age-appropriate materials.
❌ Needs clear, child-friendly resources.
❌ Wants learning to be exciting and effective for her children.
💡 Solution:
Create a well-organised platform with engaging, educational content tailored for young learners.
Competitive Analysis
I completed a competitive audit of several classical music and general educational websites to:
-
✔ Analyse their layout and user experience.
-
✔ Understand how these websites present content and engage users.
-
✔ Identify potential design flaws and pinpoint areas where my site could offer a superior experience.
Wireframes: Paper and Digital
Wireframing & Prototyping:
-
📝 Paper Wireframes – Sketched 5 versions of the Homepage, Discover, and Learn pages to explore layout ideas.
-
💻 Digital Wireframes – Combined the best elements into a refined design, including responsive tablet and mobile versions.
-
🎯 User-Centered Structure – Ensured intuitive navigation, guiding users to relevant content based on their interests and experience level.
Usability Studies
After developing both low-fidelity and high-fidelity prototypes, I conducted usability studies to evaluate technical functionality, identify user flow issues, and highlight areas for improvement. The same group of participants completed both tests for consistency.
Low-Fidelity Prototype Feedback:
🔹 Unnecessary section on the “Learn” page combining lessons, products, and courses.
🔹 Extra buttons that could be replaced with a single clear CTA.
🔹 Lack of placeholder text, making navigation unclear.
✅ Adjustments Made: Streamlined content, removed redundant buttons, and added guiding text for clarity.
High-Fidelity Prototype Feedback:
🔹 No direct path from “Discover” to “Learn” page.
🔹 The “Learn” page felt too sales-driven - users wanted free resources.
🔹 Needed more diverse courses/products to suit different personas.
✅ Adjustments Made: Added direct navigation between key pages, incorporated free resources, and expanded learning options to improve user engagement.
Final Design
Hi-fi prototype to final design
Final design during case study process.
More recent "real life" implementation with updated design elements.
🎨 Adjustments:
✅ Designed additional pages to complete the user journey and ensure full site flow. I had to adapt my design a little to the constraints of the Wix Studio software/my no-code abilities.
✅ Streamlined user flow by reducing the number of buttons on each page, focusing on clarity and ease of navigation.
✅ Planned future targeted content to better suit users.
✅ Enhanced responsive design by applying new technical skills to improve mobile and tablet versions.
Reflections
🔜 Future Enhancements:
-
✅ Continue to assess user needs (surveys and user feedback, analytics, etc). and improve with data-driven insights.
-
✅ Develop and incorporate additional content tailored to the user personas.
-
✅ Continue refining the UI for a more immersive experience throughout the site.