98/Spotify re-imagined, a case study :’)

kshitija bhosale
7 min readFeb 22, 2023

I love Spotify, here’s how I would redesign it.

Roles and Responsibilities

  • User Research: Competitive Analysis, User Interviews, Persona Mapping, Affinity Mapping, Empathy Maps, Insights
  • UX Design: Sketches, Wireframing, User flow, Usability Testing, Prototyping high fidelity design and mockups

Project Context

March’22 — June’22

Solo student project

As a redesign project, my goal here was to completely change the look of this app and practice my UI + Figma skills while solving some real UX problems with the existing features and add a few new ones.

Understanding the users

I was able to interview people from a varied set of backgrounds: all regular users of the Spotify. I narrowed down the primary user group to young adults in the age range of 18–25 after the first round of interviews.

Objectives

  • Redesigning the app
  • Designing new features within the current Spotify platform
  • Tweaking pre-existing features to enhance the experience

The Additions

  1. Recycle Bin
  2. Shazam (I ended up taking this one out)
  3. Annotation feature

The Tweaks

  1. Lesser options, more actions
  2. Shared Playlists
  3. Group sessions

I narrowed down my problem space to tackle the most recurrent pain points. I used HMWs — short for How Might We statements — to put the problem statements into design questions that we can then start tackling one at a time.

Paper first

Here’s the Information Architecture of Spotify (Sitemap)

Onto problem-solving then!

“Spotify’s custom playlists give me too many options and make it harder to make a choice; I just end up listening to my old music instead of exploring anything new”

  1. How might we allow users to discover new music without overwhelming them?
  2. How might we better cater to users’ music needs (finding new music and old favorites alike) through Spotify’s custom-curated playlists?

Aah, the paradox of choice; Spotify curates personalized playlists just for you based on your listening activity, but the overwhelming amount of options actually makes it harder to explore new music. Users tend to look around a little and then stick to their own playlists.

The one too many playlists Spotify churns you for you daily triggers the Choice Overload Bias — when users are faced with more options than they desire — and results in them being overwhelmed and reluctant to engage due to limited cognitive resources and time constraints.

Now, this is a wonderful feature; we just need to regulate it better. I narrowed down the playlist options that Spotify custom curates for you into these four;

1

Artists You Love — The Latest Tracks from Your Favourites

2

Your top 50 — a playlist regularly updated with your most-played tracks.

3

Your Daily Mixtape — A daily playlist updated with a combination of songs based on your listening activity, as well as a selection of new music for you to experiment with — the amount of which is completely up to you.

4

Weekly Blast — A weekly jukebox based on the feedback from your daily mixtape plays.

Perfect. The home page is your space; a balanced blend of your old favorites and just enough new recommendations to not overwhelm you makes for a more personalized and streamlined user experience.

w lov, by spotify

“I lose track of songs that my friends share with me unless I save it manually”

  1. How might we let users find all the songs shared with them, by who, and when all in one place?
  2. How might we let users keep track of all the songs they shared with their friends?

There’s no real share feature in Spotify; you have to leave the platform to share a song link.

How my friends and I work around this is we have collaborative playlists, and every time one of us talks about a new song, the other person’s like “add it to our playlist.” But I only have these collab playlists with a few of my friends. Others suggest songs and sometimes I add them to my liked songs, and sometimes I forget about them completely.

What if there was a way to send songs to someone’s Spotify account — a send feature like in Instagram, where you send a post and it gets sent to the person’s chat without you having to leave your current experience — creating two ever-growing playlists, one with the songs shared with you and the other with the songs you’ve shared. Any song that is shared with you gets automatically added to this giant repository of music, along with the sender’s Spotify username, so you never lose track of your music or who shared it with you, all without having to leave the platform :’)

i wish this feature was real and customizable

“The concept of group sessions feels like a radio, can it be more interactive?”

  1. How might we further improve the group sessions experience?
  2. How might we better streamline the UI of group sessions?
  3. How might we diversify the group sessions experience and what features can we add to do so?

In addition to the radio setup that is the current model for the group sessions — listening to music with friends remotely in real-time, we could add a video call setup — taking the group sessions up a notch, where you can be in a video session with your friends while listening to music together. So, start an audio/video session or join an ongoing session using an invitation code.

did someone say a group session?!

“There has to be an easier way to retrieve deleted playlists”

How might we make restoring deleted playlists easier?

Adding a recycle bin within the control panel for the browser and at the top in your Profile tab for the app seemed like the most intuitive solution and the users appreciated this addition greatly. 🗑️

“I like leaving notes for my friends when I share a song, but I can’t do that on the platform”

How might we leave notes in a song at particular timestamps/lyrics?

Ah, annotations! I love the idea of leaving notes at specific timestamps when I share a song with someone. Unfortunately, that’s not possible right now, so I usually end up messaging the note along with the song or tell them in person or on call. Most of the time, we both end up forgetting about it.

Adding a small popup that appears when you tap a lyric which allows the users to add a note at a particular time stamp/lyric and then share the annotated song :’)

annotate your heart out

Here’s the prototype in Figma!

<iframe style=”border: 1px solid rgba(0, 0, 0, 0.1);” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F6bXEKJHyK1Iib3MeWpMv1E%2Ffigxperiments%3Fnode-id%3D158%253A3064%26scaling%3Dscale-down%26page-id%3D92%253A2376%26starting-point-node-id%3D158%253A3064%26show-proto-sidebar%3D1" allowfullscreen></iframe>

(Hint; this was designed as a add on app; very much like your notification bar, so drag from the end of each side of the phone screen to reveal a part of Spotify!)

The Style Guide

Conclusion + Lessons Learned

1

The role of psychology in design: I enjoy psychology a lot and read up quite a bit of it for this project. Understanding the intricacies of our psyche and our interactions with computers through this project has been invaluable. I look forward to integrating more user behavior-based design decisions into my work.

2

Experimenting with UI: I was studying color theory and this app seemed like a place to pull all the stops and go all out with color — it’s a music streaming app! I also spent a lot of time finding good font pairings to create a type scale, I ended up using Inter but playing around a lot with the width, type, size, kerning and more was so much fun. If I had to do this again, I would limit my colors, but this was a really fun project and the users enjoyed and had positive reviews about the colors in my designs and also the way each screen was literally pulled into view.

3

Focusing on Design Systems: This project was a good balance of UI and UX and one of my main goals was learning Figma and documenting my design journey better. Most of the systems and components I built during this projects have come in handy and I tweak and reuse them for my other projects regularly.

Fin.

--

--