Spotify Unwrapped 2019: How We Built an In-App Experience Just for You

Javier Moscardó Marichalar (Mosca)
6 min readbeginner
--
View Original

Overview

The article discusses the development of Spotify's 2019 Wrapped campaign, highlighting the transition from a web-only experience to an in-app feature. It details the collaborative efforts of various teams, the challenges faced, and the innovative solutions implemented to enhance user engagement.

What You'll Learn

1

How to transition a web-based experience to an in-app feature

2

Why a lean approach is beneficial in product development

3

How to define clear goals and KPIs for engineering teams

4

When to implement load testing and scaling strategies

Prerequisites & Requirements

  • Understanding of product development processes
  • Experience in software engineering and team collaboration(optional)

Key Questions Answered

What were the main challenges in building the 2019 Wrapped campaign?
The main challenges included transitioning from a web-only experience to an in-app feature, processing a decade's worth of data for over 240 million active users, and ensuring a seamless user experience with localization for different languages. The team also faced technical challenges such as scaling traffic estimations and handling corner cases in user data.
How did the team ensure a native experience for users?
The team focused on creating a simple, intuitive, and shareable experience that aligned with the overall Spotify look and feel. They established clear objectives and KPIs to guide the engineering efforts, allowing for quick decision-making and prioritization of tasks.
What technologies were used in the development of the Wrapped campaign?
The development utilized CEF (Chromium Embedded Framework) for rendering images in real-time, along with HTML templates and CSS 3.1. This combination allowed the team to create a personalized and shareable card for each user, enhancing the overall experience.
What was the outcome of the 2019 Wrapped campaign?
The 2019 Wrapped campaign was well received, with the in-app experience successfully engaging audio fans globally. The team implemented various strategies to handle peak traffic and ensure a smooth launch, resulting in a positive user response.

Key Statistics & Figures

Active users involved in the Wrapped campaign
240 million
This number reflects the scale of data processing required for the campaign, emphasizing the complexity of the project.
Images generated for the initial peak of traffic
535 million
A data job was run to pre-generate these images, which took 42 hours to complete, ensuring readiness for the campaign launch.

Technologies & Tools

Backend
Cef
Used for rendering images in real-time within the application.
Frontend
HTML
Utilized for creating templates for the personalized user experience.
Frontend
CSS 3.1
Employed to style the HTML templates for the Wrapped campaign.

Key Actionable Insights

1
Implement a lean approach to product development by breaking down the product vision into manageable increments.
This method allows teams to focus on essential features first, ensuring that the core functionality is delivered on time while allowing for iterative improvements in future versions.
2
Establish clear goals and KPIs for your engineering teams to empower decision-making.
By defining priorities upfront, teams can work more efficiently and avoid bottlenecks, leading to quicker resolutions of issues and a more streamlined development process.
3
Conduct thorough load testing and prepare for scaling before launching a major feature.
This preparation helps identify potential bottlenecks and ensures that the system can handle user demand, reducing the risk of failures during peak usage times.

Common Pitfalls

1
Underestimating the resources needed for developing personalized features can lead to project delays.
This often occurs when teams do not fully account for the complexity of integrating multiple functionalities, which can result in rushed decisions and compromises on quality.
2
Failing to prepare for localization can cause significant issues in user experience.
Localization requires careful consideration of language nuances, and overlooking this can lead to miscommunication or errors in the application, impacting user satisfaction.