Published on | Prototyping: From UX to Front End — Medium Renee Lin

The Challenge

I love music and use Spotify everyday, when I’m struggling to get up in the morning, when I’m focusing at work and when I’m taking a shower in the evening. It has been a pleasant experience with Spotify but I’m quite the picky designer and I believe it could be better.

I was provided a great opportunity to do a reverse engineering practice of Spotify. I spent two weekends to take things apart, understand how it works and try to improve the user experience. This practice is purely based on my own research and my personal usage.

Part 1 : Current State Analysis

Business Goals vs. User Goals
Information Architecture
User Journeys

Part 2 : Unsolicited Redesign

Revised Information Architecture
UX Suggestions and Redesign

Part 1 : Current State Analysis

Business Goals vs. User Goals

User experience (UX) is where business goals and user goals intersect. It is how a human feels when using a product while attempting to accomplish a task or a goal.

Business Goals

Spotify is a music, podcast, and video streaming service, officially launched on 7 October 2008. Spotify is a freemium service, meaning that basic features are free with advertisements, while additional features, including improved streaming quality and offline music downloads, are offered via paid subscriptions.

Spotify free version and premium version

Freemium

Develop a wide range of innovative advertising formats — Audio Ad, Homepage Takeover, Video Takeover, Branded Playlist etc.

2. Premium

Have users invest their time to build up a library and explore functions. Offer key features in premium version.
Stream content — buying and curating more and more content. Spotify provides access to over 30 million songs in 2016. Every time that a user streams a song, Spotify gets paid.

3. More users

Retain existing users
Build a social community within the app
Encourage sharing across other social media platforms
Conduct marketing campaigns
Build partnership with third-party platforms

User Goals

A little background of myself — the user.

Age: 20–25
Device: 90% iPhone 10% Macbook
Songs of collection: >2,000 songs
Frequency of use: >5 hours everyday (premium user)
Needs: Access to all the music I like, discover new music and share music with friends.

“I just need two spots. One spot for my favourite songs and playlists; Another spot for discovering new songs. ”

User Goals

Listen to and save music

Quick and easy way to search a song
Build a personal music library and listen repeatedly

2. Discover new music

Discover Weekly/Daily Mix — listen to recommended songs
Radio — listen to songs that are similar to certain songs, albums, artists or playlists

3. Socialize with friends

Share songs or playlists
See friends activities

So, how do we maximize the sweet spot where user goals and business goals intersect?

The simple answer is providing a kick-ass user experience to make your user love using the app. Let’s start from the backbone of a digital product — Information Architecture(IA).

Information Architecture

One of the challenges people have with IA is that they can’t easily see it. Have you ever heard someone say, “Man, that website’s information architecture sucks!” I bet no. More likely you would hear, “I can’t find anything. Why is it all over the place?”

Some of my friends have the same frustrations as me since we get confused by Spotify’s navigation. So I visualized the current IA and marked the duplicated sections in green. Let’s see what is going on.

Spotify Information Architecture

I was surprised by how many duplicated sections there are and how little content that I am actually using. [Do I really need to see Daily Mix three times throughout the app? ]

Main Issues

Content overload

Duplicated sections or similar functions
Only few parts of content are frequently used

2. Lack of priority

Need to prioritize the top user flows
Need to create visual hierarchy

3. Confusing names

Examples: ‘Made for you’, ‘Playlists made for you’, ‘Top recommendations for you’, ‘The perfect soundtrack for your afternoon’, ‘You might also like.’ [Which one should I choose?]
Another example: ‘Jump back in’, ‘Recently played’ [What is the difference?]

User Journey Map

A user journey map allows you to identify and strategize for key moments. I mapped out the top three user flows with user goals and pain points at each step in order to define key opportunities to improve the overall user experience.

Main User Pain Points

Listen to saved songs — ‘My Library’

Hard to find user-created playlists within all playlists
Search bar and filter are hidden

2. Search a song and save it — ‘Search’

Hard to find the right song with too many results
Long press preview function is hidden

3. Explore recommended songs — ‘Home/Browse/Radio’

Hard to choose from too many recommendation sections
Some of the sections repeat too many times throughout the app

Part 2 Unsolicited Redesign

In this part, I’m going to minimize the features based on my personal usage, redesign the IA(Information Architecture) and some UI (User Interface). Finally, I will propose a couple of suggestions to resolve the pain points found in the three user journeys.

True Story:

Revised Information Architecture

Almost every popular product starts from MVP (Minimum Viable Product) with the key information and becomes more and more cluttered adding new features as it grows. Sometimes we need to take a step back to focus on what actually matters to the user and how to present that to the user.

