Case Study — Live stream feature for Spotify

Paula de Paco Luque
Bootcamp
Published in
9 min readJan 30, 2022

--

Spotify is the leader in streaming music providers, and as we can deduce, they want to stay in this way. For this reason, Spotify has to be continually renewed and meet the needs of users, not to fall behind the competition. They have been incorporating new and incredible features to achieve it: Blend playlists, Podcasts option, huge Discover section, accurate Personalized mode, etc.

The Challenge

Timeframe: One week

Team: Individual

Device: iOS app (mobile only)

Tools: Figma / Figjam / Miro / Trello / Google Forms / Maze

Deliverables: High-Fi prototype

For this case study of the projects done on the UX/UI Design Bootcamp in Ironhack, we had to design a feature of a popular app, and as you may have already deduced, Spotify is the chosen one.

More precisely, I wanted to improve the retention of their app by expanding its features to the current trends: live-streaming mode. For this reason, the goal for this initiative is to determine the best way to move forward in that direction and to provide a prototype of the feature that Spotify could be integrated seamlessly within the app.

UX Strategy Blueprint

UX Strategy

At first glance, incorporating a live stream feature on Spotify seems very easy, but the moment you have to decide what you are going to ask the users, the issue starts to get complicated: which characteristics must have this feature? what are the needs and preferences of the users? And also we have to consider the Design Principles of Spotify that are: be Relevant, Human and Unified.

So, as we can see on the UX Strategy Blueprint, the answer to those questions are then transformed into challenges: create public and private non-video live events on Spotify and, doing it, not saturate users with a lot of information.

Research

Business Analysis

To understand better the characteristics, goals, history and functions of Spotify, I started analysing the target market. I spent a few hours understanding the Design Principles of Spotify, its current features, and its position on the market. As a result, I did a SWOT incorporating the weakness of not having a live streaming option and that, therefore, the main opportunity is to include this feature.

SWOT analysis

And also, I spent some time getting a sense of Spotify’s place within the landscape of the streaming music market but also the current trend consuming live streaming on other platforms. Doing this competitive analysis, I identified some key challenges and main opportunities to start with, describing initial assumptions and thinking about the questions that I will do to the users on the survey and interviews.

Market positioning and Competitor features analysis

User research analysis

However, of course, this was not enough. It is necessary to analyze what users think, want, need and prefer regarding Spotify and live stream events. For this reason, after conducting a survey, four interviews and obtaining certain results, I discovered by doing the affinity map that:

  • 90% of respondents have a habit to see live streams with video, and more specifically, music and interviews live streams.
  • People would like to have access to chat on the specific live stream event.
  • The respondents considered that it would be more logical to have non-video live streams because of how Spotify works nowadays.
  • They wouldn’t prefer an appearance similar to Instagram because they relate the live streams on Instagram to informal and short content.
  • Users and clients (clients are defined as persons who publish live content) would like to public but also to private live streams.

So, How might we help users, clients and Spotify?

How might we incorporate live streaming without breaking with business and maintaining the harmony of Spotify?

User Persona and Journey Map

Based on all these insights and needs discovered through the primary research synthesis, I defined the User Persona of this project: Alex from Florida who is 27 years and works as a psychologist on a clinic specialized in the treatment of addictions in Miami. His goals are to follow live stream interviews of important nutritionists and psychologists, find songs, artists and also share content with friends.

User Persona

And for this reason, his Journey Map is focused on the frustration at the impossibility of being able to watch streaming events on Spotify:

Alex opens Spotify and is listening to music. Spotify shows him that there is a new song from his favourite artist and Alex decides to do some research on Google. When he searches on Google, he finds that there is a live stream explaining and playing this new song on another platform and Alex decides to close Spotify and attend to this live event on the other app.

User Journey Map

Define

Problem and Hypothesis Statement

As we have seen from the above findings, there are two major areas of study focus with their own special characteristics within this project:

  • On the one hand, users love to listen to the public and private content of their favourite artists and influencers on a wide variety of platforms. At the same time, these artists and influencers are using platforms with live streams to promote their work. Both of them would like to be these live events on Spotify.
  • On the other hand, Spotify is a company with a strong brand reputation that has an advantage and significant lead over its competitors. Their Design Principles are Relevant, Human and Unified. For this reason, they cannot develop a live stream feature with a video that brokes with the harmony of the app.

