Spotify: App-to-Browser Audiobook Purchases

I prototyped a checkout flow for Spotify's mobile audiobook offerings, strategically engineered to minimize user abandonment.
Four screens from Spotify's mobile app showing the audiobook checkout process.
Project Type
Proof of concept
Client
Independent project
Team
Solo designer
My Role
Research; UX/UI design
Duration
Q1 2023

Overview

In accordance with the company's ambition to become the "complete destination for all of people's listening needs," Spotify introduced audiobooks to its platform in late 2022. However, preliminary research revealed low user satisfaction with the new feature. I set out to uncover the root of the dissatisfaction and design a solution.

Note: Since the completion of this project, Spotify has changed the way that users purchase audiobooks, allowing up to 15 hours of free audiobook content for monthly subscribers. This case study is based on the user experience as of Q1 2023.

Problem

Spotify users encountered a dead-end screen when attempting to purchase audiobook content in-app, leading to frustration and abandonment.

Solution

A streamlined checkout process where users can discover audiobooks within the Spotify app, seamlessly transition to their mobile browsers for purchase, and effortlessly return to the app for an uninterrupted listening experience.

Contents

Research

Competitive Analysis

To better understand Spotify’s position in the audiobook market and business objectives for the new feature, I looked closely at the press releases surrounding the introduction of audiobooks to the platform and did a feature analysis of competing products to benchmark market expectations.

Insights

The audiobook competition is stiff

The audiobook market is heavily saturated with competitors—including powerhouses like Audible—that Spotify will have to contend with in order to convert customers. This meant that there was a definitive bar that Spotify would have to meet in order to compete.

Spotify’s audiobook features were sparse

Compared to its competitors, Spotify’s audiobook feature is incredibly simple, lacking basic features common among many other providers including bookmarking, personalized recommendations, and options for organizing one’s library.

User Interviews

Methodology

My user interviews took the form of four in-depth conversations with people who were avid audiobook listeners and had used a variety of audiobook providers and services including Spotify, Audible, Libro.fm, and Libby.

Objectives

My goal for these interviews was to discover:

  • What expectations do users have of their audiobook providers?
  • What features do users love (and hate) from their audiobook providers?
  • What are the pain points users frequently encounter with their audiobook providers?

Findings → analysis

"I literally felt catfished by Spotify." — Interview participant

Listening and life happen simultaneously → My design should hone in on Spotify's mobile app experience.

People overwhelmingly listen to audiobooks while doing something else, whether that be checking work emails, sitting in traffic, or walking the dog. This also means that people tend to listen to audiobooks from their mobile devices.

Users need to be able to purchase audiobooks while on the go → Spotify's current UX caused users to abandon their mobile audiobook purchases

Users experience frustration when unable to make audiobook purchases directly within the app where they listen. This is particularly problematic for individuals on the move, as the inconvenience of switching to another device or application to complete the purchase often leads to abandoned transactions.

Aha moment!

While the interviews turned up a few different pain points in Spotify’s audiobook features, in narrowing the focus of my design I realized something important:

If users can’t figure out how to buy your product, the number of cool features built into your product doesn’t matter.

It became clear that, before thinking about adding new features like bookmarking to Spotify’s audiobook player, I’d need to help users actually purchase audiobooks and start listening to them.

Ideate / Design

Ideation

I needed to pinpoint where the friction was occurring, so I went through the flow of trying to purchase an audiobook through my own Spotify app.

Above is the screen that users reach in Spotify’s mobile app after trying to purchase an audiobook, and the point where users abandon their purchase. A quick evaluation of this screen against the 10 usability heuristics turned up a couple of red flags:

  1. Violation #1: User Control and Freedom. Users are funneled into a single potential action whether it’s the desired one or not. Their only option is to click “Got it” and close the overlay. A good user experience should never impose an action on the user or make decisions for them.
  2. Violation #2: Help and documentation. Once the users close the overlay, there’s no information or indication of how they can continue with their purchase. Users have to be savvy enough to navigate independently to their browser, open Spotify’s website, log in, find the audiobook all over again, and complete their purchase.

But why doesn’t Spotify allow in-app purchases?

It’s not an uncommon practice, as many businesses want to circumvent the fees collected by Apple’s App Store and Google’s Play Store for purchases made through their apps (30% and 15%, respectively).

