Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

User tests

Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

User tests

Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

User tests

ROLE

Product Designer

TIMELINE

2 weeks (2023)

SCOPE

Delivery

TOOLS

Figma, Notion, Google suite

CONTEXT

Why did I choose this project?

In the context of my Product Design bootcamp with the Design Crew, I was given the opportunity to work on Spotify in collaboration with two other product designers.

Does Spotify even need an introduction?

It's one of the largest music streaming service providers, with over 489 million monthly active users, including 205 million paying subscribers. It's particularly popular among young people.

It's one of the largest music streaming service providers, with over 489 million monthly active users, including 205 million paying subscribers.

It's particularly popular among young people.

THE PROBLEM

How do you implement a concert ticket feature to the Spotify app?

Objectives:

💵

Financial

Increase revenue for Spotify, artists, concert halls & festivals.

🫶

Promotion

Promote rising artists concerts to kick-start their career, based on likes & localisation.

📍

Position

Position Spotify as a key local player within music communities.

ROADMAP

For this project, we only focused on delivery, as the problem to be tackled had been clearly identified beforehand: the sell of concerts tickets represents a clear market opportunity for Spotify.

For this project, we only focused on delivery.

The problem to be tackled had been clearly identified beforehand and concerts tickets selling represent a clear market opportunity for Spotify.

Ideation

Generating many ideas and choosing the best ones.

Benchmark

Getting inspired by competing and related services.

Prototyping

It's time for our solutions to come to life.

User tests & V2

Getting feedback from our users and fixing the issues.

About my role

'I was involved in every step of the design process, with a particular focus on UI and design system coherence.'

IDEATION

We came up with many ideas, some more realistic than others and some easier to test than others. Ultimately, we chose the ones that fit the scope of the project best.

We came up with many ideas. Some more realistic than others and some easier to test than others.

Ultimately we chose the ones that fit the scope of the project best.

Directions with animated map
Fleshed-out concerts category
Pop-up alert for new events
Concerts section on the homepage
CTA to buy tickets on concert page
Early access for super fans
Concerts venues page
Concerts tickets wallet
Push notifications for new concerts
Payment funnel

The real challenge was to decide what to keep and what to discard. Some were too difficult to test without creating bias during the tests. Others were not critical for an MVP.

The real challenge was to decide what to keep and what to discard.

Some were too difficult to test without creating bias during the tests. Others were not critical for an MVP.

🤟 What we kept

Concerts section on the homepage

Payment funnel

Detailed event page with CTA

Venues page

Concerts tickets wallet

Concerts category

🗑️ What we didn't keep

Early access for super fans

Alerts and notifications

Seeing which concerts friends are attending

Which concerts friends are attending

BENCHMARK

In order to come up with the design of our solutions, we took inspirations from the best concert tickets app out there.

Shotgun

-> Filter feature to find specific concerts

Dice

-> Modern tickets purchase experience

Fnac

-> Detailed concerts pages

PROTOTYPING

Whenever possible, we tried to work with Figma components to make the process of iterating after the user tests much easier.

An excerpt of our Design System

The design of the Spotify app is very mature. The major challenge associated with working on it was preserving the consistency of its UI.

Our V1

New ways to discover concerts

Part of the complexity involved in adding a new type of content to Spotify is that it has many entry points to discover things.

We added the ability to find concerts throughout the app to preserve consistency (home page, notifications, artist page, search, etc.).

A simple wallet for concert tickets

Whenever Spotify users buy tickets for concerts, they naturally want to have them on hand for when the date comes.

We added a tickets wallet accessible right from the home page or the library.

A streamlined payment funnel

Spotify's design is often associated with minimalism and sobriety.

We implemented a payment funnel that is as frictionless as possible, with few steps and only the important information.

Event page with a CTA and more details

The previous live events page had very little details. It's not surprising, given that people were redirected outside the app to a third party service when they clicked on 'finding tickets'.

