Project Overview
Role: UX Researcher, UX Designer, UI Designer
Duration: 4 weeks
Tools: Figma, Photoshop
Challenge: Spotify till this day is still the leading music streaming service in the world. Their mission is clear: “to help people listen to what they want, whenever they want-in a completely legal and accessible way.” For this reason, they want to improve engagement and retention in their app. In order to do that, they want to expand and improve on their social capabilities. Our main goal of this project were to 1. come up with ideas for new features based on research 2. add in the new features through design seamlessly into the current app.
(The content provided here is solely for educational purposes)
Empathize
Research Plan • Market Research • Competitor Analysis
Provisional Personas • Heuristics Evaluation • User Interview • Empathy Map • User Persona
Research Goals
At the beginning of the empathize phase, I created a research plan document that included some of my research questions, assumptions, methodologies, and most importantly, goals. A few of these goals include 1.Understanding the current audio streaming business trends, 2. understand Spotify’s target audience, and most importantly, 3. gain knowledge on user’s behavior using Spotify.
In order to gain a better understanding of the current audio streaming business, on-going trends, and other important statistics, I started my research process by conducting market research. The following are some of the key insights I found through market research.
Revenue in the music streaming segment amounts to 16,632m US$ in 2020.
There were 286 million monthly active Spotify users in Quarter 1 of 2020.
Main demographics of the users are between the ages of 18~34 years old.
One of Spotify’s reason of success with millennials is with its curated playlists and personalization.
Market Research
After having a better understanding of the audio streaming business and Spotify itself, I moved on to conducting a competitive analysis to compare the strengths and weaknesses of different companies. I analyzed four direct and one indirect competitors by writing out some of their strengths and weaknesses.
Competitive Analysis
Before moving on to the actual user interview process, I created 3 hypothetical provisional personas to help me identify the demographics for potential users I can recruit to conduct user interview with. I also created a Heuristic Evaluation document in order to get a better understanding of how the current app interface works. Then I created an Interview script document to fully prepare myself with the necessary information in order to recruit participants and conduct user interviews.
I interviewed 5 participants, who are all Spotify Premium users, individually regarding their music streaming and Spotify experiences. Most of the questions were open-ended questions that target the participants to share their stories. By the end of the interview, I was able to collect qualitative data which I can later synthesize.
(Click here to see interview research notes)
User Interview
After the user interview process was finished, I created an empathy map document in order to synthesize the data collected from the interviews. I pulled out the following 3 insights to match 3 needs from the empathy map to help me have a better understanding on what goes on in the mind of an actual customer.
Many users relies on recommendations and the “fans also like” section to discover new music, therefore they need to know that music listening suggestions will fit well to their taste
Many users normally share music through other apps such as Facebook and Instagram , therefore they need to know that sharing music through Spotify is convenient
Some users see music as a good way to improve their relationships with people, therefore they need to know they can feel some type of connection with their friends through Spotify
Empathy Map
Based on previous research methods and the insights & needs pulled from the empathy map, I then created a user persona. This user persona serves as a model and helps reflect my design choices in the later stages.
User Persona
Define & Ideate
POV & HMW • Brainstorming • Project Goals • Feature Roadmap • App Map
I started this stage by creating a POV statements & HMW questions document in order to connect the previous stage to this one. The main focus here is to use the insights and needs pulled from the empathy map research findings to create 3 POV statements that helps us better understand the user’s situation. Then with the statements, I created corresponding “How Might We” questions to state the problem.
POV & HMW
Brainstorming
The next step was to create a Venn diagram highlighting the business & user goals. By looking at where goals overlap each other, I have a better understanding of how to prioritize my design.
Project Goals
The first part of ideation was to create a feature roadmap in order to prioritize the new features and provide us a better idea of what each feature does. The main features I will be focusing on include 1. Pop-up notifications for song suggestions, 2. Share feature within Spotify, 3. Liking a friend’s listening activity.
Feature Roadmap
After having a better understanding the projects goals and the new features that I intend to add, I moved on to creating a app map document which helps me gain a better knowledge on how each feature would fit in the existing design.
App Map
Interaction Design
UI Requirements • Task & User Flow • Low-Fi Wireframe sketches • High-Fi Wireframes
The first document I created moving into the design stages is the UI Requirements document. This document allows me to write down the necessary information including tasks, pages to design, high-level and detailed design requirements.
UI Requirements
After knowing what I will be designing, I created one user flow and one task flow to illustrate how a user finishes each task.This is a crucial step in this process because it helps us understand not only what the user’s actions are, but also what the user is thinking about.
The following is the user flow which shows the path of the user’s actions and decisions they he or she may encounter when finishing a task.
Task & User Flows
Based on the 3 tasks that I previously created, I sketched out all the necessary screens are required to finish each task. While sketching out the screens, I had to keep in mind that the designs need to fit seamlessly within the existing app.
Low-Fidelity Sketches
After creating low-fi sketches based on the tasks, I moved on to designing high-fidelity wireframes of all the screens necessary in order to use later for conducting usability test. The following images are just a few of a the high-fidelity screens that I created.
High-Fidelity Wireframes
Prototype
High-Fidelity Prototype • Usability Test Plan • Usability Test • Affinity Map
User Interface Design • Moodboard • Style Tile • UI Kit
In order to conduct a usability test, I created a prototype using Figma with the screens created from the previous step. After making sure all the functions worked correctly and all the elements on each screen were placed right, I created a usability test plan in order to have a visual guide on what I will be expecting for the test.
After finishing the actual usability testing with 4 participants, I was able to find similar patterns through their feedback.
(click here to view full usability test findings notes)
Usability Test
After collecting qualitative data from the users through the usability test, I created an Affinity Map to synthesize the data recorded from the test. I was able to pull out three insights based on similar patterns from the users. With the three insights, I came up with three revision ideas that I can then try to implement in order to create a better design.
Affinity Map
Before moving on to trying to implement the revision ideas, I took a step back into the user interface design section and created a moodboard, style tile, and UI Kit in order to ensure I have a full understanding on how Spotify’s brand portrays their image. The following image is the UK Kit I created based on the Style Tile.
User Interface Design
The insights that I uncovered from usability testing helped me come up with ideas to improve on those features in order to create a better user experience. After double-checking with the 3 insights, I came to conclusion that the second one was unnecessary since there wasn’t a majority of voices from the participants that suggested for a change. Here are the main changes that I’ve made: 1. Move the Friend Activity into another more accessible section 2. Adding a notifications area with it and 3. adding an Iphone home screen in the prototype for a better experience.
(click here to view full revision wireframe screens)
Revisions
Although this project is only for educational and academical purposes, I should still keep in mind and treat it as if it were in the real world. I think it would be more than necessary to conduct another round of usability testing for the new prototype, since I’ve added a whole new section just for Friend Activity and notifications. This would help me uncover more insights and thus helping me come up with better ideas in order to improve on the whole design.
Next Steps
Looking back at all stages and all the process I have gone throughout this project, I can say that this one has definitely left a great impact on me. Being a Spotify user for quite some time, it was very interesting to not only just design new features but also do research and conduct tests to help me understand more about Spotify in general. A few highlights of this project include: 1. Recreating screens of the Spotify app was challenging but worth it 2. Conducting a group brainstorming activity was really productive and opened up my mind 3. Seeing how participants react to new features that I designed within such a popular app continues to motivate and challenge me more.
Reflection