Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” As a streaming music service, Spotify is the group lead and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities.
Help define what's the best way moving forward, and provide Spotify with a prototype of the feature that will be added, integrating seamlessly within the rest of the app.
As a very casual user and non-premium member of Spotify, I wanted to learn more about what Spotify is, what the app offers its current users, and get an idea of who uses Spotify to stream and share music. I spent a few hours getting a sense of Spotify’s place within the landscape of streaming music providers and gathering enough information to help determine the focus and scope of my research.
In order to learn more about where Spotify stands in the music streaming market, I chose to look at two main competitors (Apple Music, Amazon Music) which share the largest piece of the market with Spotify, as well as Pandora due to their use of the Music Genome Project. Comparing the available features for each company, I was able to gain insight into how Spotify's features compare to what is available in the market, learn the strengths and weaknesses of their competition, and have reliable evidence that will help inform design decisions later on.
At this stage, I felt that it was important to really get to know the current UI so I signed up for a free trial of Spotify Premium and conducted an audit of the mobile application, working through several of the flows I thought a user would take while finding, streaming, and sharing music.
Next, based on the quantitative data I discovered, I created several provisional personas. This presented an opportunity to articulate my target audience. Provisional personas ultimately represent what we think our users are like. The goal is to begin gaining empathy with potential users of the new feature.
To better understand the needs and goals of those who use Spotify in order to stream and share music, I developed an interview script and conducted one-on-one interviews with five participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their habits using the app, listening to music, and sharing music with others. During the interviews, I took notes as I asked questions and conversed with each participant.
After completing the one-on-one interviews, I created an Empathy Map, looking for patterns that would lead to key insights that directly translated to the needs and goals of my user.
Based on the insights discovered through my primary research synthesis, I created a user persona. Providing me with a realistic representation of my key audience segment, this persona helped to keep the concerns of the user at the forefront of every design decision I would make moving forward.
Now that I had a clear understanding of my user needs, I created Point-of-View and How-Might-We statements so that I could begin to really empathize with my user. Reframing the insights and needs identified in my research allowed me to turn them into clearer invitations and challenges for design.
Considering each of the user needs I uncovered during my primary research I led a group brainstorming session with two other people. We brainstormed ideas for each the “How Might We” questions individually at first. Then, we discussed and brainstormed further as a group. The opportunity for multiple perspectives from people new to the topic offered the chance to gather fresh ideas and play off each other's thoughts, creating a unique momentum.
Moving into the next stage of defining the new feature for the Spotify app, I mapped the overlaps of business goals and user goals.. This helped keep the priorities of Spotify in view as I considered how best to design solutions that would satisfy Aaron's goals as well.
Next, I created a roadmap, allowing me to communicate the features I decided to add to the app quickly and clearly. The goal of this roadmap is to create a visual representation that is as easy to grasp as possible, using clear, easy-to-read labels for headings and categories.
In order to illustrate the high-level relationship between the new content I'll be designing and the mobile application, I created an App Map.
My goal was to create a structure that was recognizable and that fit seamlessly into the current UI. I began by identifying the types of content within my new feature, sorting this content, and then mapping them out in a way that would feel familiar to the user.
Based on the structure presented in the App Map, I created User and Task Flows that illustrated the ways that my user would move through the application. The flow charts aided me in prioritizing the key screens that I'd need to create in order to complete this task.
I then considered the details each screen should include, and outlined them in a UI requirements document. This document served as an outline and checklist for me as I designed the key screens for the user flows, conveying the planned functions and design elements to project stakeholders.
I created low-fidelity wireframe sketches of key frames within the user flows I’d mapped out. These sketches helped me think through the integration of the new feature and layout before moving into digital renderings.
Working with Spotify’s existing UI, I moved straight into designing high-fidelity wireframes. These wireframes would be used to develop a prototype that would allow me to test user interactions for the new feature in a context as authentic as possible to the real experience of the app.
I brought my wireframes into Marvel and created a high-fidelity prototype to share with users. Click around below to explore the new Groups feature!
After completing the UI design for the new Spotify Groups feature, I was ready to test its usability. I designed a rubric outlining objectives, methodologies, information about participants, along with the scenarios and tasks to be tested. My goal was to understand the usability of the new Groups feature, allowing me to measure the success of the decisions I made during the previous phases, helping me discover how I can make improvements while it's still in this early stage of development.
Usability testing feedback was gathered and organized into various categories (successes, problems, and observations). An affinity map offered insights and recommendations, which served as a guideline to create the next iteration of the prototype. Recommendations were prioritized high to low, with any time or budget constraints also considered.
Because Spotify has a well-established brand, creating a mood board was an exercise in double-checking that my UI aligned with their visual direction. It was also an opportunity to gather inspiration that could be incorporated into the new feature.
View Mood Board here.
Pulling from Spotify's branding guidelines, I created a style tile using their existing color palette, typefaces, and imagery, including any new elements specific to the new Groups feature.
Now that I had good understanding of how my users need me to improve the usability of the new feature, I created an updated version of the hi-fidelity prototype.
I then assembled a UI Kit, drawing upon existing Spotify UI styles and elements and adding new styles and elements specific to the Groups feature. This provided an opportunity to review styles, design patterns, and UI elements for consistency.
Designing within an already established visual design system was a really unique challenge. This allowed me to spend more time developing the new Groups feature, providing me the ability to stay focused and on task.
My initial thoughts on which feature I would create turned out to be very different from the one that was discovered during my group brainstorming session. Working with a couple of friends that aren't in the design field provided me with plenty of out-of-the-box ideas that eventually led to selecting the new feature I added.
Going into this project I had little experience using Spotify, however, the app is so easy to use that it took no time to become acquainted with it. For the purposes of my work, I signed up for a trial offer of the premium version and have officially been converted to a daily user!
If I were to continue working on this project, I would conduct more usability testing in order to ensure that the priority revisions I discovered during my testing were implemented correctly. I had so much fun brainstorming during the ideation stage and I'd love to do it again and perhaps work on another feature.
