TopEmpathizeDefineIdeatePrototypeTestConclusion

Discovering Music Another Way in Spotify

Case Study
How Can We Improve the Experience of Spotify Users?
*This was a personal project and was not affiliated with Spotify*
Background
  • Spotify is the leading digital audio streaming service that has a vast library of music and podcasts. It leads the market share at 34% with 155 million paid users. It has a complex algorithm that recommends music based on your listening history, as well as curated playlists and internet radio stations. There is a basic ad-supported free version as well as a paid premium version.
Role
UX Research, UX Design, Prototyping, Testing
Duration
4 Weeks
Back to Top

Empathize

Research Methodologies
Secondary Research
I performed competitive analysis on the top audio streaming providers in the market and compared their overall market share and amount of users they have. I then created a table and listed which main features each provider has.
Feature Research
How might we improve the experience of Spotify users by implementing a feature that exists elsewhere? I thought about the problem of not being able to use Spotify to identify a song from an external source.
‍
I researched the Spotify Community boards and the Google Play store to see if other users suggested or mentioned the identifier feature. There were many other users who suggested or upvoted for the same feature to be included within the app.
Reasons to Add the Identifier Feature
I also did research on the recognition market especially with the leader Shazam. I wanted to get more information on how the recognition feature actually generates revenue and how the whole process works. I discovered significant reasons why the identifier feature would be a very good idea to build directly into Spotify.
Survey
After the research that was completed, I decided to create a survey targeting Spotify users to get feedback directly from the users themselves. The survey would provide me with a good amount of user response fairly quickly and a fair amount of quantitative data.
I got a small sample size, receiving 20 responses with 60% of the users responding that they would use and love the identifier feature.

Define

Our Spotify User Personified
After completing the survey and based on the responses, I created a persona to empathize with the user. This would allow me to keep the target user in mind while designing the additional feature.
Storyboards
With the persona Ashley in mind, I decided to create storyboards showing Ashley's life without the identifier feature and her life with the built-in identifier.
Feature taskflow
I brainstormed ideas on how to implement the identifier feature into the Spotify app. Using Whimsical, I created the flow of the user accessing the new identifier feature and using it. I wanted to use as much of Spotify's existing design to try and make it a seamless interaction so I decided on attaching the identifier feature into the existing microphone search feature.

Ideate

Wireframe Sketches
After deciding on the feature flow process, I created sketches of the wireframes focusing on accessing the feature and adding the identified song to a playlist.
Lo-fidelity Wireframes
After sketching the wireframe ideas, I digitized some lo-fi wireframes in Figma with the necessary screens to fulfill the main tasks. As I did not have access to Spotify's design system, I took screenshots of the Spotify app on my phone and then performed copy work of the necessary screens. I learned a lot replicating Spotify's screens as it really allowed me learn how a major popular app uses spacing and sizing of their elements.
Hi-fidelity Wireframes
Using the lo-fi frames, I added the appropriate images and color into the frames. As soon as I added the images and color, it really gave it the Spotify look and vibe. I had so much fun creating the hi-fidelity frames because it truly felt like I was "in" Spotify. One challenge I had was getting the genre cards on the Search screen correct because of the angle of the image covers within the cards and how they are a bit cut off. After I figured out the first card, the rest of the cards became easier.
UI Kit
As I was putting together the hi-fidelity wireframes, I also put together a UI kit which would be useful for any additional wireframes or prototypes in the future. This could act as a mini design system.

Prototype

View Prototype

Test

Usability Test
Using Maze.co, I wanted to gather insight on my prototype performing a usability test.
Format:
Maze and 1 remote testers via Zoom screen share
Tasks:
Accessing the identifier feature, using the feature, adding it to a playlist, and then sharing the song
Metrics:
Maze Usability Score, average success rate, heatmap, mouse click accuracy
16
Users Tested
86
Usability Score
92%
Task Success
Rate
80%
Mouse Click
Accuracy
The usability score with Maze is an exact number from 0 to 100 and reflects how easy it is for a user to perform a given task with the prototype. A high usability score indicates the design will be easy to use and intuitive.  Although the usability test received a fairly high usability score of 86 and a 92% task success rate, I wanted to iterate on the problem screens to achieve even higher results and reduce any mouse click inaccuracy.
Finding Improvements and Solutions
I created an affinity map based on the user test data to display the positives, challenges, and suggestions. The primary challenge that users had was one of the first steps in the task - locating the feature itself. Once they found the feature, it became fairly easy to go through the task. Users commented that it was very intuitive and enjoyed the prototype animation. They also mentioned that it truly felt like it was a part of Spotify and hope they actually create this feature.
Iterations
I created a new version of the home screen with the icon at the navigation footer to ensure users with easy thumb access.
I made an iteration to the location of the feature as there were many users who had difficulty finding the identifier feature in the earlier design version. As this was the first task, I wanted to make this amendment and ensure the new feature was easily found. With more time allotted, this new design iteration would need further testing to be validated.
Potential Next Steps
Conclusion & Reflection
Designing to an existing big brand like Spotify was extremely fun. There were fairly easy moments as well as some difficult moments. There was a lot of research involved at the beginning to figure out what problems could be solved in the Spotify app. Since it has an existing brand and design, it mainly consisted of copy-work when creating the elements wireframes. Reproducing the app layout in hi-fidelity frames and creating the prototype took up the most time. I also wanted to implement the identifier feature to be user-friendly and function as seamlessly as possible. This project gave me the confidence to succeed within an existing company's brand and design system.

Other Projects

Let's work together:
 2021 Steven Trang. All Rights Reserved