Side Projects

TrackQueen

Lyrics, music videos, annotations, and more for your currently playing Spotify track.

banana

What is TrackQueen

TrackQueen.io is a product that helps you learn more about your music. It's a progressive web app that gives you all the details about your currently playing song on Spotify. Play a track from Spotify, then open TrackQueen and you're a click away from lyrics, music videos, annotations from Genius, artist bios, interview videos, and more.

I built TrackQueen using Angular, a JavaScript library from Google. The project took about three months of nights and weekends in fall 2017.

The Story

This is without a doubt, my favorite thing I've ever made.

I’ve loved using Spotify for a long time. Admittedly, I always thought it would be pretty cool to work there. But, what if I could work on Spotify without actually working for Spotify?

While listening to music, I found myself constantly going to Google for artist wikipedia bios, searching on YouTube for artist interviews, and browsing Genius.com for lyrics, annotations, and just general background information about songs and artists.

What if all this information could be immediately brought to you? On the web, and on your phone, and just a simple tap away.

Problems

  • Learning about your music involves visiting several websites.
  • Spotify removed the lyrics functionality.
  • Spotify’s Genius annotations UI requires you to wait for each annotation to display during the song, and you have almost no control over how you view them.

Opportunities

  • Encourage learning more about your music.
  • Expose unique API features (like your most played songs on Spotify).
  • Learn the Spotify API.

Assumptions

The core assumption behind this project is that people are interested or perhaps, would be interested in learning more of the details behind the songs and artists they’re listening to. Evidence of this is seen in the success of sites like Genis (formerly Rap Genius).

This interest would increase by making the knowledge easier to come by. If I have to do five different searches to find the music video, the lyrics, the artist bio, etc., then I probably won’t do it often.

The assumption is that if I'm just a tap away from this info, I’d be more likely to seek it out, and it would actually add a lot of value to the music listening experience, particularly in times where people are listening to music and have a few minutes to take a look. For example, on the way to work in the morning or between your impressive reps at the gym.

Process

One of the struggles of being a designer is documenting the process.

Rarely have I documented my process, …throughout, …the process. Taking pictures of sketches within my notebooks is something I unfortunately haven't been good at doing. Ultimately, I can see why it's important to do, not only to explain my approach to potential employers, but to look back on your work and see how it started and learn from your process.

It's hard to examine your process if you haven't documented it. That's something I need to improve in the future.

All of this is to say that while I don't have full documentation of the process, I think you'll discover the reasoning to a lot of the critical decisions during this project below. The process is often messy. Especially with side projects.

After understanding the task / problem at hand, my process generally involves a cycle of quick, messy notebook sketches, work in a design tool like Sketch, and work in the browser. Sometimes, it's encountering a problem in the browser, working through it on a notebook, then jumping back into the code.

Struggles

Homepage

Initial concepts I had for this project put a more information on the homepage. Ultimately, bringing everything into the main view wasn’t quite right for a couple reasons.

For one, it was too much immediate information for people to process.

Secondly, trying to fit all of that into a mobile view wasn’t going to work. If a user needs to scroll far to even find the information, there's probably a better approach.

From a technical perspective it was best to reduce the amount of API calls being sent to each of the various APIs to avoid being rate-limited. I reduced each view to a particular API call, instead of having ten different sources of information displayed whenever someone opened the homepage.

For the user, whether they want the video, lyrics, or artist info, everything is just a simple click or two away.

trackqueen-32

Genius

Another struggle was that Genius doesn’t deliver the song annotations in the order of the song lyrics, so they’re displayed randomly. A feature that would be ideal to add here eventually would be search, so a user could at least quickly get to a particular lyric annotation that they’re interested in. As a fallback, there's a link to view the annotation page for a song on Genius.com.

trackqueen-full-2

YouTube

Sometimes when trying to pull in the music video from YouTube, a version different from the official video would show as the top result. As a way around this, a “more results” tab was added, which would then almost always have the official video at the top. Actually, it even provided a great way to view remixes and other iterations people have made on the official video.

Showing all of the video results would be another option to consider. However, the official video is displayed more often than not. Furthermore, the comments are a key part of the music experience. Often the comments themselves are more of a reason to view the video section than the actual video itself.

x-trackqueen-5

Wikipedia

Wikipedia presented a challenge in that for artists with names that are also nouns, the article presented would be about the word, not the artist. There was some manual hacks around this, but a fallback presented to the user for these situations involves being able to report the error, so that I am notified about it and can fix it.

Additionally, a “try this” button is presented, which sends the user to a search result for “{artist name} + music.” This almost always provides the needed result.

trackqueen-wikipedia

trackqueen-wikipedia-2

Background Update

Another nice feature of TrackQueen that's probably not immediately clear is that while you're listening to music, it will update to your current track without needing to reload the page.

This was a challenge in that it would need to be a delicate balance of performance and functionality. Constantly pinging the Spotify API to check the current track would likely lead to Spotify cutting off access to their API.

The solution was to have TrackQueen check your currently playing track every 30 seconds. This seemed like a reasonable balance. It also wasn't critical to have a more frequent background update because refreshing the page is relatively easy for the user.

Results

Media


Fire up TrackQueen in a second browser tab and you’ll find everything you could possibly be curious about. It’s a fantastic, free, and easy-to-use app to improve your experience, and even add features Spotify removed like the song lyrics.

– Mihir Patkar, March 13, 2018, MakeUseOf.com


My thoughts

TrackQueen was launched in October of 2017. The user numbers are not high.

No matter how great you think your product is, if people don't know about it, there's not going to be a lot of use.

I learned about the importance of marketing with this project. As well as thinking deeply about the path users already take to perform tasks where you can present value. In the case of TrackQueen, this could be when someone performs a Google search for “Prince Raspberry Beret lyrics.”

TrackQueen has a chance for some greater success but spreading the word about the product to people with deep interests in music is critical. Sadly, I've done very little in that regard. My initial approach to that would be to make contact with people on music blogs and forums.

Despite the lack of viral takeoff, I do continue to use the product almost everyday, and I absolutely love it. Although, there's a few things I would change.

Particularly in the Genius lyrics annotations section. Often I'll hear a specific lyric in a song and want to find out some meaning behind it. Adding search functionality within the Genius annotations section would enable accessing that information faster.

I think TrackQueen would be a great free or $0.99 native app. Unfortunately, it was not until recently that I started learning about native app development. I have since started building a simple native application with React Native and Expo, which are both fantastic tools. I would love to get TrackQueen on the Apple and Google app stores someday.

As of December 2018, TrackQueen has had about 150,000 page views. The bounce rate is 0.17% and the average time spent on the site (session duration), according to Google Analytics is nine minutes.

What I learned

Screenshots

trackqueen-34

trackqueen-33

Homepage with track info

x-trackqueen-1

Lyrics from Musixmatch

x-trackqueen-4

Artist interviews

x-trackqueen-3

Music video

x-trackqueen-5

Genius annotations

trackqueen-full-2

Artist social media

trackqueen-21

Lyrics, artist, video, discover

trackqueen-11

Genius annotations

trackqueen-6

Icon iterations

portfolio-22

Final icon

trackqueen-9