Music Library Visualization

Problem: Visualize music libraries in a way that not only helps artists share their culture, history, and story but also enables listeners to find songs they are looking for. 

Power of Music: Music is embedded into the fabric of every society. It portrays not only the way in which people live but also their beliefs, values, and history. Each country, each city, and even each neighborhood might have its own identity and flavor, which is often expressed through song. 

Sketches

I wanted to utilize the world map as a backdrop to this project. This was to differentiate the visual aspect from traditional music libraries like iTunes, which simply list out song or albums titles. My initial thought was to overlay

push-pins to indicate different cities, but there wasn’t a good way to visualize music being played with this method. Using circular markers allowed me to create animations that mimicked the thumping of beats of songs. 

User Story #1

Ross

User Story #2

Rachel

Ross is moving from New York City to London. He has always loved New York’s unique music scene and plans to explore London’s music as well. Ross wants a way to listen to London’s top artists before his big move. 

Rachel is going on vacation to Ireland. Before leaving, she wants to learn about the country’s rich history and culture. She loves music and hopes to listen to songs from Ireland to gain a stronger appreciation for the country. 

Behind the Scenes

A brief look into designing this project! I used Framer to design everything from wireframes to animations.  ​

Wireframes

In my initial wireframes, I was visualizing the data set by displaying the location of musical artists on the forefront. As can be seen in the animation to the right, the locations (city and country) were secondary. After user feedback, I later iterated these wireframe designs to highlight location over musical artists. The main reason was to put less emphasis on single artists, and more on a city’s diverse music. 

Moodboard

Adventurous, Techie, Spontaneous, Full of Wonder

Styleboard

The flight-radar visual greatly inspired me to choose a dark backdrop with bright indicators overlaid the map. The green pigment from the plant mirrored the Spotify logo’s colors and also had this “dark” theme. Importantly, the back of the Beattle’s album cover was the basis for visualizing the dataset of each city’s music. My final designs were a conglomerate of these elements. 

Dataset

What story can this data tell?

Sample data of top musical artists from around the world

Data Visualization

As the goal of the project was to tell stories about the world through music, I thought it would be fitting that each city have their own playlist. These playlists could even be curated by users in the community. The music library would be visualized on the back of an album cover, with each city having their own unique cover and playlist.

Curated playlist of London's top musical artists. Now Playing: Hello

Conclusion

One thing I can improve is to integrate more analysis into the design so I can better use data to tell a story. I'm planning on using Tableau's learning platform to become a more effective storyteller through data. 

 

Overall, it was a challenging project but a fun way to grow my visual design skills!

Accessing a city's playlist.

It’s deeper than just the music. It invites people in to another perspective, and brings another side of the world to Compton, to this backyard. -Kendrick Lamar

You may also like

Powered by green tea and a passion for creating new things.

  • a
  • Dribbble
  • LinkedIn