Score Visualization Website
Sheet music database that helps musicians browse classical sheet music in a timely and efficient manner.
Currently, online sheet music sources have flaws or lack features that make the user experience intuitive and simple. Musicians are forced to use multiple resources in order to find high-quality sheet music according to their specific needs of instrumentation and
Our goal was to create a solution that helps musicians browse and download classical sheet music in a timely and efficient manner.
Develop an interactive web experience that helps musicians better navigate a score database as well as visualize score recommendations.
In the Interaction Design graduate course, a handful of students pitched projects that could benefit from UX Research & Design. I selected the score visualization pitch as I am a violinist and know first-hand the issues of sheet music databases. This project was my classmate’s master’s thesis and I wanted to help her accomplish a tangible goal that could advance her career.
She was my “client” in this experience. Alongside my teammate, Duo Wei, we designed this tool according to the client’s needs and feedback.
February – May 2021
- UX Researcher
- User Testing
Michelle Ramirez & Duo Wei Yang
What I worked on
- User interviews
- Sketched wireframes
- User testing
- High fidelity prototype using Figma
- Branding and aesthetic of website
- Recorded, edited, and narrated the website demo.
What I learned
This was my first experience with a semester-long UX/UI project. It was a great opportunity to apply design knowledge into tangible skills with a teammate. I learned how to conduct user interviews, collaborate with multiple stakeholders with different perspectives, and create live prototypes on Figma.
While I found this project particularly difficult – because it was so new to me – I fell in love with the process. This collaborative experience is what cemented my love for UX design!
Design & Iteration
How might we create a tool that can both visually recommend sheet music and make it easier to navigate desired scores?
Certain attributes that are desired by target users:
- Find desired music based on category types (e.g., genre, mood, types of instruments used).
- Understand what properties the sheet music has before downloading or buying it.
- Have clear information on the sheet music in the description in some shape or form.
Current support and flaws of sheet music search:
- Difficult and time-consuming because they don’t really allow for searching without the name or composer name.
- Some sites do allow the user to play a segment of the piece, but having to do that is time consuming or may not represent the theme of the entire piece.
- Information on the sheet music is often very minimal, which doesn’t help users who are not very informed.
- Individual performers or artists: they will likely find pieces based on personal interest in genre/time period
- Educators: they may be more inclined to find more well-known pieces as they are often easier to teach due to their popularity
- Conductors/music directors: they will likely find a diverse array of works as they are working with a group of musicians → many pieces to showcase
Step 1: Competitive Analysis
To begin the process, we completed a competitive analysis to understand current market and trends. The research allowed us to better understand their successes and shortcomings.
Step 2: User Interviews
After better understanding the sheet music database environment, we wanted to learn more from musicians who interact with these websites.
- 51-year-old classically trained pianist and piano teacher. She is female and East Asian.
- 30-year-old casual and occasional piano player and guitarist. He is a white, male American.
- Can you introduce yourself (age, gender, race/ethnicity) and how long you’ve been reading sheet music?
- How would you describe your sheet music reading ability?
- How do you pick what sheet music to learn/play?
- How does your sheet music search process typically go?
- What sheet music websites/sources do you currently use?
- What are your complaints about sheet music websites/tools?
- What are some improvements you’d like to see?
- How do you think sheet music databases can be improved in a visual way?
Step 3: Synthesis
After conducting the interviews, we found four key themes that impacted our designs moving forward.
- Users do not want to pay for sheet music. While this fact does not directly relate to the problem of visualizing sheet music, it’s an aspect that’s worth considering when designing the structure of the database tool.
- Users typically go to the website with a specific piece/composer in mind. This could (potentially) explain why current sheet music database tools don’t allow users to browse randomly for sheet music. This could also impact the usefulness of a recommendation tool.
- Users have to use multiple websites to compile enough information to download sheet music. They use Youtube, Google, sheet music websites, Spotify, and more, as all the information they require is rarely on one website.
- Interviewees agreed that the design of sheet music websites or tools are neither visually appealing nor user friendly. There was a slight indication that visualization could be helpful for beginners, but there wasn’t enough evidence to support this.
Step 4: Reframe Problem Statement
From what we gathered from the user interviews, interested parties use multiple sources (e.g., YouTube, Google, known websites, physical music stores, etc.) to decide and find sheet music.
Based on this fact, one potential solution is to establish a one-stop-shop where users can find direct links to the audio, have a clear sheet music preview, and an equally clear download option or link of purchase.
We also learned that difficulty level and experience play a role in determining sheet music. Depending on whether or not the user is an amateur or professional, it greatly impacted what they needed in terms of recommendations or visualizations in order to make final music sheet selections. From this, it makes sense to filter what recommendations are shown based on levels of music understanding.
Visualizations could also be more useful for amateurs, as they may not have the background or music teachers that can help them determine the level of difficulty and compatibility.
- Professional players
The target users require their own specific needs:
- Teachers selecting scores for bands/orchestras will generally choose from a wider selection of music for educational purposes and specific performances.
- Amateur players trying to learn their selected instruments will lack musical knowledge and will need help in knowing what’s available and suitable.
- Professional players will likely know what they need or want and will likely want the product at a quicker and efficient pace for an appropriate price.
Step 5: Prioritization
Understanding our target users needs, we prioritized our tool into three essential functions: filtering, search, and recommendation.
1. Filtering System
Musicians need to quickly filter music based on their needs (instrumentation, difficulty, genre, etc.)
2. Search Function
Musicians typically know what piece they are looking for. They need to quickly type in a search for a piece/composer and have all the information they require such as:
- Audio Snippet (Spotify, YouTube, Soundcloud)
- Preview of sheet music
- Ability to download sheet music or link to purchase
3. Recommendation Section
The exploration phase is more important for beginner users who have a difficult time thinking of new pieces to learn.
Step 6: Sketches
With the three main functions in mind, Duo Wei and I sketched wireframes that to accomplish these goals.
We then compared our sketches to decide how to move forward design-wise. We found the following in common:
- An assessment/questionnaire to better understand the user’s needs.
- Audio preview that’s accompanied by a preview of the sheet music.
- Filtering system. While we agreed there needs to be one, we differed on our approaches. Here is what we concluded:
- Inspired by the filtering systems on clothing websites
- We liked the idea of a circle-type of filtering system, but we’re not exactly sure what that would look like.
- We liked the idea of a “stickier” filter so information won’t disappear and force the user re-enter options.
Step 7: Wireframes
After confirming the main targets of the websites, and how we want to visualize them, we created wireframes in Figma for user testing. I was responsible for creating the welcome assessment pages and the homepage. The project’s wireframes consist of the following features:
The website opens up with a simple assessment to better understand the user. It includes questions like favorite songs, difficulty level, and preferred time signature.
The search bar auto-populates with popular searches.
Users can find sheet music that’s most popular at the moment according to category and “playlists” the editor team came up with
Step 8: User Testing
We conducted hour long user testing sessions with four musicians of various levels of experience.
- Search a Composer/Song
- Filter & save music
- Purchase sheet music
- Complete initial assessment
- Use recommendation system
4 users with various levels of music expertise.
- Would you want to repeat something like the beginner assessment?
- Do you think the assessment gauged your abilities well?
- How did you find using this tool to search and purchase sheet music?
- What did you think of the layout of the content?
- Can you think of another product that resembles this one?
- What didn’t you like about this product?
- Would you use this on another device? Is so, what would you use this product on?
- When would you use this tool?
- Was there anything you expected to find that wasn’t there?
- Did you find everything you were looking for?
- How would you improve this tool?
Step 9: Synthesis
TLDR: Welcome assessment was a bust
Multiple users found the welcome assessment difficult to use. Specifically, describing the user’s level on a scale from 1 to 6. Based on the UI that was shown, it was difficult to understand what each level meant. The musical notation on the side was also confusing and seemed irrelevant to what each level meant.
Additionally, there were concerns that assigning levels to sheet music was a very controversial thing to do.
One user stated it was “impossible to give standard to music on a numerical scale.”
TLDR: Filtering system doesn’t align with assessment
Two users appreciated the filtering system but were also confused by the provided options. They asked a similar question, “will the software remember my initial assessment? If so, why do I need to answer these questions again?”
Building upon this, one user, who considers herself a beginner, asked if the filtering system could use the same language from the assessment. For example, “why isn’t there a level 1, 2, or 3 in the filtering system? If I picked level 2 in the beginning but saw the music was pretty easy, I’d like to quickly pick a level 3 and check out those options.”
Another beginner player said he liked having the ability to include searches into the search bar in order to filter for a specific piece. He suggested that the filtering system includes a button similar to “feeling lucky” in order to provide recommendations. That way, users can see well-known composers if they’re in the mood for that, or learn about lesser-known composers.
TLDR: No correlation between assessment and homepage
After completing the initial assessment, users are directed to the homepage, which consists of a search bar, library, wishlist, and recommended section. This transition confused most of the users as they were uncertain why they took the initial assessment to begin with. There was no clear correlation between the quiz and results/recommendations.
One user suggested, “I wish there was a “ta-da” moment after taking the quiz with a list of recommended songs. If that was the point, then why are the recommended songs at the bottom of the page?”
Step 10: Iteration
Based on the findings from user testing we decided to move forward in the following ways:
- The beginning assessment will be eliminated entirely
- There needs to be a specific goal or feature in relation to sheet music searching that is made clear to users.
- The tool will be simplified in order to focus on a specific genre of music or array of instruments. It’s important to not encompass too many things as the musical field is diverse and complex.
- Further research will be done to find successful UI in sheet music tools rather than flawed design examples.
I was responsible for branding this website: color scheme, typography, and aesthetic. Considering how enormous sheet music databases are, I chose high contrast color scheme to help users quickly digest the information. Most sheet music websites are monochromatic making it difficult to see what’s important and not.
While I knew high contrast would help the user find their preferred music, it was important to use colors that were not so bright as to bother the user after some time. Therefore, I used dark blue & yellow; they offered a great contrast while being easy on the eyes.
Users are first greeted by the homepage. This page is a starting point for the features of the tool, such as recommended pieces, categories based on musical time period, and so on. The left sidebar consists of specific lists of music that the musicians may like. If users hover over the menu bar below the search bar, they can find specific styles or subgenres. Users typically seek sheet music with a specific piece/composer in mind, therefore we made the search bar the most prominent feature.
If the search bar is used, users will find top results based on their search. Further, they will see composers/pieces that are similar to what they just searched. In this example, the user will see the top results for “Mozart” as well as composers that are similar. While we recognize not all users will be interested in similar pieces/composers, we give this option in order to broaden horizons.
If users click on one of the categories on the homepage, they will see a page that looks like this. There will be playlists curated by the management team and this week’s top pieces according to popular search and the management team. The user may find more specific options with the filter option. The example shown above is after the user selects piano-only pieces.
If the user clicks on one of the pieces in the recommended section, they can preview the sheet music, its background, a video performance of it, and similar pieces to it. They can easily add it to their cart if desired.
The ability to listen to a selected piece, read the sheet music, learn about the composer, and see related pieces all in one place is much more efficient and centralized. Hopefully, the days of using five or six websites to find one piece are behind us or much less common.
Another feature that is small yet fun is the ability to search for music by swiping left & right. Users will also have the ability to see a page full of music, which is typical of current sheet music websites. However, we like that there is a more modern approach to the search that reflects gestures users are familiar with in other platforms, such as Tinder. We think it makes the interaction a bit more pleasurable and aesthetically pleasing. Plus, it pushes sheet music UI into the future!
- Defining musical “difficulty”
- How to account for many target users
- How to create useful yet standardized categories
- Centralized tool
- Ability to see recommend pieces and composers
- Research musicians on measuring difficulty
- More user testing