In a Nutshell... 🤗
The SameTunes team and I decided to work together to create a social platform for music lovers. I worked as the UI/UX design lead where I designed all aspects of the website from small buttons to the user flow of entire pages. Due to the sheer size of this project, I will only be going over the general parts that make SameTunes what it is today. Join me on this journey of how SameTunes came to be. ✨
UI/UX Designer, UX Researcher, Graphic Designer
CEO, CTO, Software Developers (3), Design Lead (Me)
Figma, Hotjar, User Interviews
May 2020 - Present
The Problem 🧐
The conversation on the right might look a little familiar to you. Sure, music is a great way to get to know someone but it's usually done in a Russian roulette style where you continually ask questions on someone's music taste until you find something in common.
Even then, you can't quite understand the full spectrum of someone's music taste nor can you explain your own based on a few questions. At most, both parties get a small glance.
🎶 What kind of music do you listen to? 🎶
We've all been asked this question. This simple question is known to be one of the most common ice breakers we ask to get to know someone.
How might we allow music listeners to instantly understand their music taste along with others?
Our Stakeholder 👤
After conducting over 40 interviews on music sharing motivations, we found that understanding one another's music taste allows users to feel more connected.
"I think music in general is a common talking point and way of getting to know someone. Like, it can be a way to see what someone is like."
"When I meet someone new and they have the same music taste as me, it makes me feel validated like, wow my music taste is actually good!"
"It creates a sense of community and togetherness. I also think it helps me feel out what vibes are being put out by the other person."
The Data Craze 💾
During our interviews, users would frequently mention Spotify yearly wrapped when asked about understanding their own music taste. We dove into this and saw that users enjoy reflecting and seeing how their music has changed throughout the year.
What do you enjoy seeing during your yearly wrapped and why?
See how they change throughout the year
Time of reflection
Solidifies user's music identity
Enjoys top genres, artists, songs, etc
Small but interesting data points such as how many minutes during the year
What other kinds of data would you want to see?
Music playlists curated based on music taste
Want to see their stats more often
Monthly music evolution
Seasonal music evolution
Energy levels, danceability, level of popularity
Specific genres and moods associated
personas based on music taste
visual timeline to show evolution
How Do You Discover Music? 🔍
We also found that there is an even mix of people who discover music through friends and people who discover music through an algorithm. However, there were complications with both methods.
Through Friends 👯♀️
Fun social experience.
Friends can contextualize music by emotions.
Constant stream of new genres and songs.
Not willing to ask unless friend has similar taste.
Diversity can be difficult if friends have similar taste.
Tedious to manually search for songs.
Through Algorithms 🧑💻
Recommendations are tailored to your taste.
Quick access to new music.
Recommendations become repetitive.
Algorithms don't understand how human emotion connects to music.
No human sentiment attached to algorithm recommendations.
We explored other competitors to collect information on related features and saw what worked and what didn't.
track your music stats
compatible with different streaming services
no social features
no tailored music discovery
meet new people based on music taste compatibility
manually input liked songs, artists, and albums
no music stats
no clear way of discovering new music
track music stats
see your music obscurity rating
only compatible with Spotify
no social features
no music discovery
track your music stats
compare music taste with friends
no music discovery
only compatible with Spotify
Users enjoy reflecting on their own music taste and feeling secure in their music identity.
Understanding another's music taste allows users to feel a deeper connection and heightens friendship.
Users will look for music recommendations from others that have similar music taste as them.
Defining the Project Scope 🎯
Develop a platform where users can immediately view their music stats, view friend's music stats, and discover new music through friends.
A music driven social experience that lets you check your music stats, compare music tastes with your friends, and discover new music!
In order to understand how the user might navigate the platform, we created a user flow to determine how features should be organized. Here, we can see that the user can view their own music profile, compare music with friends, discover new music, and find other users with similar music taste.
My Music Profile
To help music listeners understand their music taste and solidify their music identity, we wanted to provide a page that allows users to see their music data in a clean format. We began planning out how this page would look and how it would be organized.
Lo fi Sketches ✍️
First I explored several versions of a profile page. I wanted to make sure the content on the page would be prioritized and also be easy to rearrange for a mobile screen. Eventually, I settled on the 2nd design for its ability to easily add or remove content, and adaptability for a mobile site.
Next, I needed to decide what stats should be included and where to place them based on their importance to the user. After some feedback, I decided to order them starting with general stats, genre breakdown, top songs, top artists, and finally top albums.
Figma Mockups 👩💻
Using Figma, I played around with how certain cards would appear and how they would translate to mobile devices. This was a crucial part of the design process because most of our users would eventually use their smart phones to access the website.
General stats will appear here to give users a quick glance at how large their music library is.
A genre breakdown allows users to understand how their music library is broken down.
Top Songs, Artists, & Albums
We can show users data from specific time periods such as during the past 4 weeks, 6 months, and all time.
Song Cards 🎶
We needed a way to show the user's songs, artists, and albums in a clean way that could easily adapted to a mobile format. I explored a couple song card formats before settling on one. Initially, the description text would be located on the album artwork itself but since it would be obstructing the artwork, I decided to choose a format that displayed the title and artist on a separate part of the card.
After deciding on the card format, I tested several song titles to see how they would fit in the card. This lead me to conclude that some song titles will require two lines of text while some extend past that. To account for that, I designed the card to have enough space for the text to wrap and eventually truncate.
Initially, our header had Stats, Comparisons, Friends, Account, and Logout. However, we realized that as we continue to add on more features, we would be running out of room in our header. We also needed to implement a search bar for users to quickly find other users.
No search bar and pages lack hierarchy
Search bar added. Stats, Friends, and Account fall under one page called Profile. More internal tabs on the Profile page allows users to switch between the 3 sections.
In the end, I put together the final design using the various cards, buttons, and scrollers I designed to create a highly adaptable profile page that showed off the user's music taste in a clean way.
Whats Next? ⏭
Add more creative interpretations of the data such as music personality types
Add more data in general such as overall danceability, energy levels
Pie chart colors need to be more cohesive
Include more micro-interactions
Include a timeline to view music evolution
Music Compatibility Test
SameTunes will let you compare your music library with another friend. Users will receive an overall SameTunes score on how musically compatible they are while also seeing what top songs, artists, and albums they have in common.
Since the user will mostly be scrolling to view the results of their music compatibility test, this experience should be highly visual. I began testing different layouts that would deliver a fun experience for the user.
There were many different and unique designs I wanted to do for the compatibility test but they would not have been mobile friendly. Eventually, I was able to find a compromise between visual and adaptability.
Once I had an understanding of how the page would appear, I created the designs in Figma for the developers to see and connected them so they would animate on scroll. This helped the developers visualize how the page would scroll.
Our SameTunes Score 💯
To add more context to the score, I added messages at the bottom so users will have an idea of what the score means. Each score range has 3 different messages so that users are not receiving the same message each time.
You can definitely jam out with each other.
Wow! We're two of a kind!
Takes one to know one!
For now, the comparison page shows users their score, top songs, artists, and albums. We also included an option to export a playlist that contains both user's top songs.
What's Next? ⏭
Need more ways for users to interact with one another
Include what genres you and a user have in common along with other data
UI could improve to be more visually engaging
Based on our research, we noticed that people will ask for music recommendations from others that have similar music taste to them. To test this, we created a new algorithm. FriendTunes Weekly is SameTunes' music discovery feature. Users will automatically receive a weekly playlist of song recommendations from their most compatible friends.
So how does it work?
First, our algorithm selects the user's top most musically compatible friends. From there, FriendTunes will look through their music from the past 4 weeks. If the user does not have the song in their music library, FriendTunes will place that song in a discovery playlist. This playlist will be refreshed each week to bring the user new music from their friends.
Since our discovery feature was going to display music that the algorithm recommends, I decided that we needed to efficiently display the songs while allowing the user to interact with the song cards. During my page format exploration, I thought of different ways the user might use the page. Some designs focused seeing many songs at once while others focused on one song at a time.
Narrowing Down Designs
After talking to a couple stakeholders, I determined that it would be best to view many songs at a time so the user will not have to repeat the same action multiple times to reach the end of the list. Having the songs laid out in a list or grid layout would decrease the amount of times the user must perform an action to explore their song recommendations.
I decided to use the layout on the right for its adaptability to a mobile screen and its visual balance.
Song Cards 2.0 🎶
FriendTunes song cards are similar to the stat page song cards but users can interact with them and they show who the song is from. Our algorithm was designed to recommend songs based on user feedback. When a user likes a song from a specific friend, FriendTunes will know whether or not to recommend songs more often from this friend or not recommend songs from them as often. Such user actions include liking, disliking, and previewing the song. Initial song card designs required users to click a drop down in order to reach the like and dislike button. This was not an ideal design since it required users to perform 2 actions to reach their goal.
Next, I removed the drop down and added a heart and thumbs down icon to represent the like and dislike buttons. This format decreases the amount of actions the user needs to perform. I also designed the preview button to activate on hover so the user knows they can preview the song.
We wanted to give users more freedom to choose whether or not they want a new playlist of music and when they want it. For this, I had to design a settings section that would be suitable for mobile and desktop.
The final design included the grid format to allow users to see more songs at once. Each song card shows details such as who the song came from, the title, and the artist. The user is able to preview the song before deciding which ones they like. This playlist is automatically loaded into the user's streaming service if they wish to view it elsewhere.
Since our launch in May 2020, SameTunes has achieved:
Minimum lovable product launched in August 2020
Average User Session Time
+9,900 Users 👥
In over 75 countries.
#5 on Product Hunt 🏆
Debuted as #5 product of the day.
Overall, my experience with SameTunes over the summer has been incredibly eye opening. This was my first time ever watching a concept turn into a reality and actually succeed! I am truly thankful for SameTunes and for all the new things I learned. Here's a couple important tips I will continue to carry with me as a designer:
Learn to wear many hats - Since our team was slightly smaller than most startups, I learned to quickly switch roles depending on where my team needed me most. Whether it was designing for the website, pitching SameTunes to investors, or conducting user research, I learned to quickly adapt and be flexible with my time.
Don't take criticism to heart - This one was something I had always known throughout my design career. Criticism isn't there to put you down as a designer, its there to help you improve. Personally, I have had times where I suffered from imposter syndrome but being at SameTunes has really helped me learn that it's important to listen to criticism but not let it shake you.
Listen to your users - I cannot stress this enough. The whole point of this was to create a product for the user! We were constantly conducting interviews to see what areas we could improve on the site or to see what users truly want from SameTunes. It's also pretty interesting to hear the user's thoughts and how some of them felt the same way while others felt the complete opposite!