My Role: UX/UI Designer: UX Research, Information Architecture, Visual Design, Interaction Design, Usability Testing
Client: Spotify, industry leader music streaming service
Team: Self-directed (with expert mentor support and group crit feedbacks)
Prototype: View prototype in Invison
Time: 80 hours over 3 weeks, July, 2019
Spotify is the current industry leader in music streaming services with a mission to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way. In order to maintain their leading position, Spotify wants to improve engagement and retention in the app by expanding upon their social capabilities.
I started the entire research process by creating a research plan to outline my process and research goals as a starting point.View Research Plan.
Once I outlined my research plan, I conducted a quick market research to gather information about Spotify, the music streaming industry itself and Spotify's position in the industry. I concluded that Spotify has a broad audience, however the age range of the target audience falls between 18-34 years. It's important to note that Spotify used to have an inbox feature but it removed the messaging capabilities in 2017 due to low engagement. These important insights made me focus on thinking about future social features that would generate high engagement by users and are user-specific as those features seem to be popular among Spotify users according to my research.
Spotify is the leader in the music streaming industry so I decided to analyze how Spotify might distinguish itself from its competitiors. Through my analysis, I was pointing out the strengths and weaknesses of the competitor music streaming services, which were Apple Music, Pandora, Soundcloud and Amazon Music. I compared them to Spotify based on some certain additional factors: monthly unique users in the US, subscription price, music library size, platforms, strengths and weaknesses.
Then I conducted a heuristic evaluation to learn about the current app's information architecture, hierarchy, content, features to be able to consider how I could integrate a new feature within the existing design. I analyzed the latest version of the mobile app's premium version by taking screenshots of main screens and explaining the purpose of each screens with annotations to important features. I was able to identify the design patterns of Spotify that allowed me to integrate the new features seamlessly.
To empathize with Spotify's users, I conducted 5 interviews in person as my primary research method. I asked open-ended questions from the participants about their experiences with Spotify, their general music listening and sharing habits as well. 3 males and 1 female were interviewed whose age fell between 22 and 31.
Then I started to take all the information I gathered about the users and organized them to look for meaning and patterns to find out the user needs by creating an empathy map. Each sticky note color belongs to different interview participants and key observations are written on them, which are organized into different categories (doing, thinking feeling, hearing, seeing, pains, gains). Then I was looking for common answers and patterns across the sticky notes. The similar ones were grouped further which is how I got my insights and based on these insights I identified the user needs of Spotify.
By taking the findings from the empathy map I could start building the user persona who I named Jeremy Song who he reflects the ideal customer of Spotify. I chose the persona to be a Male as my secondary research findings indicated that more males use Spotify than females. Jeremy represents the key target audience - the Millennials - and by keeping his goals and needs in mind throughout the entire design process helped me design user-focused features.
With the target audience defined, using the needs and insights, I crafted "Point of View" (POV) statements to define the core problems of users. Based on the POV statements, I could create the How Might We questions that helped me to start generating innovative ideas in the right direction to make the user experience more enjoyable and social for Jeremy.
Based on the How Might We questions, I started to brainstorm ideas individually about how I could solve the problems of Jeremy. I spent a few minutes per HMW questions and took a list of all the ideas that came across my mind and I created a document where I collected my ideas to. View my list of ideas
Then I held a group brainstorming as well to generate even more ideas and possible solutions to the problems of Jeremy. I started the session by explaining the project brief shortly and then introduced ‘Jeremy Song’, our persona to the participants to let them know who I am designing for. I held two rounds of brainstorming ideas, each consisted of 5 minutes brainstorming / HMW questions that I presented to the participants after another. View the group's list of ideas
Next, I focused on defining the shared goals of Spotify and the users to help achieve both the business stated goals and user goals.I identified the shared goals of Spotify and the users in order to make better design decisions.
Then I laid out a Product Roadmap document, where I prioritized the how might we questions and identified new features that could solve the problems of Jeremy. These new feature ideas are coming from the individual and group brainstorming sessions and I chose the ones that could be best implemented into the app and best solves the problems of the user.View Product Roadmap.
Moving forward, I built the sitemap of the app to show where the new features will be integrated into the existing app.
At first I was planning to add the Friends Feed feature to the navigation bar as it serves as the main new feature that increases social activity. However since Spotify has recently simplified the bottom bar by removing multiple navigation items, I decided to integrate the Friends Feed into the search screen. This feature allows users to discover new music through friends' activity history or posts.
As for the Check In Mood feature, the potential best placement for it would be on the Search screen as well as this feature functions more like a new search method. By utilizing the Mood search feature, users can search for curated playlists based on their moods which satisfies both a user goal and need.
I created a User Flow diagram to visualize how Jeremy would navigate through the app using the new features.
The first scenario focuses on the Mood feature that satisfies Jeremy's need of finding playlists efficiently that match his current mood and meets his goal of listening to enjoyable, already curated playlists. The second scenario allows Jeremy to discover new songs through friends and connect with others through music which are important goals of his. By using the new Friend Feed feature, he's also able to meet some of his needs:expressing his thoughts about music he shares and knowing what his social circle is listening to. .
Then I created a few Task flows to map out the user journey for multiple single key tasks which are going to be completed a very similar way by the majority of users. These additional singular task flows helped me better understand what steps users take in order to achieve their goals so I identified additional UI elements that I needed to design alongside the new features for the perfect flows.
After I have identified the key screens that were needed to be designed in order to help Jeremy achieve his goals and tasks successfully by using the new features that I was planning to integrate into the app, I sketched out the layout and placement of the new features before going digital. These are the low-cost low-fidelity wireframe sketches with annotations to explain certain elements.
By relying on the low-fidelity sketches, I designed the high-fidelity wireframes in Figma. I recreated the existing UI of Spotify as pixel-perfect as I was able to and I implemented the new features into the screens while making sure that I'm using already existing design patterns within the app and I tried not to introduce new patterns - only if it was necessary. These high-fidelity wireframes demonstrate the look and feel of the app with the new features integrated into the UI. I also created new playlist covers - based on existing album designs - for the homescreen's From Your Community's & For Your Frequent mood's playlists as they are additional parts of the new main features.
Now that I had my new features integrated into the app's existing UI, I was ready to test the new features with users and gain valuable feedback from them in order to figure out what is needed to be improved on the current design. I linked my high-fidelity wireframes together by using hotspots in InVision and the limited functionality prototype was ready to be tested with a few users.
I started the Usability Test by creating a Test Plan document to guide me during the usabiliity test and to know how to go about the process and then I conducted in person usability testing with 5 participants (3 females and 2 males), whose age fell between 22 and 35.
After reviewing the videos that I recorded of the participants while completing the given tasks, I put together a document of how the participants completed each tasks, what I observed and what they said or recommended regarding the prototype.
View Test Findings
With the help of the test finding notes that I transcribed from the recordings, I could create the affinity map to synthesize the findings to find out what could be improved on the prototype. I took notes from the test findings and grouped together the ones that were similar, tried to find patterns across the observations and comments, which is how I got my insights. Based on these insights recommendations were made to improve usability, which were prioratized from high to low.
After I synthesized the results of the usability testing and I identified what could be improved on the design, based on the recommendations from the affinity map, I made changes on the wireframes and prototype to improve user experience. I added the in-app notification section to the homescreen per new features, which can be closed by users upon reding them and tapping on the 'x' on the bar. The sort by relevancy update was applied to the Friends Activity screen, which helps user sort the listed songs showcase based on their music taste.
I put together a UI Kit to share UI elements with other designers or develpers on the team later on. I designed all of the elements from scratch all over again and the new features' elements were designed based on existing patterns that I noticed within the current app.
This project was quite challenging for me and in the beginning I found it difficult to integrate new features by not introducing any new design patterns. I had quite a different vision of the look and feel of the new features until I got to the step of designing the high-fidelity wireframes where I realized that it was a must to follow Spotify's existing patterns in order to successully blend the new features into the UI. However I could overcome this major challenge by analyzing the current app in depth so I could use some of its UI elements as references that I could apply to the new features.