Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

UI

User tests

Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

UI

User tests

Spotify

Implementing a concerts tickets feature to the Spotify app.

Mobile

B2C

UI

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.

1.

Ideation

Generating many ideas and choosing the best ones.

2.

Benchmark

Getting inspired by competing and related services.

3.

Prototyping

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

4.

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.

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

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

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.

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

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.).

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

  1. Finding concert events

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

  1. Purchase funnel

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

  1. Finding their tickets later-on

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

  1. 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

โ›” What didn't work

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

ยฉ Victor Cartier 2023.

ยฉ Victor Cartier 2023.

ยฉ Victor Cartier 2023.