COCA-COLA PLACELIST SPOTIFY APP

BRAND

COCA-COLA PLACELIST SPOTIFY APP

BRAND

/CASE STUDIES

NEGOTIATING DESIGN BETWEEN FACEBOOK, SPOTIFY, COCA-COLA, AND LBI

Coca-Cola formed a partnership with Spotify to design a social jukebox app. Coke asked, what would the playlist of a place sound like? The result was Placelists. This is the story of how the process and negotiation went down between four major companies with divergent interests, and how they finally aligned to successfully launch.

OVERVIEW

Hell Week

The title for this case Hell Week at FB HQ is an homage to Navy Seals pass/fail test for BUDS training called Hell Week.

  • Seals who have completed Hell Week note that the experience is probably the most intense psychological, emotional, and physical test they have ever completed.

  • My Coca-Cola tour of duty through Facebook HQ, was equally as intense on all fronts.

  • I cut my teeth for LBi with Americans Elect, and was invited back to shepherd this project given the inherent complexity.

Coke Placelist: What’s It For?

Sketch outlining the ecosystem for Coke Placelists: combining the people, places, and music you love.
Image of three resonant waves.
Placelists were social by design. The app has three main tabs. Me: which was a history of your Placelists. Friends: which showed your friend’s Placelist activity. And Explore: a new discovery feature to find new music.

In 2012, Coca-Cola developed the idea of a social jukebox called a ‘Placelist’. Think of it as a music playlist tied to a place.

  • Placelists originated from a hackathon that Spotify and Coca-Cola ran. Out of that event, a proof of concept was born.

  • Every place would have a playlist streaming live on the internet, where users could add tracks and vote up or down their favorite music.

  • The idea was to generate a new mechanism for social music discovery based on the places you frequent, and the music your friends listened to.

  • This had to work in mobile native (ios and android), mobile web, and in a Spotify desktop player.

  • No one at that time had made so many parallel app combinations with a Spotify desktop player at the same time.

Image of sketchbook and patches.
Notes from the initial Coke Placelist kickoff stating Coke’s business objectives.

Coca-Cola set a goal in 2010 to double their revenue by 2020. They decided leveraging Coke Red to recruit teens was the way to do it.

  • Coke also knew building something from scratch was difficult, so they sought out a strategic partnership (Facebook, Spotify, and LBi) to build the future instead.

  • Coca-Cola had something to talk about on even years because of their partnerships with the Olympics and World Cup.

  • In odd numbered years, Coke decided Coke Music was the way to do it.

Strange Bedfellows

In order to pull off Placelists, Coca-Cola had to enlist the help of three other partners: Facebook, Spotify, and LBi (now Digitas). Navigating and negotiating between such diverse interests would not be easy.

  • Coke was 124 years old at the time, and spent $3.42 Billion in advertising in FY2012. Coke later became a minority investor in Spotify.

  • Facebook just went public, bought Instagram for $1 Billion dollars (which seemed massive at the time), and was about to hit 1 billion MaU (monthly active users).

  • Spotify was the clear winner (over Rdio) for the recording industry ($250 million raise) in November 2013, valuing the company at $4 billion. Recording industry made 70% royalties, so they needed a way to generate more plays (discovery).

  • LBi wanted AoR (read creative purchase control for Coke’s lucrative advertising budget), and although the news was not public - were on their way for a $540 million dollar acquisition by Publicis Groups.

Negotiation Landscape

Navigating and negotiating between each of the partners was going to be a monumental feat.

  • Each company had a massive valuation or were about to experience significant liquidity events.

  • With this many partners, there were bound to be conflicting chains of command.

  • Facebook was in the process of stealth rebooting Facebook Places.

  • Foursquare had secured the dominant social check in app, and this forced Facebook to pivot into geofencing Nearby.

  • Coca-Cola Placelists was likely providing some funding for that endeavor.

THE FIRST WAVE

Facebook Foray

Whiteboarding out the initial system with Coca-Cola at LBi in New York.

At the start of the project, ambitions for Placelists were high. Initially Coke wanted to create native iOS and Android apps, a mobile web version, plus a Spotify Desktop app complete with Kiosk mode for restaurant and retail admins.

  • At this point, we hadn’t divided or settled on high level baseline requirements.

  • On top of all this, there were a lot of complex auth flows to figure out because Spotify had free and premium versions, and you had to link your Facebook account just to get started.

  • Spotify was committing some devs for a new API which wasn’t built yet, so everyone was in uncharted territory.

  • Facebook also wasn’t known to be a partner building the app with Spotify and LBi.