So if it’s a common issue, how are their competitors handling it?

I returned to competing products to see how competitors handled this same issue.

Even without a premium subscription, Audible allows for in-app purchases, but charges more through the app to adjust for the cut taken by the App or Play stores. Libro.fm, on the other hand, funnels the user over to the browser to buy credits.

Potential Solutions

I still wanted to explore potential solutions, so I did a quick brainstorming session to see what I could come up with. The top potential solutions were:

1. Allow in-app purchases

Though the most simplistic solution, it is a clear non-starter. Spotify has explicitly expressed its unwillingness to yield to the high fees imposed by Apple and Google.

2. Wishlist

Another way to help users hang on to audiobooks they intended to purchase was by implementing a wishlist feature, where users could save audiobooks to a special playlist that they could easily find later in their browser. However, this didn’t seem distinct enough from Spotify’s existing Library and Playlist features, so I was concerned that throwing “Wishlist” in the mix would be too confusing.

3. Link from app to browser (the winner!)

The most elegant solution by far, was to emulate Libro.fm and connect the mobile app to the browser for a seamless purchasing experience. I did some preliminary research into feasibility and found that through deep linking, it should be a simple solution to implement on the backend.

Sketches

To determine where link to the browser would go, I sketched out two different ideas.

Sketch #1: Turn the dead-end into a link to browser.

The "Got It" button is repurposed as a link to open Spotify in the browser.

Sketch #2: Turn the play button into the link

The locked play button is converted into a text button linking the user to the mobile browser.

Option #1 seemed like the more user-friendly option, as linking from the “Want to listen?” screen would communicate the system status to the user, adhering to the 1st usability heuristic. To check my thinking, I presented my sketches in a design crit and received feedback confirming my gut feeling.

Prototype / Test / Iterate

Prototype and Usability Testing

I carried out unmoderated usability tests with 13 subjects who fit into the target demographic for Spotify’s audiobook feature. I centered the prototype and test around the primary use case, where the user finds and purchases an audiobook, moving back and forth between the mobile app and browser.

Task: Find and purchase an audiobook.

A frame-by-frame summary of the task given to usability testers.

Results and findings

Overall, users considered the task to be clear, straightforward, and seamless

“The steps of the task were straightforward and they were in line with my expectations. The buttons and words were clear and easy to read.”

Of the 13 participants, 4 (46%) rated the task as easy, and and 5 (38%) rated it as very easy. However, there were 2 respondents (15%) who rated the task as neutral in difficulty, so there were clearly some areas for improvement.

The purchase button contributed to abandonment

In my original design, I left the locked play button from Spotify’s original interface unchanged. This didn’t give users sufficient information about its function, causing unnecessary confusion and delays and resulting in a high potential for abandonment.

Users didn’t want to wait until they were in the browser to find out how much an audiobook cost

In the initial design by Spotify, the audiobook details page on the mobile app did not display pricing, likely as a way to emphasize that purchases couldn't be made within the app. However, as users gained the ability to proceed with purchases directly from the app, the absence of pricing information caused hesitation, as they were unsure about the amount they were committing to spend.

Iterations

I replaced iconography with microcopy to clarify the function of the purchase button

Strategically replacing the icons of the purchase button with a simple command helped to reduce confusion and the potential for abandonment.

I added the purchase price of the audiobook to the mobile app

Users are presented with all the information they need to make an informed purchasing decision up front.

Final Design

A seamless audiobook experience from discovery to streaming, all from within Spotify’s mobile app.

View prototype

Takeaways / Next Steps

When I started this project, I wasn’t expecting to design such a simple solution, and I worried a lot about my scope being too small. However, my mentor assured me that small changes can have a big impact, and that delivering value to users was the top priority. She also encouraged me to think long-term and consider alternative solutions that might fit better into Spotify’s existing subscription model. Overall, this project was a valuable opportunity to learn how to frame my design choices in terms of the overall business strategy.

As next steps, I would like to:

  • gather data on how my solution affects audiobook sales,
  • explore a long-term solution where users won’t be forced to purchase audiobooks in the browser, and
  • explore alternative pricing structures that are more aligned with Spotify’s current subscription model.

Get in touch.