SPOTIFY
Building a new 'Social' feature for the Spotify iOS app
User Research / UX Design / UI Design / Prototyping / User Testing
BACKGROUND:
Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” As a streaming music service, Spotify is the group lead and it wants to stay that way.
PROBLEM:
Spotify needs help to define and design a new feature that will improve engagement and retention in their app by expanding their social capabilities.
*This is a speculative project, and I am not affiliated with Spotify.
OBJECTIVE:
Newly integrated social feature for the Spotify mobile app provides an increased opportunity for users to engage with friends by recommending content to one another.
PROCESS:
01. RESEARCH
Market Research / Competitive Analysis / Contextual Inquiry Interviews
MARKET RESEARCH:
Beginning with market research, I gathered existing data from secondary sources to gain a better sense of Spotify’s positioning within the music streaming landscape. I focused on Spotify’s share of the market, and what type of audience they are appealing to.
Spotify is leading the global music streaming service with 159 million monthly users, and 83 million subscribers
It holds 38% of the global streaming market share for subscriptions
Streaming generated 75% of the music industry revenue in 2018
Millennials are far more likely to pay for music streaming compared to their elders (2x)
Music Streaming revenue will reach 4,357m in 2019
Spotify’s music catalog includes over 30 million songs
72% of all weekly streams on Spotify are by millennials
67% of Spotify streams are through mobile devices
Millennials spend an average of 143 minutes streaming music every day
Americans spend more than 32 hours a week listening to music through streaming services.
COMPETITIVE ANALYSIS:
From there, I conducted a competitive analysis comparing competitors’ strengths and weaknesses, as well as identifying where opportunities for Spotify to differentiate itself with a social feature might exist. I learned that music streaming services are used primarily on mobile devices, which is why I decided to design for mobile first.
Competitive Analysis can be viewed here.
INTERVIEWS:
After learning what I could from existing sources, I then gathered my own data related to Spotify. I conducted contextual inquiry interviews with Spotify users about their music streaming and social experiences with music. By the end, I was able to learn more about who Spotify users are and what experiences they seek through Spotify.
Gender: 3 male / 2 female
Age: 18-24 years old
All were Spotify Premium members
02. DEFINE
Empathy Map / Persona / POV Statements + HMW Questions
EMPATHY MAP:
With the feedback gathered during user interviews, I created an empathy map to synthesize my findings. Observations and statements were organized on virtual sticky notes, then paired together with similar information, identifying themes and patterns.
PERSONA:
Next, I created a persona “Cody” to represent the findings from the empathy map. Reflecting Spotify’s target demographic, Cody is a young professional of the millennial generation who often listens to music for productive, social, and entertainment purposes. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
POV & HMW QUESTIONS:
With a persona established, I moved into translating the insights and needs of Cody into defined Point of View Statements, then crafted a set of How Might We Questions to guide my design. By defining the design challenge and framing it as a question, the roadwork for the ideation phase was paved for a range of innovative solutions.
03. IDEATE
GROUP Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow
GROUP BRAINSTORMING
Next, I facilitated five participants in a group brainstorming session. For each HMW Question, the room brainstormed and discussed solutions, recording ideas on sticky notes. Gathering individuals with different experiences and perspectives provided the chance for me to gather a wider range of ideas than if I had been brainstorming solo.
PRODUCT ROADMAP:
After collecting ideas from the group brainstorming activity, I created a product roadmap to prioritize several key features aiming to solve Cody’s needs. I chose features to prioritize based on feasibility, how many users the feature would affect, and ease of integration within the current app design. It was also important to consider how the new features could follow Spotify’s current design patterns and make for a more intuitive, consistent experience.
SITEMAP:
Next, I created a sitemap to visualize the information architecture of the app. This helped me determine where to best locate the new features in the current app design in order to insure our new features are intuitive for existing Spotify users.
USER FLOWS:
To analyze the flow of the new features, I mapped out three user flows based on common scenarios I found from the primary research. This helped me learn which screens and UI elements were needed to implement the new features, while considering how to optimize user flows.
TASK FLOW:
I then explored the flow in more detail by constructing a task flow about a user who wants to browse music from their social network. This helped me understand more about how the user would accomplish certain tasks based on the decisions the user makes throughout the app.
04. DESIGN
sketches / Branding / High-Fidelity Wireframes
SKETCHES:
I started designing the UI of the new features by sketching out various ideas. I found that within the current layout, I was able to smoothly integrate the new features while adhering to Spotify’s design patterns and utilizing UI elements that Spotify users are already familiar with. With the annotated sketches, I was able to present my ideas to others and gain constructive feedback at an early stage of the design.
BRANDING:
Before creating high-fidelity wireframes, I needed to understand Spotify’s branding guidelines to ensure cohesiveness. To help with this goal, I studied Spotify’s official branding guidelines and other online references, which I collected into a mood board. Pulling from Spotify's branding guidelines, I created a style tile using their existing color palette, typefaces, adjectives and imagery.
HIGH-FIDELITY WIREFRAMES:
I then created high-fidelity wireframes in Sketch for mobile screens. The designs were all based off of Spotify’s existing mobile UI, often requiring me to match pixel to pixel. The wireframes demonstrate the look and feel of the new features and encourage useful feedback from stakeholders.
05. PROTOTYPE
High-Fidelity Prototype / Usability Testing
HIGH-FIDELITY PROTOTYPE:
With the high-fidelity wireframes, I created a mobile prototype in InVision to gather usability data from Spotify users. Feel free to interact with the prototype using the button below.
USABILITY TESTING:
For Usability Testing, six participants were asked to complete a series of three tasks tied to three scenarios during in-person testing. My goal was to discover if users could navigate to the feature in various ways, and share recommendations with friends.
TASKS:
From the home screen recommend a song from daily mix 3 to Aaron Solie
Find your friends feed and shuffle play the friends weekly playlist
From your library access the live stations feature and join a live station in progress
Overall, the flow and hierarchy of the feature met user expectations in terms of fitting within the current Spotify app. For the most part, participants were able to navigate the prototype successfully. But, there were a few pain points that caused confusion and prohibited users from completing tasks. This is where I focused my energy for implementing revisions.
06. ITERATE
Affinity Map / Revised Wireframes + Prototype / UI Kit
AFFINITY MAP:
Referring to notes taken during user testing, I created post-its with observations and assessments for each test subject, looking for patterns and trends, then sorting accordingly. I then created an affinity map as a way of translating my observations to insights and recommendations.
The recommendations realized here served as a revision guideline for the next iteration of the feature design.
REVISED WIREFRAMES & UPDATED PROTOTYPE:
Finally, I revised the wireframes and InVision prototype to reflect the recommendations from the affinity map. Some of the main changes are shown below. Feel free to interact with the revised prototype using the button below.
UI KIT:
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Although many of the UI elements were based off of Spotify’s existing design, I had to make everything from scratch inside Sketch or Illustrator. This provided an opportunity to review styles, design patterns, and UI elements for consistency.
REFLECTION
Designing within the constraints of an already established (and highly successful) visual design system was the most challenging aspect of this project. In creating these new features, I had to compare my work against Spotify’s to insure the integration was seamless and appears as something Spotify’s designers would have incorporated. Only once I spent time dissecting the current design and all it’s nuances, did I feel confident moving forward to introduce something new. It was enjoyable to strengthen my ability to create high-fidelity prototypes while adhering to existing branding guidelines.
NEXT STEPS:
Work with developers to identify any technical limitations
Conduct research that would predict engagement levels of the new features
Continue organizing design deliverables for handoff