A rough prototype of adding a tagging feature to the current Spotify UI, focusing on learning the Figma design space.
Find more in-depth documentation on my Notion.
Spotify has introduced several UI updates in recent years, including personalized themed playlists like "Chill Mix," which blend user favorites with similar tracks. While generally well-received, some mixes occasionally include off-theme songs due to algorithm errors. Another update added short-form videos for music discovery through Spotify-created tags. However, in my experience, this feature has shown little evidence of effective use.
Creating custom mixes and tags would offer a more reliable and personalized experience than Spotify’s algorithm. Self-curated or crowdsourced themes would give users greater control while still supporting music discovery. This project explores adapting social media-style hashtags for Spotify’s interface. It also serves as a way to gain experience with Figma prototyping and analyze effective UI design in a successful app.
I prototyped the UI in Figma, learning the design tools as I built a Spotify home page mockup. I added a scrolling list of tags alongside existing playlists and albums. To showcase tag integration, I designed five pages: Home, Search, Library (filtered by tags), an album page, and a tag page. I then added interactions like fixed headers, scrolling, and navigation to connect the pages. While not as complex as a full Spotify build, this prototype effectively demonstrates how tags could enhance the user experience.
The final product displays an updated interface for Spotify's main pages that integrates this tagging system. All of the frames have working footer menus, and each instance of “Album name” links to the album page, and each instance of “Tags you made” links to the tag page. Overall, this rough product successfully builds out a potential new feature.
I gained valuable insight into UI/UX design by creating this project. I’ve always been interested in how app layouts are designed, but this was the first time I actively delved into it. Figma is an industry-standard product, and I can now say that I have experience with its prototyping software. I am also satisfied with how the tag system looks in this UI. It was a very fun idea to delve deeper into and maybe someday I’ll be able to actually implement better features into Spotify. Building off this experience, I would like to commit to a deeper UI design of an app, starting with full wireframes and building fully functional pages. I’m excited to see what I can accomplish within the UI/UX design space now that I’ve broken into it.