Spotify
Integrating a new feature into the music streaming app
Overview
Role: UX Research, UX Design, UI Design
Duration: 4 weeks
Tools: Figma, Sketch, Marvel
Challenge: As a streaming music service, Spotify is the group lead and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities. My aim is to help them define what’s the best way to move forward in that direction.
Solution: Upon conducting research and discovering what would most benefit Spotify and its’ users, I provided them with a mobile prototype of a new feature that connects users to one another through music and integrates seamlessly with the rest of the application.
Process
Research
Process: Market Research | Provisional Personas | App Audit | User Interviews | Empathy Map | User Personas
Research Plan
Market Research
Competitive Analysis
I first made a research plan to outline my strategy and define the goals and objectives of the research to help focus my aim in the necessary direction.
Goals
Identify users’ motivations for streaming music
Find out how users interact with the app
Gain insight into users’ experiences with music streaming apps
View the full research plan here.
I started by conducting market research on the music streaming industry with a focus on Spotify specifically.
Trends
Mobile apps monopolize time spent on music platforms
Technology and social media have also influenced the way we consume music through live shows and festival circuits as well.
Demographics
Spotify’s user base is dominated by Millennials, with 29 percent of its users aged 25 to 34 and 26 percent aged between 18 and 24 years old.
Spotify reaches almost half of 16 to 24-year-olds in the United States each week.
56% of Spotify users are male. 44% female.
User Behavior
Nearly 60 percent of millennials use two or more apps for streaming music.
Playlists account for 31% of listening time across all demographics.
Younger users are 21% more likely to choose songs to play on demand, instead of streaming music without making changes.
In order to gain a leg up on Spotify’s competitors, I did a competitive analysis of their strengths and weaknesses, which will allow us to gain leverage in the market.
Provisional Personas
After conducting secondary research, it was important to create a visual representation of our knowledge base of our users, thus far, by crafting provisional personas.
App Audit
By conducting an app audit via heuristic evaluation, I was able to identify any current usability issues in the user interface design.
User Interviews
Empathy Map
After gaining deeper knowledge of the market and Spotify itself, I needed to hear what its users had to say about the app. I conducted 6 user interviews to empathize with my target audience and gain insight into their personal experiences with Spotify and music streaming apps.
Participants
6 participants: 4 female, 2 male
Ages 25-48 yrs
Spotify Premium users
Avg. interview time: 20 minutes
To synthesize my interview findings, I created an empathy map, which brought forth key insights and needs of Spotify users.
Insights
Users enjoy connecting with others through streaming apps
Users want a streaming app that is tailored to their preferences
Background noise helps users focus on their daily tasks
Live music complements the listening experience for users
Finding new music is exciting for users
Needs
Users need to feel a sense of community from their streaming app
Users need to be able to customize their streaming experience
Users need to easily control the app while doing other things
Users need to be able to view concert information from the app
Users need to be able to discover new music in their streaming app
User Personas
Gathering all of my secondary and primary research, I crafted a user persona to define our target audience and create a user framework from which to design.
Define
Process: POV Statements & HMW Questions | Brainstorming | Project Goals | Product Roadmap
POV Statements & HMW Questions
To aid in defining the problem we are trying to solve and prepare for brainstorming, I constructed Point of View statements and ‘How might we…’ questions.
Brainstorming
To begin ideating on problem solutions, I began brainstorming using a mind-mapping method for each HMW question I created.
Then to expand on the ideation process from different perspectives, I held a remote group brainstorming session implementing a rapid ideation method.
Business & User Goals
I created a Venn diagram displaying the business and user goals, to have a reference for the main project goals as a focus throughout the design process.
Product Roadmap
Once project goals were established, I created a document to outline and prioritize the key sub-features for the main added feature.
View the product roadmap here.
Info Architecture & IxD
Process: App map | UI Requirements | User & Task Flows | Sketches | High-Fidelity Wireframes
App map
I created a sitemap to get an overview of the organizational structure of the Spotify app with the added feature integrated.
UI Requirements
To outline the necessary UI elements for each screen based on the user's main tasks, I created a UI requirements document, which included the high-level and detailed requirements for the feature and each added screen.
User & Task Flows
Upon coming up with different user scenarios, I created a user flow to map out the different paths and entry points a user can take to accomplish main tasks, as well as a task flow to detail the main flow a user will take to achieve a task and uncover challenges.
Wireframe Sketches
To generate the layout and design patterns of each screen to fit seamlessly into the existing app, I started sketching low-fidelity wireframes.
High-Fidelity Wireframes
After figuring out the structure for each main screen, I implemented the UI elements into the low-fidelity sketches in order to prepare a prototype for testing.
Android Mobile Wireframes
Prototype
Process: Prototyping Creation
High-Fidelity Prototype
To begin prototyping, I made the hi-fi wireframes into an interactive basis for the product in order to properly test for usability.
Test
Process: Usability Testing | Affinity Map
Usability Testing
I conducted usability testing on the high-fidelity prototype to uncover pain points and usability flaws when interacting with the app and added feature. I conducted remote moderated testing via screen sharing through a video chat application, while users spoke aloud about their thoughts and actions as they navigated the app.
Participants
5 participants: 4 female, 1 male
Ages 25-62yrs
Frequent to Non-frequent music streaming users
Avg. session time: 19 minutes
Summary
Users thought the app was straightforward once you got a little familiarity with it. Most users had difficulty with trying to find certain aspects of the app. There was also some confusion surrounding certain labeling, categorization, and placement of content which ultimately led to errors while interacting with the prototype.
Affinity Map
To synthesize testing results and uncover user insights for product iteration, I created an affinity map, which allowed me to come up with recommended solutions for the usability problems found during testing.
Iterate
Process: Brand Identity | Priority Revisions
Spotify Branding
To get a better sense of Spotify’s brand identity to best incorporate the added features into the existing UI, I created a mood board, as well as a style tile and UI kit for the platform.
High-Fidelity Revisions
I implemented the recommended solutions from usability testing into the hi-fi wireframes, and then updated the existing prototype.
Next Steps
Given extended time, I would design added screens for the concert message feed, continue testing, iterate, and then redline the wireframes for developer handoff.