Team: Self-directed with feedback from mentor and peers
Roles: UX / UI Designer
Tools: Sketch App, Marvel, and Photoshop
Timeline: March - April 2019, 2 weeks
Deliverable: Iphone App Prototype
Spotify is a leading music streaming service with a mission to help people listen to whatever music they want, whenever they want, and wherever they want. To improve engagement and retention, Spotify wants to expand on its social capabilities within the mobile app.
This is a speculative project, and I am not affiliated with Spotify.
To design social features for Spotify’s mobile app
To follow Spotify’s existing design patterns
To smoothly integrate the new features into the current app for a seamless user experience
My Design Process
Goals: Gain insight on the business, customers, and current market
Process: Market Research / Competitive Analysis / App Audit / User Interviews
I first started my research by creating a research plan which you can view here.
After creating a plan, I then started with some market research in order to gain a general understanding of the music streaming industry and Spotify’s user demographic. From this research, I learned that Spotify tried implementing an inbox and messaging feature back in 2017 but cut the feature short due to the feature requiring a lot of resources / manpower while having overall low engagement.
After learning this, I realized that I must pay special attention in designing a feature that was efficient but also encouraged more engagement of users.
Music Streaming Industry
Streaming Generate 75% of the music industry revenue in 2018
At a global scale the most revenue is generated in the US
Music Streaming revenue will reach $4,357 million in 2019
Where Spotify stands in the Music Industry
Q3 of 2018 Spotify had 87 million paid subscribers & a total of 191 million monthly active users.
Starting to offer indie artist advances for exclusive rights (wants to create original content sort of like Netflix)
Compared to other competitors Spotify has the highest user satisfaction
Millennials are twice as likely to pay for a music subscription compared to their older counterpart
Spotify users by age
After learning more about the music streaming industry and Spotify, I decided that the best way to learn how Spotify differentiates themselves amongst their competitors was through a competitive analysis. Through this analysis I discovered was that throughout all platforms, most users stream their music through a mobile app which is why I decided to design for the mobile version
Next, I analyzed Spotify’s mobile app in order to become more familiar with the current design, documenting notes of all the main features and social capabilities. Doing so allowed me to recognize design patterns Spotify currently uses, which in turn allowed me to better integrate my features into the mobile app. View Details
In order to learn more about the Spotify’s users I conducted in-person interviews with six users who had Spotify Premium. Through open-ended questions, I listened and observed what people thought and felt towards Spotify.
By the time I finished, I gained a better understanding of who Spotify’s users were as well as what experiences they sought through the platform.
Number of Participants: 6
Gender: 4 male / 2 female
Age 20s - 30s
Goals: Synthesize research and identify user needs, goals, frustrations, and motivation
Process: Empathy Map / Persona / POV Statements & HMW Questions
In order to understand the data I gathered through the user interviews, I created an empathy map to uncover insights and define user needs. Although at first glance, it seemed that users are mostly only interested in using Spotify as a music-listening app, there is a social aspect of sharing and discovering new music that can be improved upon. View Details
Users need an efficient way of sharing music
Users need to know that Spotify’s playlist consist of songs the user enjoys
Users need to be able to listen to Spotify no matter where they are
Users currently uses a variety of platforms to share music
Users enjoy not having to create their own playlist
Users value convenience when it comes to music
Next, I created a persona “Tyler” to represent the findings from the empathy map. By basing this persona off all the research I’ve done so far, I am able to create a realistic representation of the target user, allowing for greater empathy and understanding throughout the design process.
Throughout the rest of the project I used this persona in order to help me make sure that all my design decisions are focused on Spotify’s core users.
POV Statements & HMW Question
With the target user defined, it was time to translate Tyler’s needs into action. How can we turn Spotify into a more social and overall enjoyable experience for Tyler? I crafted Point-of-View Statements and How Might We questions to start the ideation process for solving Tyler’s needs.
Goals: To ideate website features, information architecture, and flows
Process: Group Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow
Using the how might we questions, I brainstormed a list of possible solutions. The key takeaway from this was to generate as many ideas as possible, I gave myself 5 minutes per question and did two sessions with a large break in between in order to encourage thinking and coming up with more solutions.
Using the how might we questions as a framework, I facilitated a group brainstorm session with a couple friends in order to generate a great variety of solutions together (More heads are better than one). As the facilitator of the session, I focused on creating a positive, nonjudgmental, creative setting where ideas can be shared freely.
After collecting ideas from the group brainstorming activity, I created a product roadmap to prioritize several key features aiming to solve Tyler’s needs. I prioritized these features based off how many users it would affect, ease of integration within the current app, and how feasible the feature would be. During this process, I also wanted to make each feature was as intuitive as possible while also being a consistent with the rest of the Spotify app.
Next, I created a sitemap to visualize the information architecture of the app. This helped me determine where to best place the new features in the current app design in a way that is still intuitive for users. View Details
Next, I created a task flow about a user who wants to use the live listening feature. I focused primarily on this task due to the feature not being as common and I didn’t really have a lot of of examples to look at for inspiration. By building out a task flow, helped me understand how exactly the user would complete the task. View Details
To analyze the flow of the new features, I mapped out four user flows based on common scenarios I found from my primary research. This helped me learn which screens and UI elements were needed to implement the new features, while considering how to optimize the overall flow. View Details
Goals: To design high-fidelity wireframes following Spotify’s design patterns
Process: Sketches / Branding / High-Fidelity Wireframes
I started sketching key screens within the user flows I mapped out earlier. These sketches help me quickly iterate multiple versions of each screen. During this process I focused on trying to smoothly integrate the new features while adhering to Spotify’s design patterns in order to create a more seamless experience. View Details
As I previously stated my goal is to implement these new features while still making sure that the entire app and flow is cohesive. In order to do that, I needed to understand the specifics to Spotify’s branding guideline which can be found here. I also created a collection of photos and references through this mood board.
I then moved onto crafting these high-fidelity wireframes in Sketch based on Spotify’s existing mobile UI. These high-fidelity wireframes help give a clear idea of how the exactly the interface will look and work while also communicating design decisions to stakeholders.
Features that were added.
Personalized mood quiz
Sharing music through a QR code
Live listening session.
Goal: To prototype the new features and gain usability feedback
Process: High-Fidelity Prototype / Usability Testing
High Fidelity Prototype
With the high-fidelity wireframes in hand, I created a mobile prototype in Marvel in order to have a tangible product that I can use for testing.
Take the current mood survey.
Play the song “We Find Love“ by Daniel Caesar
Share the song using the QR Code feature
Using the live listening feature add your friends Pearl and Scott, and listen to the song “We Find Love” by Daniel Caesar
Pass the remote over to your friend Pearl
Observe how users complete a set of task
Identify areas where the features can be improved
Identify what in the design works well for the user
I conducted usability testing at my local coffee and mini golf area with 5 participants all of who had a similar background to our persona Tyler. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.
Goal: To iterate upon the design using usability data
Process: Affinity Map / Revised Wireframes + Prototype / UI Kit
Now that I went out and tested my prototype it’s time to synthesize my findings. In order to do so I created an affinity map to identify common themes and connections within the user feedback. I was then able to identify critical insights and prioritize revisions from top to bottom for my next design iteration. View Details
Have a quick option that says "pass remote" on the music player
Implement a share icon on the music player
Participants didn't immediately know how to pass the remote
Participants had trouble generating a QR code due to not being able to identify the location of the share option
Revised Prototype Wireframes & Prototype
Lastly, I revised the wireframes and Marvel prototype to reflect the recommendations from the affinity map. Feel free to interact with the final prototype below
While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Although many of the UI elements were based off of Spotify’s existing design, I had to recreate everything from scratch inside Sketch.
The foundation of this project’s is similar to many project encountered in the real world which is to improve an already existing product. Since Spotify is already well established it was difficult to identify areas of improvement. I was however able to overcome this challenge by first properly defining and empathizing with the core user. Another thing that I learned from this project was how to adhere to already existing branding guidelines. This was key to the success of the new features because not only did they have to work but they had to work well with the already established platform.
Continue organizing design deliverables for handoff
Work with developers to identify any technical limitations
Conduct research that would predict engagement levels of the new features
Monitor engagement levels when feature is live