logo

Spotify


music app

PROJECT:  PROTOTYPE WITH NEW APP FEATURES

ROLE:  UX/UI DESIGNER

CHALLENGE

Spotify is one of the leading music streaming services. They want to improve engagement and retention in their app by expanding on their social capabilities. The goal is to define what’s the best way moving forward and integrate the new features seamlessly within the rest of the app.

RESULTS

Three new features were designed based on user research that allows for more straightforward sharing within the app, a filter to let users have more control of what Spotify recommends, and a driving mode to allow users to quickly navigate while driving.

VIEW PROTOTYPE

Research

SECONDARY RESEARCH

I began the project by conducting a market analysis to get a better understanding of the demographics of Spotify users and industry trends of the music streaming industry.

INSIGHTS

Then I did a competitive analysis with the top competitors and identified any opportunities where Spotify can differentiate.

competitive analysis
×
×
× hi-fi screens zoom
× hi-fi screens zoom

ASSUMPTIONS

From the research, there were a few assumptions I gathered about how users use music streaming services and their listening habits.

PRIMARY RESEARCH

USER INTERVIEWS

I developed an interview script and conducted interviews with 5 Spotify users from ages 26-36. 4/5 of participants are paid members. The goal was to identify their music listening habits, any pain points in using Spotify and to validated or invalidate any assumptions.

Synthesizing Research

EMPATHY MAP

Based on the interviews, I gathered all my notes and grouped them into categories to create an empathy map. From there I was able to see any patterns or trends that emerged. As a result, I was able to discover common insights and needs from the participants.

empathy map

INSIGHTS

NEEDS

PERSONA

From the empathy map results, a persona was developed to represent the ideal customer along with their goals and needs. My persona is a millennial who listens to music throughout his day and likes discovering new music.

persona

POV & HMW

From the insights and needs extracted from the empathy map, I wrote statements that state our persona's needs from their perspective. From those, I developed How Might We questions to address the problems we're trying to solve.

POV HMW

PROJECT GOALS

I then created a diagram showing the business goals and user goals and where they intersect. This allowed me to prioritize on goals for our project.

project goals

PRODUCT ROADMAP

Since I now know where the business goals and user goals intersect, it allowed me to prioritize what app features are necessary to design.

product roadmap

Information Architecture

SITE MAP

I created a site map that showed the structure and hierarchy of the current app and where the new features would reside. The goal was to integrate the new features seamlessly into the current architecture of the existing app.

site map

Interaction Design

USER FLOWS

From the site map I created, I drew out 3 different user flows to envision different paths a user might take within the app. These user flows would then help prioritize what to prototype and test.

user flows

TASK FLOWS

From each user flow, task flows were drawn out to highlight additional actions and tasks.

task flows

HIGH-FIDELITY WIREFRAMES & PROTOTYPE

Once I established the Information Architecture and various flows, I went to design high-fidelity wireframes using screens and design patterns from the existing app. Afterwards I built a prototype for testing in Marvel prototyping app.

hi-fi screens zoom

Testing & Iteration

USABILITY TESTING

I conducted usability testing to test the overall flow of the new app features and gather feedback on any frustrations or confusion. I tested 4 participants and presented 4 scenarios and tasks. I observed them as they completed the tasks and had them walk me through their process and thoughts.

AFFINITY MAP

After testing, I gathered all the notes and broke them down into different categories. The data was then used to find any patterns or trends to discover insights on any needs or confusions users had. Then I made a priority list of improvements for iteration.

affinity map

INSIGHTS

Insights were gathered from the affinity map from trends that were found.

  1.   Participants would like quicker access to frequently played playlists while driving.
  2.   Participants would like a more intuitive way to scroll through playlists while driving.
  3.   Participants found some confusion in the Discover Filter categories.

PRIORITY REVISIONS

Based on the insights, I brainstormed ideas on solutions and updated the prototype accordingly.

  1.   Move Recently Played playlists to the top and add a shortcut to the main player screen.
  2.   Break down playlists into categories and allow side scrolling.
  3.   Reword Discover Filter categories to make it less confusing.

UI Design

UI Kit

I created a UI Kit from existing design and UI patterns from their app to integrate the new features.

UI kit

HIGH-FIDELITY PROTOTYPE REVISIONS

The prototype screens were revised according to the insights from the affinity map.

hi-fi screens rev zoom

Conclusion & Next Steps

Identifying pain points that users had within their music listening habits was challenging. Once I was able to find common patterns, it made it easier to define the problem and think about solutions. The next steps would be to continue testing more users to see if there are any further improvements to be made.