We updated the CTA and added new information (a description, a map with the location of the venue, which friends are going, etc.).

Concerts category with more options

The previous concerts category didn't have subsections like the podcast or music ones to discover different types of events. It was a bit static and bland.

We created various subsections such as : 'For you', 'Your friends are going', 'Cool new venues', 'Around you', etc. We also implemented a dedicated filter section.

USER TESTS

To deliver a successful solution and create a great user experience, we performed a series of user tests.

Objectives

Finding concert events

Test how easy it is to find events and which entry point they favour.

Purchase funnel

Test if our purchase and payment experience is simple and quick to perform.

Finding their tickets later-on

Test how easy it is for users to find their tickets on the app after having purchased them.

Filtering concerts

Test how easy it is for them to use our concerts filter feature and if they managed to get their desired results.

Test parameters

Semi-directive interviews

30min

Via Google Meet

4 men / 1 woman

5 testers

Mostly technophiles

✅ What worked

Finding a way to access a given artist's concert information.
'I see his name [on the homepage] and I think to myself, this is going to open a page with his concerts information.'
5/5 testers
Buying concerts tickets and going to the end of the payment funnel.
'That's super simple.'
4/5 testers
Accessing the ticket wallet section.
'Having my ticket here is good, I don't want to spend a thousand years looking for it.'
4/5 testers

Finding a way to access a given artist's concert information.
'I see his name [on the homepage] and I think to myself, this is going to open a page with his concerts information.'
5/5 testers
Buying concerts tickets and going to the end of the payment funnel.
'That's super simple.'
4/5 testers
Accessing the ticket wallet section.
'Having my ticket here is good, I don't want to spend a thousand years looking for it.'
4/5 testers

⛔ What didn't work

Understanding the icon for the tickets wallet section.
'I don't know what that thing is.'
2/5 testers
Medium priority
Easy to fix
-> Improve UX writing from 'My concerts' to 'My tickets' to give more context. Add a placeholder when empty.
Using the filter feature to find a specific type of concert.
'Maybe the filter feature could be more visible, because I had not seen it.'
3/5 testers
Low priority
Easy to fix
-> Improve contrast and position of the button.
Finding the concerts / live events section on the search page
'I had a hard time finding it, I don't think I even found it."
4/5 testers
Medium priority
Easy to fix
-> Change the outlook of the card for concerts on the search page to make it more noticeable. Improve UX writting.

Understanding the icon for the tickets wallet section.
'I don't know what that thing is.'
2/5 testers
Medium priority
Easy to fix
-> Improve UX writing from 'My concerts' to 'My tickets' to give more context. Add a placeholder when empty.
Using the filter feature to find a specific type of concert.
'Maybe the filter feature could be more visible, because I had not seen it.'
3/5 testers
Low priority
Easy to fix
-> Improve contrast and position of the button.
Finding the concerts / live events section on the search page.
'I had a hard time finding it, I don't think I even found it."
4/5 testers
Medium priority
Easy to fix
-> Change the outlook of the card for concerts on the search page to make it more noticeable. Improve UX writting.

OUR V2

Time to sit back and enjoy the show.

HANDOFF

The iteration process is a major part of the job of Product Designers. It's much easier to do with an organised design file, not only for ourselves and other designers on the team, but also for developers.

The iteration process is a major part of the job of Product Designer.

That's much easier to do with an organised design file, for ourselves, potential other designers, and of course, developers.

Our figma file

NEXT STEPS

Although the tasks below exceed the scope of the original project, it would have been worthwhile to explore them given more time.

🧪

More tests

After our first series of test, we improved our solution. It would be useful to now test those iterations.

👀

Alignment

Organise a session with PMs and developers to make sure everyone is up to date regarding the project.

📦

Handoff

Double check once again that our design files are organised and documented.

Lets collab

Got a project? Lets talk

Email me

Victor Cartier

About

Works

Let's chat

Victor Cartier

About

Works

Let's chat