Tik Tok
Category Organization Feature
Role
UX Researcher / UI Designer
Software
Figma
Duration
4 weeks
Project Overview
Tiktok is a mobile application that is centered around the idea of video creation that can be watched and shared amongst other users. On average, users spend 498 minutes per month on the app. As one of the highest used mobile apps, Tiktok still needs improvement in the organization of user content, specifically in the area of user liked/ saved videos. Currently, all liked/saved videos can be found in one section of your Tiktok account and must be scrolled through to find a specific video.
Challenge
Users have expressed that the current method Tiktok has to find a video in their liked videos tab are both inefficient and inconvenient and users often get discourage to reference back to their liked videos due to how time consuming it is scrolling through to find a specific video.
Solution
To make finding videos easier and quicker, Tiktok wants to create a categorization feature that allows users to create groups with personalized labels to organize their videos.
Research
The research methods conducted were competitive analysis, user surveys, and user interviews in which resulted in understanding UI patterns within other mobile applications, users’ organization preferences, and how organization influences user behavior when using an app.
Research Goals:
Collect information on UI patterns that competitors use for organization and understand why they work
Analyze how competitor sites have users like/save posts, the navigation to get to the page where the posts get sent to, and how they allow users to view the page
Learn about what components lead to positive user experience when it comes to liking/saving posts and browsing the liked/saved section
Understand how customers browse their feed, like/save posts, and review the posts.
Detect frustrations and pain points when it comes to liking/saving posts
Understand user preference when it comes to methods of organization
Competitive Analysis:
Goal: Observe how other applications deal with organization for liked/saved posts and detect how the design influences success and where the design can be improved on to increase positive user experience.
Competitive analysis was conducted in order to identify common UI patterns used across other mobile applications when it came to organizing liked/saved videos. The data collected would then be used as a reference in designing Tiktok’s categorization feature in order to create familiarity for users when navigating.
Strengths:
Only need to click save icon on specific post to save
Can unsave post right away by just re-clicking icon
Two column layout supports good legibility of group and visibility of cover image
Can select cover photo for group
Weaknesses:
Too many steps to save to group: In order to add to group, must go to specific group and then click “add to collection” in which you can select from “all post” group
Lacks feature to organize groups (e.g. alphabetical order)
Cannot share saved post groups to friends
Liking and saving posts are two separate features and pages when looking back on what you like/save
Strengths:
Can pin post directly to a specific board
Shows preview of board as icon when deciding which group to pin to
Search bar to browse through saved posts
Filter to organize groups (e.g. a to z or last saved
Option to view all saved posts or by groups
Options of how to view screen (e.g. thumbnail is full screen, two column, or three column)
Can organize within groups by filters or customization
Can add collaborators and share groups to friends
Weaknesses:
Cannot just save a post without assigning it to a group
Multiple steps in order to save a post (via mobile): have to hold post, swipe finger to pin icon, and then select a board.
In order to remove saved post, have to go to specific board and remove it from there
Cover photo for groups are last pinned posts, cannot select
User Survey:
Goal: Collect information on user preference when it comes to organization both in general and within applications.
Through user surveys, data on why users prefer to have things organize as well as how they like things organize were collected. This information will then be used in determining the best way to set up the categorization feature for Tiktok.
Key Findings:
Most participants organize their things due to it being convenient and efficient
Chronological order was the most preferred sorting method when browsing
Categorization was the most preferred grouping method when organizing
When lists become excessive, people tend to make subgroups, clean out their lists, or just make new lists and move over content they still use
User Interviews:
Goal: Get direct insight on user categorization with currently existing applications that allows users to organized saved content.
After collecting general information on user organization, user interviews allowed me to grasp a more detailed analysis to how categorization of videos will increase the usability of the liked/videos tab. It was concluded that users like to have things categorized because they’ll know exactly where to look when they have to find it later thus confirming the direction for the categorization feature.
Key Findings:
Categorizing items is the most preferred method when it comes to organization
Putting things into categories increases the likelihood that users will know where to look when they need to find a specific item later
When asked what app does well in allowing users to organize their content, most participants chose apps that allowed users to put their content into groups so that they know where to refer back to if necessary
Lack of ability to organize likes on Tiktok led to users to get creative and figure out other methods that made it easier for them to refer back to specific videos
Majority of the participants prefer to tap through screens to get to a destination rather than scrolling through one screen.
Instagram & Pinterest’s Grouping Method
Who is this product for?
The findings that resulted from the research was then used to help create “Sienna”, a persona that displays the goals, needs, motivations, and frustrations of liking/saving videos on Tiktok and finding them later to reference. This persona constantly served as a reminder in case we ever lost sight of who we were designing the feature for as well as reminded us of the problems that needed to be solved.
Persona
Style Research
Before creating wireframes, style research was done so that the design of the categorization feature will align with the current existing design. The goal was to make sure that the new feature wasn’t acting as its own entity but as one part of the many components of Tiktok.
User Flow
The main goal in creating the categorization feature was to make sure that it flowed with the current existing user flow. We didn’t want to create new pathways for users to explore but wanted to add to the already existing pathways when using Tiktok. This way, users will know where and how to navigate through the new feature. The categorization feature can be accessed from the for you page, through the share button, and directly on the liked videos tab.
User Flow #1: Categorizing from For You Page
User Flow #2: Categorizing from liked/saved videos tab
Wireframes
Using the UI patterns collected from the competitive analysis research, low fidelity wireframes were sketched out and converted into medium fidelity wireframes. When designing the wireframes for the categorization feature, the goal was to create designs that wouldn’t interrupt the current existing user flow. Therefore we wanted to give users options to when and how they wanted to organize their videos.
Medium Fidelity Wireframes
The design for the categorization feature was centered around a seamless navigation. Therefore banners, modals, sheets, and button will appear when needed and can easily disappear when not. For example, on the for you page, when users like a video a banner appears and if they want to categorize the video right then, they just click the banner but if they want to categorize it later, then they could just continue scrolling through their feed thus not interrupting the user flow.
High Fidelity Designs
Using the medium fidelity wireframes as a basis, High fidelity wireframes were created with the input of imagery and colors. During this phase of the design process, I focused a lot on the colorography of the text and components. Tiktok has a very neutral color palette thus resulting in a limited selection of colors. Therefore it was difficult in selecting colors for action buttons/ CTAs and required a lot of iterations until I found the right colors to use while still aligning with the current design of the app.
Prototype & Testing
After creating the high fidelity wireframes for the categorization feature, it was time to test it in order to identify areas of improvement before finalizing the overall design. When testing the prototype, our main goal was determine if the feature was functional. We wanted to know if it made it easier for users to find videos, if categorizing videos was quick and easy, and if navigation within the feature flowed well. Results showed that what needed to be improved on was the discoverability of the action buttons and increasing the surface areas of the tap targets.
Test Objectives:
Identify areas of confusion and frustration when using the feature
Determine whether the feature makes finding videos easier for users
Observe if components are discoverable by users when using the feature
Tasks:
Scenario #1: You just got off work and wanted time to relax and decide to browse Tiktok. You come across a video that you want to reference later
Task #1: Like the video on your FYP and add it directly to a category
Scenario #2: You spent a little over 30 minutes browsing through Tiktok and liked a few videos that you didn’t want to categorize at the time. You want to be able to find them later so you organize your videos before you exit the app.
Task #2: Navigate to your liked videos tab, find the two food videos you liked, and put them into your recipes category.
Scenario #3: It’s spring time! You want to repot your plants and remember you came across a video on Tiktok that you liked so you can reference it later.
Task #3: Navigate to your liked videos tab and find a video on repotting plants.
Scenario #4: You realized you mistakenly put a video into the wrong category and want to move it to the correct one so it’ll be easy for you to find later when you want to reference it.
Task #4: Navigate to your plants category, find the video with the content of how the user decorated their room with hanging plants and move it to your room inspo category.
Results:
5 out of 5 of participants expressed concerns in the visibility of the “select” button
3 out of 5 tasks showed difficulty in determining how to select videos
All participants stated the feature made it easier to find videos
A lot of confusion came from user error due to being unfamiliar with the feature but as users did more tasks, they became more comfortable navigating through the feature
Affinity Map
After collecting the results from usability testing, the data was then organized into an affinity map so that I can visually see where the feature succeeded, where it can be improved, and points to consider when making the final revisions. Having the information visually laid out in an affinity map showed that the categorization feature for Tiktok was heading in the right direction as seen through having more success points versus improvement points.
UI Kit
Once all the designs for the categorization feature was finalized and to ensure consistency within the designs of this feature, a UI kit was created. This UI kit will make the design process for any additional screens easier since any designer or myself can reference this document to access all the components used rather than spending time replicating them.
Closing Thoughts
It was definitely a different experience designing a feature for an existing product versus designing a product from scratch. There are already existing guidelines that you have to abide to as you design rather than having free range in what you want to do. I did find it difficult working with a limited color palette especially when it came to action buttons and CTAs. However it was because of that I learned that simple and neutral works. At the end of the process I still found it quite enjoyable because I was designing a feature for a product I personally use.