How might we help to improve the Spotify existing app by incorporating public, private and non-video live streaming features?

Different goals make different problem statements

Incorporating a live stream feature for Spotify will achieve the decline of users who leave the app to attend these events on other platforms and the increase of users who don’t currently use the app. And, of course, we will know we will be right or wrong with the feedback after testing the prototype

Sitemap, User Flow and Moscow Method

Before start to ideate, informed by the features and priorities of Spotify, I created their Sitemap including how the new feature would integrate within the existing architecture of the app:

Spotify Sitemap with Live Stream feature

With the sitemap established, I created the basic user flow that identified a key task that all users could complete in an identical way if Spotify includes the Live Stream feature:

User Flow with Live Stream feature

Keeping all this information in mind, I needed to determine the characteristics and features that Spotify must have in this project to design the prototypes. To establish it, I did a Moscow Method to prioritize all these features:

Moscow Method

Doing this process helped me make sure I’d included all necessary keyframes I’d need as I created wireframes for my prototype.

Ideate

Low-Fi wireframes

With the structure organized and the features clearly defined, I moved towards prototyping. I created low-fi wireframe sketches respecting the user flow that I’d mapped before. These sketches helped me think through the integration of the new feature before starting with the mid-fi and the high-fi wireframes. I did a first Low-fi with 7 sketches but I decided to include another screen with the chat details:

Lof-fi with Live Stream feature

Mid-fi prototype

And then, keeping everything organized and visualized I created the Medium-Fidelity prototype. The goal was to develop this prototype allows me to understand better the structure of all the elements and features before creating a High fidelity prototype.

Mid-Fi Live Stream feature

High-fi prototype

After testing the Mid-fi in Maze and receiving some feedback, I decided to include some changes:

  1. Make bigger the Music, Live Streams and Podcasts buttons on the top.
  2. Included the Button “Play/Pause” on the Live screen event: users expressed it was a bit ambiguous as to whether or not the live stream was playing or not.

As a result, I created this High-Fidelity prototype. The goal was to develop a prototype that would allow me to test user interactions with the new feature in a context as authentic as possible to the real experience of the app:

High-Fidelity prototypes on Figma

And, for understanding and ease of flowing, you can check the Figma version is accessible here.

Again, using Maze with four different tasks, and a face-to-face test with five participants, I received some feedback that helps me to clearly visualize the improvements in this designed feature:

  1. Delete the live stream from the library
  2. Delete the three dots of the menu on the live stream
  3. The timmer bar is ambiguous, it would have to show the time of the event without the bar
  4. Put the live stream on the top of the results on the Search screen
  5. Put the live stream at the beginning of the artist’s screen

Next steps

  • Create a general page for Music and Podcasts
  • Private live streams option
  • Create the user for computer and tablet devices
  • Testing on a larger scale of users and getting feedback

What I learned

Naturally, we tend to look for solutions to problems from minute 0, believing that our point of view or vision of the world is universal. As a UX Designer you have to restructure your mind: don’t focus on the solution at the beginning of the process, focus on the problems, and therefore, on the users. Throughout this process, I have realized that coming up with and imagining possible solutions is a huge block that really didn’t need to be there in the first place.

There was a moment at the beginning of the project when I felt lost (well, being realistic, over the course of the project it happened a couple more times): I had a lot of questions: who really uses Spotify? how do people attend live events? do they really attend live events? what features should this feature have? should I include video in live events?

But I realized that these doubts could not stay with me. I definitely had to ask questions to the users. Asking questions helped me deliver a product that considered all users and their unique set of needs and ultimately gave the end-user complete control over how they use the app to accomplish their goals.

But, in the end, I enjoyed this project and also I learned a lot of good practices to use Figma and to do a Hig-fi prototype. This project was challenging for me because it was difficult to add a feature to an existing product since it is essential to follow the company’s design principles and also to take into account all the needs and preferences of Spotify’s users and customers.

Thank you for reading!

--

--

UX/UI Designer | | Figma | HTML | CSS | Psychologist | Criminologist | Spain Based 📍