Hum.fm
Design + Development
Capstone Studio
Fall 2024 - Spring 2025
Overview
Hum is an application that integrates a user's music streaming data and provides unique personal analytics, tailored recommendations, and social pages aimed at elevating our engagement with music beyond streaming. Through increased engagement with oneself, friends, and artists, it hopes to foster a revival of the niche subcultures and communities that once thrived in the early internet age. This project was done by me and a partner.
Market Research
Here are some numbers to understand the scale of the music streaming industry:
(Year In Music. Chartmetrics 2023)
In 2023, 1.3 million artists were added to the Chartmetrics database and of those, around 1,138,800 (87.6%) were considered to be "undiscovered". Correspondingly, a survey conducted by MIDiA Research in 2023 found that 18% of Gen Z music listeners stated they found it difficult to discover new music.
Target User Group
In the United States, Gen Z is the generation with more daily media consumption than older generations; furthermore, they have the highest share of audio listening time than any other generation.
For them, music is not only a form of enjoyment- it is also a way of self-expression. According to research from Spotify, 76% of Gen Z individuals believe that their listening habits "tell a story about who they are" (2022).
Survey
We conducted a survey on 77 people (mostly Gen Z) to gain a better understanding of their experience with music, based on 3 categories: Discovery, Social Engagement, and Personal Analytics.
1. Discovery
Key Takeaways:
-
Many young listeners regularly seek out new music
-
Most people discover new music through their streaming service- yet many of them are unsatisfied
-
Listeners want better capabilities to find new artists/songs
2. Social Engagement
Key Takeaways:
-
Music is a popular talking point with Gen Z individuals
-
There aren’t many digital channels/outlets for social engagement centered on music
3. Personal Analytics
Key Takeaways:
-
Many Gen Z individuals have unique/personalized music profiles that can be depicted widely differently per person
-
People enjoy finding new insights on how they listen to music
-
There is still unexplored potential in the application of music data analytics
Hum: visualize + share your listening journey
The initial concept of Hum revolved around an interactive, spatial visualization of one's music listening analytics. Designed as a web-based application, Hum would provide a real-time, evolving alternative to static summaries like Spotify Wrapped. Users could navigate a dynamic map of nodes organized by genre, artist, and song, which update automatically based on listening activity. Beyond analytics, Hum emphasizes self-expression through socialization: users can explore friends' music profiles, compare taste compatibility, and showcase personalized tags such as "O.G. Frank Ocean fan" or "prog rock enthusiast," turning listening habits into a medium for connection and identity.
Early sketches + UI designs
Our earliest idea was a node network, with each genre being depicted as a node. The connections would represent the progression of discovery from one genre to the next, and the position of the nodes would reflect how much the user would listen to that particular genre.
References
Throughout our design process, we continuously referenced two existing works: Ben Tanen's D3 visualization of his music taste, and Glenn McDonald's Every Noise at Once. We incorporated elements from both designs, such as the mapping of genres based on valence and acousticness and the contour lines to indicate the relative listening times of certain genres.
My "Island"
After implementing this new design, we figured we could better characterize this genre map visualization by calling it an "island". This visual map would reflect a user's listening data, and the goal would be for them to expand their island by listening to new genres and songs.
Final Designs
Click here to view the full prototype.
Personal Island
Explore
Friend's Profile
Island Similarity
Artist Page 1
Artist Page 3
Island -> "psychill"
Profile
Friend's Island
Saved
Artist Page 2
Artist Page 4
Development
For our senior capstone project, my partner and I began developing a functional MVP of Hum, using typescript, python, and d3.js. With minimal coding experience, we reached out to Ben Tanen, who agreed to be our mentor for the semester. Our scope for this MVP was as follows:
Authentication w/ Spotify
Personal Island generation
Analytics for each genre
Progress Screenshots
Development began by first following a tutorial from Spotify’s developer documentation page, which consisted of linking Spotify’s Web API to the project files and displaying general profile information. After reading through the code and trying to understand what each line did, I used it as a reference to add additional content onto the page. Slowly but continuously, through help from both my mentor and ChatGPT, I kept progressing through, getting increasingly proficient with implementing my thought process into code.
Progress Video
My current progress as of April 2025: