Top Ones
View your top streaming artists whenever you want.
Part 1 - Design Breakdown
Project summary
Goal: Let music fans view their current top 50 artists on Spotify whenever they want, letting users connect more meaningfully with their favorite music.
Solution: Mobile app that connects with a user’s Spotify account and lets them unlock their top 50 by playing the quiz and sharing with friends.
Status: Prototyped (try it out!)
My role: Everything (product design, user research, product strategy)
Try a prototype
To try a prototype of Top Ones, click here or scan the QR code below. It works best on mobile.
View your top streaming artists when you want
If you spend a lot of time streaming music like me, you probably look forward to seeing your top artists at the end of the year. But wait… they only show you up to #5??
Top Ones frees you from Big Music knowing all of your listening habits, but not being able to spare even your Top 10 😰
Connects to Spotify
Connect your Spotify account to see your Top 5. Then, take the quiz to see how well you know your own top artists. Unlock your Top 25 by getting all of them right.
Share to unlock your Top 50
Unlock the rest of your Top 50 by sharing with 5 people (everyone knows about gamification, right?).
Simplifying the value proposition
At first, I imagined Top Ones as a data visualization tool, a way to explore your Spotify data more deeply. The initial wireframes reflect this. Under this initial vision, users would have been able to see various charts and visualizations and flip between different filters. I’m a bit of a stats and data nerd, so this appealed to me.
But then I realized that most people may not want or care about this level of detail. Even if someone wants to see their top artists, they may not want it to feel like analyzing data.
I thought about how to make the value proposition more straightforward. Because, surprisingly, there isn’t an easy way to see your own top artists on-demand, that functionality could get people excited on its own.
Design inspiration
An inspiration for Top Ones’ visual design and interaction design was Pyro, a DJing app developed by the music software company Serato. The app let you easily make DJ mixes with songs in your library. It was launched in 2016 and has since been discontinued. I think I heard about it around then and downloaded it, but didn’t end up using it much. The design must have stuck with me. I appreciate its creative and functional use of color, and “microinteractions” that appear in response to core actions.
Pyro’s design draws heavily from 2010s-era flat design. The visual design is extremely minimal, in a way that feels a bit dated and lacking polish. But it is pretty easy to pick up and use, thanks to the simple interaction design. Notice how Pyro went outside-the-box in adding small visual flourishes, called microinteractions, to some of the core gestures and visual components. For example:
pressing ‘Next’ triggers a little flame
swiping down/up on the song queue causes the menu to appear/hide
swiping left or right on a song causes it to tilt upwards, and an icon appears to indicate what is happening
Microinteractions are now a common pattern in consumer products, including Spotify; I don’t remember how widespread they were in 2016. This is clearly an app targeted for a tech-savvy DJ crowd, and I could see how other types of users might prefer fewer visual bells and whistles. But hopefully the app’s functionality is simple enough, and these microinteractions are unobtrusive enough, that usability is not impacted.
I like products whose design both follows the rules enough to maintain good UX/UI, but still takes opportunities to color outside the lines. These two goals are often at odds, but when a product gets it right, it can be memorable. One of my goals for Top Ones was to strike this balance.
“Tap here” animation
One piece of feedback I got on an early iteration of Top Ones was that it wasn’t clear enough that users could tap on artist rows to expand them. To address this usability concern, I designed a microinteraction to be displayed on the top row if a user does not take any action after landing on the page. The goal is to give some guidance to users who need it, while not distracting from the user experience for anyone.
Designed to be shared
Music is meant to be shared - so is Top Ones. When designing any product, it’s essential to have high-quality images to represent the product. Especially images that people are sharing. Also, when you’re asking people to do some work on your behalf by sharing your product, you should give them something that looks good enough to share.
With this in mind, I designed a “share” image to encourage users to share Top Ones with their friends. I created the illustrated backgrounds using DALL-E and DreamStudio, two AI image generators.
This was inspired by Spotify and Genius, two music apps with thoughtfully-designed ways for users to share content.
A tangent about AI image generation
If you’re a software engineer, then at this point, you might ask:
What’s the logic we should use to programmatically generate a background image for an arbitrary artist on Spotify?
The answer? It doesn’t exist and is not feasible, yet.
This little graphic design tangent was, by necessity, human-led. That’s because at time of writing (March 2024), AI image generators are not capable of generating sufficiently creative and interesting graphics to fit my needs. If I had to specify logic for programming a computer to do this programmatically, I would program the AI to verbally describe key elements of the artist’s music and then generate an image based on that description. The process would go something like this:
Prompt: “Describe the music of [artist name], including any motifs, themes, aesthetics, activities, people, places, and objects featured in their music”
Use the output from Step 1 as the prompt to generate a graphic.
But since I could just create images manually for the purposes of this project, I decided to do that. I started by prompting DALL-E like this:
Generate a background graphic inspired by the music of ____
but I didn’t like the results. Its first attempt was usually something like this:
These are too generic. I wanted graphics to represent specific artists: these could be used to represent a very broad range of artists, or even “music” as a general concept. In addition, these graphics are done in a certain style of AI-generated art that is hard to describe but is very common at the moment. As far as I know, this style does not have a name (yet). That style kind of annoys me, and I’m not interested in emulating it.
I tried giving a bit more direction:
DALL-E really wanted to include a person, despite my instruction not to. The person looks a lot like Mac Miller, again ignoring my instructions. When I’ve used DALL-E in the past, it has refused to generate images of real people, but in this case it did not object.
The style of these images is a bit more interesting. It abandoned the “digital fantasy art” style of the previous images in favor of a “fan art” aesthetic. Still, it struggled to give me something that worked as the background of a headshot rather than a headshot itself. I was looking for a graphic representation of the themes and ideas that an artist’s music evokes. And that is, for now, a capability out of reach of AI. I don’t see it staying that way for long.
I’m always amazed at how quickly people adapt to new technology and reset their baseline expectations over time. I don’t mean necessarily using the technology, but just being aware of what’s possible using technology. For example, Google Maps can show you any place on Earth and how to get there. It’s life-changing technology that, if shown to people even 50 years ago, would blow their minds.
I notice myself doing this with tools like DALL-E. The user experience of AI image generators actually is very similar to Google image search. You type something into a box and it returns images. But instead of fetching images that already exist, it creates something that didn’t exist until you asked for it. My first time using AI image generation was Midjourney in April 2023. Until then, like all non-artists, I lacked the skills to create most types of images on-demand. Like Google image search before it, it’s a superpower. But now that I’ve been using these tools for a while, I mostly just get annoyed when they don’t do exactly what I want.
If I had more time, what would I add?
If I had more time to work on this project, I would add a game where users can guess the top overall artists on Spotify right now.
Like the top artists list per-user, Spotify doesn’t let you easily see this in the app. And again, I think they are missing an opportunity. You can view overall top song charts, but the only way to see an artist’s ranking is to go to their page and scroll down to their bio, where some artists have a ranking. I think Spotify only shows rankings up to 500th (in the world). So to find out the top 10, you need to go to each artist’s page, which requires correctly guessing all 10 artists. That’s a lot of work!
I’ve played this game in real life with friends. It’s a way to see how plugged-in you are to the culture of music. I think there’s an opportunity to turn this into a game within Top Ones. It complements what already exists in the app, and it’s another unique way to let people connect to their music.
