Spotify provides many features and services for users to engage with that includes more than just music listening. Because of that they are the leader in music streaming and wants to stay that way.
UI/UX Designer - Research, Interaction Design, Visual Design, Prototype, Testing
Spotify needs help in improving their engagement and retention by adding and integrating seamlessly a new feature or features within the rest of the app.
Sketch, Adobe Illustrator, InVision
4 weeks
To start off on how I can help Spotify, I needed to gain a better understanding about the current music streaming industry and the experience of Spotify Premium users. I outlined a research plan to state the objectives and methodologies on how research will be conducted.
Through market research, I developed a better understanding on what the current music streaming industries were like, as well as the current Spotify market. This was done so that I can have a better understanding on Spotify's target market, trends, and other important statistics.
Once I gained a better understanding on the market on snowboarding and AR, I began to look for direct and indirect competitors to understand their strengths and weaknesses. This allowed me to gain more insight on how Steez can be designed as a stronger competitor.
Using the findings gathered through market research, I needed to identify the target users to search for before conducting interviews. Based on the target demographics and top trends, I was able to create 2 provisional personas that would guide me in who I potentially needed to look for.
Ages: 25-35
Gender: Male
Ages: 18 - 29
Gender: Male
Ages: 25 - 40
Gender: Female
Before I started the primary research, I decided to perform a heuristic evaluation on the Spotify app. Since it is an existing app, I thought it would be a great idea to evaluate and analyze the current design and usability based on Jakob Nielsen's 10 Heuristics.
To start the primary research, I referenced the provisional personas and gathered 6 participants to interview. All participants were Spotify Premium users and interviews were all conducted remotely. This allowed me to gain a better understanding on the users' goals, needs, motivations, and frustrations when using the app.
Using the interview findings, I created an empathy map to synthesize, organize, and understand all the findings. This allowed me find patterns within the observations, which led to insights and needs.
Introducing...Gary! He is the user persona that represents Spotify's target users. Gary is based on the gathered findings from the secondary and primary research. He will be referenced throughout the whole design process.
After defining our target user, I created POV statements using Gary, which would identify what our end goals were. HMW questions were also created to began brainstorming potential solutions. This was based on the insights and needs gathered previously.
Users view music sharing as an expressive way to connect with others
To be able to feel a connection with others through sharing music
Gary needs to feel a connection with others through sharing music because he views music sharing as an expressive way to connect with others.
How might we help Gary feel a connection with others through sharing music?
Users make decisions on what songs to play based on their mood
To be able to find songs to complement their mood
Gary needs to find songs to complement his mood because he makes decisions on whats songs to play based on his mood.
How might we make it easier for Gary to find songs to complement his mood?
Users search through a number of playlists to find new songs they’ll enjoy
To be able to minimize the search time to find new songs that fit their music taste
Gary needs to minimize the search time to find new songs that fit his music taste because he searches through a number of playlists to find new songs he’ll enjoy.
How might we help Gary minimize the search time to find new songs that fit his music taste?
With users goals defined, I needed to slightly switch focus and define the business goals and see where it overlapped with the users. This helped in understanding the solution choices needed to move forward.
To begin the ideate phase, I started out by doing an individual brainstorming session using the HMW questions. I did a rapid mind mapping brainstorming activity that allowed me to gather a number of solutions in a short amount of time. I timed myself 5 minutes per round and there were 2 rounds per question. Within the time limit, the goal was to come up with as many potential solutions to each question.
To gather more potential solutions, I decided to conduct a group brainstorming session with 4 other people. For this session, I conducted using the Round-Robin Brainstorming and Figure Storming techniques. Doing this allowed me to gather many more ideas from an outside perspective and eliminate any personal bias opinions when thinking of solutions. Project background and user persona were explained and was all conducted remotely.
After brainstorming solutions, a product roadmap was created to prioritize key features and screens for the app. These were all prioritized based on how well they met the needs of my user persona as well as their feasibility within this project.
Including the new features/screens that were prioritized within the product roadmap, I created an application map that outlines the Spotify app's information architecture. I placed the new features where it fit best and made the most sense within the existing design.
Now that I have a sitemap that shows how the app will initially be laid out with the screens and features, I created a UI requirements document that states the essential elements and features in detail for each screen. While continuing to use the goals, needs, frustrations, and motivations from Gary, I created 3 tasks to understand what pages, features, and elements will be needed exactly.
Task 1: Gary wants to listen to a new song he’s never heard before.
Task 2: Gary wants to find a playlist that matches the mood he’s in.
Task 3: Gary wants to start a listening party with his friends.
Using the tasks created in the UI requirements, I created 3 task flows that shows the specific steps and screens Gary would need to go through to complete each task. This helped in understanding whether the tasks were logical and straightforward to complete.
To understand more specifically on how decisions might be made when navigating through the app, I created 3 user flows using Gary and laid out how he would make decisions in certain scenarios. This helped in understanding the user's behavior on how they might interact with the screens and features within the app.
Now that I got an understanding of how a user will interact with the app as well as how the app will be organized, it was time to start sketching out some ideas of how the screens will look. While referring to the sitemap, user/task flows, UI requirements, and persona, I sketched out the screens that presented the new features.
After sketching out how the new features would look, I went straight into creating high fidelity wireframes. Using the Spotify app, I recreated existing screens and used my sketches to create the new screens that would present the new features. This helped in understanding how exactly the new features would look in the current Spotify design.
Once all the high fidelity wireframes I needed were designed, I linked them together to create a prototype via InVision. This prototype will then be used to test with users and observe how seamless the new features are integrated into the existing app.
High Fidelity PrototypeBefore the testing was conducted, a usability testing plan was created to outline the objectives, methodology, participants, and tasks. Using this I was able to conduct a moderated remote testing with 8 participants. The think aloud method was prompted and all observations were documented.
With the findings gathered from the usability testing, I synthesized all the notes and observations into an affinity map. This was to identify any patterns, insights, and recommendations for the prototype. This allowed me to understand and prioritize more clearly on what updates are needed to the prototype.
As I continue to make updates to the prototype, it is also important to continue to stay consistent and keep track of the UI elements for Spotify. I first created a mood board and style tile to understand more clearly on Spotify's brand. I then created a UI Kit that contains the current Spotify branding elements as well as all the UI elements I used to create the new features. This kit will continue to be updated whenever the app is updated to maintain the consistency.
Finally, using the recommendations from the affinity map, I made the necessary revisions to the prototype. I decided to design another screen that uses the current Spotify notification feature to present the availability of the listening party, designed another screen that show the status of the individuals when the profile pictures are tapped in the party playlist, and slightly increased the size of the song cover under the "New song of the week" to emphasize it, but not overpower the rest of the sections under Home.
Final Prototype
As one of the few that is not a Spotify user, I was excited, as well as not sure on how this project would go. Since, Spotify is the top music streaming service and already many years into their development, I didn't know how much more they could have been improved. I would say though, temporarily subscribing to the premium plan and playing around with it, helped me a lot in being in the shoes of an everyday Spotify user.
Considering my unfamiliar use of Spotify, there were a few takeaways I got out of this project:
Research is important. Because Spotify is an existing app that is very popular to the public, research was very important to me to truly understand and empathize on how it already affects the market and the experience of the users.
Group brainstorming is very helpful. Conducting a group brainstorming session was extremely helpful in pushing me towards the direction I went to. It allowed me to gather many more ideas than my individual brainstorming session, which gave me more comfortability in going for the solutions I chose.
