A central sound library that allows users to navigate through sounds quicker and more efficiently.
Product Designer
Individual
July-August 2022
More than just a video app
Picture this: you’ve just turned on the radio in the car. A song starts playing. "hmm... this sounds familiar," you think. "Where have I heard this before?” The song plays for a few more seconds. Finally, the chorus comes around and you proclaim “Aha! This is a TikTok song!”
While TikTok is referred to as a video app, sound accompanies almost every video on the app– whether that be snippets of music from songs, media clips from movies or TV, or original sounds made by users.
The power sound holds on TikTok is undeniable. It drives today’s hit music charts, and has fundamentally changed the way the music industry functions. Nowadays, it is common to hear songs commonly referred to as “TikTok sounds” playing on the radio, your favorite streaming site, and out in public at your favorite coffee shop or department store.
​
Sound is a pivotal part of the TikTok experience, yet it is rather difficult to navigate in-app
As an almost daily user of TikTok, I realized the way sound is currently laid does not reflect its importance to the app. With this realization followed a question: How could I make this sound-centric app more customizable, easy, and enjoyable for people to use?
​
The Problem:
When I’m looking for a specific sound on TikTok, I want to be able to access my favorites and find the audio quickly and easily. But, I can’t do that well because:
​
-
Navigating both to and through favorite sounds is confusing, making it hard to find what I am looking for.
​
Final Solution
To begin my research, I needed to hear from users.
Interviews:
I conducted 8 user interviews. I interviewed users who considered themselves creators, users who considered themselves consumers, as well as those who considered themselves a bit of both. I interviewed a mixture of Gen-Z and Millennials, who combined make up over 80% of TikTok’s demographic.
The interviews confirmed the initial theory of mine: sound is essential to users’ experience on TikTok.
​
I used my findings to map out insights and brainstorm solutions.
After conducting the interviews I created empathy maps for each of the 8 users. From these maps I charted pains, gains, and jobs-to-be-done. From this process a few key insights emerged:
TikTok Currently
Currently, there are two main points through which users can access sounds on TikTok, highlighted in pink on the information architecture map below. This visual reveals why users have no distinct way to navigate to sounds (and are sometimes not even able to find them at all). Sounds are more than just a click away.
​
Below is current view of favorite sounds on both of their access points: the sound library access point, and through the Favorites tab.
​
Narrowing in on the problem
Looking at the insights I collected, as well as the current layout of the app, it became clear that the problem with sounds on TikTok was more complex than I originally identified. Not only did users have trouble finding sounds within their favorites, but sometimes struggled to navigate to the disguised entry points, and rarely used TikTok’s existing sound features to their fullest extent.
I established 3 key design goals to drive forward further brainstorming and the rest of the design process.
Brainstorming:
I recruited 3 friends to help me brainstorm solutions. Lots of ideas and sticky notes later, three ideas emerged ahead of the others.
​
In the end I decided to move forward with a design that was a combination between two ideas. Looking to my design goals, I realized that all three ideas failed to address at least one of my key goals. I decided the best solution to resolve this was to combine idea 2: re-designing the existing sound library and idea 3: create a new favorite sound library.
​
Building mid-fidelity designs
Sound Icon:
To begin designing, I started by creating some new options for the sound icon. Ultimately, I wanted to create a central hub for users to interact with all their sounds, and I wanted the icon to reflect that.
I decided on Option D because I liked the idea of the icon symbolizing a collection of sounds, and I believe the folder most clearly represented this. I thought this option would best represent the design changes I would be making later on.
​
Entry Point:
To address my design goal of making sounds easier/more intuitive to navigate I created a second entry point for users to access the sound library feature. This is meant to serve as the main sound hub on TikTok where users could access all sound features in one, easy-to-access place.
While I sketched this while brainstorming solutions, I played around with where this entry point would best fit.
I kept Option A as the new entry point. This entry point is very close to the commonly interacted with “edit profile” button, and rests in the center of the profile page which makes it visible and convenient. While I also liked Option A, it created too much clutter in the main menu and shifted the “create post” button in an unappealing way. Option C was too far from the most commonly interacted with features for my liking.
​
Playlists:
The playlist feature was my solution to addressing my third design goal: create an organizational structure inside saved sounds. This feature allows users to categorize sounds in specific collections. I modeled this feature after the current Collections feature in which users can add favorited videos into specific folders they have created. Below is the evolution of this feature:
​
Adding Songs to Playlists:
Video and sound are closely related on TikTok. Therefore, I wanted to make adding favorite sounds to playlists closely resemble the current way users add favorite videos to collections. To do this, I decided to use the “Added to Favorites” banner in the flow of adding songs to playlists.
​
I decided Option C would be best option for adding songs to playlists because the banner will appear where users already expect an animation. This new banner will prompt users to take further steps after adding a song to favorites. I also liked Option B, but ultimately went with Option C because it was more intuitive for current users. Option A was too far from the “Added to Favorites” animation, and Option D felt too clunky.
Flow: Adding sounds to playlist from for you page
The first two frames mimic the design of how users currently add sounds to favorites. The design of the “Add to playlist” pop-up and the “Added to” banner in the last two frames come directly from the “Add to collections” feature for favorited videos. I chose to replicate these designs because users will automatically understand what they mean and how to use them.
Flow: navigating to a specific playlist
Seeing what users think
To hear what current users thought of my solution, I conducted 4 more user interviews to gain deeper insights on my design.
Users appreciated the ease of accessing sounds through the new entry point, were enthusiastic about the new sound library landing page that featured user-made playlists, and understood the flow of adding songs to playlists and accessing specific playlists. However, there was still some confusion about TikTok’s existing sound features.
These interviews and the insights gathered from them helped me recognize I had successfully accomplished two of my design goals, but fell short of one:
Improving my design
Re-designing TikTok’s Curated Playlists:
Originally, I re-labeled the “Playlist” section in the sound library “Discover” to prompt user to interact with it more. However, to make it stand out more, I decided to further change this feature.
​
I chose Option C because it is the best design for emphasizing the visibility of TikTok’s playlists, while also maintaining a clean, uniform landing page within the sound library.
To further increase interaction with TikTok’s playlists, I wanted users to be able to add curated playlists to their own playlist collections.
Flow: adding curated playlists to “Playlists”
When a user adds a curated playlist to their playlists, this playlist disappears from the “Discover” section in the sound library. The curated playlists are differentiated from user-made playlists in “Playlists” because of their distinct icon image and the number of sounds are not listed underneath the playlist names.
​
Concluding Thoughts
With TikTok sounds driving in-app trends, world music charts, and shaping a whole new era of slang, I believe TikTok would greatly benefit from a new and improved sound library. Easy access and the ability to categorize sounds would make users feel more connected to audio and promote interaction within the app.
I would be interested to see how TikTok would choose to organize of sounds. Would they closely follow the same design structure as the current categorization feature for videos, would they create a whole new structure, or a bit of both, as I did in my design?
​
Self Reflection:
This was my first UX design project, and I continuously learned throughout each step in the process. I was especially glad to strengthen my interview skills– I learned to embrace silence and how to decipher what people truly mean from what they say. I also became very familiar with Figma and deepened my understanding of the more technical side of design.
Mostly, I had fun exploring the design process. I learned that this process is not linear– sometimes user feedback is not what you expect, sometimes a design doesn’t look like the idea you had in mind, and you have to take a few steps back to regain your footing before continuing.
I enjoyed piecing together insights, ideas, and designs to create a solution to a problem that I notice in my everyday life.
I created this study as an individual project, I am in no way affiliated with TikTok.