Spotify (UX/UI-New Features)
Overview
Spotify is looking to expand the Spotify Premium user base by improving existing features and creating new ones. With Apple Music, Amazon Music, and YouTube Music all looking for a piece of the pie, it’s essential for Spotify to continue acquiring new Premium users at a high rate to remain the front runners in the music-streaming industry.
Challenge
The primary business goal is to increase the conversion rate of users switching from free to premium versions. The conversions could potentially be achieved by increasing user engagement and user satisfaction by creating features that reflect user needs.
Solution
Improvement/creation of features that are in line with user and business needs.
Role
UX/UI Designer
Team
Self-directed
Timeline
2 months
Tools
Figma
Hypotheses
I began the project with a set of hypotheses that were backed up by doing some initial research on Spotify's community forums and Reddit. I chose the ones that seemed to have a considerable amount of popularity amongst Spotify's users.
Currently, Spotify does not have a lyrics translation feature. The current lyrics feature displays lyrics in the language of the song, making it hard for listeners to follow along due to not being able to read and understand the language. - Lyrics Translation feature.
The Spotify experience is somewhat inconsistent on mobile compared to the desktop version. On desktop, you can see what your friends are listening to, while on mobile this feature is missing. It's been expressed on community suggestions pages that it's a feature that users would like to see on mobile too. - Friends Activity feature.
Based on a request on Spotify’s community suggestions page. Spotify already has a Group Session function that lets users invite up to five friends to shared listening session where each user can play songs, control playback, and add items to the queue. While this is great for small gathering or outings with friends, a more powerful DJ mode would be beneficial for those in charge of larger and more organized events. - Spotify "DJ" session feature.
Understanding the Business
“Business Owner Interview”
To kick off business-related research, I prepared a set of questions I would ask the business owner. Even though I couldn't speak to the CEO of Spotify, I tried to answer the questions I prepared myself by finding the answers online.
The information I wanted to find was primarily focused on the business model, what constitutes success, target audience, competitors, and anything that would help understand the business, its components, and surroundings.
Essentially I wanted to gather enough information that would allow me to fill in the business model canvas.
Key finds:
The target audience is Gen Z and Millenials
Freemium business model
Spotify’s primary revenue sources include Subscriptions and Advertising
Its marketing strategy focuses on popular trends with a particular incline to social media campaigns to capture younger consumers
Spotify makes most of its revenues from advertising and paid subscriptions, with a small percentage from other sources such as third-party apps
Spotify’s core focus has always been user engagement
Business model-related finds:
Attract a large base of users with a free service
Convert free users to a premium value proposition
Manage retention and churn
Balance cost of free and premium
Finance it all with your revenue stream from premium
Business Model Canvas
Having gathered all of the business-related information I could proceed with filling in the business model canvas. It served the purpose of structuring the data I gathered and enabling me to see the big picture. It’s a document I could come back to whenever I needed to refresh my memory about the business.
Product Strategy
My next step was to create a product strategy where I have an action list of the process I'm going to follow and other elements of which most important is the clear definition of the problem:
“The primary business goal is to increase the conversion rate of users switching from free to premium versions. The conversions could potentially be achieved by increasing user engagement and user satisfaction by creating features that reflect user needs.”
This piece of document served as benchmark for further design decisions.
HEART Metrics
To make this project feel a bit more real I defined which metrics I would use to evaluate the quality of the user experience. I chose:
Engagement - one of Spotify's main focuses
Adoption - conversion rates are a primary business goal
Retention - it's in line with the business goal of maintaining a high Spotify Premium user base as it is one of the main sources of revenue
This set of metrics would make a decent indication of whether the developed features are of value.
Understanding the User
Proto Empathy Map
I started the user research phase by reminding myself of Maslow's hierarchy of needs. Maslow's hierarchy of needs is a theory of motivation which states that five categories of human needs dictate an individual's behavior. Those needs are physiological needs, safety needs, love, and belonging needs, esteem needs, and self-actualization needs.
From there I proceeded with creating a proto-empathy map that is based on my assumptions and information I found during the business research phase.
The assumption was that the dominant needs are in the upper categories of Maslow's pyramid of needs. The need to be social and validated and the need to understand could be interpreted as a branch of the need for belonging/esteem.
The empathy map steered me in the right direction and helped me to think of questions that I would use in the following steps of user research.
User Research
I began the preparation for user interviews by deciding who would be my ideal participants:
Someone interested in lyrics
Someone who likes to listen to and share music with a group of people
Someone interested in what their friends are listening to
To find these people I created a screening survey that I shared on social media groups. With ~50 respondents, I found enough participants to interview.
Before conducting the interviews, I had to come up with questions to ask. Coming up with the right questions is critical and very challenging as there is always a cloud of doubt about whether these sets of questions are the right ones. To tackle doubt, I went through the process of typing out the reasons behind every question that I thought was worth asking. If I managed to give good reasons for why this question will provide valuable data, I added it to the interview guide.
With the script in hand, I was ready to speak to the participants I picked from the screening survey. I ended up speaking to 9 people to cover all three areas of interest. Some participants had more than 1 area of interest, which saved me time as I didn't have to speak to even more people. During the interviews, I took notes and recorded the sessions to review them later. I used the affinity clustering method, which helped me classify patterns related to user needs, wants, habits and pains.
Key findings:
Users are curious when they hear a language they don’t understand
Users translate song lyrics on Google Translate or dedicated translation websites/apps
Users like to share music on social media because it makes them feel good
Users aren’t aware of the Group Session feature on Spotify
Users don’t face any issues regarding situations where a friend wants to play a song
User use music-streaming platforms because they’re convenient
Inconsistencies across devices / systems frustrate users
Research Results Analysis
My next move was to update an assumption-based empathy map so that it would reflect the user pains and gains that I discovered during the interviews. It solidified my findings and enabled me to gain a deeper understanding of the user that I will be designing for.
Behavior patterns and User Groups
It was important for me to properly digest all of the data gathered during user research and identify patterns in it that would allow the creation of user groups that would later manifest as user personas.
Finding behavior patterns was interesting. Seeing how all of the data that at first felt jumbled together now all fell into place and enabled me to identify three user groups.
The casual listeners (occasionally interested in lyrics; somewhat interested in what their friends are listening to; not aware of the Group Sessions feature)
The semi-social lyrics enthusiasts (interested in song lyrics; they don't share music on social media but are somewhat interested in what their friends are listening to; not aware of the Group Session feature)
The open-minded vibe catchers (they don't bother translating lyrics; they love sharing music on social media and listening to their friends' recommendations; not aware of the Group Session feature)
It was clear that the hypothesis regarding the DJ Session feature was not valid after speaking to the users. No one expressed a need for such feature or an improvement of the current Group Session feature. None of the Spotify users I spoke to have ever come across the Group Session feature before.
Personas
To gain more empathy and solidify my user research, I created two personas that would represent the identified user groups. I went with two because the casual listener user group in terms of interests is a merge of the other two user groups. Therefore, in order to gain deeper empathy, I created personas reflecting the semi-social lyrics enthusiast and the open-minded vibe catcher.
Impact Map
To define the scope of this project I used the impact mapping method. This approach provides focus for delivery by putting deliverables in the context of impacts they are supposed to achieve. I had to ideate the potential deliverables and pick the ones that overlap and solve both personas’ needs.
Features that made it to the scope:
Friends Activity - would solve both personas’ issues. Improve Spotify experience consistency
Lyrics Translation - solves one personas’ issues. Increases engagement
Interaction Design
Information architecture
To kick off the interaction design phase, I conducted a card-sorting exercise with real Spotify users to find out which placement of the new features would make the most sense.
Friends Activity (social feature) - 5/5 people placed it in the home screen
Lyrics Translation feature - 5/5 people placed it in the Song player/Lyrics screen
“See what your friends are playing” toggle - 5/5 people placed in the social settings section instead of display settings section
Having this information I could then create an app map.
Customer journey mapping
Once I had the app map, I needed to see these features improve the current user journey and ideate revisions in specific areas of the journey.
As seen in the diagram below Tom's current journey is quite long. For him to see what a specific friend is listening to he would have to go on several different apps. This space made me about improvements in the area and gave me the idea of a prioritization feature. Using this feature users would be able to set a friend's status to favorite. This feature is also in line with the fact that users like to receive song recommendations from people who they know have good music taste.
Kate’s case was rather more straightforward as it is a pretty basic translation feature.
User Flow
With personas' characteristics in mind, I created a user flow that covers both features. It helped me ensure that all screens needed are accounted for.
Visual Design
Wireframes
Considering the fact that Spotify’s main audiences are Millennials and Gen Z, I thought it'd be good to use a design pattern that feels familiar - the Snapchat Story pattern. Users would already have a mental model that would make their journey more seamless.
By confirming which screens I would work on with the task flows, I grabbed a pencil and did the crazy 8’s exercise. After sketching out as many versions of screens as possible, I chose the best ones and proceeded with digitizing them on Figma.
High Fidelity Wireframes
Using Spotify’s design guidelines I proceeded to create high-fidelity wireframes that I would later use for usability testing. It was tricky getting the icons to look identical as Spotify hasn’t released its icons for public use. Therefore, I ended up spending a considerable amount of time on some icons that needed fine-tuning.
Usability Testing
Usability testing is the part of the design process that I find the most exciting. The first moment when you see your work through the user's eyes is priceless. A lot of the time you are confronted with so many small issues that somehow remained hidden. I find the feedback cycle between designer and user is the heart of the user-centered design process.
Goal: To identify areas of friction that users face when they interact with the product so that they can be fixed
Methods: remote moderated (5 participants + 5 non-user participants); remote unmoderated (6 participants)
Metrics: completion rate and task time
Usability Test Findings
Everyone was able to complete the tasks
Unmoderated participants took the least amount of time to complete the tasks (3 task average 25s)
Moderated participants took slightly longer than unmoderated participants (3 task average 26.8s)
Moderated non-user participants took slightly longer to complete the tasks (3 task average 32.75s)
6 (2 unmoderated) out of 9 users looked for the “favorite” CTA in song options on the “story” screen
4 (2 unmoderated) out of 9 users didn’t click on “favorite” star first, some clicked on the the more button
2 users found the search input text misleading. (search screen)
Post Usability Test Changes
Testing the prototype with user uncovered areas of friction that needed fixing:
Story Screen - Instead of hiding the "Favorite" CTA in the "More options" button, I placed it on top of the screen next to the "More options" button
Profile Screen - I replaced the "Star" CTA with a labeled "Favorite" button next to the "Following" button
Search Screen - I added the word "Friends" in the search bar and added a "Your Friends" section below the search bar
Takeaways
With this case study, I wanted to utilize more frameworks and tools than in previous projects. This approach helped me gain deeper understanding of both users and business which enabled me to make better design decisions.
I think it’s important to note that as a user of Spotify I’m naturally biased and it was important to remain as neutral and open-minded about this project as possible. Distancing myself from any of the opinions that I had about Spotify was good practice and something that I would like to do with other future projects. It was essential to base all of my design decisions on the business and user needs and not my own biases.