Image of three resonant waves.
A metaphor for the beginning of this project. Ms Packman Post-It’s on the windows looking outside at Facebook’s New York office.

We had an initial meet and greet which was set up to be exploratory with Facebook’s capabilities, and an agency catchup for LBi.

  • At this point the game changed. It was clear from discussions that not only had Facebook been discussions with Coca-Cola about partnering, but they were already way down the funnel towards closing a deal.

Facebook presenting their version of wireframes at Facebook New York.
Image of three resonant waves.
Close up of Facebook wireframes. Although excellent high level sketches, it became clear that there were now two competing versions of design.
  • In the meeting Facebook sketched out wireframes and sold the idea like the app was basically done.

  • The app Facebook proposed was optimized as Facebook places with music i.e. very Facebook heavy, with less music and adherence to Coke’s internal brand needs.

  • My sketches were focused on getting everyone organized.

  • I also had the responsibility to go through the whole internal LBi creative, then Coca-Cola approval chain of command.

Image of sketchbook and patches.
Lightning struck the Empire State Building as I was presenting at Facebook NY. The visceral crack from the lightning could be felt in your body (Source: Henrik Moltke via Youtube).
  • Interestingly enough, when we had this initial meeting there was an epic thunderstorm that struck the Empire State building - just up the street from Facebook NY.

  • For me, whenever lightning strikes, something interesting is usually about to happen.

Shipyard Introduction

Image of three resonant waves.
Slide from the Shipyard deck provided by Facebook, outlining the process and requirements to enroll.

In the meeting, Facebook introduced the idea of Facebook Shipyard.

  • The idea is you go to Palo Alto for a few weeks and build the Facebook way. Ie you “move fast and break things.”

  • Advertisers were paying a lot of money to Facebook for advertising, and this gave brands a chance to get more bespoke touch with their advertising spend.

  • The challenge with Shipyard is that Facebook was so optimized for their data and developer driven culture, that the apps they co-developed neglected to assuage the client’s creative chain of command.

  • Ie you can sketch and develop immediately at Facebook. But taking sketches through your internal brand account team for approval, no so much.

The most glaring slide in the deck. You surrender all design and development control to Facebook.

With this one meeting everything has changed. There was now no hierarchy for UX, so the mission became even more difficult to prioritize functionality.

  • The biggest red flag I noticed in the deck was requirement #2: Client is comfortable relinquishing design & development controls.”

  • FB wanted all FB heavy features, Spotify cared about gearing their nascent API towards some new music discovery mechanism, Coca-Cola was fluid realizing they opened Pandora’s box, and LBi just tried to keep up and make sure Coke was happy.

  • I spent all weekend writing a long email expressing my concerns about the misalignment of vision and value system.

  • It got to the point where I had to convert it to a diagram and distill it down. No one was going to read a massive tome.

  • As long as I raised the flag, that was all I could do. At this point, Placelists essentially became a Facebook app (coke super user, admin /kiosk mode were all effectively put on the back burner).

Image of sketchbook and patches.
Image of sketchbook and patches.
Sketch of the diagram outlining the misalignment of vision and value system between all the different partners.

Atlanta JAR Session

After my email, it was clear that something needed to be done in order to get everyone on the same page.

  • LBi used a day-long Joint Application Requirements (JAR) session with another Coke project and that yielded a lot of success.

  • We decided to send half the team to Coke headquarters in Atlanta, and the other half would videoconference in from Facebook in New York.

JAR Session photo in Atlanta. You can’t see but there were about 20 people behind the camera. Lots of tension, and lots of progress.
  • With a set requirement preliminarily agreed to, I met up with a small creative team in New York to pull together a quick paper prototype.

  • On top of all this, I was doing early morning phone calls to Spotify developers in Sweden ahead of their closing time.

  • Europeans were in vacation territory and they took that time seriously. If I didn’t make the calls in the morning, decisions didn’t get finalized.

Social Music Discovery

The early paper prototype conceived of a way to discover new music by exploring the space around you.

  • Depending on where you walked, you could see and hear Placelists nearby that were playing music that would resonate with your preferences.

  • Echonest was a smaller partner with Coca-Cola and Spotify who were handling the music match algorithm.

