Score Visualization Website

Sheet music database that helps musicians browse classical sheet music in a timely and efficient manner.

The Problem

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
difficulty.

Our goal was to create a solution that helps musicians browse and download classical sheet music in a timely and efficient manner.

Objective

Develop an interactive web experience that helps musicians better navigate a score database as well as visualize score recommendations.

Background

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.

Project Duration

February – May 2021

Scope

  • UX/UI 
  • UX Researcher
  • Prototyping
  • Wireframing
  • User Testing

Tools

  • Figma
  • Illustrator

Team

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

Problem Statement

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.  

Potential Users

  • 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.

Interviewees

  1. 51-year-old classically trained pianist and piano teacher. She is female and East Asian. 
  2. 30-year-old casual and occasional piano player and guitarist. He is a white, male American.

Interview Questions

  1. Can you introduce yourself (age, gender, race/ethnicity) and how long you’ve been reading sheet music? 
  2. How would you describe your sheet music reading ability?
  3. How do you pick what sheet music to learn/play? 
  4. How does your sheet music search process typically go? 
  5. What sheet music websites/sources do you currently use? 
  6. What are your complaints about sheet music websites/tools?
  7. What are some improvements you’d like to see?  
  8. 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.

  1. 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.
  2. 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.
  3. 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. 
  4. 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.

Target users:

  1. Teachers
  2. Amateurs
  3. Professional players

The target users require their own specific needs:

  1. Teachers selecting scores for bands/orchestras will generally choose from a wider selection of music for educational purposes and specific performances.
  2. Amateur players trying to learn their selected instruments will lack musical knowledge and will need help in knowing what’s available and suitable.
  3. 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.

Duo-Wei’s sketches

Michelle’s sketches

We then compared our sketches to decide how to move forward design-wise. We found the following in common:

  1. An assessment/questionnaire to better understand the user’s needs.
  1. Audio preview that’s accompanied by a preview of the sheet music.
  2. Filtering system. While we agreed there needs to be one, we differed on our approaches. Here is what we concluded:
    1. Inspired by the filtering systems on clothing websites
    2. We liked the idea of a circle-type of filtering system, but we’re not exactly sure what that would look like.
    3. 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:

Welcome Assessment

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.

Search function:

The search bar auto-populates with popular searches.

Recommendation system

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.

Key Actions

  1. Search a Composer/Song
  2. Filter & save music
  3. Purchase sheet music
  4. Complete initial assessment
  5. Use recommendation system

Testers

4 users with various levels of music expertise.

Questions

  1. Would you want to repeat something like the beginner assessment?
  2. Do you think the assessment gauged your abilities well?
  3. How did you find using this tool to search and purchase sheet music?
  4. What did you think of the layout of the content?
  5. Can you think of another product that resembles this one?
  6. What didn’t you like about this product?
  7. Would you use this on another device? Is so, what would you use this product on? 
  8. When would you use this tool?
  9. Was there anything you expected to find that wasn’t there?
  10. Did you find everything you were looking for?
  11. 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:

  1. The beginning assessment will be eliminated entirely
  2. There needs to be a specific goal or feature in relation to sheet music searching that is made clear to users.
  3. 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. 
  4. Further research will be done to find successful UI in sheet music tools rather than flawed design examples.

Final Design

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.

Homepage:

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. 

Search Process:

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.

Category Search:

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.

Recommended Piece:

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.

Reflections

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!

Struggles

  • Defining musical “difficulty”
  • How to account for many target users
  • How to create useful yet standardized categories

Successes

  • Centralized tool
  • Ability to see recommend pieces and composers

Next steps

  • Research musicians on measuring difficulty
  • More user testing