Spotify

UI/UX Design
Challenge
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. For this reason, they want to improve engagement and retention in the app.
Solution
The solution is to expand on Spotify's social capabilities. It's important to define the best way forward by understanding the users' needs, and having a prototype of the new feature(s) integrated seamlessly within the rest of the app. 
Tools
Figma, Adobe Illustrator, Adobe Photoshop
Team
Self Directed, with guidance from mentor
Role
UI/UX Designer
Duration
80 hours
DISCOVERY
Research Goals
  • Identify the demographics of music streaming services
  • Understand current market trends
  • Determine Spotify’s competitors and their strengths/weaknesses
  • Determine users’ frustrations/motivations/needs/goals
  • Understand users’ experience with Spotify’s social capabilities
DISCOVERY
Market Research
I started off the project with research to understand and gain insight into the frustrations, and needs of the users. I summarized important points from gathered collection of data and statistics related to the research goals/topic for more insights:
  • Spotify operates in around 79 countries
  •  29% of Spotify users are millennials
  • 56% of Spotify users are male, 44% are female
  • Spotify has 232M active users and 108M premium subscribers
  • 52% of users are listening to songs on Spotify from their smartphones
  • Spotify is being tuned by users 148 minutes every day
  • Around 50M+ tracks and 3B+ playlists are available to users
  • Spotify has prototyped an unreleased feature called “Social Listening” that lets multiple people add songs to a queue they can all listen to.
  • Spotify  is prototyping a new way to see what friends have been listening to, called “Tastebuds.”
DISCOVERY
Interviews
In order to gain qualitative data about users’ goals, needs, frustrations and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews from 5 different interview participants. Two are male, and three are female, and fall between ages 24 to 40. All are Spotify Premium users. Below are some of the interesting findings from the interview:
  • All participants use Spotify mostly on mobile phones.
  • Participants usually use Spotify during commute.
  • All participants mentioned that two of the most important things in an overall positive music streaming experience are: Content, and Discoverability.
  • All participants mentioned having experience listening music with other people.
  • All participants mentioned having experience sharing music.
DISCOVERY
Empathy Map
After conducting the interviews, I took the transcripts of the interview and transferred it to post-its, and looked for patterns and similar topics across the empathy map which formed 3 main insights from where I generated the users' needs.
Pattern 1: Relevance
"I look through a lot of playlists - sometimes searching for a mood or a genre, then play through the playlists and pick tracks that I like."

Insight: People have different sources for music discovery, but eventually filter to what they think are most relevant to them.

Need: People need to discover music from sources that they feel are relevant to them.

Pattern 2: Stories
"When I was going through a difficult time and I was talking to my friend about it, he shared a Spotify playlist to me that helped him go through a similar situation."

Insight: People usually share music that has a story behind it.

Need: People need a platform where they can share their stories related to certain music.

Pattern 3: Social
"I usually share songs with my family on WhatsApp from Spotify."

Insight: One of the main sources of music (sharing and discovering) of people is their social connections.

Need: People need a platform where they can exchange music with their social connections.

DEFINE & IDEATE
POV statements and HMW questions
I created the POV statements and HMW questions to be able to define the problem statements from the insights and needs of the persona, and to formulate questions that would help generate ideas that would lead to different solutions.
DEFINE & IDEATE
Brainstorming: Group
One way to exhaust possible solutions for the HMWs, is group brainstorming with people who fit the demographics based on our research. I gathered 4 participants and brainstormed each HMW question for 3 mins individually. Afterwards, everyone shared their answers within the group. The second round was for 5 minutes, and everyone just voiced out what they think, and sometimes built up on each others' ideas.
INFORMATION ARCHITECTURE
Site Map
Now that we have defined the necessary features that will be included in our product, we then define the structure of these contents inside the app — its hierarchy, organization, general flow. Building from the product goals, and feature roadmap, I created a sitemap that included proposed pages to help visualize the structure of Spotify including the new features.
INTERACTION DESIGN
Wireframes / Prototype: High-Fidelity
Next, I created high fidelity wireframes mainly to serve as a blueprint for the visual interface, and to be used for a prototype that allows us to test the effectiveness of visualize hierarchy, priority, and flow before implementing more details, such as font and colors.
TESTING
Usability Testing
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 5 total strangers (3 male, 2 female) interact with my prototype. I used Think-aloud Methodology and In-person Moderated Usability Testing. Criteria for participants were based on the demographics from research phase (ages 20 - 40) and people who are Spotify Premium members.
The users were given the following scenarios and tasks to complete:

Scenario 1: You want to share a new music from your favorite artist as a music memo.

  • Task 1: Check "Billie Eilish"'s album in your Recently played list.
  • Task 2: Listen to the album.
  • Task 3: Share the track as a Music Memo in the form of a card with a message.

Scenario 2: After posting a music memo, you want to check the one you posted, and other people’s music memo. While you were looking at other people’s music memos, you found one that you liked.

  • Task 1: Look at the Music Memos.
  • Task 2: Add a song from "Tokyo Incidents" as favorite
Summary of findings from 5 participants (3 male, 2 female):
  • Completion Rate: 100%
  • Error Rate: 90%
  • All participants recognized the value of the feature and how it would affect them in their use of Spotify.
  • Participants felt like the feature was similar to Instagram's "Stories" but the design still felt like Spotify.
  • 4 out of 5 people mentioned that the sharing process of the Music Memo was relatively easy.
  • Most of the errors occurred in the first task when trying to look for the specific album — mostly because of the limitation of the prototype.
TESTING
Affinity Map
After collecting my notes and audio/screen recordings from my testing, I transferred it to post-its, and then grouped together common statements to come up with insights on specific elements of the site.
After grouping similar concerns/topics, I uncovered insights, and formed specific solutions for each:
Pattern 1: Quick Share Button

Insight: Participants feel like steps for sharing the Music Memo could be simplified.

Solution: Include a quick share button on the song page.

Pattern 2: Feature Name

Insight: Participants were confused about the difference between Social Discovery and Music Memo.

Solution: Provide a more consistent name for the feature.

Pattern 3: Message Placeholder

Insight: Participants missed the message placeholder and wasn’t sure if message could be inserted in that area.

Solution: Make the “Insert Message” placeholder more visually encouraging for users to insert a message.

Pattern 4: Album Position

Insight: Participants missed the location of the album on the home screen.

Solution: Place the album based on the user’s mental model - when looking for albums in the current design of Spotify.

UI DESIGN
Branding: Mood Board
In order to have a reference of how I would like the final prototype to look like, I gathered pins in pinterest that I think would best suit the brand's vision using keywords: Innovative, Playful, Passionate, Expressive. This will help me maintain a consistent visual identity for the project while designing.
UI DESIGN
Revised High Fidelity Wireframes
After applying the changes to the wireframes, I used the UI Kit and occasionally referring to the mood board, I made sure that all elements in the prototype are consistent with Spotify's branding to cohesively integrate within the app.
Takeaways
For this project, having a solid research, knowing the business goals, and understanding the users' needs were key in helping Spotify achieve their goals better through adding a features. The greatest challenge here is creating a design that will flawlessly integrate into their current system.
Next Steps
1. Design Implementation and Handoff to the Development team using Zeplin.
2. Getting the app live
3. Maintenance - continue to iterate and test designs.

Check out my other projects

Bhuku
UI/UX Design
ARK
UI/UX Design
Mirror
UI/UX Design