Score Visualization Website
Sheet music database that helps users 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 possible solution that helps people browse classical sheet music in a timely and efficient manner.
Objective
Create a web experience that helps musicians visualize score recommendations as well as provide an interactive tool to better navigate a score database.
Background
In my Interaction Design course, a handful of students pitched projects that could benefit from UX Research & Design. Topics included: redesigning a crafting website, AR/VR museum experience, tarot tabletop website, and a score visualization website.
I selected the score visualization website 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, wishes, as well as user input.
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
- Conducted user interviews
- Sketched wireframes
- Conducted user testing
- Created a functional Figma prototype
- Responsible for final 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 and I learned so much during the process. 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
The design problem for this project centers around whether or not we can create a tool that can display visualizations of scores/sheet music in an effective and useful manner. Accomplishing this task requires some type of interface (i.e., a website with data visualization) that is intuitive to use and aesthetically appropriate.
Key Questions: What kind of tool could improve the search for sheet music? What are the potential features it could have?
- Create a visualization of scores based on its mood, instrument families, key signature, difficulty level, time period, etc. This must be done in an easy-to-understand way so that the search is efficient.
- Navigate the database in a systematic and efficient way so the user can find a piece that fulfills their needs. This may be done in several ways:
- Rating system (potentially flawed if not handled properly, as users may have a bias towards certain composers)
- Recommended pieces with similar features
- Decide appropriate time to display the composer name, title, and score preview
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
Competitive Analysis
The next step in the design process is understanding the current market and trends. Therefore, we completed a competitive analysis. There are many sheet music databases out there, and we wanted to determine how they are successful and where the shortcomings are.
User Interviews
After better understanding the sheet music database environment, we wanted to learn more from musicians who interact with these websites.
Interviewees
- A 51-year-old classically trained pianist and piano teacher. She is female and East Asian.
- A 30-year-old casual and occasional piano player and guitarist. He is a white, male American.
Interview Questions
- 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?
Key Themes
- Price
- Music Selection
- Difficult navigation process
Conclusions:
- 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.
Problem Statement Revisited
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:
- Teachers
- Amateur
- 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.
Besides browsing at a music store, there are many online sources that are being used by musicians. Here are some popular choices:
- Categories are geared for teachers & conductors.
- Sheet music includes a SoundCloud audio snippet.
- The price of each piece is clearly listed.
- Provides audio sample, score preview, and download of sheet music.
- Filters based on instrumentation and genre (tv music, games, Christmas, etc.)
- Includes public domain pieces
https://www.scribd.com/sheetmusic
- Requires a subscription and is not a source limited to classical music.
- Filtered by Genre, Instrument, Difficulty.
- Ability to rate music with stars & written comments.
- Able to pick piano music based on genre, themes, artists, countries and much more.
- Divides music into difficulty level (Super Easy, Easy, Intermediate, Expert).
- This site is more visual-based than others so it could be a good reference for visualization purposes.
Essential functions:
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.
Sketches & Wireframes
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:
- 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.
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.
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
Search function:
The search bar auto-populates with popular searches.
Homepage:
Consists of a library (previously downloaded sheet music), wishlist (sheet music of interest), and recommendations
Radio station:
Users can listen to music and at the same time view its sheet music, the background of the composer and piece, video performances, and similar pieces. They may purchase the sheet music if they wish to.
User Testing
Key Actions
- Search a Composer/Song
- Filter & save music
- Purchase sheet music
- Complete initial assessment
- Use recommendation system
Testers
4 testers with various levels of music expertise.
Questions
- 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?
Findings from User Testing
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.” All in all, user testers believed this section was unclear and problematic.
Other sections of the assessment were also confounding for the user testers. For example, one user found the page that asked for key signatures preferences irrelevant to their music selection process because they were a beginner. They also wished that this section, if kept, visualized information in a more engaging manner. Another user agreed with this sentiment, stating that “as a beginner player, the key signatures don’t really matter” and that she “never picked a song because of a key signature.” A third user said that customers will not want to buy sheet music in this manner and that they already generally know what they want.
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?”
Another user believed the homepage should be minimal: only a search bar & maybe recently downloaded music. From her perspective, “the wishlist – if you were to keep that – should be a sidebar item. I don’t need to see that every time I log in. I want to search for a song and see a high-quality transcript.”
In all, the wording, categories, and the number of options on the homepage did not excite users. They felt confused by the number of options and how it pulled their attention in multiple ways.
Categorizing music is an enormous challenge with many varying perspectives. There was not a unanimous opinion on the website’s categorization system. Some users like the pre-populated categories of genre, composer, instrument. Others thought the categories should match the information from the initial assessment – key signatures, instruments, time signatures, etc. One user who considers himself a beginner musician liked that the categories included playlists created by the Editing Team, whereas another beginner user did not care to see that.
The reason they struggled with the categorization is that all users mentioned that they typically search for a particular piece on a particular instrument, i.e. “ ‘Hotel California’ sheet music, piano.” The only categories that severely impacted them were instrumentation and perhaps difficulty. However, describing difficulty is a project worthy of its own development.
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.
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 user is partial to. 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.
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.
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 the example above, 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.
Preview Sheet Music:
If users click on the drop-down menu they may preview the music, read the background of the composer, watch a video performance of the piece, and view similar pieces.
Purchase:
If users add the piece to their cart, they have several choices from this point:
- Uncheck to remove the piece from cart
- Add more or fewer copies of the piece
- Go back to browse more music
- Purchase the music
After this, they may download the sheet music and find more music
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!
You must be logged in to post a comment.