Lindsey Wong
mockups copy 2.png

Spotify

Adding New Features

mockups+for+page.jpg

Spotify

Adding New Features

Role: UX/UI Designer
Team: Self-directed with feedback from peers and mentor
Tools: Sketch, InVision
Timeline: 4 weeks

Challenge

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.

Objectives

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

  • To design additional and complementary features, as needed

Outcome

Integration of new features that can help users organize, share, and discover music.

spotify process.jpg

  1. Research

goals.png

To understand the market and business’ brand and to discover users’ frustrations, needs, and motivations

process.png

Market Research, Competitive Analysis, Interviews

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. 

Statistics

Users by region:

  • 36% of users from Europe

  • 29% of users from North America

  • 22% of users from Latin America

  • 13% of users from the “rest of the world”

Subscribers by region:

  • 40% of subscribers from Europe

  • 30% of subscribers from North America

  • 20% of subscribers from Latin America

  • 10% of subscribers from the rest of the world

  • 100 million premium subscribers 

  • 217 million monthly active users

  • Average users listen to 41 unique artists per week

  • Average hours spent listening to Spotify per month stands at 25 hours

  • 44% of users listen to Spotify on a daily basis

Age of users

  • 26% of users: 18-24 years old

  • 29% of users: 25-34 years old

  • 16% of users: 35-44 years old

  • 11% of users: 45-54 years old

  • 19% of users: 55+ years old

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.

Interviews

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

goals.png

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

process.png

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.

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.

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.

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.

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.


3. Ideation and Strategy

goals.png

To generate ideas to help the user accomplish user needs

process.png

Individual and Group Brainstorming, Product Roadmap, Sitemap


Individual Brainstorming

I brainstormed for about 10 minutes for each how-might-we question to come up with features that could potentially solve the user needs. They may not necessarily be feasible or easily implemented, but brainstorming allowed me to think of possible features to include for the product roadmap.

Group 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, in addition to using words

  • Defer judgement

  • Welcome all ideas

  • Be positive

  • Stay focused on the topic

IMG_0761.jpg
IMG_0762.jpg

Product Roadmap

After individually and group 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.

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.


4. Design

goals.png

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

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

Task Flow

I created 2 task flows for 2 scenarios users might go through based on some new features that would be implemented: finding music recommendations from the user music profile and requesting more fast-paced songs.

User Flow

I expanded on the task flow for finding new music by creating a user flow to map out the various paths a user can take. The user flow includes decision-making steps in the process, which will affect the flow of the user.

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.

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

goals.png

To test the hi-fidelity prototype and gain feedback for design improvements


process.png

Usability Testing

Usability Testing

Participants

  • Number of participants: 5-10

  • Age range: 25-34

  • Archetype: “The Professional”

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

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.


6. Iterate

goals.png

To make improvements to the prototype based on usability test findings and to finalize the prototype


process.png

Affinity Map, Branding, Hi-Fidelity Revisions

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.

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.

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.

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 prototype to create the final prototype.

mockups+copy+3.jpg

Having trouble viewing the prototype? Try opening the link in an in-cognito window :)


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