Project Details

Client: Spotify

Timeline: 4 Weeks

Role: UX Researcher, UX Designer, Interaction Designer, UI Designer

Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Invision

Deliverables: High-Fidelity Wireframes with added features, App Prototype, UI Kit

 

Challenges

Streaming music service, 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.” For this project I will be helping them define what’s the best way moving forward in that direction, and provide them with a prototype of the features that I’m adding, integrated seamlessly within the rest of the app.

My main challenges will be:

  • To Integrating features into an existing app seamlessly

  • To brainstorm a solution that addresses my persona’s goals and needs.

Outcomes

Using the directions from my research I implemented features that help my persona send and receive music/podcast recommendations from friends using the Spotify App.

Goals

My goal for this project was to incorporate features to Spotify that addressed my persona’s goals while altering the current app as little as possible as to not disrupt the current flow.

Process

Process

1.
Research

2.
Define

3.
Ideate

4.
Design

5.
Prototype

6.
Iterate

Research

Goals: Understand my target audience and what frustrations they are facing

Steps: Market Research - Competitive Analysis - Heuristic Evaluation - 1:1 User Interviews

 

Market Research

The research phase started with gathering, reviewing and analyzing information about Spotify and music streaming users to understand the overall market

  • Spotify’s user base is dominated by Millennials, with Gen Z close behind. Here is the breakdown

  • 18-24 | 26%

  • 25-34 | 29%

  • 35-44 | 16%

  • 45-54 | 11%

  • 55+ | 19%

  • Millennials are listening more frequently and streaming in more places than nonmillennials

  • Millenials who access Spotify on multiple screens spend 143 minutes streaming every day

  • Spotify reaches almost half of 16 to 24 year olds in the United States each week 18-24 year-olds listen to a broader selection of artists from different countries than any other age group

 

Competitive Analysis

My next step in the process was to look at who Spotify’s main competition is and how they compare

Heuristic Evaluation

I did a heuristic evaluation to gain an understanding of Spotify's app and see if it follows usability standard and understand where, if any, user could experience problems with the interface.

1:1 User Interviews

Current Spotify Premium members were asked questions about their interaction with Spotify as well as question about their overall music listening habits and preferences .

Total Participants Number: 5
Age: 18-34
Gender: 1 female, 4 male

I interview 5 participants who are current Spotify Premium members. Participants were asked questions about their interaction with Spotify as well as general questions about their music or streaming habits.

Define

Goals: Define frustrations and needs/goals of users based on data that I had gathered.

Steps: Empathy Map - Persona

 

Empathy Map

Using the information gathered from the user interviews, I built a map by writing out each data point on a post it note. Once those were up, I looked for common themes and grouped them together to understand frustrations that the majority of participants faced.

Insight:

  • Users currently struggle to share music using spotify

  • Users currently use other resources / applications to find new music.

Need:

  • Users need an easier way to share music using Spotify

  • Users need more resources on spotify to find new music

 

Persona

Using the information gathered from the empathy map and my user interviews I built a persona. This is who I will be designing for during the project.

Ideate

Goals: To use my understanding of the users, based on my research, to find ways to help address my user’s frustrations and find a solution.

Steps: POV Statement - Brainstorming - Application Map - Task Flow - User Flow

 

POV Statement

Using the insights and needs from the empathy map I constructed Point of View Statements, this helps understand the needs from our persona’s point of view. Using these I could then pose How Might We questions to start brainstorming how to solve the problem.

 

Brainstorming

Using the How Might We questions based on my persona’s needs and goals, I did a brainstorming session individually to answer how might we best help the users. I then put together a group to also do a group brainstorming session. I led the group, but did not partake as to not influence the session

Individual Brainstorming

 

Application Map

With the solution figured out I moved on to understanding the current application map and where the new features would be incorporated.

 

User Flow

With the knowledge of how the application was going to be reorganized to included the new features I wanted to make sure that the user flow was as direct as possible for these new features and I was not making my user jump through any unnecessary hoops.

 

Using the User Flow already created, I picked the most important task and looking into each step I made to insure that the flow was as fluid as possible.

Task Flow

Design

Goals: With the solution in place and with an understanding of how the new features would be incorporated in the existing application, I moved on to layout out the pieces

Steps: Sketches - High-Fidelity Wireframes

 

Sketches

Using the solution that I had brainstormed and my understanding of the new features I quickly sketched each screen that would be involved in the new features.

 

High-Fidelity Wireframes

Using the sketches I had developed I moved on to High-fidelity wireframes of all the screens that would be needed to test out the new features.

Prototype

Goals: To create a prototype to use for usability testing and ensure that I have created a good user experience

Steps: High-Fidelity Wireframes Prototyped using Invision

 

Mid-Fidelity Wireframes

Using Invission, I utalized the mid-fidelity wireframes I had created to prototype TAPS’ website.

 

Iterate

Goals: Refine the wireframes and prototype based on data gathered from usability testing

Steps: Usability Testing - Affinity Map - Prototype Iterations

 

Usability Testing

Using the prototype I built with the high-fidelity wireframes I developed an usability test to understand how users interact with the new features and find any problem areas.

Total Participants Number: 5
Age: 18-36
Gender: 1 female, 4 male
Completion Rate: 100%
Error-Free Rate: 75%

Test Objectives

  • Study users while they interact with the new features

  • Test how long it takes for users to achieve a specific task

  • Identify any issues or areas of confusion that the user seem to encounter

Task 1

  • Listen to a song that your friend has privately shared with you.

Task 2

  • Share the song you are currently listening to with your friend Scott.

 

Affinity Map

Using each set of data from the usability testing I created a map on the wall with all the information. I then grouped patterns to find where the majority of users seem to be having frustrations with the new features. With these groupings I then wrote out the insights and my recommendations on how to address them to provide a better user experience.

Insight:

  1. Users are confused by the privately shared music vs. friends recommendation section.

  2. Users looked for privately shared music under Your Library

Recommendations :

  1. Have both the privately shared music and public friends recommendations under the same section.

  2. Develop the prototype further to test this section in the future.

 

Prototype Revisions

Using the insights from the affinity map, I addressed the problem areas by redesigning some elements and updating a few pages.

UI Design

Goals: Understand Spotify’s branding and apply it

Steps: Branding - UI Kit - High-Fidelity Wireframes

 

Since this project involved adding features to an existing application, it was important that I understood the branding and design patterns and made sure that the new elements blended seamlessly with the current application.

Branding

 

UI Kit

Lastly I updated the UI kit to reflect the any updated done after the usability testing. Making sure that it included all UI elements so that the branding could be kept consistent as the application grows.

Conclusion

It was a lot harder to incorporate a new features in an existing application than I initially thought it would be. Since spotify is such a well known application it was paramount that I kept the user flows that users already know and added features without disrupting the current application.

Next steps

  • Conduct another round of usability testing to confirm assumptions that problems areas have been fixed and to find any other friction points in the user flow

  • Update prototype based on new round of usability testing

  • Update UI kit based on any update to the prototype

Let’s Work Together