r-music App: Recommend the best music

Duration

11 months

Role

Front-end engineer & UI designer

Type

Undergraduate senior project (w/ Syuanhan Huang, Peiwun Yin, Shuyuan Tan, Zeyuan Li, Yanjyun Peng)

Skills

Front-end development (Android Studio & Java), UI Design, Wireframing

Background

r-music is a mobile app that can quickly recommend suitable songs based on the conditions and situations that the user’s need.

With r-music, users can select and enter their condition. Our system classifies each song through song lyrics and song appreciation, combined with machine learning, and uses artificial intelligence to train a model to calculate the similarity between words to provide more accurate songs.

Designing phase

Our initial idea was to not only recommend songs that meet the user's conditions, but also add a social function to allow users to share their moods and music with each other.

Our initial version of wireframes and interface description

Interface for searching on the homepage

Interface for displaying list of songs based on user input criteria

Interface for playing music

Interface for sharing music on personal timeline

Early feedback

Later we asked people for feedback and found that there were so many sorting options that some people weren't sure how to choose. Moreover, the more conditions there are, the fewer or even no songs that can be recommended to users, resulting in user dissatisfaction.

Therefore, we retained three main categories while also allowing users to add conditions (but up to three) to ensure flexibility and enable customized recommendations.

Coding phase

We have a total of six members, two are responsible for the database, two are responsible for the back-end algorithm, and two are responsible for the front-end.

Another classmate and I are responsible for the front-end part, and we divide the work according to different interfaces. I am responsible for classifying, inputting conditions, and displaying the music list, the other teammate is responsible for music playback and my favorite list. Here we used Android Studio for our app development.

Coding for the interface of the song category page

The java coding part of the song classification page interface

Turning point

Midway through the coding process, I realized that with the current capabilities, progress, and schedule of our team, we might not be able to achieve the originally designed with the social functions.

After discussions with team members, we decided to implement the most important core functions (recommendation and music playback) first, and the other functions will be implemented when there is spare capacity.

Interface for the first version

Users will first select the song category they want to find on the homepage, and then select and enter the conditions for the song they want to find on the next page.

Based on the criteria entered by the user, the app will suggest the ten most relevant songs, and the user can also refresh the list to find other related songs.

Once users select a song, they can listen to it and add it to their favorites so they don't have to search for the same song again in the future.

Users Feedback

We found eleven users to help test our first version product. The majority users said their overall experience of the app is nice. In addition, 90% of the users indicated they were satisfied with song recommendations.

During the interview process, users gave us some valuable feedback that helped us improve our products.

The interface navigation is not clear when entering the homepage.
Text throughout the app feels monotonous and difficult to understand.
Replace the update buttons on the song list page with previous and next pages, so that users can go back and find music.
Add more songs to the app and the interface could be more refined.

Expectations for future iterations

Improve interface navigation

Based on our user feedback, we found that our products lacked descriptions and instructions, causing confusion for some users.

Therefore, by adding text descriptions we hope to better guide users on how to use the product.

Add different ways to complete certain actions

Take the action of deleting a song from a playlist as an example. In our initial design, we only designed the delete option to be presented in a sliding manner, but this might cause some people who are not familiar with technology products not knowing how to operate.

Hence, we should provide users with more than one option on how to perform an action to enhance the user experience.

Takeways

About product design and process

User feedback is crucial to discover the blind spots caused by developers being too familiar with the interface and make further adjustments.
Establish a naming method for documents and components to ensure smooth connection among team members.
Knowing more about design tools and their usage, this will not only shorten the design time but also increase the sophistication.

Related project planning and management:

It is important to evaluate the abilities of project members. By understanding the limits of members, team can reduce the risks of the project and find the rhythm that best suits the team.
Constantly follow up and confirm each other’s responsibilities and current status to prevent unequal information or misunderstandings.
The project planning should be detailed and try testing whether the technology is suitable and feasible for the circumstances.