Group 2.png

Spotify

 

Spotify

Adding Social features

 

Client: Spotify

Timeline: Oct-Nov 2018, 2 weeks

Deliverables: iPhone app prototype

Team: Solo, with mentor guidance

Role: UX/UI Designer

Tools: Sketch App, Illustrator, Marvel

 
 

THE CHALLENGE.

Spotify is a leading music streaming service with a mission to help people listen to whatever music they want, whenever they want, and wherever they want. To improve engagement and retention, they want to expand on their social capabilities within their mobile app.

Objectives.

  • To design social features for Spotify’s mobile app

  • To follow Spotify’s existing design patterns

  • To smoothly integrate the new features into the current app for a seamless user experience

Note: This is a speculative project, and I am not affiliated with Spotify.

 

Process.

design-process-grey.png
 

 

01. RESEARCH

Goal: To research Spotify’s business, product, and users

Process: Market Research / App Audit / Competitive Analysis / Contextual Inquiry Interviews

 

Market Research.

I started off with market research to gain a general understanding of the music streaming industry and Spotify’s user demographic. I also looked into Spotify’s current and past social features to identify potential challenges.

 

App Audit.

Next, I analyzed the current app design from the perspective of a Premium member. While exploring the features, I documented notes of all the main and social features.

 

Competitive Analysis.

I then compared Spotify to other top music streaming services, focusing on statistics of their user demographics. The comparison allowed me to better understand how Spotify users may differ from the average music-listener in their behaviors.

 

Contextual Inquiry Interviews.

To gain primary research data, I conducted contextual inquiry interviews with 6 Spotify users about their music streaming experiences 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.

  • Number of Participants: 6

  • Gender: 3 male / 3 female

  • Age: 18-30 years old

  • 5 Premium members / 1 using free plan

 

02. Define

Goal: To define the target user and understand their needs, goals, and frustrations

Process: Empathy Map / Persona / POV Statements + HMW Questions

 

Empathy Map.

I organized data points from each interview participant into an empathy map in order to empathize with users. I then rearranged the data points into related groups to gain insights about the target user’s needs.

 

Persona.

Next, I created a persona “Jasmine” to represent the user needs synthesized from the empathy map. Jasmine’s goals, motivations, and frustrations also reflect the majority of data points collected from participants. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.

 

POV Statements + HMW Questions.

To translate Jasmine’s needs into actionable tasks, I framed them into point-of-view statements and how-might-we questions.

 

03. IDEATE

Goal: To ideate website features, information architecture, and flows

Process: Group Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow

 

Group Brainstorming.

To start ideating possible solutions to the how-might-we questions, I conducted a group brainstorming activity with four friends. We started with independent brainstorming and then moved into collaborative brainstorming. In the end, we grouped the ideas into categories to identify major themes.

 Sorting ideas into categories.

Sorting ideas into categories.

 

Product Roadmap.

Using the how-might-we questions as goals, I decided on several features to prioritize in the design. The features were chosen from the brainstorming activity based on feasibility, how many users it would affect, and ease of integration within the current app design.

 

Sitemap.

Next, I created a sitemap in order to visualize how the new features could be placed within the app’s current information architecture such that the user can intuitively navigate through the app.

 

User Flow.

To analyze the flow of the new features, I mapped out three user flows based on common scenarios I found from the user research.

 

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 after opening the app.

 

04. DESIGN

Goal: To design high-fidelity wireframes following Spotify’s design patterns

Process: Sketches / Branding / High-Fidelity Wireframes

 

SKETCHES.

I started designing the UI of the new features by roughly sketching out ideas. I then made cleaner versions of the sketches, paying close attention to Spotify’s existing design patterns.

 

Branding.

Before creating wireframes, I analyzed Spotify’s branding guidelines to make sure I follow them. I also created a mood board to familiarize myself with Spotify’s visual design direction.

 

HIGH-fidelity Wireframes.

I then created high-fidelity wireframes in Sketch for mobile. I used design patterns of Spotify’s current mobile app while creating the screens. For UI elements such as the “Friends Weekly” and “Shared With You” playlist covers, I took inspiration from Spotify’s visual design direction.

 

05. PROTOTYPE

Goal: To prototype the new features and gain usability feedback

Process: Prototype / Usability Testing

 

Prototype.

To prepare for usability testing, I created a iPhone X prototype in Marvel using the high-fidelity wireframes. Feel free to interact with the prototype using the button below.

 

Usability Testing.

Objectives:

  • To test if users can accomplish tasks successfully

  • To identify areas of inconsistency within the design

  • To determine the overall usability of the new features

User Tasks:

I asked participants to complete tasks based off different scenarios. Here are the basic tasks:

  • Find a playlist where you can listen to what your friends are listening to

  • Find a friend’s playlist that’s recommended for you by Spotify

  • Enable the Shared With You feature

  • Navigate to the Shared With You playlist

  • Identify a song through your phone’s microphone

Results:

I conducted usability testing at local coffee/tea shops with 7 participants within the age range of 15-32. I gathered data from direct observation and audio recordings.

 Testing with Spotify users at cafes.

Testing with Spotify users at cafes.

 

06. ITERATE

Goal: To iterate upon the design using usability data

Process: Affinity Map / Revised Wireframes + Prototype / UI Kit

 

Affinity Map.

I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design.

 

Revised wireframes + Prototype.

Finally, I revised the high-fidelity wireframes to reflect the recommendations from the affinity map. Feel free to view the screens in Marvel using the button below.

 
 

UI KIT.

While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference.

 

 

Reflection.

In conclusion, we were able to add new social features to Spotify’s mobile app. By considering the goals of Spotify and its target users, we designed features that promote engagement through social connections while maintaining Spotify’s seamless user experience. Moving forward, I would want to collaborate with developers to iterate a design that considers technical constraints.

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