CLIENT: Spotify
TIMELINE: 2 weeks
ROLE: UX/UI Designer
TOOLS: Sketch, Invision, Marvel
spotify
THE PROBLEM: Spotify is a leader in the music streaming service industry with a mission to help people listen to whatever music they want, whenever they want, and wherever they want. They want to maintain their position and for this reason, they want to improve engagement and retention in the app by expanding on their social capabilities.
THE SOLUTION: Design social features and integrate them seamlessly within the rest of the Spotify app by using existing design patterns.
hear what your friends are listening to
The Friend Feed and Friends Weekly playlist will help you discover new music through your friends.
Like your friends’ tastes in music and tired of listening to your playlists? The Friend Feed will show you what your friends are listening to at the moment. Or you can receive a curated playlist of your friends’ music that is scheduled to be released at the beginning of every week, similar to the existing and beloved Discover Weekly playlist.
easily share music with others
Spotify Air allows you to easily drop music to nearby Spotify users.
There are users who are not even aware that you can share music through Spotify and end up sharing music with friends through other avenues. On the other hand, they are aware but don't want to use the functionality because it requires more steps than they want. With Spotify Air, users can easily share a song or playlist with other Spotify users who are nearby with just a few simple clicks.
find a song for every situation
There's a song for every activity or moment. Find that song with a tag.
Like on Twitter and other social media platforms, Spotify hashtags work by organizing and categorizing song, album, and playlist content. Spotify users can collaborate with others to assign tags or use tags to help in the process of content discovery.
Research
OBJECTIVE: Identify demographics and trends of the music streaming services industry
PROCESS: Market Research | Heuristic Analysis | Competitive Analysis | Interviews
MARKET RESEARCH
I kicked off the project by researching the music streaming services industry and its trends and challenges as well as examining Spotify and their user demographic. I also investigated further into Spotify’s existing and former attempts to integrate social features.
INDUSTRY:
According to the Recording Industry Association of America, the total music industry revenue for 2018 was at $9.8 billion, up from $8.8 billion in 2017.
Streaming generated 75% ($7.4 billion) of industry revenue last year, increasing by 10% from 2017.
The average number of paid subscriptions grew 42% compared with the prior year, ending with 50.2 million paid music subscriptions.
Millennials make the largest group of music streamers being the most likely to be paid subscribers. Convenience is noted as a value they are seeking.
TRENDS & CHALLENGES:
Fraud is a growing concern for digital service providers and listeners - designed to be searched when listeners have a typo in the track (so they can collect royalties).
The next wave of streaming markets - the Middle East, India, Africa will be challenging due to lack of stable, widespread mobile coverage, and piracy issues.
Spotify does not currently have a block feature (and will not be put in place). This has been a concern for users for privacy reasons.
SPOTIFY:
There were 217 million monthly active users of Spotify according to the company’s official Q1 2019 report. Of these, 100 million were Spotify Premium subscribers.
Spotify has been operating at a loss until the end of fourth quarter of 2018 as the majority of their money goes to pay rights holders.
As of Q1 2019, 56% of Spotify users were male and 44% were female. Spotify has the most youthful user base with over half of users aged 34 or under.
CURRENT SOCIAL FEATURES:
Ability to follow favorite artists’ and friends’ playlists.
Get notified when artists release new content.
Actively share links to friends via Facebook, text messaging, etc.
FAILED SOCIAL FEATURES:
Direct message feature due to low engagement.
Spotify Insights - click any of nearly a thousand cities to hear a playlist of the music that is most distinctively enjoyed there.
HEURISTIC ANALYSIS
In order to familiarize myself with Spotify’s current design, I analyzed the features and social capabilities in Spotify’s mobile app. This allowed me to learn about the design patterns they utilize and how the new features I create would fit in within the app. Spotify’s existing layout places a large emphasis on its music listening and recommendations, more so than its social features. View the full analysis here.
COMPETITIVE ANALYSIS
After probing deeper into the music streaming services industry and Spotify, I wanted to determine how Spotify compared to its competitors by evaluating their pricing models and overall strengths of weaknesses of each platform.
USER INTERVIEWS
To learn more about Spotify’s users, I went to a local coffee shop to find Spotify Premium subscribers and hear about their experiences with Spotify in general and sharing music with others. I conducted 5 in-person interviews with young professionals, consisting of open ended questions to obtain a deeper understanding of how participants discover new music, what they’re typically doing when they listen to music, and what their expectations were when it comes to music streaming apps.
define
OBJECTIVE: Analyze observations and synthesize them to define the target user
PROCESS: Empathy map | Persona | POV Statements and HMW Questions
EMPATHY MAP
I used an empathy map to better understand how the participants I interviewed use Spotify and their needs, motivations, and frustrations while using its features.
INSIGHTS:
Users listen to music while doing different activities.
Users are deterred from sharing music when the process is complicated.
Users like to receive music recommendations from friends.
NEEDS:
To be able to listen to music that caters to various situations.
An easy way to share music.
Know what others in their social circle are listening to.
PERSONA
I created a persona named David to represent my findings from the empathy map to ensure that when designing, I would always keep the target user in mind. David is a young working professional who listens to music while working, exercising, and hanging out with friends and wants an easy way to share music. He represents the largest user group of Spotify, Millennials.
POINT OF VIEW STATEMENTS AND HOW MIGHT WE QUESTIONS
Using my insights and needs, I crafted point of view statements and how might we questions to define the design problem and frame it as a question to set up the process to prepare for the ideation process.
IDEATE
OBJECTIVE: Brainstorm potential features, information architecture, and flows
PROCESS: Group Brainstorming | Product Roadmap | Application Map | Task Flow | User Flow
GROUP BRAINSTORMING
I gathered 4 friends and facilitated a group brainstorming session to spark creativity when generating potential solutions to address David’s needs and create new social features within Spotify. After introducing my persona, David, to the group, I gave everyone post-it notes and had them come up with as many solutions as possible within the 5-minute time limit I set for each HMW question. The group brainstorming exercise allowed us to generate more ideas, expand upon each other’s thought process, and was a way to include my friends to have fun with me during the design process!
PRODUCT ROADMAP
Although there were so many creative and fun ideas that came from the group brainstorming exercise, I needed to focus on features that were feasible and could fit within Spotify’s existing design with little disruption.
APPLICATION MAP
To help me better understand where the new features would fit reasonably into Spotify’s existing layout, I created an application map outlining Spotify’s infrastructure.
TASK FLOWS
To demonstrate how David would interact with the new features, I created three task flows based on common scenarios I found during the research phase.
USER FLOWS
I expanded upon my task flow by creating a user flow to portray all potential paths David could take to complete his tasks. This allowed me to understand the screens that would need to be created and the best paths for optimization. The flow below outlines three user stories:
As David, I want to use the Spotify Air feature so that I can share a song with my friend (path in highlighted in purple color).
As David, I want to check out my Friend Feed so that I can find a new song to listen to (path highlighted in blue color).
As David, I want to look for my tagged playlist so that I can have something to listen to while planning my wedding with my fiancé (path highlighted in orange color).
design
OBJECTIVE: Design high-fidelity wireframes of Spotify’s new features using existing design patterns
PROCESS: Sketches | Branding | High-Fidelity Wireframes
SKETCHES
I began sketching out ideas of integrating the new features within Spotify’s existing layout. I made sure to reference existing UI elements to provide a seamless experience for users.
BRANDING
Before moving into transitioning the sketches to high-fidelity wireframes, I needed to understand Spotify’s current branding guidelines to make sure what I was designing a consistent experience for users. I did this by researching Spotify’s official branding guidelines for developers and pulled the content into a style tile for reference.
HIGH-FIDELITY WIREFRAMES
I decided to create high-fidelity wireframes to use for my prototype to give users a consistent look and feel so they can share feedback on whether they thought the new features integrated within Spotify’s design rather than trying to remember what the app looked like if it were low or mid-fidelity wireframes. The design of the new features were based off existing design patterns such as Spotify’s Discover Weekly playlist, existing album art, modals, and buttons.
prototype
OBJECTIVE: Prototype new features and obtain feedback based on usability tests
PROCESS: High-fidelity Prototype | Usability Testing
HIGH-FIDELITY PROTOTYPE
I created a functioning high-fidelity prototype via Sketch and InVision to see how Spotify users would interact with the new features. See version one of the high-fidelity prototype here:
USABILITY TESTING
After creating my high-fidelity prototype, it was time to visit a coffee shop again to conduct in-person usability tests. I was able to test 5 participants who have similar characteristics as my persona, David. I asked the participants to complete different tasks based on various scenarios. Based on this, I was able to collect valuable information and insight from my target users.
OBJECTIVES:
Observe if users are able to locate the new features based on existing mental models of current app design.
Determine if users are able to complete tasks via the new features.
Identify any pain points that causes frustration or confusion for users when using the new features.
TASKS:
Share a song with your friend using the Spotify Air feature.
Find out what song your friend is listening to and play it.
Find a tagged playlist.
Iterate
OBJECTIVE: Iterate design based on patterns in usability feedback
PROCESS: Affinity Map | Revised Wireframes and High-fidelity Prototype | UI Kit
AFFINITY MAP
I created an affinity map to organize my findings and extract insights based on common patterns and comments of the usability testing. I then used these insights to form recommendations and organized the recommendations based on priority level. See the full affinity map here.
REVISED HIGH-FIDELITY PROTOTYPE
I revised my wireframes and prototype to reflect the recommendations from my affinity map. Interact with the prototype and view the revisions below.
UI KIT
As I was working on creating my prototype, I maintained a UI kit given I had to recreate the most of the app using Sketch and wanted to make sure I kept all my buttons and elements handy for reference.
Reflection & next steps
FINAL THOUGHTS
This project was challenging as I had to adhere to the design patterns already established by Spotify and make sure that the new features I implemented flowed seamlessly within the app.
Although the Spotify Air feature was liked by the test participants, we would need to dive deeper on the backend technicalities that may arise when implementing this feature.
This project was rewarding as it is representative of many real world projects as designers work to improve existing products.
NEXT STEPS
Hand off designs to developers, discuss scalability, and determine any other technical limitations.
Continue iterations based on additional testing and begin collecting metrics regarding engagement of new features.
Update UI Kit as needed.
