Spotify: video watching

over listening to music

Disclaimer: This project is not affiliated with Spotify. Neither my partner nor I work for Spotify.

Role

User Research

Competitive Research

Wireframing

Usability Testing

Prototyping

Tools

Whimsical

Sketch

Invision

Protopie

Year

2019

Time

2 weeks

Team

Galen Hogg

 Currently, Spotify is slowly implementing its video feature in parts but it is not intuitive. Spotify users leave the app to watch music-related videos. How does Spotify keep or increase its retention rate?

User Research

Using resources from the Spotify website, my partner and I found that their largest user demographic is Millenials aged between 18-35. With that information, we did a variety of user interviews, targeting post-secondary students between the ages of 18-25 and young professionals between the ages of 25-35. I did some of my interviews in person while others were done remotely using a short survey. I found that the negative side to the surveys was not being able to ask the person about their answers since they were anonymous. On the other hand, I was able to collect some basic quantitative results. 

Screen Shot 2019-03-19 at 4.29.08 PM

Through affinity mapping, we found some insights. The first insight showed that our target demographic mainly uses the app at home or in transit. The second insight showed that the demographic either don't notice that certain songs had accompanying videos or skip the video completely. We realized that Spotify was not implementing the feature well for their largest demographic. Our target user group enjoyed watching content from their favourite artists outside of listening to music on Youtube. 

Wireframing

Because of the existing layout and branding, we didn't want to dramatically change the app so that users wouldn't be confused with the addition of the video section. That meant that the integration of the video section into the design of the app had to be seamless. Creating wireframes helped us plan out where the section should be on an artist's page, what a page of videos would look like, how the cover arts would look like, how the video would play (with its button placements), and how to watch videos in transit. Because of the number of screens, we divided the wireframes in half to work more efficiently. 

Flow
Screen Shot 2019-03-18 at 4.33.10 PM

Mid-fi wireframes

When the screen wireframes were done, we regrouped to talk about the layout and any redundancies we had. I found that working in a group setting had let me work out any indecisions and questions in layouts. We found that, while we were transferring the wireframes into Sketch to make our mid-fis, we were replicating each other's screens (which were in each user flow). Since the need for collaboration was key to building out the designs, we quickly realized how important it is to leverage on existing collaboration platforms like Figma.

Screen Shot 2019-03-19 at 5.36.52 PM

Testing

Artboard 2

Once we got all the screens set up, we had some uncertainty of small details we wanted users to test for us. We took our screens to do some A/B testing. There was already a setting called data saver, where the user listens offline but at a lower quality to save on data. A part of the video feature would allow more downloading options for the user to choose how to listen and watch while online and offline. I wasn't sure of how to set up the offline settings in one or two headings. The A/B testing results showed that the majority preferred having all the offline settings under one heading.

Prototype

After the A/B testing, we imported all the screens into Invision to do some usability testing. The overall positive feedback we got was users assuming the prototype was the actual Spotify app. The other feedback that we got back were about fixing or adding certain buttons, and separating the information in the offline settings page to music and video settings.

Screen Shot 2019-03-18 at 5.00.18 PM

Next Steps

My next steps for the prototype will be to add specific date (month/day/year) between the interview picture and the interview name; rearrange video section on artist’s profile page so that there is less clicking to get to intended video; add behind the scenes (music videos) section, behind the scenes (tours) section, lyrics music videos section, music video trailer section; and Spotify exclusive section to videos. Once these changes have been made, the next step would be to talk to Spotify designers. It has been interesting seeing what the designers have been doing for the video feature and how they think of this design in comparison to theirs.

UX/UI Design

walking-down-the-street-with-iphone-7
bright-office-enviroment-with-macbook-air
bright-office-enviroment-with-macbook-air

Spotify

Shoppers

Line-Up