key vis.png

Spotify Playlist Builder

cover image.png
 

Spotify Playlist Builder

As a personal project, I identified a pain point in spotify’s mobile UI and addressed it with a quick rebuild and animation in sketch and principal. Ive always loved spotify’s look, but wanted to give the interactions a little more character.

what was wrong

  • creating a playlist is not intuitive, and does not feel like the beginning of an experience

  • User flow doesn’t incorporate collaboration into the building process of a playlist.

  • Customizing a playlist on mobile is not optimized, (uploading album art, adding collaborators, adding and subtracting songs)

 
 
transparent-backround-iphone-8-Recovered.gif
 

Before

Artboard 2.png

After

Screen Shot 2018-11-20 at 12.03.36 AM.png
 
spotify_walkthru_1.gif

Create a Playlist

Creating a playlist is a large part of spotify’s appeal, so i featured it more prominently bringing it to the top of the playlist menu. The button drives you to a landing page displaying the different elements you can customize, encouraging users to really flesh out their playlist and make them unique.

 
 
 
spotify_walkthru_2.gif

Collaborate

Collaborating on a playlist currently has alot of issues, finding out how to share the playlist, invite friends, edit the collaborators ect.. I wanted this to be a simple process, and aided by each users avatar you can quickly scan or search your friends list. This feature could also exist as a badge on the playlist page to be edited in the future.

 
 
 
spotify_walkthru_3.gif

Build

Instead of adding songs to a playlist by browsing across the entire app, I isolated the action into a mode. When in builder the bottom of the viewport will glow to indicate that your controls have now changed slightly as to build your playlist faster and easier. Now you can quickly listen to a song to make sure its the right one, and add multiple songs with one click each. Having each song illuminate helps the feeling of your playlist growing.

 
 
 
spotify_walkthru_4.gif

Listen

You’ve built your playlist, and the landing page is now filled with the album art you uploaded, the songs you put in it, as well as the friends you are working on it with. Now set things in motion and launch your playlist.

 
Screen Shot 2018-11-19 at 11.42.53 PM.png