Mark Singer
UX Designer

UX Challenge: Concerts on Spotify Live

A Companion App for Spotify Mobile

Image alt tag
Livestream With Spotify

Roles & Responsibilities

Mark Singer, UX Designer | Research, Iteration and Prototyping

Nicole Kaiser, UX Designer | Project Mangement, Iteration, Prototyping

Jack Rosenberg, UX Designer | Iteration, Research, Prototyping

Livestream With Spotify

Users and Audience

Music aficionados and casual video watchers.

Livestream With Spotify

Scope & Constraints

We were focused on adding a live streaming feature to Spotify, within the time constraints of a two-week sprint.

Livestream With Spotify
Livestream With Spotify

Empty Streets of Manhattan, NY During Coronavirus Pandemic

Photo by Harry Gillen on Unsplash

The Era of Social Distancing Defines Our Research

The Covid-19 pandemic changed the world as we knew it. Cities became desolate and empty. Once bustling blocks in Manhattan were left spare. All planned events were cancelled and people couldn't see each other or socialize like we did before. People who would go out to see their favorite bands play at music festivals were left without an outlet.

Livestream With Spotify

The Problem: Concert-Goers Feel Socially Isolated From The Pandemic

Concert-goers are feeling socially isolated due to the pandemic and miss live music, meeting up with friends and meeting new ones. They need a way to simulate this experience within the constraints of social distancing. Spotify has the capability for live streaming services and wants to add this feature to their suite of offerings.

Livestream With Spotify
Usability Tests
Livestream With Spotify

Photo by Chris Montgomery on Unsplash (edited for color)

Our Research Shows People Want Live Streaming

People are interested in live-streaming, and need ways to connect with people in a safe way, given social distancing. Take a look at the meteoritic rise of Zoom at the start of the COVID-19 pandemic, as an example of this. People want livestreams to feel like an in person hang out.

My team conducted user research, business analysis, and competitive and comparative analysis (C&C Analysis) to understand market trends.

Livestream With Spotify

Twitch on Phone

Photo by Caspar Camille Rubin on Unsplash

One Company Defines a Trend

We discovered that the company Twitch has the biggest presence in the live streaming space. Currently Twitch has 140 Million unique users each month, which is up from 55 Million in 2015. Twitch has an annual revenue of 1.52 Billion. Live streaming is a rapidly growing area and Spotify would be remiss to not take part int his trend. No direct competitors offer live-streaming service.

Livestream With Spotify

Exploring a Task Helps Us Think Like a User

We started with a task analysis, user flow and system flow to understand the how the user would move through the app and give us a template to wireframe from. Doing this made our ideas more concrete and easier to follow in the prototyping stage, saving us time and resources. This infographic shows a high-level of tasks we looked at.

Livestream With Spotify

Task Analysis / User Flow

Livestream With Spotify

A Persona Synthesizes Our Research

Meet our user persona, Rochelle D'Antonio. Rochelle is the product of the user research, and desk research we completed. We created this persona to help guide design decisions and keep our team focused on who we were designing for.

Livestream With Spotify

Persona born out of user research

Livestream With Spotify

A sketch from an early round of Crazy-8's

Brainstorming Ideas Helps Us Ideate

Early Sketches

Our team started by doing multiple rounds of Crazy-8 sketching and debriefing, which brought up questions about going for a mobile app verses desktop app. Additional research showed that mobile was used most often by live stream watchers, with 70% of YouTube views coming from mobile. The last data from Twitch showed an increasing 30% of its users on mobile in 2014, which informed our decision to move forward with mobile.

I explored ideas around companion apps, which became the main idea in later iterations. In one of my sketches, I utilized the worst possible idea exercise, which helped me become aware of pitfalls to avoid, and it was a turning point in my thinking. I really wanted to design a viewing room of sorts, where multiple watchers could watch the same video together, and chat. While it didn't manifest as I envisioned at this point, we did end up with a chat room that served the purpose well.

Livestream With Spotify

Crazy-8 Sketches and an Evolution of Thought

Livestream With Spotify

Content Placement Plan

A Content First Strategy Prepares Us For Prototyping

Building on our experience with the user flow and sketching, we identified necessary screens using a Content Placement Plan. For each screen, we asked ourselves:

What features should this screen have?

What information should be included?

Thinking about content first helped our team transition from ideation to prototyping quickly and effectively. Team members were aligned with our goals for the product. Once our strategy was complete we were clear about the prototype we were about to build.

Livestream With Spotify

Mid-Fidelity Prototype: Testers Uncover Mental Models

In our mid-fidelity prototype, we first tried using profile thumbnails as a way to show friends that are online and watching a livestream, however we ran into complications. Testers noted that the profile thumbnails didn't take them to where they expected. Their expectations were that their friends were live streaming, not that they were being taken to what their friends were watching. Also, testers found the favorites tab on the navigation bar unclear. The testers were drawing from mental models they constructed from their experience with Instagram, which is something we needed to consider in the next iteration.

Livestream With Spotify

Usability Testing Shows Us How To Better Serve Our Users

Here are some takeaways we noted:

  • Profile thumbnails didn't take them where they expected

  • Favorite tabs on navigation bar was unclear to users

  • Users completely ignored reply button

  • Mixed results about on online status 

  • Home page and profile page changes were successful

  • People were not reading the headlines/category headers consistently

  • Click error on user name in comment section

Livestream With Spotify

Final Prototype Is Engaging For The Users

We iterated on our findings from mid-fidelity prototyping by applying what we learned in our usability testing findings, which resulted in a beautiful Hi-Fidelity Prototype. Adding color, images, and copywriting (concise, and personal) created an intuitive, and engaging user experience.

Livestream With Spotify

What We Got Right: Understanding Our User's Mental Models

We took what we learned in the last round of testing and addressed the profile thumbnail issue by including it with each video that was being watched. This turned out to be effective, because testers quickly understood that the thumbnails they were seeing were friends that were watching a particular video.

Livestream With Spotify
Livestream With Spotify

Outcomes That Complete The Experience

My team recommends the following next steps, for further iterations of this project:

  • Link to existing pages, Spotify artist pages, songs, etc. or quick add to library

  • Search page and categories

  • Open chat vs friends chat, friends and friends of friends

  • Potential rebranding/different use of colors

  • Building clip/non live video pages

  • Video pop out layover (like Twitch and YouTube)

  • "Now playing," linking to actual Spotify track

  • Friend badges - show who's a direct friend, 2nd connection, artist, etc.