Spotify

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.”

UI/UX Designer
August 1, 2019 - August 13, 2019
Self-Directed (Mentor/Peer feedback)

Note: This project was part of a course assignment through Designlab’s UX Academy. All research and design is based on real user interviews as well as feedback from mentors and fellow students. I am in no way affiliated with Spotify.

The Challenge

As a streaming music service, Spotify is the group lead and it wants to stay that way. To improve engagement and retention, we look at the social capabilities within the app and how those can be enhanced.

The Solution

• Design new social features in the current Spotify mobile app
• Make sure the new features integrate smoothly with the current app
• Follow Spotify's existing design patterns.

PHASE 1

Research

I began the process with doing some market research to gain a better understanding of the music streaming industry as well as Spotify's user demographics. This was followed by identifying competitors, conducting user interviews and doing an app audit to better understand Spotify and its functionality and flow.

Market Research
Competitive Analysis
User Interviews
App Audit

Market Research

The music streaming industry is a beast. There are many players in the industry but Spotify definitely leads the way. The majority of Spotify's users fall within the 25 - 34 year old range followed by a close second with the 18 - 24 year olds. Spotify users have a high daily listening rate with the majority choosing mobile as their preferred device.

Competitive Analysis

Next, I looked into other players in the music streaming industry and compared each one with the other. Choosing a handful of the more popular services, it was interesting to see how they matched up. Spotify's users tend to use the service more within a given month compared the competitors in part because of how user-friendly the interface is.

User Interviews

I conducted several user interviews in order to collect information about their overall experience with Spotify. Of the interviewees, 3 were male and 2 were female. All the interviewees fall between the ages of 27 - 42. Through these interviews I was able to learn more about who the users are and the experiences they have using the Spotify.

App Audit

To familiarize myself with the current design and interface of Spotify, I conducted an app audit. This gave me a better understanding of the main features and social capabilities that are currently offered. I conducted the audit based on Jakob Nielsen's Usability Heuristics.

PHASE 2

Define

To fully understand who the target user is and cultivate empathy, I first constructed an empathy map based on the interviews performed in the research phase. From here I was able to see the users' needs and most common patterns from these users. This allowed me to create a Persona and begin exploring solutions to those needs.

Empathy Map
Persona
POV Statements + HMW Questions

Empathy Map

With the main objective of adding social capabilities to the Spotify app, it was important to gain insight into how users currently use that app and to what extent they use it socially. I found that a large portion of those interviewed, either did not share music or did not fully understand the sharing options within the app. By using an empathy map, I was able to identify the user needs and how I might be able to improve social interaction.

Persona

Next, I created a persona "Michael" based on the findings from the empathy map. Michael represents Spotify's target demographic. With Michael, we can better empathize with the target user throughout the design process.

POV Statements + HMW Questions

After defining the target user, Michael, I needed to better understand how I can help Michael with Spotify and its social capabilities. I created point-of-view statements and how-might-we questions to help encourage solutions for those needs.

PHASE 3

Ideate

Here I explored, through various techniques, potential features keeping both business and user goals in mind through the process. I then followed this up with visually seeing how a user might navigate through the app interacting with these features.

Individual & Group Brainstorming
Product Roadmap
Sitemap
Task & User Flows

Individual & Group Brainstorming

To start, I referenced the how-might-we questions, and conducted a short, individual brainstorming session to generate possible solutions. I followed this up with a group brainstorming session that included 5 Spotify users to help discover potential solutions to Michael's problems. I presented the group with our persona, Michael, explaining the context and reasoning for the brainstorming session. As a group, we were able to discuss and generate a number of ideas. Pizza and cake were provided!

Product Roadmap

After the brainstorming sessions, I was able to gather all the suggested features and create a product roadmap focusing on several of the features presented. I took into consideration feasibility, ease of integration and how many users the new features would affect. I limited some of the goals to just one feature solution as to not introduce too much to existing users.

Sitemap

Next, I created a sitemap in order to visualize the information architecture of the app. This helped me determine the best location for each new feature.

Task Flow

