Spotify Video Streaming
Creating a mobile prototype for Spotify that enables users to watch videos, interact with other fans, and connect directly with artists.
Scroll ↓
Home and video screens from the hi-fi prototype I built (in two days) as lead designer of this project.
Challenge
It has been reported that during the COVID crisis music streaming has seen a decline. (Rolling Stone). Access to video and live music online is growing on competing platforms, with Gen Z primarily using YouTube and Instagram to connect with artists.
Solution
Design and integrate a video feature into Spotify’s existing mobile interface that allows users to watch videos, interact with other fans, and connect directly with artists.
My Role and Contribution
I worked as the Lead Designer during this project
Conducted initial user interviews and low-fidelity usability tests while executing team design studios and brainstorms
Orchestrated the design process during this two-week development sprint
Built each lo-fi and hi-fi prototype from front to back based on user insights and team ideation
Design Tools Used: Sketch, Invision,
Our Goals
Integrate new video feature into existing interface without disrupting the user experience.
Reveal points of friction and validate assumption that users will intuitively navigate to a new video feature.
Gain an understanding about the user relationship and pain points related to streaming music and videos.
Shoulder to Shoulder with Industry Giants
By examining the existing features of livestream juggernauts, YouTube, Twitch, LinkedIn, and China’s Douyu, we were able to pinpoint trending features across competitor platforms. This allowed us to focus on what we wanted to ask our users during our first round of interviews.
Our goal was to integrate a video and chat feature into an existing interface without copying the competition.
What We Hoped To Discover During User Interviews
After examining Spotify’s business goals and competitor features, it was time to see what our users had to say about the app.
With participants ranging from teenagers to retirees, we conducted 13 user interviews total; 7 in-person and 6 remote.
Our interview goals:
1. Understand the user’s relationship with Spotify and their overall attitude toward other streaming services.
2. Gain insight into the user’s livestreaming experiences, including their likes, dislikes, and pain points with various streaming platforms.
3. To better understand points of friction related to social interaction around music and video streaming.
The Users Have Spoken: Integration Without Interruption
It’s no surprise that users had a great deal to say when it came accessing content from their favorite artists.
7 out of 8 premium Spotify subscribers interviewed use YouTube regularly but refuse to upgrade to YouTube paid services.
They come to Spotify for the music and don’t want their experience interrupted under any circumstance. Insights gained lead to further investigation on intrusive advertisements.
We were also curious about why premium users had zero issue paying Spotify’s monthly subscription fee ($9.99 as of May 2020) to avoid ads, but refuse to upgrade to YouTube paid services.
Meet Our Spotify User Base: Persona Tyrone
We uncovered a number of trends among users, including why they would pay for Spotify’s streaming services and not YouTube’s. The answer? Premium content. Users know Spotify provides a curated experience combined with high quality audio content—and they expect no different with video. This “a-ha” moment along with additional insights uncovered through affinity mapping helped us to develop persona Tyrone.
The copy above was written by me with insights provided from the users.
Time To Design
I will freely admit that I had very little visual design experience headed into this project. My comfort zone has always been words, so I chose the role of lead designer as an opportunity for growth. Grow I did, leading a few design studios with my team in the process. Through this brainstorming method, we conceptualized a collection of screens for the new Spotify video user flow.
Next stop: Iteration Station
After initial interviews, our team was determined to keep premium user satisfaction a priority. Equipped with my team's collective brainpower and sketches, I set out to build our prototypes. Below are a series of screens broken down by fidelity progression. I chose to highlight these screens in particular as they were pertinent to the video user flow.
Using Spotify’s branding guide and plenty of YouTube videos (shoutout out to Pierluigi Giglio’s gradient Sketch tutorial) I designed the prototypes to look similar to Spotify’s existing interface.
Mid-fi usability testing revealed a general dislike around the “TV” label in the navigation, while some users completely ignored this new feature.
Our goal was to integrate the video feature with little interruption for the user. We assumed the TV icon in the bottom navigation would signify the addition of video streaming to the app, however, most users bypassed the feature completely, opting to search for an artist instead.
The artist video screen was designed to work in tandem with the artist’s existing Spotify music page. In this case, the user can toggle between music and video content by Erykah Badu. Users easily noticed the new video navigation next to music on the artist page and found videos without frustration.
Users expressed wanting more familiarity around verbiage and signifiers.
When designing the live chat screen, we wanted to include familiar social and Spotify signifies. If we were to make additional iterations of this screen, having a better understanding of where to place the “like” functionality would potentially increase social interactivity.
Users understood this as a livestream video interface and recognized the social features.
Notifying Users of The New Video Feature
Because Spotify has an already-established brand and voice, we needed to remain consistent with both throughout the design process. I found it interesting that most users did not interact with the new video feature the way we assumed they would.
Home Screen Iteration One
We noticed a lack of user awareness around the feature during usability testing. I assumed users would seamlessly navigate to the video icon in the menu, but five out of six users completely bypassed the feature.
Home Screen Iteration Two
I added the green text bubble directly over the highlighted video icon to draw attention. The premium content and discoverability Spotify users expect exists in the new video feature.
The green text bubble proved effective in bringing awareness to the feature, but the overall design appeared off-brand. Using the word "curated" suggests the artists, rather than Spotify, crafted the video playlists. This could cause confusion for the user.
Home Screen Iteration Three
I designed the third screen to better align with Spotify's voice and brand. I also incorporated a hero line, a common occurrence in Spotify branding, and removed the word “curated” to avoid confusion.
Design Opportunities/What We Learned
• Users need a clear distinction between present livestreams, previously-aired livestreams, and on-demand video content
• Incorporating Spotify green to indicate when saved videos are no longer live could potentially solve confusion around videos on-demand vs livestream videos
• Users resonated well with the live chat and would like to see additional features incorporated
Let Me Know Your Thoughts, Spotify Users!
Of course I want to keep this conversation going. I’d love to hear your thoughts Head to my contact page and let’s connect!