UX/Product Designer
LyricsHub - A Lyric-centric Music Platform
Have you ever heard a familiar lyric but forget the title of the song? Have you ever struggled to find songs that share similar content or style? Do you want to write your own song based on a specific style you like?
Lyricshub is a web application that aims to provide a better music recommendation system based on lyric data instead of traditional spectrogram analysis. It helps beginner songwriters or music lovers to generate their own lyrics using Al Algorithms. For this project, I worked with a group of developers, data scientists, and a business development team to transcribe a pure data science project into an online lyric-centric music platform.
The project will be officially launched in mid-September and we are currently conducting user testings using the high-fidelity prototype. Our project received a recommendation by Inuit to participate in the San Diego Design Week 2020.
Design Software
Adobe XD, Photoshop
Technology
Data Science, HTML, CSS, JavaScript
Year
2020
Problem
Existing websites and apps do not allow users to search the title of the song based on the lyrics. Its recommendation system keeps repeating songs from the same categories so users can hardly listen to songs with other genres. Thus, people need a way to find different types of music using various song related attributes (title/lyrics/artist) on a single platform.
Needfinding
Before we start to design our first prototype, we want to know more about people’s user experience with music-related applications or websites. Thus we sent out a survey link on social media and received 85 responses. Most of our survey participants are college students who have used mainstream music streaming applications like Spotify, Youtube Music, NetEase Music.
The survey result shows that:
-
89.3% of participants have used the recommendation system in music applications.
-
16% of participants are unsatisfied with the existing recommendation system
-
65.9% of participants said the recommendation systems recommend songs with the same style (genre) as the ones that
users usually listen to.
-
Some participants hope that the recommendation system could recommend songs that have different genres or have similar contexts.
Competitor Analysis
We found out that there are some existing websites that allow users to search for music based on lyrics. However, most of the websites we found include a lot of information/advertisement that is irrelevant to lyrics or music (Figure 1). The user interface does not reflect the theme of music or lyrics. The main search function is similar to Google Search which provides users with unrelated information (Figure 2). We believe there is some design space for our team to improve the user experience for lyrics-based searching by creating a more clear and user-friendly interface and a lyrics-based/singer-based music search function.
Figure 1
Figure 2
We also did some research on mainstream music streaming websites/applications, such as Spotify, Apple Music, and Netease Music to see how they present lyrics information. We found out that most of the mainstream music websites do not support the search function based on lyrics. In other words, if you only know the lyrics of a song, you cannot search the corresponding song on a mainstream website. Thus, the user would need to type the lyrics into Google search to get the title of the song and type the title into the music streaming website to see similar artists.
Based on the research we did, we create this table to show the strengths and weakness of existed lyrics-centric website and music streaming platform:
Competitor Analysis Table
Storyboarding
Based on the survey we did, we imagined some scenarios that our project would be helpful to address users' unmet needs like lyric-based music search and lyrics auto-generator.
Scenario (1)
Jack wants to grab a coffee from the coffee shop. He is attracted by the background music that the coffee shop is playing. He likes the background music but he doesn't know the name of the song. Jack decides to use LyricsHub to find the song based on the lyrics he heard. He browses similar songs and finds out that he really like this type of songs
Scenario (2)
Tom wants to write the lyrics for his new music project. He really likes pop music and love songs but he doesn't know how to write lyrics with those styles. Tom uses LyricsHub to generate lyrics based on the music style he likes. Tom really likes the AI-generated lyrics and he decides to include the lyrics in his project.
User Persona
Wireframes
Based on our user researches, we started to create our low-fidelity prototypes using Adobe XD.
User Testing
Before:
After we designed our first prototype, we started to conduct user tests to testify the usability and effectiveness of our product. The target audience of our product is music lovers and songwriters. Thus, we chose our test sample from people who are heavy users of mainstream music applications and people interested in music composing. We set up a few user tasks and design questions we were interested in before user testing.
User Tasks:
-
Search artists who have songs with similar lyrics to Taylor Swift’s.
-
Find the artist whose song has the highest similarity with Taylor Swift’s.
-
Go to that artist’s profile page.
-
Use the system to generate lyrics like the artist.
-
Share the lyrics generated by the algorithm.
Key Design Questions:
-
Based on the current user interface design, is it easy to tell what does our project do?
-
How does a user like or dislike the circular design, which is used to show similarities between different artists? Is the similarity ranking clear to the user?
-
Since the lyrics generator is a brand-new function, how does a user like or dislike this function? What difficulties users may face when he is using this new function?
Based on feedback we received from user tests, we are able to conclude that:
-
The circular design of similarity ranking looks good but it is a little bit confusing because users normally read from left to right so they expected the highest similarity to be shown on the left-hand side and the lowest similarity to be shown on the right-hand side.
-
The text in the low similarity bubbles is too small.
To better accommodate people's left-to-right reading habits, we adjusted the layout of similarity rankings.
After:
Final Product
Based on our user testing results, we are still iterating our final products. Our team is currently working on designing a new function: Lyricsgame, which would let users to distinguish lyrics that are generated by our AI algorithms from lyrics written by real people. We hope this game could help us to promote our product and attract more users to use our product.
The home page is featured with the main search function and two more recommendation functions based on lyrics trends. With the Today's Keyword and Trending Lyrics sections, we expect that user can apprehend our app's main focus, the lyrics, at the first sight.
From the result page, users are able to explore similar artists provided by our machine-learning algorithm. Users can also check out the lyrics created by our lyrics generator Lyri to explore and share the algorithm-generated lyrics based on the selected artist's style.
New Game Feature In Progress
