Project Details
TEAM: Self + Feedback from mentor and colleagues
DELIVERABLES: Mobile App Prototype
ROLE: UX Design | Visual Design
TOOLS: Pencil + Paper | Sketch | InVision
Background
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. You will be helping them define what’s the best way moving forward in that direction, and provide them with a prototype of the feature(s) that you’re adding, integrated seamlessly within the rest of the app.
Objectives
Design a new social feature that embeds within the current Spotify platform in any device of your choice (web, desktop application, iOS, or Android). Make sure it embeds well and smoothly with the rest of the app.
Design additional and complementary features that could enhance your main one.
Process
01 Empathize
In this phase of the design process, I learned background information about the music streaming industry and its customers.DELIVERABLES: Market Research | Competitive Analysis | Heuristic Evaluation | User Interviews | Empathy Map | Persona
Market Research
I conducted market research to learn about the music streaming industry and its target demographic. Below were some of my findings:Industry Information
- According to Nielsen's 2018 Year-End Music Report, Americans streamed a record of more than 900 billion songs during the past 12 months.
- Ad-supported and subscription-based streaming, now accounts for 65% of U.S. music revenues and has long replaced CDs and downloads as the number one way of music consumption.
- Spotify accounts for 30% of total revenue generated by the recorded music industry, and 42% of the streaming market.
Demographics
- 25 - 34 (29%) age range makes up most of Spotify’s users
- 45 - 54 (11%) age range makes up least of Spotify’s users
- 44% of Spotify’s users are female; 56% of Spotify’s users are male
- According to Spotify’s 2019 Q1 report, there were 217 million monthly active users. Of these, 100 million were Spotify premium subscribers
Streaming & Social Trends
- Spotify users can follow friends or celebrities to view their listening activity
- Spotify users can share songs or playlists to Facebook, Messenger, Twitter, Telegram, Skype or Tumblr
- Soundcloud allows users to leave comments on songs and message other users
Competitive Analysis
Following my market research, I conducted a competitive analysis to compare and contrast different music streaming services. Since there are so many competitors it was important for me to identify a few of them and analyze their strengths and weaknesses. Doing so helped me recognize the standards within the industry and how I could distinguish Spotify from its competitors. Because I learned that most users use mobile devices across the different services, I decided to design my new features for Spotify's mobile app.
Heuristic Evaluation
After my competitive analysis, I conducted a heuristic evaluation of the Spotify mobile app. This helped me recognize and evaluate the existing usability familiarized me with the design.
User Interviews
After completing my secondary research, I began my primary research in the form of user interviews.
I completed a total of 6 user interviews to learn more about peoples' music listening experiences. I used open-ended questions to reveal patterns and behaviors among users.
My key findings were:
- 6/6 learned about Spotify through their social circle and word-of-mouth
- 6/6 do not like all the songs that Spotify suggests for them
- 6/6 share songs when their friends like a song that they are playing or have similar taste
- 4/6 mentioned they discover new songs using Spotify in addition to other social networks like YouTube and Twitter
Empathy Map
I created an empathy map to help define patterns from my primary research. I derived insights and needs from the patterns and behaviors that were revealed during contextual interviews.Persona
After creating my empathy map, I created a persona to look towards as a continued the design process. The persona kept me user-focused and reminded me who I was designing for. Since most of my interview participants were in their early 20s, my persona reflected that.02 Define
In this phase of the design process, I solidified the details of what was to be created for whom and how.DELIVERABLES: POV Statement and HMW Questions | Brainstorming | Business and User Goals | Feature Roadmap | Sitemap
POV Statements and HMW Questions
I created a document with point-of-view statements and "How Might We..." questions to link the research phase with the define phase of the design process.Individual Brainstorming
I started to brainstorm solutions to the problems I discovered from my research. I focused on writing down as many solutions as I could think in a short amount of time.
Group Brainstorming
I also led a group brainstorming session with four friends to generate more solutions from different perspectives. I established a set of rules and an encouraging environment so my team could produce out-of-the-box ideas.
Goals Venn Diagram
I created a venn diagram highlighting the goals and pain points of the business and its users.Feature Roadmap
The feature roadmap helped me establish a priority of features that stakeholders needed the most.Appmap
I created a sitemap based off my competitive analysis and brain storming exercise.03 Ideate
In this phase of the design process, I began generating ideas to solve the problems that users were experiencing.DELIVERABLES: User Flow | Task Flow | Sketches
User Flow
I created a user flow document depicting several ways a user might interact with the mobile app to accomplish their goals. This helped me better understand the process and screens involved in the design.Task Flow
I created a task flow document depicting the way a user would use one particular feature of the new design. This task flow represents a user hearing a song they like then using the audio recognition feature to save the song to a playlist.Sketches
After completing my user flow and taskflow, I began sketching out ideas on how to integrate my new features into the existing mobile app.04 Branding and Design
In this phase of the design process, I analyzed Spotify's exsiting brand and interface in preparation for my high-fidelity wireframes.DELIVERABLES: Style Tile | High-Fidelity Wireframes
Style Tile
Before creating my high-fidelity wireframes, I a style tile to ensure I adhered to Spotify's branding guidelines. First I created a mood board to compile a list of branding, UI Design and imagery inspirations.High-Fidelity Wireframes
After creating my style tile, I created high-fidelity wireframes based off my sketches and Spotify's branding guidelines in preparation for prototyping.05 Prototyping & Usability Testing
In this phase of the design process, I created a high-fidelity mobile prototype and conducted usability testing to gain valuable insight and feedback from my users.DELIVERABLES: Prototype | Usability Testing | Affinity Map
High-Fidelity Prototype
I took the wireframes I created and linked them together using InVision. You can interact with the prototype below.Usability Testing
After creating my prototype, I conducted usability tests at a local coffee shop with 6 participants. I chose them based on similarities to my persona and collected valuable information and data.User Tasks
- View their music taste profile and follow someone with a similar music taste to themselves.
- Identify a song using the new audio recognition feature.
- Locate and listen to a playlist compiled of what your social media friends are sharing.
My objectives of the test were to observe how well users were able to navigate the app, complete their intended goals and recognize any friction points. Some of my initial findings were:
- 100% of participants were able to successfully navigate to their profile screen from the home screen
- 100% of participants were able to follow the person with the most similar music taste to themselves
- 67% of participants experienced some confusion when looking for the audio recognition feature
- 67% of participants had to actively search the song identification screen to find the “Close” button
Affinity Map
After completing user testing, I created an affinity map to organize my findings, discover insights and derive recommendations for the next iteration of my prototype.
05 Iteration
In this phase of the design process, I revised my high-fidelity wireframes and prototype based off the findings from usability testing.DELIVERABLES: Wireframe & Prototype Revisions
Wireframe & Prototype Revisions
Based off my recommendations, I improved upon three design aspects.
- Added two onboarding screens so users are aware of the new features and are encouraged to try them out.
- Changed the audio recognition button to the Spotify green and moved it next to the search bar for higher visibility.
- Made the "Close" button sticky on the song ID page so users can close the screen without having to scroll all the way down.
Reflection
This was an interesting project because it had more constraints than other projects I've done. Spotify has a well-established brand that I had to adhere to while I designed its new features. Since, the existing mobile app is already quite polished, I really thought about the reasons on how and why they decided on these particular set of UI elements.
The most interesting part of this design process was only having a vague general idea of what features were needed. User interviews were key in this project because patterns in users experiences revealed problems that I would not have seen on or experienced on my own.
Next Steps
- Test the revised prototype and iterate
- Choose a redlining tool and prepare the project to be handed over to a developer
- Seek any other opportunities for improving the design