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
Starbucks’ relationship with music runs deep — we’ve sold CDs in our stores, then we embraced the downloadable music revolution. We’ve released music on our own record label, and we’ve curated playlists for our stores that have included breaking and revered artists alike. Music remains a cornerstone within the Starbucks experience, impacting our customers and Starbucks partners.
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
Early on, we agreed upon a design feature manifesto — a North Star for the entire team to strive towards while designing and building.
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
Stores are where the magic happens for hundreds of thousands of people each week, both partners and customers. The music is always there to get you started, to keep you going, to entertain you, to help you concentrate, to make you smile and sing along.
Partner App — Control the Music
The app would be designed to help control the music in store.
The UI needed to be simple and clear, with intuitive one-tap interactions to allow our partners to match the music to the mood in their Cafe.
Starbucks App — Discover the Music
Our app would provide a way to see whats playing in any given store*, a visual and personal accompaniment to the listening experience. It would also allow customers to extend and the in-store experience via Spotify, and see Starbucks’ curated artists and playlists when outside a store.
Spotify App — Take the Music with You
Spotify would extend the in-store experience, allowing customers to take their favorite in-store discoveries with them. Starbucks’ Spotify profile will offer curated playlists for every taste and context.
Once we’d established our ecosystem, we needed to dive deeper into the needs of customers and partners. We interviewed customers to help further refine the scope of what we needed to build:
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?
Key Findings & Challenges
We heard all kinds of responses. Some confirmed suspicions, and some challenged preconceived ideas around what we thought we’d be designing.
- 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.
Designing with Spotify came naturally — it wasn’t much different than working with our own team here at Starbucks, as we shared a similar approach when it came to process. As Spotify says, “Think It, Build It, Ship It, Tweak It.” With broad agreement on the features we wanted to explore, both teams began designing.
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.
Our dashboard now includes 2 points of entry into the new Music Shade.
When a customer is in store, the equalizer icon in the navigation animates and a Now Playing Spotify card displays within the feed.
The new Music Shade is where song details are surfaced (alongside beautiful album art, naturally) with the ability to Save to Spotify, Love, and Share individual songs.
Save to Spotify
Saving a song to Spotify does what it says on the tin. It’ll create a new “Saved at Starbucks” playlist on Spotify if there isn’t one there already, and it’ll add the selected song to that playlist. Easy.
Loving a song tells us you love the song, which is pretty obvious. What’s less obvious is how we’ll use that data over time to help fine-tune playlists for different stores. That’s why we tell you “Thanks for helping us choose great music!” every time you love a song.
Tune In and Recently Played
Like what you’re hearing? It comes with a playlist! The Tune In section highlights the playlist that is associated with the currently playing song. Displayed underneath Tune In are the five most recently played songs from that store. You have the ability to save, love, and share those songs too.
Featured Music and Top Playlists
The Featured Music and Top Playlists sections are where Starbucks showcases new playlists, artists, or albums. You can access this content anytime — even when you’re not in a store.
As a design team, we’re proud of how Starbucks’ apps have come to embrace the streaming music world. Of course, more customer feedback and real-world data are going to play a critical role in helping us improve a music experience that is constantly evolving and growing to best suit the needs of our customers and partners. If you have any feedback you’d like to share, please feel free to reach out!
If you like this article, please hit the ♥ and share it with your friends.
Starbucks Product Design Team: