Redesigning TikTok Effects - a UX Case Study

TikTok is an app that allows users to create short videos to share. These videos will be broadcast to their followers, or to anyone who sees it on their For You Page. The For You Page has an algorithm that creates a feed catered to you based on videos you've previously watched and liked. I use TikTok daily, and it can be frustrating or confusing to use at times, especially when creating content. It's difficult to find effects that you are looking for. The icons are not representative of the effect, there are no names listed for the effects, as well as no search bar. This can be frustrating for users trying to create engaging and interesting content. I wanted to create an easier process for users to find the effects that they're looking for.

The primary users of TikTok are young adults. 69% of users on the app are between the ages of 13-24. The app is used for entertainment. Users are able to watch a variety of content including comedy, lifestyle, travel, food, etc. The primary goal of users is to find entertainment. Other goals consist of: creating content, sharing videos with friends, and connecting with others.

I spent some time exploring the app and looking at each of the features in detail. I am a daily user of TikTok, but I don't normally think about all the features and actions involved in the app.

Above are screenshots of the app. The For You, Discover, and Inbox pages are all shown.

Above are screenshots of the create page. This is how you film and edit TikTok videos. These pictures also showcase how effects are used in videos. This is what users see when trying to find effects. It's hard to discern between the effects and understand what they do. These are the before images.

I created a Google forms survey to ask users about their experience using TikTok. I received 27 responses from James Madison University students. These are college students ranging in age from approximately 18-22 years old. This demographic falls under the largest demographic of TikTok users.

Over 50% of users surveyed use TikTok daily. Another 29.6% of users use the app a few times a week or check in every now and then, but are still users of the app.

70.4% of users have uploaded a TikTok video before.

25 out of the 27 users surveyed responded to using effects when creating TikTok videos. 84% said that they have had trouble finding effects creating videos.

84% of users stated that they have trouble finding effects. It's hard for users to find the specific effect they are looking for. There isn't a search bar when using effects on TikTok. Therefore, users are not able to easily find an effect they know they want to use because they are unable to search for it.

When asked to describe any troubles they experience while using the app, 11 users wrote how effects are difficult to use. Users cannot understand what the effect is based on the image. The images are not clear representations of the effect. Also, the effects do not have names written under or near them. For users, this is confusing because the image is not clear, and there is no title that gives an indication as to what the effect does.

How might we improve the experience of TikTok users using effects when creating videos?

I first created a wireframe to understand the architecture of the app. This allowed me to visualize the information hierarchy and understand how actions are completed. I was able to focus in on the create tab. I played around with the app to fully understand all of the functions and to gain a better understanding of the information architecture.

I created a user flow to understand how I would visually design the mockup. This allowed me to see exactly what I needed to conquer the pain points. I knew it needed to have a search tool. This will allow users to find effects more easily. I also wanted to categorize the effects under the search tab for easier access to browsing different groups of effects.

I wanted to make it easier for users to find effects and understand what they do. The two pain points I previously discussed were users are unable to search for effects and users are unable to understand what the effects are and what they do. To conquer these pain points I added a search bar. The search bar allows users to search for a specific effect by typing in the name. I also added icons that are more representative of each effect. This way, users are able to get a clear picture of what the effect entails. I also made categories with icons on the search page for users to browse effects by category. I added titles to each effect for users to easily understand the effect. I also made the effects larger so users are able to view them easier.

Thank you for taking the time to read this case study! Throughout this project, I was able to expand my knowledge in user research, HTML, CSS, and graphic design. I would love to be able to test out my design and hear others' opinion on the redesign. This project allowed me to work with new tools and gain a better understanding of the components that go into a UX case study.