Bonnie's Logo_1.png
Black_logo@4x.png
sametunes_banner_edited.png
Layer 3@4x.png

Creating SameTunes

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.

Role

UI/UX Designer, UX Researcher, Graphic Designer

Team

CEO, CTO, Software Developers (3), Design Lead (Me)

Tools

Figma, Hotjar, User Interviews

Duration

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.

messaging@3x.png

Introduction

 🎶 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.

gradient@4x.png

How might we allow music listeners to instantly understand their music taste along with others?

User Research

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.

Nathan 

"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."

Samantha

"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!"

Claire

"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

  • Encourages nostalgia

  • 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

gradient@4x.png

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 👯‍♀️

Pros

  • Fun social experience.

  • Friends can contextualize music by emotions.

  • Constant stream of new genres and songs.

​Cons

  • 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 🧑‍💻

Pros​

  • Recommendations are tailored to your taste.

  • Quick access to new music.

​Cons

  • Recommendations become repetitive.

  • Algorithms don't understand how human emotion connects to music.

  • No human sentiment attached to algorithm recommendations. 

Market Analysis 

We explored other competitors to collect information on related features and saw what worked and what didn't. 

TuneTrack

  • track your music stats

  • compatible with different streaming services

  • no social features

  • no tailored music discovery

Screen Shot 2021-01-12 at 12.03.55 AM.pn

tastebuds

  • 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 

Screen Shot 2021-01-12 at 12.04.13 AM.pn

Obscurify

  • track music stats

  • see your music obscurity rating

  • only compatible with Spotify

  • no social features

  • no music discovery

Screen Shot 2021-01-12 at 12.04.06 AM.pn

musictaste

  • track your music stats

  • compare music taste with friends

  • no music discovery

  • only compatible with Spotify

gradient@4x.png

Takeaways

2.

Users enjoy reflecting on their own music taste and feeling secure in their music identity.

1.

Understanding another's music taste allows users to feel a deeper connection and heightens friendship.

3.

Users will look for music recommendations from others that have similar music taste as them.

Solution

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.

Introducing

A music driven social experience that lets you check your music stats, compare music tastes with your friends, and discover new music!

User Flow 

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.

ST_userflow.png

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 ✍️

IMG_2557.jpg

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.

IMG_2558.jpg

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.

Screen Shot 2021-01-22 at 4.56.48 PM.png
Screen Shot 2021-01-23 at 1.35.05 AM.png

Stats

gradient@4x.png
my stats.png

General stats will appear here to give users a quick glance at how large their music library is.

Genre Breakdown

gradient@4x.png
breakdown.png

A genre breakdown allows users to understand how their music library is broken down. 

Top Songs, Artists, & Albums

gradient@4x.png
my top albums.png
my top songs.png
my top artists.png

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.

IMG_2591.heic
Screen Shot 2021-01-23 at 8.15.49 PM.png

The Header

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.

Before:

No search bar and pages lack hierarchy

Screen Shot 2021-01-23 at 3.48.19 AM.png

After:

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.

Screen Shot 2021-01-23 at 4.02.32 AM.png

Final Design

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.

statpage.gif
mobileprofile.gif

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.

Initial Planning

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.

IMG_2598.heic
IMG_2597.heic

Figma Mockups

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.

Screen Shot 2021-01-24 at 12.58.23 AM.pn
Screen Shot 2021-01-24 at 2.28.22 AM.png

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.

david pic.png

Ethan

bonnie pic.png

Caroline

score.gif

You can definitely jam out with each other.

Wow! We're two of a kind!

Takes one to know one!

Final Design

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.

sametunes_score.gif

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

FriendTunes Weekly

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.  

ftwsong1.png
ftwsong3.png
ftwsong2.png

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.

Initial Designs

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.

IMG_2602.HEIC
IMG_2603.HEIC

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.

Screen Shot 2021-01-24 at 10.41.11 PM.pn

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.

Screen Shot 2021-01-24 at 11.03.00 PM.pn

Refinements

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.

Screen Shot 2021-01-24 at 11.08.51 PM.pn

FriendTunes Settings

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.

Screen Shot 2021-01-24 at 11.44.18 PM.pn

Final Design

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.

Screen Recording 2021-01-18 at 1.28.41 A

Conclusion

Since our launch in May 2020, SameTunes has achieved:

MLP ❤️

Minimum lovable product launched in August 2020

17m

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!

Since SameTunes launched at the height of the pandemic, it was heartwarming to know from our users that we were able to provide a way for them to stay connected to friends and their loved ones through music. With that being said, we did have some ups and downs but that never intimidated or stopped our team from continuing on to build a fantastic product. We continue because we truly believe in SameTunes and love what we do. ❤️

gradient@4x.png

We will continue with user testing and research to see how we can further improve SameTunes. Our team has many features planned that will enhance the user's experience whether they're exploring their own data or sharing music with their friends. 

The Future of SameTunes