In order to create a minimalist design, I reorganized the information, combined the duplicated content and removed some of the sections that I don’t use frequently, such as ‘Concerts’ and ‘Podcasts’.

Old vs. New IA

Wireframes

There are four sections in the revised IA which are ‘My Library’, ‘Discover’, ‘Radio’ and ‘Search’. I combined ‘Home’ and ‘Browse’ into ‘Discover’ as they have lots of duplicated content and serve the same purpose which is to discover new music.

Since my simplified version of Spotify has less features and pages, I changed the navigation tabs back to a hamburger menu to create a clean interface.

Also, I tried to prioritize the most frequently used sections with visual hierarchy.

Redesigned Wireframes

UX Suggestions and Redesign

After analyzing user pain points from the three user journeys, I summarized a list of UX suggestions by section.

Library

Label Name — I suggest to change the name from ‘Your library’ to ‘My library’ or even ‘Library’ because an app should communicate with the user from their perspective.
Visual Hierarchy — I prioritized four main sections in ‘My Library’ which are ‘My songs’, ‘My playlists’, ‘My stations’ and ‘My artists’. I suggest to move ‘Daily Mix’ from ‘Library’ to ‘Discover’ and change ‘Albums’ to a filter inside of ‘My songs’.

2. Songs

Currently, the search bar and filter are invisible unless the user scrolls to find them and even then there are only limited filters included. I suggest to make search bars and filters easy to access and add more useful filters including but not limited to ‘Most played’, ‘Artists’, ‘Albums’ and ‘Moods’.

3. Playlists

Currently, the user-created playlists are buried by tons of other saved playlists. These two types of playlists have different priorities so I suggest to add a ‘Made by You’ filter so that the user is able to access their own playlists easily.

2. Search

Sort the search results by popularity (same as desktop version) — Most of the time a name is all we know to find a song. When users don’t know who the original artist is or which cover is the most popular one, the popularity filter could be very helpful.

Search results (Desktop vs. Mobile)

Make long press preview a user habit — Before I did this exercise, I had no idea that we can long press on a song, playlist or album and get a 30-second preview. This is a great feature to solve the shortcomings of visually browsing music but it’s kind of hard to discover for new users. So I suggest to add a short sentence on the search page like “Try to long press on a song. ” for users who don’t know this function.

Long Press Preview

3. Discover Weekly

‘Discover Weekly’ is a weekly roundup of songs based on user listening history and their music taste. It is one of the most popular features of Spotify.

Keep it at the same place — I suggest to put it in the ‘Made for You’ section and always keep it on the ‘Discover’ page instead of showing it everywhere.
Make the feedback actions consistent (See the screenshots below) — 1. Daily Mix: ‘Like’ and ‘Block’ icons; 2. Radio: ‘Thumbs up’ and ‘Thumbs down’; 3. Discover Weekly: ‘Shuffle’ and ‘Repeat’. I suggest to get user feedback in a consistent way.

Other Ideas

Xiami is a Chinese music app by Alibaba that I have been using for more than six years. There are some small features that really bring me joy. I’d like to share with you here:

Music comment section

I like sharing my stories of music with people who have the same taste. I write down my thoughts and feelings in the comment section where people can like each others comments and make friends.

2. Sleep timer

Lots of people listen to music before they go to bed. A sleep mode allows users to set up a certain period of time before it automatically shuts down. Falling asleep with music on sounds like a good experience right?

3. Lyric poster

Xiami provides poster templates when users share songs. A user is able to choose the lyric and background image to create their own poster and post on social media.

3. Tape player

I still remember the surprising moment when I accidentally turned my phone to landscape mode and found the music player becoming a tape player. It suddenly brought me back to 12 years ago when I held a giant box and listened to a tape over and over again. Sometimes we need to take more than one step back to find the little joy and add it to our product.

Reflection

To me, UX design is all about happiness. As a user, it is the exciting and memorable moment of using a product. As a designer, it is the sense of fulfilment when people like my ideas. I love the design thinking process of understanding why things work and why not.

“It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” –Don Norman

I hope you enjoyed reading and I would love to hear your thoughts.

Thank you! 🙂

Reference:

Spotify Community — A place where Spotify users interact and propose their ideas.

Spotify Business Model and How does Spotify Make Money

Spotify Case Study

A UX Redesign of Spotify

Spotify — An In-Depth Product Analysis

Spotify UX Analysis and Redesign was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Spotify UX Analysis and Redesign

Cool stuff, every week

More Articles