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

As we prepare to launch 2020 Wrapped, we remind ourselves of the challenges we took on and lessons learned to make this year’s experience even better for audio fans, like you, around the world.

The 2019 Wrapped campaign was a first on many fronts. It was the first Wrapped experience to exist in-app, give our listeners a look back on the past 10 years of music and culture, and the first to shine a light on how our artists and podcasters connected with their listeners over the past 10 years. 

Along with processing a decade’s worth of data for over 240 million active users (you can read more from our data team here), we wanted to take on the challenge of transitioning the Wrapped experience from web-only to in-app. To accomplish this, multiple sub-teams were responsible for a range of functions, including marketing, legal, design, data, and frontend and backend engineering. This undertaking was a company-wide effort and one that was met with both successes and learning experiences.

Setting the stage

We have a number of learnings that we can carry forward like what worked well and what could have been improved — we wanted to share some of those highlights.

The product team is modeled like a startup, which proved beneficial during development; lean, resilient, innovative, risk-taking, and using mistakes as learning opportunities. The goal was to create an engaging, shareable experience for users, and the developer team needed to strike a balance between the product team’s aspirations, minimizing risks, and managing dependencies for execution. It required creativity and flexibility in problem-solving.

Empower the team through clear goals and step aside

The team, composed of different disciplines including Insights, Design, Product and Tech, gathered to define their respective priorities and KPIs. This was very useful for onboarding engineers on to the project, motivating and empowering them to make decisions, and prioritizing, first and foremost, the work. A question like, “Should I fix a bug for sharing or for the stories experience?” was easily answered without bottlenecks.

To give users the best native experience possible, the experience needed to be:

• Simple and intuitive
• Easy to share
• A part of the Spotify experience in look, feel, and function

To determine if these qualifications were met, clear and quantifiable objectives were essential to empowering the engineering team.

A Lean approach

With input from the project stakeholders, a reverse timeline of essential events with key dates and milestones was established, including the go-live date, when the code should be frozen, the date when the Release Candidate would be submitted to the Apple/Google Store, the point at which real data from users/employees would be received, and when to start coding.

To simplify communication and organization, milestones were set for Fridays. It eased decisions around dates, and brought consistency and accountability to set commitments.

To develop a product by the release date, we followed a lean approach to manage the development process. We took an incremental approach to product development and broke down the product vision into the bare bones of an MVP (minimum viable product) — Version 0.1; a stories container with audio and static stories…no animations whatsoever. From there, we began adding features based on the team’s goals for future versions, and delivered version 0.2 to market.

How we built it

The team began as a small group of iOS, Android, and backend engineers working to create a native experience on iOS and Android. It was soon realized that the cost and effort needed to develop the personalized, shareable card for each story and user was underestimated — the decision to either re-scope the functionality or find another solution had to be made quickly.

The initial system design looked liked this:

The engineering team drafted a proposal and built a proof of concept of a backend service that could render those images, in real time, incorporating CEF (a C++ library),  using HTML templates and CSS 3.1. The solution was clear, and the question soon became, “how do we staff a team with back-end and web engineers to be flexible with rigid time constraints?” 

It’s never too early to get started

We were building a product for the largest marketing initiative of the year. Though we began work earlier than previous years, there were still challenges that made this an intense ride.

For a global marketing campaign, localization is an essential consideration.  For example, in Japanese, line breaks can change the meaning of a sentence and break a message. And for the first time, right-to-left languages were supported. It wasn’t necessarily groundbreaking, but with the addition of animations like the genre bars or a spinning globe…?.

Numerous corner cases were found along the way simply due to the sheer magnitude of data processed, like what do we do if a user has only listened to podcasts? Or what if they only listened to a handful of podcasts? What if a user only listened to a single genre, or listened to music from one country? These were just a few of the cases we came across. There were many, many more.

The team needed to be resilient and so did our systems. We handled translations from the backend to have certain flexibility to deal with last minute translation issues. Like 1 hour before going live when a Japanese string was causing the iOS experience to crash for certain users.

The Results

The final system ended up looking like this:

Three days before going live, while doing load testing we realized we needed to scale up traffic estimations. We fine-tuned the GKE configuration, added an additional caching layer for the payload of our downstream dependencies, and removed a race condition in the Image Generator component. And as an additional precaution, we ran a data job to pre-generate some images for the initial peak of traffic — a 42-hour job generating around 535 million images completed 2 hours before going live.

We were happy to say that the 2019 Wrapped campaign was well received and building the native experience was worth the effort and stress to excite/delight audio fans all around the globe. 

The fellowship of Wrapped

We’d like to thank the Edison Tribe under the Growth Opportunities Mission, Marketing, Brand + Creative, and all those who contributed to making this project successful. We couldn’t have done it without you. 2020 Wrapped is coming soon, so stay tuned and keep listening!

Tags: Data