The Explore Tab in the app focused on discovering new music based on your location. I.e. show me places that are playing music that I would listen to, thus bringing you to somewhere new based on music that resonated.
  • The core mechanic for music discovery was journeying to new spaces and exploring what music was playing there.

  • The idea was could you find new music based on similarities of Placelists between places?

  • Although Coke loved the idea, this would turn out to be too complex to build given the current requirements and timeline.

Image of sketchbook and patches.
Mobile user flow for discovery set by selecting a mood first, then having the app show you where to go. In this case, you start with mood first, then the app brings you to a location that would resonate.

SHIPYARD

Hell Week Begins

Image of sketchbook and patches.
The flight out to California foreshadowed my trip. I was caught in the middle of a biblical storm. Top Left: the sky above the aircraft at 2PM. Top Right: my crammed middle seat. Bottom: The radar of the storm overhead.

My flight out to California was greeted with another intense thunderstorm.

  • We boarded two times after waiting on the tarmac for 2.5 hours twice (totaling 5 hours on the tarmac). I had a middle seat in the economy coach and by the time we landed in California, it was almost 4AM EST.

  • To top things off, my luggage got crushed. It looked like an elephant sat on my bag. My shampoo, toothpaste, and everything liquid exploded.

  • It didn’t matter though, because I had to be up in a few hours (6AM PST) to catch the van with the dev team and head out to Facebook HQ.

Image of three resonant waves.
The last slide in the Shipyard deck marked the beginning of my odyssey to Facebook HQ.
Image of three resonant waves.
Luckily I was an experienced pirate.

Move Fast & Break Things

The daily pace was intense. Each morning I would get up at 6AM and get ready for a 7AM PST call (California time) and talk through the progress and wireframes with the New York Creative team (10AM EST their time).

Image of three resonant waves.
Catching the van with the dev team at 8AM, then driving an hour out to Palo Alto.
  • At 8AM EST I would head downstairs and meet the LBi developer team to drive an hour out to Palo Alto.

Arriving at Facebook HQ each morning by 9AM.
  • We would work war room style from 9AM until about 7 or 8PM.

Image of three resonant waves.
Daily ad-hoc war room work groups. Meetings would jump from figuring out technical requirements to sketching out interface components.
  • We drove back to the hotel and I would eat something real fast, then digitally annotate the wireframes and make sure they were received in New York before the next morning’s call.

Image of sketchbook and patches.
Image of sketchbook and patches.
Sketches would evolve every day. Left: sketch outlining your Placelist history. Right: sketch with annotations and updates for the design team in New York.
  • There wasn’t any time to create digital wireframes given how fast things were evolving and changing in California - this was the point.

  • However, turning analog wires into digital comps ended up being super difficult for the design team, because the creatives needed to go through a whole ton of internal approvals at LBi, and with Coke global heads (who didn’t want to see sketches).

Image of three resonant waves.
Feedback and design comps came back from New York the following morning. Updates were added to the war room wall in Palo Alto. Interaction and edge cases that design caught were identified and resolved the same day.
  • As design comps began to come back, we hung them up in California and continued to iterate and update and flesh out all the interaction details.

  • The pace was so intense that by Friday, I slept through three alarms: my phone, a physical alarm clock, and the hotel call.

  • Luckily I had everything packaged and annotated for everyone to continue forward in the off chance that I missed the call.

Viral Loops

One thing that really stood out to me to this day was Facebook’s core recommendation engine. Something they call Viral Loops.

Image of sketchbook and patches.
Notes from a Viral Loops workshop outlining how contagion and mutation work at Facebook.
  • Essentially the goal is to spread contagion throughout the network, which makes sense given that their primary business is display advertising.

  • If you remember the R-naught score mentioned in early coronavirus days, then this will make sense.

  • Facebook actively seeks to tune or mutate each cycle with the goal of making each iteration more contagious, thereby spreading to more and more people.

Planning Day Paradise

Planning Day agenda and strategy session with Coke point person.

The last part of my Shipyard journey was assisting the head Coca-Cola manager design planning day.

  • It was a sort of dog and pony show to physically demonstrate how the application worked by downloading the developer copy of the app to high ranking participants' phones and taking them through the app in real time at Facebook.

  • All the VIPs downloaded a developer copy of the app to their phones, and the agenda took them through all the functionality in real time at Facebook.

  • The process went off without a hitch which was great, given all the trepidation leading up to Shipyard.

