Spotify Bookmark

The design of a new bookmarking feature for Spotify Podcast
Role - UI/UX Designer & Researcher
Team - Lead Product Designer (Jin Young Choi), Product Designer (Myself)
Timeline - December 2020 - January 2023
Tools - Figma, Adobe Photoshop, Rotato
Jump to the final design
Summary
Effortlessly capture and organize important information from your favorite podcasts while you're on the go with the new bookmark feature for Spotify
Overview
Background
Have you ever wanted to revisit a specific section or a quote from a podcast you enjoyed listening to?
My brother and I love to listen to podcasts and talk about them together and one day, we shared a similar frustration in our podcast listening experience on Spotify. One particular instance we effused about was when we would listen to something galvanizing or enthralling but forget about it later, even after making a mental note of it at the moment. Moreover, the hassle of going back to the episode and trying to pin point exactly when it was said was too time consuming and inefficient, especially for long-form podcasts.

So, naturally, as product designers, we set out to explore how we could fix this problem.
Design Process
The process we followed was akin to that of a standard product design.
1
Learn & Understand
Competitive Analysis
User Interviews
Secondary Research
2
Explore & Ideate
Persona / HMW
Information Architecture
Low Fidelity Sketch
Mid Fidelity Wireframe
3
Design & Test
Mid Fidelity Prototype
Usability Testing
A/B TestingIterate
4
Final Product
High Fidelity Prototype
Learn & Understand
Competitive Analysis
Once we had a clear understanding of our target audience, the next step in the design process was to conduct a competitive analysis. I wanted to see what other products were out there that were similar to what we were creating, and how they stacked up in terms of design and user experience.

Four competitor products I explored in detail demonstrated a similar design pattern when bookmarking a part of the podcast. All consisted of three main stages:
  • Bookmark - Click to save information for later review
  • Save - Automatically save bookmarks in organized folders
  • Edit - Customize saved quotes to include accurate information
Also, I identified two major pitfalls to avoid: cluttered contents and lack of clear information/visual hierarchy.
  • Cluttered contents - Overwhelming amount of icons and text, even if they are all helpful, can confuse users.
  • Lack of information / visual hierarchy - If there is no clear structure or organization to the page, the user may have difficulty locating the specific information and feature they are looking for.
The core challenge would be in finding the right degree of complexity.
The biggest challenge would be finding a way to give the user the control and customization options they needed to account for a wide range of use cases, while at the same time avoiding an interface that would be massively overwhelming. We knew that if we presented the user with too many options or a confusing layout, they would become frustrated and might not use the feature at all. On the other hand, if we didn't give them enough control, they might not be able to get the most out of the feature. It was a delicate balance to strike.
User Interviews & Secondary Research
Methodology
  • User Interviews consisted of 4 in-depth conversations with users
  • Secondary Research entailed leveraging existing online resources to better understand the domain and the problem space.
Objectives
  • Learn about existing behaviors and patterns
  • Identify common pain-points
“Podcasts are so popular because it’s content for “found time” (driving, gym, cooking, etc). The hardest thing about using podcast for learning is to try to remember everything to look up or study after the primary activity is over.”
Key Findings & Analysis
The insights we gained from these interviews were invaluable, and helped us to identify some key challenges that users face when listening to podcasts. Some of the main findings from these interviews included:
  • ALL INTERVIEWEES listened to podcasts while they were on the move (Cooking, running, driving, cleaning, walking, etc)
  • ALL INTERVIEWEES listened to podcasts related to their careers to stay up to date in their respective industries and expand their working knowledge
  • ALL INTERVIEWEES liked to use the rewind feature
  • Podcasts can be as educational and beneficial as books as a tool and a medium to learn and absorb valuable information
“I listen to so much great material on podcasts, but so much of it stays in my brain for about 15 minutes before it’s gone.”
Explore & Ideate
User Personas & HMW
Based on our interviews and research, we created target user personas
how might we provide podcast listeners with a more convenient way to capture and retain the insights and information that they gained on Spotify?
As we were drawing comparisons between books and podcasts as learning tools, we thought, ‘What if we could underline, annotate, and dog-ear podcasts like we do with books?’
‍
Simply, we envisioned a feature that would quickly enable users to “bookmark” specific locations while listening so that they can go back and review them later at their leisure.
‍
We followed up our idea by quickly sketching and producing mid-fidelity prototypes and conducting concept testing and usability testing.
Information Architecture
Based on our interviews and research, we created target user personas
Low Fidelity Sketches
Mid Fidelity Wireframes
Design & Test
Usability Testing
Method: Four subjects were given three task flows to complete and were asked a round of questions regarding the feature and their experience.
Tasks
  • Add a bookmark while listening to a podcast
  • View your saved bookmarks
  • Edit a saved bookmark
Key Findings
  • ALL USERS shared their enthusiasm for this feature and noted how they would regularly use the feature if implemented.
  • ALL USERS rated Adding a Bookmark and Editing a Bookmark to be Easy.
  • Two users noted how this feature would change the way they consume and interact with podcasts.
  • Users were initially confused about how much and which section of the podcast would be saved after the bookmark button has been clicked.
Design Options and A / B TESTING
A / B Testing #1 Result
Users from the second group were able to Add a Bookmark more quickly.
A / B Testing #2 Result
Users from the first group showed and expressed confusion about the location of the bookmark button. They were
inclined to associate it with the image. However, users from the second group shared no similar confusion and
found the placement intuitive.
A / B Testing #3 Result
Because the second option elicited more excitement without jeopardizing usability, the final design adopted
the new design pattern.
One of the most interesting things that users noted was how this feature would change the way they engage with podcasts. Currently, they don't often re-listen to podcasts, but with the bookmark feature, they said they would be more likely to revisit and review already-listened-to podcasts. This means that our feature has the potential to increase the amount of time users spend on the app, making podcasts an even more valuable resource for learning and staying up to date.
Final Mid-Fidelity Prototype
Final Product
High Fidelity Prototype
One of the biggest challenges we faced as we designed this feature was finding a way to make the bookmark page look consistent with the existing design of Spotify, while still making it feel unique. It was a delicate balance to strike, and we went through several iterations of the design before arriving at the final prototype. Despite the challenges, we're proud of the end result – a bookmark page that feels like it belongs in Spotify, but that also offers a fresh and exciting experience for our users.
LinkedIn