Discover new music in the Starbucks app, then take the music with you on Spotify

In partnership with our friends at Spotify, I’m very happy to detail the design process for our new music experience in the Starbucks app. Together, we’ve created a great way for our customers to see what’s playing in our stores, and save songs they enjoy to their own playlist in Spotify. Our customers can also let us know what songs they love, so we can tailor what’s played in stores.

Our History with Music

It’s clear that streaming has become the most convenient way to access music. Spotify has championed this model, becoming the world’s most popular music streaming service.

Designing a Music Ecosystem

We want to create an innovative experience with a beautiful story to let Starbucks connect people through music, both in and out of our stores.

Exactly how did we do that? First, we needed to define the ecosystem where this new experience would take place. We identified four specific environments we’d need to consider:

In a Starbucks store — Experience the Music

Partner App — Control the Music

Starbucks App — Discover the Music

Spotify App — Take the Music with You

Research

What’s our customer’s daily routine? What are they feeling, hearing, and seeing? How can we enhance that experience?

We did the same research for our partners, too, though we knew their needs would be different:

What kind of music do our partners like, and when? What do they need, and how can we make their experience enjoyable?

Design Session at Spotify in New York City

Key Findings & Challenges

  • Customers found music to be in the background and therefore very difficult to hear, especially when the store is busy.
  • There is no presence of music in store beyond what comes out of the speakers. It needs to become more available for customers to engage with it.
  • Many of our customers are on their devices while in the store, often with headphones on. This presents a challenge but also an opportunity to create awareness of the new music offerings.
  • There’s no difference between stores in terms of the music that’s being played. We can evolve music branding by creating neighborhood-specific music experiences.
  • In large stores and during peak hours, the line for order/pick up is long enough that people are looking for distractions. This could be an opportunity to introduce great music.

We took what we’d learned, and started working.

Design

We kicked off our first design session with Spotify at their offices in New York City. At the table were designers from Starbucks, Spotify, and Soundtrack Your Brand. Using our research and findings, we dove in and mapped user flows, created initial sketches, and turned both into wireframes for Android and iOS.

We focused on a feature set that would give a customer the ability to see what’s now playing in a store, save a song, access store playlists, and see previously played songs. After the session with Spotify, both our teams used the remaining time in our sprint to refine and iterate our wireframes in preparation for high fidelity design.

We identified key challenges:

  • Implement an obvious, yet non-invasive entry point to the new music experience
  • Design a clear interface that showcases what’s playing in a customer’s current store
  • Enable intuitive interaction with songs
  • Create a consistent experience on both Android and iOS, while solving for platform-specific problems in a way that felt natural to each

Over the next few months, we continued to co-locate to each other’s offices –from the Starbucks HQ in Seattle to Spotify in San Francisco and New York. We created high-fidelity prototypes for customers and partners to test, and we internalized feedback to improve the experience as they went into development.

This feedback directly impacted how we refined the experience, most notably the “Save to Spotify” and “Love” buttons. In early designs, these two actions were side by side, titled “Save” and “Love”. Users found that the buttons were too similar and weren’t sure which to select. This immediately brought clarity around what should be changed. “Save” was updated to explicitly say “Save to Spotify” and was crowned as the prominent action in the Music shade, while “Love” was relocated to be a secondary action.

We arrived at a design solution both teams felt great about shipping to our customers, and worked to polish the experience in anticipation of an early-2016 launch.

Dashboard

Music Shade

Save to Spotify

Love

Tune In and Recently Played

Featured Music and Top Playlists

The Future

If you like this article, please hit the ♥ and share it with your friends.

Starbucks Product Design Team:

Caroline Maxwell, Jason Stoff , Todd Bennings ,
Glenn Newcomer , Ben Ford , David Puerto , Trevor Denton ,
Jeff Peters, Jeremy Beasley, Willy Bravenec

Special thanks to Chase Bratton (Product Designer at Starbucks),
Felice Mancino and Mira Steckel (Spotify), and Patrik Axelsson (Soundtrack Your Brand)

Head of Design, Discovery at Route, Previously Quibi, Snapchat, and Starbucks

Head of Design, Discovery at Route, Previously Quibi, Snapchat, and Starbucks