FlowLy

Tailored Music Experience

FlowLy delivers a tailored radio experience for moderate users and music lovers, utilizing a smart recommendation system based on their choice of music genre, mood, or artist. FlowLy's algorithm uses these tags to curate a customized playlist that flows seamlessly from one song to the next.

In addition, the app displays lyrics for each song and provides translations for those who enjoy music in different languages.

Year
2021
Duration
14 weeks
Software
Figma, After Effects

User Interview

"There are too many features to choose, making it difficult to enjoy listening to music."

Alex
Foreign Language Music Lover
“I like exploring different kinds of music in my free time but the absence of lyrics prevent me knowing the meaning of this song. When it comes to other languages, I can do nothing but only listen to the rhythm.”
Emily
Aspiring Musician
“I’m learning to identify different type of music now but I can’t choose the specific type of music to listen in the music FM and I have to go to another playlist to find what I need.”
Wendy
Graphic Designer
“My choice of music apps is based on their visual design and other people's recommendations. I always use the recommendation function to find new music but it is not always tailored to me. Also the function in the app is too much.”

How Might We

After interviewing three different types of music lovers, I summarized following key take away and wrote down "How Might We" statement for each one to inspire creative solutions.

How Might We offer users an option to select specific music genres of interest?
How Might We simplify the app's functions to create a music focused experience?
Expand the tag options to include genres.

Include the ability to select a subgenre within each genre for a more refined music selection.
Music tailoring should be the main focus of the app.

Simplify the main page by utilizing typography to convey information in a clear and concise manner.
How Might We provide users more information about songs?
How Might We implement more accurate music recommendations?
Incorporate a lyrics option within the playing page.

Provide users with translations for the song lyrics.

Include relevant information about the song and artist.
Implement tags for moods, genres, and artists to each song.

Let users create custom playlists based on their preferences.

Provide "Like" and "Dislike" options to improve recommendations.

According to the user interview results and the  potential solution to solve the problem in the existing music app, I identify the user group this app is designed for.

Music Enthusiast

They are passionate about music, they love to explore different kinds of music and want to know lyrics and translation to better understand the song.

Passive Listener

They casually play custom playlists in the background to suit their mood or activities.

Then I finalized the problem and goals for the music app.

Problems

No Lyrics and Translation

Users face difficulty in understanding the meaning of a song and connecting emotionally with the music if lyrics and translations are not provided. This can lead to a less satisfying listening experience.

Goals

More Information

Provide users with access to the lyrics and backstory of each song, as well as information about the artist. This will give users a deeper understanding and appreciation of the music they are listening to.

Redundant Function

The current apps contain an excessive number of functions. This results in a cluttered user interface and a less intuitive user experience, causing frustration and reducing the app's overall value to the user.

Simplify

Streamline the user interface by removing redundant functions, and simplify the app's overall design. This will help users more easily navigate the app and find the functions they need.

Not Smart Enough

Users are facing difficulties with the current music tailoring function as it fails to match their individual music taste and mood. This can lead to a lack of satisfaction and frustration when searching for a specific type of music that meets their preferences

Personalized Music Experience

Leverage users' liked songs, mood, and preferred genres to make personalized music recommendations.

Competitive Analysis

To understand the market and identify opportunities for differentiation. evaluate other music apps, I evaluated other music apps. To ensure the app will offer unique value to users.

Add Like
Personalized Category
Show More Information

Future State Journey Map

Based on insights from users and competitive analysis, I mapped out the ideal user experience in the future.

Prototype

Choose a specific music genre
Users can create a personalized music radio station based on their preferred genre(s).

Music tags are classified into "Artists," "Genres," "Moods," and "For You," allowing users to easily access the music they want to listen to.

If the desired genre isn't already in their tag list, users can add major genres or sub-genres to further customize their music experience.
check existing tags
all tags display
choose genres
choose sub-genres
Add Tags
The app plays music similar to the genre of the customized tag selected by the user. If the user likes a song, they can easily add it to their liked music library.

Additionally, the user can further customize their music experience by adding tags to the song, which will train the recommendation algorithm to suggest more songs in that genre or with similar tags in the future.
like a song
scroll down to see recent tags
full tags list
Show lyrics and translation
The app provides lyrics for songs, with the option for translation if the lyrics are not in the user's native language. This allows users to understand the meaning behind the music and connect with it on a deeper level, regardless of the language it's in.
Lyrics Page
By scrolling up the lyrics section, the user can see the full lyrics.
Translation
By tapping the translation icon, the user can view the translation of the lyrics.
Watch
The watch app is optimized for ease of use, with features that allow users to quickly switch between songs and add tags with minimal effort.

This seamless connection between the watch app and phone app ensures that users music experience is always personalized and up-to-date, no matter which device users are using.
music play page
playlist
delete the song from playlist
all tages
Add Tags and Switch Songs
The app's primary function is to allow users to add tags to songs for smarter tag-based music recommendations. With the watch app, users can conveniently add tags and enhance their personalized music experience while on the go.
tags menu
add a tag successfully
delete the tag

UI Style Guide

Vibrant and lively colors can be visually appealing and effectively convey different types of music. A clear hierarchy of typography enhances the readability of the app's features and maintains a clean and simple design.

Typography
Icons
Typography
Icons
Phone
12-column grid
Margen: 16px
Gutter: 8px
Watch
6-column grid
Margen: 20px
Gutter: 4px

Next Project

FlowLy