top of page
Spotify

Adding New Features

Overview

Spotify wants to make a move into helping the connection between humans and music further. It already has some core capabilities, like following artists or friends, and a basic feed of activity. However, Spotify wants to add new features into their app to improve this connection.

This was a speculative project to integrate new features into Spotify that can help users organize, share, and discover music.

Goals

  • To design a new feature that embeds within the current Spotify platform 

  • To design additional and complementary features, as needed

Role

UX/UI Designer

Tools

  • Sketch

  • InVision Studio

Timeline

4 weeks (80+ hours)

1. Research

Goals

To understand the market and business' brand and to discover user's frustrations, needs, and motivations

Process

Market Research, Competitive Analysis, Interviews

Research

Market Research

I researched online to get more information about Spotify’s current mission, services, and user demographics. Statistics reveal that Spotify has a youthful user base, with over half of its users aged 34 or under. Spotify also has a slightly more male listenership, with 56% of Spotify users being male and 44% being female.

Services

Spotify’s free service allows users to discover, manage, and share over 50 million songs. The Premium service upgrade allows access to exclusive features including offline mode, improved sound quality, Spotify Connect and ad-free listening. Spotify is the largest global audio streaming subscription service with 217m users, including 100m subscribers, across 79 markets.

Spotify used to have social features but removed them over time. The features included song sharing with other users/Spotify friends, seeing who was following your playlists, direct messaging for music sharing, and sharing music on the Friend Feed. Spotify removed some of these features. Spotify didn’t feel social integration was something they needed to solve since messaging was being solved by other companies and Spotify could just integrate with actual messaging apps.

Also, they weren’t sure what their social experience should look like. Until streaming services became popular and mainstream, it was difficult for people to legally and easily send someone a song.

Competitive Analysis

After learning more about the market and Spotify’s services, I then looked into other competitors in the industry. Competitive analysis demonstrated how Spotify’s offerings compare to those in the industry.

competitive analysis

Interview Findings

I interviewed 6 participants to learn about their experiences using Spotify. The interviews revealed what participants enjoyed and found frustrating about Spotify based on their experiences using the mobile app.

2. Define

Define

Goals

To define the target user and identify their needs, motivations, and frustrations

Process

Empathy Map, User Persona, POV Statements and HMW Questions

Empathy Map

After conducting user interviews, I studied my notes and categorized participant comments into the following: doing, thinking & feeling, seeing, hearing, gains, and pains. From these groups, I was able to identify trends and patterns based on the majority of participant comments, which were used to form the insights and user needs that would create the basis for the user persona.

empathy map

Insights

  1. Users have ineffective music organization.

  2. Users primarily find music on their own (through non-social methods).

  3. Users don’t primarily share music through Spotify.

  4. Users don’t have a strong desire to share their music with others.

Needs

  1. To have a better way to organize music.

  2. To have more ways to discover music without social networking.

  3. To have better ways to share music in-app.

  4. To have an incentive to share music with others.

User Persona

The user persona, “Michael,” was created based on the information, insights, and needs gained from the user interviews. The user persona allows us to build empathy with target users during the design process.

persona

POV Statements and HMW Questions

I narrowed down the 4 insights and needs from the empathy map down to the 3 that had the majority of the user comments to focus on the top user needs for the subsequent ideation phase. I created point-of-view statements to define Michael’s user needs from my point-of-view. From there, I created how-might-we questions that would form the basis for brainstorming and ideating design features.

pov and hmw

3. Ideation

Goals

To generate ideas to help the user accomplish user needs

Process

Brainstorming, Product Roadmap, Sitemap

Ideation

Brainstorming

I gathered four of my friends to do a group brainstorming session. I introduced the how-might-we questions that we would try to solve and laid out the process. We spent 10 minutes individually brainstorming each question and then spent 10-20 minutes as a group discussing all the individually presented ideas. Ideas were consolidated into one if there were multiple of the same idea from different people. Ideas were then grouped into categories and a consensus was reached among the group as to which categories of ideas would be the most helpful for the user persona.

The questions that formed the basis of the brainstorming session were:

  1. How might we help Michael to better organize his music?

  2. How might we help Michael have more ways to discover music without social networking?

  3. How might we make it easier for Michael to share music in-app?

Rules for group brainstorming

  • List as many ideas as possible (quantity over quality)

  • Sketch out ideas if it's helpful

  • Defer judgement

  • Welcome all ideas

  • Be positive

  • Stay focused on the topic

group brainstorm

Product Roadmap

