Melody Town Music
Design of a Traditional Iranian Musical instruments online shop
About Melody Town Music
This website is dedicated to assisting people in purchasing traditional Iranian instruments and learning how to play music.
Project Overview
8 Weeks
Timeline
Team
Group of 3
Role
UX/UI Designer
Tools
Figma, Figjam, Miro
Google Form, Canva, Zoom
Problem Statement
Target Users
The business has identified a gap in the market.
There isn't a comprehensive website that allows users to both:
Purchase traditional Iranian instruments online.
Learn to play these instruments through online classes.
Time-Consuming Multi-Platrform search : Users waste time searching across multiple platforms to buy instruments and find classes for their desired instrument.
Business Goals
Someone looking to purchase a traditional Iranian instrument online.
Someone looking to enroll in online music classes.
Teachers looking to offer online music instruction to students
Instrument Selection and Purchase
Enable users to easily choose and purchase the right musical instrument.
Student-Tutor Matching
Provide a system to connect students with suitable tutors for their specific instrument and learning needs.
Design Process
My team of 3 ran a Double Diamond method on the Design Thinking Methodology.
The process was not linear; we moved back and forth between stages for iterations as the project progressed.
Discover
Survey
55% of respondents preferred a certain brand (from only a few brands) that they are familiar with.
To better understand users and their problems, the following steps were undertaken:
Survey
User Interviews
Competitive analysis
Key Takeaways
Our survey shows that online musical instrument buyers highly value brand reputation, which we used as a filter option.
Our survey shows that purchase-related information and services are important, which we used to structure the product page.
The most important factors for respondents when buying musical instruments online are :
Detailed product descriptions (80%)
Return Policy (80%)
Warranty & Support (76%)
Customer reviews & Rating (68%)
We connected with more people to learn about their pain points, needs, and how they build trust in an online website when purchasing traditional musical instruments.
We iterated and repeated our survey several times.
Here are the final results.
Our survey had 9 questions, and 32 people responded.
Interview
In the first step, we aimed to gain a deeper understanding of our target users—specifically, individuals who are familiar with or have experience playing traditional Iranian musical instruments and have migrated to another country.
Conducted initial interviews with 10 individuals.
Explored their needs and pain points.
Identified key factors for purchasing instruments and attending music classes in a new environment.
Details of Instruments
Rate & Reviews
Brand of Instruments
Price
Return Policy
Delivery
From the interviews, we found that people like to connect with Iranian culture but need more details about instruments, brands, and reviews. They also have concerns about delivery, payment methods.
Affinity Diagram
Key Takeaways
By creating the affinity diagram, we identified the most important factors to consider :
Users need detailed information about instruments, including features, High-quality photos, materials, dimensions,and maintenance.
User seek recommendations on return policy,delivery options, and prices based on reviews and ratings.
Many users wanted to buy instruments online but were worried about the quality, so ratings and reviews were important to them.
Users want to have easy access to the return policy, delivery options, and price.
Competitive analysis
Key Takeaways
We analyzed websites selling musical instruments and successful platforms to understand their strengths and weaknesses. We added useful features from these sites, such as high-quality photos and user reviews, into our own website to enhance our information architecture and user flow.
Our website should highlight features such as online instrument purchases, online classes, concerts, and workshops, and show that it is a comprehensive and complete platform. It allows individuals to use our services based on their interests and limitations.
We also used these websites to see how we can improve existing features in line with the business definition and constraints, such as providing video samples of playing and instrument sounds, and high-quality photos of instruments, which were often missing on these sites.
Our goal is to create a better and more convenient experience for users.
Define
Persona
After conducting interviews, we identified a user persona for buying musical instruments from Melodytown Music: Athena Aria, who has moved to Germany and wants to start and continue playing her santur, a traditional Iranian musical instrument, after several years.
Site Map
Throughout the design process, user testing, and competitive analysis, we developed the final version of the site map.
Task Flow
User Flow
Here you can see the user flow in order to find and buy a musical instruments.
Develop
During the design process, we encountered several challenges that we worked to resolve.
Challenge 1:
Our first challenge was to ensure that when users visit the site, they can immediately recognize that we are a comprehensive music platform offering a wide range of music-related services.
Solutions:
Added a relevant hero image with a tagline or text.
Organized the navigation bar using information architecture with clear titles and relevant categories like "Store" for purchasing instruments, "Online Classes," "Concerts," and "Workshops."
Included a search function in the navigation bar for quicker user access.
Challenge 2:
Our second challenge was that users wanted to see more detailed but more concise and useful information about the instrument on the product page.
Solutions:
To solve this issue, we included detailed information such as high-quality images, a short video of the instrument, material, size, manufacturer, and price. We also provided information on services like delivery and return policy.
Sketches and wireframes
Low-Fidelity
By using simple hand sketching, we quickly explored ideas and improved team communication.
Home page
Shop page
Instrument page
Mid-Fidelity
Home page
Instrument page
Class page
We created mid-fidelity wireframes using Figma to gather ideas and facilitate communication and iteration before moving on to more detailed stages of the design process.
Usability test
Before testing
After testing
In our first design, users had trouble finding and buying instruments, so we changed the navigation bar and reorganized the categories to make it easier.
When users visited the website, they couldn’t connect with the hero image and quickly understand the purpose of the site. To improve this, we changed the hero image
Before testing
After testing
Product page:
On the cards with discounted items, the prices were still displayed in black even after the discount, making it hard for users to notice the discounted prices. Additionally, there was no "Add to Cart" icon on the cards.
so we changed discount price color to red and Add to Cart" icon to the cards.
Home page
Mood Board
We start by creating a mood board inspired by the traditional colors of buildings, such as the colorful glass windows, Persian rugs, handicrafts, and the vibrant hues of traditional Iranian musical instruments. This helps us establish the visual direction and overall aesthetic for the interface.
UI Kit