Finishing Design

The last part of my Shipyard journey was assisting the head Coca-Cola manager design planning day.

Placelist sitemap.
Placelist detail.
  • The designs were becoming too Facebook heavy i.e. too much information, and they began to look like facebook wrapped in a music app - vs a music discovery first.

  • I was paired with an art director to bring more life to a map-based discovery feature.

Whiteboard functionality exploration for the Discovery tab.
  • The map would animate and show which Placelists were more active and interesting to you based off of your profile and location history.

Digitizing the Discovery tab exploration one step further while working with an art director in New York.
Discovery detail on Spotify Desktop.
Image of sketchbook and patches.
Digital wireframes for iOS.
Image of sketchbook and patches.
Design comps for iOS.
  • At this point my watch had ended and I was off to my next engagement.

  • Creative and development still had a long way to go, and there was not much else for me to do.

OUTCOME

Finishing Design

Image of sketchbook and patches.
Coca-Cola Placelists launched in July 2013.

Coca-Cola Placelists officially launched in July 2013 (one full year after Shipyard).

  • Remember in 2012, caching and scaling your infrastructure wasn’t some commodity DevOps thing you could spin up via AWS.

  • I know from the Americans Elect build that the current database structures were experiencing a significant transformation, but there was a lot of experimentation still being ironed out.

  • So much so that Facebook even developed their own database structure called Cassandra.

Coca-Cola Placelists promotional video demonstrating concept and functionality (Source: Youtube).

Coke Doubles

Image of sketchbook and patches.
Coca-Cola market cap 2010 - 2020 (source: TradingView).

Coke set an internal business goal to double 124 years of business in 10 years. When measuring market cap, they did it.

  • Coca-Cola also invested 10% of a $100 million round in Spotify with Goldman Sachs and Fidelity in October 2012.

Publicis Acquires LBi

Image of three resonant waves.
The last slide in the Shipyard deck marked the beginning of my odyssey to Facebook HQ.

LBi was acquired by Publicis later in the year in a $540 million cash deal and became DigitasLBi.

  • My work on Coca-Cola and Americans Elect both helped add value not only to the brand, but the final acquisition of LBi.

Spotify’s New Discovery

Spotify developed a new weekly mixtape feature called Discover Weekly.

Spotify Listen Together functionality (something we wanted to do, but the tech wasn’t there yet), works very similar to the Discovery Map in Placelists but with a 3D globe.

At the end of 2014, Spotify announced no more desktop apps, one year after Placelist was released.

  • Instead developers were encouraged to use the Spotify Web API that was developed in conjunction with the Coca-Cola and Facebook partnership.

FACEBOOK VIRUS

Global Virtual Nation State

Facebook has grown to become what is arguably the largest virtual nation state ever to exist.

  • With 1.87 billion daily active users (DaU) and 3.45 billion monthly active users (MaU), Facebook’s population is greater than that of China, India, and the United States combined.

  • This is concerning when you consider the power within Facebook’s Viral Loops engine that can shape user behavior by dialing certain content up or down.

1st Amendment Challenges

Jen Psaki (White House Press Secretary) stating that the White House is in regular touch with social media platforms, and that the federal government is flagging problematic posts for Facebook that spread disinformation (Source: Youtube).

Jen Psaki recently said that the White House flags misinformation for Facebook.

  • Regardless of whatever political affiliation you subscribe to, this has potential to be very problematic for First Amendment rights granted by the Constitution.

  • A lab leak hypothesis was once thought to be disinformation, but is now considered credible by many scientists and doctors.

President Biden has said that Facebook is killing people, in reference to spreading disinformation (Source: Youtube).

Ironically president Biden has said that Facebook was killing people by spreading misinformation.

  • When algorithms are the main driver of the logic behind the system, viral loops won’t always flag the right things.

  • For example, Facebook humorously cracked down on discussing ‘hoes’ in a gardening group.

Opaque Social Experiments

Being powered by viral loops and running a large social research department, the company wields a lot of power to manipulate a large part of the world as everyone get more and more digitized post covid.

  • Facebook runs social mood experiments and does not reveal or share results.

  • The study found that users who had fewer negative stories in their news feed were less likely to write a negative post, and vice versa.