Add a feature: Spotify

The objective of this project was to identify a problem based on an existing digital product and design a feature that addresses this problem.

I chose Spotify since it is the app I use the most. I decided to improve the functionality of the live events section that Spotify has by giving it more visibility, creating alerts to keep you updated on concerts in your city, and allowing users to purchase tickets directly from the app, as well as access their tickets.

Duration
3 semanas
Tools
  • Figma
Role
Diseñadora UX/UI
Year

2022

A bit of context

Leading platform for music and podcast streaming.

Spotify is a leading platform for music and podcast streaming with over 460 million users, of which 188 million are Premium subscribers. The company was not profitable until 2019, when it began to generate profits thanks to podcasts, which allow it to save on royalties.

The company derives 90% of its revenue from Premium user subscriptions and the remaining 10% from advertising. Artists are paid by Spotify based on the number of streams of their songs on the platform.

Problem statement

How could we solve the problem of…

users not being up to date on whether the bands they listen to are coming to their city for a concert? The lack of visibility and awareness regarding the live events section that exists in Spotify?

Process

Considering the resources I had and the lack of time, following a lean methodology, I decided to research the competition, investigate ticket sales and resale websites, read articles that provided key data, conduct surveys to obtain quantitative data, and ask a few open-ended questions that allowed me to gather qualitative responses for deeper insights. I also empathized with the user by creating a User Persona, User Journey, and Empathy Map.

DISCOVER

Desk Research
Surveys

DEFINE

Insights

User Persona

User Journey

Empathy map

IDEATE

MoSCoW
User Flow
Crazy 8

PROTOTYPE

Low-Fi
Mid-Fi
Hi-Fi

Key discoveries.

The key to my value proposition.

Use Spotify on mobile.

Finds out about concerts outside of Spotify.

Useful or very useful: concert recommendations for their city on Spotify and the ability to purchase tickets directly from the app.

1

There is no major reference for finding out about concerts.

Most people use social media (84%), word of mouth (69%), or simply don't find out (20%). (Surveys, 50 responses)
2

Need for a reference for consulting and purchasing events.

84% of respondents said that there is a need for an easy way to check the concerts happening in their city.
(Encuestas, 50 respuestas)
3

Low trust in resale websites.

The markups and the lack of trust due to the absence of verification for genuine tickets. (Surveys, 50 responses)
4

Most users use Spotify on mobile.

Used on public transportation, in the car, or at work. (Surveys, 50 responses)
5

The live events section of Spotify is not being used.

It’s not intuitive; they either can’t find it or don’t even remember that it exists. (Surveys, 50 responses + User Journey)
6

Abandonment rates of the process range from 55% to 80%.

Unspecified management fees, the need to register, length of the purchasing process... (Article published in La Vanguardia)

Definition

What does Clara need?

After an initial investigation, where I synthesized the information obtained in search of problems and opportunities and validated my hypothesis, I created a User Persona, a User Journey, and an Empathy Map that will help me focus on addressing the friction points and frustrations with features that solve these problems.

Ideation

Problems & oportunities

Prioritization of features.

Feature creep

For the prioritization of features, I used the MoSCoW method to define and manage the requirements and tasks with the goal of achieving an MVP.

I considered business value, user utility, and development cost.

Value propposal

Transform Spotify into the go-to platform for concert recommendations and ticket purchases, leveraging the existing algorithm within the app.

What does Clara need?

What features do we need to address their problems?

MVP

For now, since most users use Spotify on mobile, we will implement it in the app, and when we test the product, if it works, we will implement it in the desktop version.

Increased visibility of events.

An enhancement of the events section functionality, with access from the home page and various points, providing more value and visibility, making Spotify the go-to app for users to find out about music events in their city.

Buy tickets from Spotify

With the linked Spotify card, so that users don’t have to leave the app or enter too much information to purchase tickets.

Tickets notifications

Notifications for when tickets go on sale for concerts you might like: by enabling alerts within the events section or while listening to a band that is coming.

Information architecture

One of the major problems that emerged from the surveys is that users are unaware of the concert section or do not use it because it is difficult to access. In the site map, I emphasized making this section more visible by creating access from the home page, in addition to the existing access from the search bar.

First, we created low-fidelity wireframes on paper, focusing heavily on the purchasing process, as I wasn’t very clear on what to include and how to approach it. I had to conduct in-depth research on how Spotify works and on apps with similar functionalities like Dice.

I also placed special importance on the ticket purchasing process and the visualization of these tickets.

Wireframes lo-fi

User testing

I transitioned the wireframes to digital format and conducted 3 user tests to evaluate the usability of the new functionality. After the user tests, I had to iterate on several parts of the features. Although users were able to complete the requested tasks without issues, they did suggest improvements, which I implemented.

Design & prototype

Diseñando una buena experiencia

The challenge in the design phase was to accurately replicate the existing design in Spotify, including typography, grid system, icons, buttons, colors, design patterns, and how images are used. I conducted a small UI audit and created a component-based design system to provide coherence and uniformity to the interface

Prototype

FLOW 1

Buy tickets

Clara enjoys concerts a lot, but she often misses opportunities due to a lack of information about upcoming shows. Spotify allows her to customize recommendations and receive notifications about upcoming concerts, enabling her to enjoy live music without worrying about missing out.

  1. From the home page, she sees the upcoming concerts in her city.
  2. She navigates to the concerts page to view all events.
  3. She clicks on one of the concerts.
  4. She clicks on ‘buy tickets.’
  5. She selects the number of tickets she wants.
  6. She proceeds to the payment gateway and completes the payment.
  7. She finishes the purchase process and views the summary of her order.
  8. She accesses her tickets
FLOW 2

Ticket availability notification.

Clara has found it very useful to activate notifications in Spotify to alert her when concert tickets are available. This way, she can be sure not to miss the opportunity to see her favorite artists live and enjoy their music in person.

  1. She visits the concert page to buy tickets, but they are not available yet.
  2. She activates notifications to be informed when tickets for the concert are released.
  3. When they go on sale, she receives the notification.
  4. She logs in to purchase the tickets.
FLOW 3

View my tickets.

Spotify offers the ability to view and manage purchased tickets in a simple and convenient manner. To access this information, Clara can click on the ‘Tickets’ link found in the ‘For You’ section on the main page or in the ‘Your Library’ tab of the main menu. This way, she can see all her tickets and get detailed information about each concert, as well as manage them if necessary.

  1. She opens Spotify.
  2. She accesses the ‘Your Library’ tab.
  3. She enters her tickets.
  4. She selects the Bonobo concert.
  5. She views the details of her tickets.

Next steps

  • A closed loop for ticket resale within Spotify to prevent illegal ticket resale.
  • Recommendations while you’re listening to a band.
  • Improve flows and iterate based on user tests.
  • Implement it on the web if it works.
  • Filters to recommend concerts in multiple cities.

Conclusions and learnings

Adding a new UX/UI feature to an existing application can be a challenge, especially when working individually. It is essential to keep in mind that, starting from an application with an established design and design patterns, it is necessary to ensure that the new functionality integrates coherently and naturally into the application. This can help avoid user confusion or frustration and enhance the overall experience of the application.

Other aspects to consider when adding a new feature include understanding the current context and usability of the application, designing for a wide variety of devices, and considering the impact on the application’s performance and scalability. It is also important to manage the change and adoption by users, whether through documentation and staff training or by clearly and effectively communicating the benefits of the new functionality to users.

Thank you for reading this far. If you have any comments or suggestions, please feel free to contact me!