To better understand how users will navigate through the app performing specific tasks, I produced a task flow diagram. This allowed me to think through the user's process and make sure all possible pages are developed to help the user gain the information they need.

User Flow

I also created a user flow diagram. This helped me think through different scenarios while a user explores the app and gets the information they are searching for.

PHASE 4

Design

In order to conceptualize how these new features will fit within Spotify's current design, I began the process with sketching out different ideas. I then proceeded to add more context to these sketches by incorporating Spotify's branding and UI through a high-fidelity wireframe.

Sketches
Branding
High-Fidelity Wireframes

Sketches

To begin generating ideas for these new features, I sketched out several low-fidelity wireframes of various sections within the app. Sticking to Spotify's design patterns was a challenge when conceptualizing these new features, but feel the end result was a success. I added annotation so that sections were clearly defined allowing me to gather quick feedback.

Branding

Before moving into the high-fidelity wireframes, I researched Spotify's brand guidelines to fully understand the constraints. To help with this process, I created a mood board and studied various apps and articles regarding the Spotify brand.

High-Fidelity Wireframes

After understanding Spotify's brand guidelines, I then created high-fidelity wireframes using Sketch. The screens are all based on Spotify's mobile UI. The wireframes show the new features incorporated into the existing design.

PHASE 5

Prototype

During the prototyping phase, I imported the high-fidelity screens into InVision app to create a working prototype. This is the prototype I had participants test, going through a few different user tasks.

High-Fidelity Prototype
Usability Testing

High-Fidelity Prototype

I took the high-fidelity wireframes and created a prototype using InVision app to help during usability testing. Feel free to use the prototype below.

Usability Testing

I conducted 6 in-person interviews and had each participant perform certain tasks based on different scenarios. I was able to collect valuable usability feedback from each participant.

Test Objectives
• Test if users can accomplish tasks successfully
• Identify areas of difficulty with the app design that can be improved
• Determine the overall usability of the app
‍
Tasks
• Setup a new tracker for cooking dinner
• Find and play an "Active" playlist
• Share one of your frequently listened to songs
• Use another method so share a song/album with a friend

PHASE 6

Iterate

Affinity Map
Revised Wireframes + Prototype
UI Kit

Affinity Map

After conducting the usability testing, I was able to identify key insights and generate the top recommendations from test users through an affinity map. Taking these recommendations, I now had areas of the app with regards to the new features that I could improve upon, making for a better user experience.

Revised Wireframes + Prototype

Based on the affinity map and the recommendations I discovered from user feedback, I made the appropriate changes to the wireframes and prototype.

UI Kit

Once I began prototyping, I maintained a UI kit throughout the process to document UI elements and patterns for future reference. I recreated all Spotify elements using Illustrator and Sketch for use in my high-fidelity wireframes.

Wrapup

In the end, this project definitely presented a challenge for me, most of all staying within existing design patterns for Spotify. I believe this represented real world projects well as I have had to do this before with previous projects for clients. Spotify has a large and dedicated user base and has already established its core features. Once I was able to identify and gain insight from target users, opportunities arose for areas of improvement. These new features presented would need to be further tested to fully determine if they are a benefit for current users.

Next Steps

• Discuss challenges with developers and engineers of new features
• Continue with user testing perhaps with a small group of target users to determine engagement of new features
• Continue improving UI Kit based on feedback and adjustments made to new features

Spotify

The Challenge

The Solution

Research

Market Research

Competitive Analysis

User Interviews

App Audit

Define

Empathy Map

Persona

POV Statements + HMW Questions

Ideate

Individual & Group Brainstorming

Product Roadmap

Sitemap

Task Flow

User Flow

Design

Sketches

Branding

High-Fidelity Wireframes

Prototype

High-Fidelity Prototype

Usability Testing

Iterate

Affinity Map

Revised Wireframes + Prototype

Existing design

New screen / Time of Day tracker

Existing design

New screen / Time of Day section

Existing design

New screen / Play tracker & Social buttons

UI Kit

Wrapup

Next Steps

Mirror

Heem

Redemptive Cycles

Let's work together