Project: TikTok Redesign & New Feature
Capacity: Personal Project
Role: UX/UI Design
TikTok has undergone a complete rebranding from its original name, Musicly, and has become an entertainment powerhouse during 2020. Providing creators with a platform to entertain, educate, and promote, TikTok is among the top apps downloaded and used by the world. I too have become sucked into the wonderful world of TikTok, but noticed a few UX design problems that frustrated me. TikTok throws its users into a guessing game of navigation, lost searching for related videos, and trying to see behind the icons blocking their view.
How might we fix these issues but still maintain TikTok's innovative and youthful UI?
Redesign TikTok's main page to create a clear screen for videos and create a system to let users find and follow "stories" that have multiple videos.
Redesigned the main page layout that maintained 100% of the navigational and interactive information but reduced clutter by 60%
Created a new feature to let users be able to follow other user's "stories" (multiple videos) and eliminated any unnecessary searching
Improved user experience and solved some user frustrations
I researched TikTok's main target audience and usage.
- 50% of users under 34 years of age
- 3rd most downloaded non-gaming app of the year - right behind Facebook, Instagram, and WhatsApp
- 68% of users watch others videos while only 55% of users upload their own videos
These key stats I was able to find from Business of Apps 4.24.2020 helped me understand that the main users were those of Gen Z, and some Millennials. This target user is very tech savvy and doesnt necessarily care too much about the standard roles and rules - they appreciate intuitive design that is unique, different, and cutting edge.
It also showed that most users are viewing other peoples videos, and not necessarily uploading their own. This let me understand that more people are invested in other people's stories, and it is important to them to be able to follow stories and users easily.
I also recorded down my own user frustrations while using the app myself.
- main screen: cluttered & hides parts of video
- can't see behind the icons; sometimes the text gets covered up
- no way to follow a continuing story of multiple videos
- have to search and scroll through a ton a videos and click and guess to find the correlating video
I had confirmation that my user frustrations were shared with the rest of the TikTok community from looking at comments by other users:
"Does this have a part 2 with the answer? I looked but couldn't find it." - @revscott
"I just did my first story time and I made sure to pput the title and part # of # in the beginning...so people can find it easier." - @ch.elsey
"...trying to see his reaction from behind the comment icon" - @ksheaii
"If I have to search really hard for part 2 I take my like away" - @k8ty04
"I actually wont even watch if I see there's a part 2 - I've been invested in so many things and never got answers cause I couldn't find it." - @alannammm
These comments showed that users would be quick to disregard and give up looking for follow up videos and lose interest and engagement. Overall, the user experience led to frustration.
I wrote down a bunch of ideas that came to mind and made sketches of different screens.
I loved the fact that all the common interactions that the user would want to do were accessible from the main screen while the video was playing, but I wanted to reduce the clutter. Therefore, I created a design that encompassed all the same elements but condensed them down to the bottom of the main screen.
I created a new interactive component called "Information" which includes the music, effect, and the new story feature info. This made sure that all of the information the creator used when making this video that the viewer might want to know is all easily accessibly and in one condensed space.
I then made sure the main functions (information, comment, like, and share) were the main elements at the bottom on the page. I then had the secondary actions such as (Home, Discover, Create, Inbox, and Me) under the new menu button in order to still make it accessible, but hidden.
I also made sure the bottom menu had a gradient blur up to the caption to make the caption more legible and accessible to read rather than being white text on the moving video background.
I then created a high fidelity mock-up as well as a clickable mobile prototype.
Mobile Prototype Video:
I was able to create a clear, concise, layout that maintained all the original components but reduced the clutter by 60%. I was also able to increase the legibility of the captions, create a new element that housed similar information without taking up screen space. I was also able to create a new feature that completely removed the guessing and searching game when looking for related videos, and since this app is all about quick & instant gratification videos, the user doesn't want to spend time unnecessarily searching.
I was happy with my revamp of TikTok. Because of the pandemic I have spent more and more time delving into the lives of others and laughing along with people through this app. I was excited to get a chance to create a solution to a personal frustration of mine.