Project Details
Client: Spotify
Timeline: 4 Weeks
Role: UX Researcher, UX Designer, Interaction Designer, UI Designer
Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Invision
Deliverables: High-Fidelity Wireframes with added features, App Prototype, UI Kit
Challenges
Streaming music service, 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.” For this project I will be helping them define what’s the best way moving forward in that direction, and provide them with a prototype of the features that I’m adding, integrated seamlessly within the rest of the app.
My main challenges will be:
To Integrating features into an existing app seamlessly
To brainstorm a solution that addresses my persona’s goals and needs.
Outcomes
Using the directions from my research I implemented features that help my persona send and receive music/podcast recommendations from friends using the Spotify App.
Goals
My goal for this project was to incorporate features to Spotify that addressed my persona’s goals while altering the current app as little as possible as to not disrupt the current flow.
Process
Process
1.
Research
2.
Define
3.
Ideate
4.
Design
5.
Prototype
6.
Iterate
Research
Goals: Understand my target audience and what frustrations they are facing
Steps: Market Research - Competitive Analysis - Heuristic Evaluation - 1:1 User Interviews
Market Research
The research phase started with gathering, reviewing and analyzing information about Spotify and music streaming users to understand the overall market
Spotify’s user base is dominated by Millennials, with Gen Z close behind. Here is the breakdown
18-24 | 26%
25-34 | 29%
35-44 | 16%
45-54 | 11%
55+ | 19%
Millennials are listening more frequently and streaming in more places than nonmillennials
Millenials who access Spotify on multiple screens spend 143 minutes streaming every day
Spotify reaches almost half of 16 to 24 year olds in the United States each week 18-24 year-olds listen to a broader selection of artists from different countries than any other age group
Competitive Analysis
My next step in the process was to look at who Spotify’s main competition is and how they compare
Heuristic Evaluation
I did a heuristic evaluation to gain an understanding of Spotify's app and see if it follows usability standard and understand where, if any, user could experience problems with the interface.
1:1 User Interviews
Current Spotify Premium members were asked questions about their interaction with Spotify as well as question about their overall music listening habits and preferences .
Total Participants Number: 5
Age: 18-34
Gender: 1 female, 4 male
I interview 5 participants who are current Spotify Premium members. Participants were asked questions about their interaction with Spotify as well as general questions about their music or streaming habits.
Define
Goals: Define frustrations and needs/goals of users based on data that I had gathered.
Steps: Empathy Map - Persona
Empathy Map
Using the information gathered from the user interviews, I built a map by writing out each data point on a post it note. Once those were up, I looked for common themes and grouped them together to understand frustrations that the majority of participants faced.
Insight:
Users currently struggle to share music using spotify
Users currently use other resources / applications to find new music.
Need:
Users need an easier way to share music using Spotify
Users need more resources on spotify to find new music
Persona
Using the information gathered from the empathy map and my user interviews I built a persona. This is who I will be designing for during the project.
Ideate
Goals: To use my understanding of the users, based on my research, to find ways to help address my user’s frustrations and find a solution.
Steps: POV Statement - Brainstorming - Application Map - Task Flow - User Flow
POV Statement
Using the insights and needs from the empathy map I constructed Point of View Statements, this helps understand the needs from our persona’s point of view. Using these I could then pose How Might We questions to start brainstorming how to solve the problem.
Brainstorming
Using the How Might We questions based on my persona’s needs and goals, I did a brainstorming session individually to answer how might we best help the users. I then put together a group to also do a group brainstorming session. I led the group, but did not partake as to not influence the session
Individual Brainstorming
Application Map
With the solution figured out I moved on to understanding the current application map and where the new features would be incorporated.
User Flow
With the knowledge of how the application was going to be reorganized to included the new features I wanted to make sure that the user flow was as direct as possible for these new features and I was not making my user jump through any unnecessary hoops.
Using the User Flow already created, I picked the most important task and looking into each step I made to insure that the flow was as fluid as possible.
Task Flow
Design
Goals: With the solution in place and with an understanding of how the new features would be incorporated in the existing application, I moved on to layout out the pieces
Steps: Sketches - High-Fidelity Wireframes
Sketches
Using the solution that I had brainstormed and my understanding of the new features I quickly sketched each screen that would be involved in the new features.
High-Fidelity Wireframes
Using the sketches I had developed I moved on to High-fidelity wireframes of all the screens that would be needed to test out the new features.
Prototype
Goals: To create a prototype to use for usability testing and ensure that I have created a good user experience
Steps: High-Fidelity Wireframes Prototyped using Invision
Mid-Fidelity Wireframes
Using Invission, I utalized the mid-fidelity wireframes I had created to prototype TAPS’ website.
Iterate
Goals: Refine the wireframes and prototype based on data gathered from usability testing
Steps: Usability Testing - Affinity Map - Prototype Iterations
Usability Testing
Using the prototype I built with the high-fidelity wireframes I developed an usability test to understand how users interact with the new features and find any problem areas.
Total Participants Number: 5
Age: 18-36
Gender: 1 female, 4 male
Completion Rate: 100%
Error-Free Rate: 75%
Test Objectives
Study users while they interact with the new features
Test how long it takes for users to achieve a specific task
Identify any issues or areas of confusion that the user seem to encounter
Task 1
Listen to a song that your friend has privately shared with you.
Task 2
Share the song you are currently listening to with your friend Scott.
Affinity Map
Using each set of data from the usability testing I created a map on the wall with all the information. I then grouped patterns to find where the majority of users seem to be having frustrations with the new features. With these groupings I then wrote out the insights and my recommendations on how to address them to provide a better user experience.
Insight:
Users are confused by the privately shared music vs. friends recommendation section.
Users looked for privately shared music under Your Library
Recommendations :
Have both the privately shared music and public friends recommendations under the same section.
Develop the prototype further to test this section in the future.
Prototype Revisions
Using the insights from the affinity map, I addressed the problem areas by redesigning some elements and updating a few pages.
UI Design
Goals: Understand Spotify’s branding and apply it
Steps: Branding - UI Kit - High-Fidelity Wireframes
Since this project involved adding features to an existing application, it was important that I understood the branding and design patterns and made sure that the new elements blended seamlessly with the current application.
Branding
UI Kit
Lastly I updated the UI kit to reflect the any updated done after the usability testing. Making sure that it included all UI elements so that the branding could be kept consistent as the application grows.
Conclusion
It was a lot harder to incorporate a new features in an existing application than I initially thought it would be. Since spotify is such a well known application it was paramount that I kept the user flows that users already know and added features without disrupting the current application.
Next steps
Conduct another round of usability testing to confirm assumptions that problems areas have been fixed and to find any other friction points in the user flow
Update prototype based on new round of usability testing
Update UI kit based on any update to the prototype