Adding an organizational feature to Favorites and Liked TikToks
Client: TikTok
UX DESIGN | USER RESEARCH
PROTOTYPING | USER TESTING
Tiktok is a short-form video sharing app that allows users to create and connect through a 60 second video. Its popularity grew by almost 180% during COVID.
While TikTok is incredibly entertaining, the educational aspect can often be overlooked. Users can learn anything from new dances to cooking and even financial responsibility. Users may save these types of TikToks for future use but with the current interface, it can be difficult to find these videos as it can get lost in with the other clips they choose to Favorite. Users should be able to find the TikToks they need efficiently so they can spend more time using the social or educational aspects.
Analyzing the short-form video market
The direct competitors I found to TikTok were Instagram Reels and Triller. I also chose to compare Snapchat and Pinterest since they had found a method for organizing photos/art boards. By analyzing the market I also got an understanding of how some competitors solved the problem and how I may gain inspiration or improve upon their solutions.
Objectives of my research
Explore opinions of TikTok’s current interface for their Favorites page
Why do users revisit their Favorites?
Why do users Favorite a TikTok? (vs. Liking it)
Conducting interviews with Tiktok users among various demographics
I interviewed 5 participants, varying in age from 9-25. 100% did mention wanting a way to organize their likes and favorites would be beneficial and time saving.
I also found during my research that 40% of the users were not even aware that you could favorite a video because the action was not as obvious as the like icon. The other 60% tended to favorite a video for either entertainment (ex: a funny video) or for instructional (ex: a recipe video) purposes.
How might we allow users to easily save TikToks of value and revisit them swiftly
Understanding the current user experience
My interviews helped me understand user motivations but I really wanted to understand the pain points of the process. I referenced the user interviews but also did this exact journey on the app myself and tried to put myself in the users place.
Sketching possible solutions for the disorganization
Hi-fi designs that reflect the brand and user research
I was able to establish the frames necessary by framing it around the user journey. I first determined the frames I would absolutely need such as: Home page (For You Page) , the Likes page, and the “Groups”.
Testing a hi-fidelity prototype
I had 4 participants test a mid-fidelity prototype. Some notable results:
Some users voiced their dissatisfaction with having the Tiktoks organized chronologically. They felt that this still did not solve the issue of easy searching as some users Favorite or Like a video multiple times a day, depending on how long they are scrolling.
Participants had favorable attitudes about adding the Add to Favorites on the FYP but were not happy with its order in the possible actions.
Iteration: Part 1
Major changes:
Changed placement of the “Add to favorites” icon, to below comments: Some testing participants mentioned that the new Saved icon, seemed out of place with the other icons. I conducted AB testing with the Saved icon in various locations and the screen with the Saved icon placed under the Comments icon, had the most favorable reviews.
Allowed users to search a TikTok by the hashtag used by the TikTok creator: With the original design all Saved TikToks were placed in one folder that were chronologically ordered. A few participants stated that this didn’t seem like the most efficient way to organize Tiktoks as a user would still need to sift through various of TikToks just based on the thumbnail. They had suggested some sort of search filter and I used that suggestion to create a feature that allows users to search based on hashtags.
![](https://images.squarespace-cdn.com/content/v1/60b7956419d12065d2e946f0/1623359515553-SZRPXAX81OOZTK3RILRJ/mockups_edited.jpg)
Iterations
This iteration still involved the technical aspects of the 1st iteration but followed the branding of TikTok’s design system more accurately. I believe the original hi-fidelity design did not reflect Tiktok’s branding properly. At the time, I thought that brand consistency was just including the proper colors and fonts but in reality it is so much more than that. For this redesign I reviewed the Tiktok style guide to ensure that my new designs aligned with Tiktoks brand identity.
![](https://images.squarespace-cdn.com/content/v1/60b7956419d12065d2e946f0/919c3e89-f9a7-4694-b4b3-599feb60cfe5/tiktok+redesign.png)
In the end…
The challenge
The real challenge for me was creating UI designs that fit the branding and aesthetic that TikTok already has in place. I needed to ensure that my visual designs seamlessly blended with TikTok.
Potential next steps
If given the time and resources I would like to test on a larger testing group that also includes more of a younger demographic. I think it would be beneficial to test on a younger age group as 47.4% of TikTok’s users are between the ages of 10 and 29.