After brainstorming features that could potentially solve the user needs, I picked the ones that would potentially have the most impact and narrowed it down to 2 features per priority level.

product roadmap

Sitemap

I created a sitemap to map out the information architecture for the mobile app. I analyzed Spotify’s existing information architecture and inserted the new features in locations that seemed appropriate.

sitemap

4. Design

Goals

To visualize the various user processes and design mobile screens for the user experience for the tasks of finding new music through the user music profile, organizing playlists, and sharing music in-app

Process

User Flow, Wireframe Sketches, Hi-Fidelity Wireframes and Prototype

Design

User Flow

I created a user flow to map out the various paths a user can take when finding new music through the app. The user flow includes decision-making steps in the process, which will affect the flow of the user.

user flow

Wireframe Sketches

I sketched out low-fidelity wireframes based off of Spotify’s existing mobile interface and integrated the new features into the design. Creating low-fidelity sketches allowed me to get ideas onto paper quickly, which could be iterated through feedback from peers, to produce improved screens for the hi-fidelity wireframes.

low-fi sketches

Hi-Fidelity Wireframes and Prototype

Since Spotify has an existing interface, I went straight into hi-fidelity wireframes. I recreated their existing screens, such as the home, search, and your library tabs, as well as others such as the playlist and song playing screens. I then integrated the new features according to the low-fidelity sketches. I linked all the wireframe screens together using InVision to create the hi-fidelity prototype that would be used for usability testing.

5. Test and Iterate

Process

Usability Testing, Affinity Map, Branding, Hi-Fidelity Revisions

Test and Iterate

Goals

To test the hi-fidelity prototype, make improvements to the prototype based on usability test findings and to finalize the prototype

Usability Testing

Objectives

  • Test if users can complete the tasks without difficulty

  • Observe user’s overall impressions to the mobile app

  • Observe any pain points

  • Gather user feedback in regards to areas of delight or frustration

Participants

  • Number of participants: 5-10

  • Age range: 25-34

  • Archetype: “The Professional”

Scenario 1: You would like to find new music recommendations based on your listening activity.

  • Task: Find out the common traits and characteristics of your songs based on listening activity.

  • Task: Request curated new music that’s more upbeat and easier to sing along to.

Scenario 2: Your music playlist has gotten very large and you’d like to organize your music playlist.

  • Task: Please have Spotify organize your playlist by genre.

Scenario 3: You’re studying at the cafe with your friend, who’s a fellow Spotify user, and want to recommend a song you’re currently listening to.

  • Task: Share the currently playing song with your friend.

Affinity Map

I had taken comprehensive notes while observing participants going through the prototype. I then analyzed the individual findings and sorted them into groups to identify trends and patterns. The insights gained from the usability tests were then used to form design recommendations that would be implemented to improve the final prototype. There were major improvements needed regarding the user music profile based on usability test findings, but the other features were used without significant issues and therefore didn’t need major changes. It was an eye- opening and invaluable experience to observe the major design flaws and usability errors encountered during usability testing. It provided great feedback and insights that could be used to improve the user experience through iterations.

affinity map

Insights

  1. Users didn’t expect to find a music profile in the search tab.

  2. Users expected the option to customize recommendations on the music profile screen.

  3. Users didn’t understand how to read the bar chart.

Design Recommendations

  1. Move the music profile to a more intuitive location.

  2. Move the customize recommendations option to the music profile screen.

  3. Present a clearer way to visualize the data and reword unclear terminology.

usability changes

Branding

I created a mood board to ensure I was staying consistent with Spotify’s branding guidelines and looked for examples of Spotify’s interface, imagery, and branding. From there, I then created a style tile to have a reference of the UI design.

style tile

Hi-Fidelity Revisions

After re-analyzing the affinity map and usability test findings, I went back to the drawing board and re-designed the user music profile feature.

Final Prototype

The design changes were incorporated into the design to create the final prototype.

mockup

Conclusion

This mobile new feature integration project had some difficulties and challenges, including integrating new features into an existing interface and deciding which features to design that would fit into Spotify’s business goals. Usability testing revealed that some features weren’t as intuitive as anticipated and validated the importance of performing usability tests. Overall, this project was a great learning experience for what it would be like to design new features for an existing product.

Next Steps

  • Continue to improve the prototype and ensure the new features fit seamlessly with the existing design

  • Create an organized deliverable for handoff that includes all the visual elements

  • Work with developers to implement the design

  • Track metrics for engagement and retention, such as number of visits per user, number of shares, repeat usage of features

Conclusion
bottom of page