TikTok Redesign

Introduction

TikTok is a widely-used social media app that enables users to create and share short videos with music, filters, and various creative features. This platform has been criticized by many users for its insufficient content moderation and blocking features, resulting in a time-intensive content discovery experience, which ultimately leads to estimated 32% loss of new users.

This project aims to enhance user retention by 30% through revamping the onboarding processes and optimizing the interest customization features.

My Role

UI/UX Design
Design System

Tool

Figma

Scope

Mobile App Design

Problem

Due to unclear blocking features and insufficient content moderation and customization options, new users are compelled to spend an excessive amount of time in swiping content and lost interest in TikTok.

Goals

1. Improve new user retention and viscosity
2. Improve feature navigations
3. Improve customization options

Solution

Create a more intuitive and effective feature onboarding process and improve the customization options to enable changes that align with topics, themes, and individual preferences at any time.

Understanding User Needs

Initial Research

In order to gain a general understanding of user feedback and experience of TikTok, I  collected and analyzed data from observation, interview, and online reviews and surveys.

Most users revealed frustrations with auto-play, features navigation, and content search.

TikTok Unique Value

Following the collection and analysis of user data from primary research, I conducted a competitor analysis to identify the strengths and unique value of TikTok compared to other short video sharing platforms in the market. TikTok is a short video sharing platform that encourages user creativity and engagement.

Identifying Opportunities

To gain a more comprehensive understanding of the users' painpoints and emotional touchpoints, I created a user journey map and identified the following key opportunities to improve the user experience:
1. develop a more intuitive onboarding process
2. add content filters and link to user profile
3. add stop autoplay function 

Redesigning and Prototyping
Low-Fidelity Wireframe

Ideating Key Features

Based on the research findings, I created a feature prioritization matrix to identify the key areas for the redesign. Following this strategic planning, I developed a low-fidelity wireframe to effectively map out an onboarding process that aligns closely with the needs of our users.

Annotated Mid-Fidelity Wireframe

Designing Onboarding User Flow

I developed an annotated mid-fidelity wireframe to better illustrate the entire onboarding user flow.

User Testing

Iterating Design Based on User Feedback

I conducted 10 user testings in total to gather user insights regarding the onboarding process and feature navigations.

Key Insight 1:  Use the hand icon and gestures instead of arrow to better demonstrate the actions
Key Insight 2:  Integrate a search bar to enable users to easily find topics of interest

Main Features

1. Press to Find Block Feature

To assist new users in discovering the block content feature, the onboarding process includes a guide that instructs them to press and hold to reveal a hidden menu for blocking unwanted video content.

2. Select Topic of Interests

The onboarding process include incorporates a feature for selecting interests, making it easier for new users to quickly discover video content that matches their preferences.

3. Reselect Topic of Interests

Linking the interest reelection feature to the user profile allows users to update their interest at any time, which makes it easy for users to keep their content preferences up to date, ensuring a more tailored and dynamic browsing experience.

4. Tap to Unmute Video

This feature enhances user control, allowing viewers to choose when to activate sound for videos. This design respects user preference and environmental context, enabling a seamless transition from silent browsing to engaged listening.

Full Prototype Walk-Through

Design System