Introducing Spotify snippets, a new feature to enhance podcast based learning
This project elaborates on my design journey in designing a new feature for the Spotify app. This was a personal project.
Introduction
Spotify is a renowned streaming app that enables users to listen to songs & podcasts. Podcast listening is a great way for listeners to discover enriching content across a variety of genres. Podcasting really took off in the early 2000s. In 2021, decades later, they are experiencing a boom in popularity.
For a podcast listener: The array of available content provides a unique opportunity for users to acquire new information from podcasts. It also serves as an alternative means to learn.
For a podcast creator: The volume of podcasts being released can make it easy to overlook the effort that goes into designing a podcast experience. This can make it incredibly difficult to gain visibility.
Getting started
Goal: To design a feature that aids in enhanced learning for a listener while improving podcast visibility for a creator.
User research
I decided to further understand what podcast users’ experiences & patterns were like. I conducted a survey amongst 10 users, aged between 24–26 all of whom actively listen to Spotify podcasts multiple times in a week.
Who are the users?
- Audial learners: They use podcasts as a means to enhance their learning. They listen to podcasts while working or even during leisure time. They are on the scout for data that can pique their interest & take an effort to remember this data. Since they look to acquire information from podcasts, they usually take digital or manual notes while listening.
- Informal listeners: They use podcasts to make themselves well versed with new topics. They like to be up to date with a variety of topics & generally listen to lighter genres of podcasts. They listen to podcasts while working, doing chores, traveling. They do not always look at podcasts as a means to learn, however, they often make mental notes.
Key insights
My research suggested that there were a few stumbling blocks amongst listeners:
- Grasping content: Users should have the flexibility to highlight important content. Without this, it is difficult to effectively grasp content.
- Keeping track of topics: Users had difficulty being up to date with segments, especially after pausing the podcast. This is because they lost the context of what was being spoken.
- Organizational tools: The users must have the presence of mind to take notes while listening, so as to revisit these at a later date. Otherwise, they may lose sight of important content.
This made me dive deeper into addressing the problem statements with potential solutions.
Introducing: The Snippet
What is a Snippet?
A bookmarking feature enabling users to revisit segments of a podcast with ease.
Snippets allow users to add titles, make quick notes of their learnings & even categorize them as per their needs, enhancing a user’s audial learning experience.
It draws inspiration from the old school method of learning: by reading, absorbing & making notes.
Why is this useful?
- Viewing important data: Snippets draw a user’s attention to the discussed topic, providing them with a list of all the data they found relevant. Further, it gives the user the flexibility to jot down their key learnings, similar to a pocket diary full of useful content.
- Providing context: Similar to dog-earing a page in a book, snippets make it easy for users to revisit particular sections of a podcast. This can help a user get a better contextual understanding of the topic being discussed, after pausing or even revisiting at a later date.
- Establishing a dialogue: As an add-on to the existing share feature for songs & podcasts, I decided to create a ‘share Snippet’ feature.
- Improving visibility for creators: As a result of this feature, content creators can provide a better experience for their listeners. As users share their favorite snippets, hosts may gain popularity & can establish an even wider audience.
Understanding the app
I began by analyzing the screens of the Spotify app. I took screenshots of all the current screens & features associated with podcasts while understanding how the navigation worked.
Here’s a link to my Figma file so you can have a closer look at my entire design process.
Creating a snippet
Currently, there is no feature that highlights important episode information. This can make it easy to lose track of valuable content.
My intent was to create a feature that strengthened audial learning by providing visual cues.
In comparison to purely audial content, providing visual cues can strengthen a user’s learning. It aids in better recollection of content, helping a user grasp content better.
‘Pinning’ a relevant segment is also beneficial in reviving the episode’s context, helping a user keep track of the discussed topic.
The user flow is split into 3 quick steps:
1. Tapping the ‘Snippet switch’ to the ON state
By doing so, the edit mode is enabled. This permits text selection to create a snippet.
2. Tapping the sentence or paragraph that needs to be pinned
Single tapping a sentence results in selection. To afford paragraph selection, an arrow icon is used as a signifier. Single tapping the arrow icon enables a user to toggle between sentence & paragraph selection.
3. Creating a Snippet title
A user can assign a Snippet title, to organize their learnings in a more structured manner. However, this is an optional task & the user can tap the CTA to proceed.
4. Snippet ON state
While in the ON state, the user can do the following in the audio player screen or transcript screen:
- Editing the Snippet selection: By tapping the arrow icon, the user can toggle between paragraph & sentence selection, even after the Snippet is created.
- Viewing Snippet details: The Snippet is the touchpoint to the details screen. This screen will allow a user to perform a series of functions: Edit Snippet title, add a label, share the Snippet, revisit the segment of the podcast, create notes about the podcast & delete the Snippet.
5. Snippet OFF state
While in the OFF state, the user can do the following in the audio player screen or transcript screen:
- Remove the created Snippet
- Share the snippet
To edit a Snippet, edit mode must be enabled i.e. the switch must be in the ON state.
Creating a Snippet: The Design Process
In order to design the above 8 screens, I had to design multiple approaches to solve the problem. Each component was iterated multiple times, taking into account :
- The total number of steps to create a Snippet
- User intuition with respect to what an icon signifies
- Co-relating the transcript appropriately with the audial content
- Minimizing alterations to the existing Spotify UI
Snippet Details
Problem
My research was eye-opening in understanding podcast-based learning amongst users. Most users upon finding an interesting segment would make a note of it. However, if the user fails to do so, they may lose track of the information altogether.
Solution
Learning based tools like notes & labels will help a user articulate their podcast learnings better. This can strenghthen their overall learning.
Visual hierarchy & staggering information is key as it reduces the cognitive load.
If the user forgets to assign a title while creating a Snippet
Upon revisiting the Snippet, the details screen displays multiple action items. This will allow them to create a note, assign a label or add a title, even at a later date.
1. Viewing ‘Snippet details’
The Snippet in the ON state is the touchpoint to view Snippet details. The screen was designed on similar lines to an existing Spotify modal.
2. Creating a custom label
By giving the users the flexibility to create a custom label, users can strengthen their learning as per their needs. This will help them organize their learnings in a structured manner.
Snippet Details: The Design Process
Have a look at some of the design iterations that paved the path to my final design. I tried multiple approaches:
- Designing different layouts with varying hierarchy
- Using small & large modals
- Displaying few action items vs providing all details on a single screen
- Providing less flexibility in creating labels vs more user flexibility
Sharing a Snippet
The share feature is useful for listeners to share their favorite podcast segments amongst other listeners.
A great tool to amplify social media visibility for podcast creators.
The share feature can be used as follows:
1. Snippet switch is in the OFF state
The user can tap the Snippet in the audio player screen. A tooltip appears to ‘share’ or ‘remove’.
2. Snippet switch is in the ON state
By tapping the Snippet, the details modal appears. Here, there is a share button.
3. Designing for different scenarios
I also designed the share screen for different scenarios. For eg- If the Snippet was longer than a few sentences. This made me ponder over how this would impact the design:
- Would the banner height increase?
- Would the font size change?
- Should the text be truncated?
4. Designing for social media
I decided to extend my design further & design the Snippet for Instagram stories & Tweets.
This made me understand how to design for multiple apps using the same design elements.
Sharing a Snippet: The Design Process
The intent was to create a design with elements that could co-relate with Spotify’s UI. Have a look at some of my iterations. These were the key factors I took into account :
- Highlighting the Snippet
- Incorporating the color scheme of the audio player screen
- Including podcast art, episode name & podcast name
Viewing all Snippets-Current Episode
The ‘lyrics window’ on the Spotify app is the touchpoint to the lyrics screen. This enlarged screen ensures a more immersive experience for the user.
The transcript in the audio player screen is the touchpoint to the transcript screen.
‘View all’ provides a list snippets that the user created in a single episode. It helps users revisit segments of an episode & further view all Snippet details.
Establishing visual clarity on the screen was of the utmost importance, to minimize cognitive overload.
All the features of the audio player screen (such as editing, sharing, removing) can still be applied here.
Viewing all Snippets: The Design Process
The intent was to create a design that listed all the Snippets for the current episode being played. Have a look at my iterations. These were the key factors I took into account:
- Retaining the immersive nature of the transcript screen (designed as per the lyrics screen on Spotify)
- Including the Snippet title or label (if any)
- Timestamp with respect to the episode
- Snippet data from the episode
- Date of snippet creation
Viewing all Podcast Snippets
This feature enables a user to see all snippets from different episodes pertaining to the same podcast. To provide an overview of learnings across all episodes.
Menu screen
This contains a new button: to view all podcast snippets. This is the only touchpoint to access the content details screen.
Content details screen
The intent was to design a screen, conceptualized around a notepad.
Designed on similar lines to the podcast content details screen (in the current app) This screen lists the following :
- Episode name & relevant podcast art
- Snippet title & label (if any)
- Snippet
- Timestamp & date of creation
Viewing all Podcast Snippets: The Design Process
My understanding of what the screen content details screen should list evolved with every iteration.
- The initial intent was to list down any user notes with respect to the Snippet.
- As I explored this further, I realized that it was essential to display the Snippet, not the user notes.
The Snippet is the most relevant data point to the user. The user’s notes are their personal learnings, which are of secondary importance.
Here are a few design iterations.
Viewing all Snippets-All podcasts
Listed under the ‘podcasts’ tab of the library, the tab lists Snippets pertaining to all podcasts.
Introducing the Snippets feature
Apart from designing the feature, I pushed the boundaries of the project & designed the introduction of the feature as well.
The most important factor is to educate the user about the feature in a simple yet concise manner. While deciding how to introduce the feature, it was essential for me to address the following:
- Guiding the user: The goal is to guide the user through the feature, enabling them to have an ‘aha moment’. The information should be presented in a lively manner while also providing all the relevant data.
- Mapping the touchpoints: Understanding where to present the information while keeping in mind the context was important. Mapping a user’s journey on the app, I made an assumption on where to locate this information
1. Home screen
This is the primary touchpoint that elaborates on the feature’s use case in detail. Using a banner on the home screen, I elaborated on the feature’s properties through a story. The story contains a series of images that can be tapped. The reasoning behind this approach was because:
Banners are ideal for the home screen because they draw the user’s attention. Stories are quick, non-intrusive & pique a user’s interest in finding out more. The nature of stories also ensures that there is minimum cognitive load on the user. They can also be easily dismissed.
2. Your Libraries Tab
Under this tab & within the ‘podcasts’ section, a new Snippets tab has been created. Here, I used a modal to educate the user because:
Case 1: The user has seen the home screen banner & story already
Then there is a good chance that the user is already aware of the feature & its uses. In this case, providing a lengthy feature explanation is unnecessary. Having a modal that summarizes the features is enough to reinstate the uses. The user can easily dismiss this by tapping the secondary CTA.
Case 2: The user has overlooked the banner & story
Then the modal will provide a brief introduction. Tapping the primary CTA, the user will be navigated back to the Snippet stories screen, where they can learn more.
3. Audio player screen
Since the Snippet feature is located on the audio player screen, a series of step-by-step instructions will benefit the user.
Even if the banner, stories & modal have been viewed, these instructions are important. Snackbars & tooltips are used to systematically explain the usage of the entire feature.
And that’s a wrap!
Key takeaways
Learnings:
- Things that may seem simple are often tedious to craft. Starting off with a complicated design & diluting it at every stage helped me.
- Analyzing every component as an individual entity is important.
- Introducing a feature can set the tone with how a user may interact with it in the future.
- When conducting user research, it is important to understand the why’s rather than the what’s.
Challenges:
- Diving deeper into Spotify’s designs left me in absolute awe of the app. Attempting to replicate their design philosophy was challenging.
- Understanding the intent behind what a screen should display can take time. After the 21st iteration, it is common to feel like you lost sight of the intent entirely. At this point, going back to the drawing board & understanding the why’s of the project can help.
This was a very exciting project to work on, especially since Spotify is an app that I use every single day & one that I am a huge fan of.
Do message me on Twitter or Linkedin if you want to discuss further. :)
I also redesigned a Pizzeria app from scratch. Do check it out!
