Year
2025
Team
TikTok
User Growth
Role
Product Design
UIUX Design
Data Analysis
Overview
During my internship experience at TikTok, I designed a new, templated landing page experience for TikTokโs top search topics (like Music, Sports, drama) to improve search engine visibility, increase click-through rates (CTR) from organic search, and contribute to user growth (DAU/LT).
Problem
TikTokโs content appears in a uniform and unappealing way on search engine results pages (SERPs) such as Google. As a result, we are missing out on substantial free traffic from SEO and limiting opportunities for potential user discovery and conversion.
Research
TikTok SEO users can be categorized into three types:
Exploratory (35%)
Searching queries like โWhat is TikTokโ or โHow to use TikTokโ: they need to understand the productโs value.
Action-oriented (45%)
Queries like โDownload TikTokโ or โTikTok app downloadโ: theyโve already decided to use the app and are looking for a fast track.
Content-focused (20%)
Searches such as โTikTok funny videosโ or โTikTok trendingโ: they want to watch specific types of content.
Competitors like YouTube and Instagram are already pursuing content verticalization, offering category-specific destinations such as YouTube Music and YouTube Sports. However, most of their landing pages remain static.
We identified a unique opportunity for TikTok:
Leverage TikTokโs real-time content ecosystem and recommendation strength to create dynamic content preview pages.
This allows users to see live, trending content directly on the search landing pageโsomething static competitors cannot offer.
I conducted analysis of user intent for 100 keywords and dissection of SEO strategies for competing products.
From analyzing the highest-intent search queries, we identified three dominant content categories users search for around TikTok:
Music-related content (trending music, Taylor Swift)
Sports content (sports highlights, NBA)
Viral topics (trends, challenges)
By creating a dedicated template for each topic category, we can aim an effective balance between scalability and personalization to ensure consistent structure while tailoring the experience to each content type.
Design Strategy
Based on this strategy, I first defined the three primary goals of the page:
Capture attention within the first 3 seconds through dynamic previews and strong visual anchors.
Help users quickly find content they care about via clear hierarchy and scannable layout.
Drive interaction and conversionโencouraging users to click into a video or continue into the app.
With these goals in mind, I designed a set of core modules to support the overall experience.
Old Architecture (Before):
A long linear content stack that forces users to keep scrolling
All information is presented with equal weight, lacking hierarchy or clear entry points
No ability to tailor the layout based on search intent or content type
New Architecture (After):
A modular, scannable layout that allows users to quickly identify relevant sections
Each module (e.g., video feed, keyword groups, creator highlights) can be independently optimized or A/B tested
Enables a flexible system where different topics can reuse and remix modules, supporting both scalability and customization
Insights
The Hero Hook
The top hero session must feature an auto-playing highlight reel or trending video to immediately engage users visually like Youtube.
Structured for Scannability and Clear Information Hierarchy
Clear information hierarchy and precise categorization (Top Videos, Related Creators, Latest Clips) are critical for building trust and reducing bounce rates.
Design Prcesses
Sketch
I first sketched some potential layouts that can be developed further.
Solution
Theme Variation
Based on the unique traits of each topic, the new design template restructures the header, hero, and supporting information to deliver more relevant content and better attract users.
Web UI vs. Mobile UI
For Web UI, designed layouts optimized for wider screens, incorporating left/right sections and multi-column structures to organize video cards, related keywords, trending topics, and creators. This maximizes information density and enhances search efficiency.
For Mobile UI, redesigned the template beyond the traditional grid system by refining card headers and introducing a dual-column video card format, improving accessibility and overall usability for on-the-go viewing.
Information Hierarchy
Based on different topics, the redesigned template selectively curates and presents information to highlight each topicโs unique traits. This helps both users and search engines identify relevant content more efficiently and understand distinctions across topics.
Componentalize
For future use, the new template modularizes reusable sections, allowing them to be remixed, redesigned, and adapted to different information categories for smoother front-end development.
Before vs. After
Retrospective
Growth Design in Practice
I learned how to translate a broad business goal (improve SEO) into a concrete, user-centric design strategy.
Multi-team Collaboration
I collaborated with other design teams and come up with a design that follows TikTok design guidelines (web and mobile end). Realized the importance of considering development availability and other cross-functional affairs.
Data-Informed Design
I gained hands-on experience collaborating with product managers and data scientists to define success metrics (CTR, DAU) and structure A/B tests to validate design hypotheses.
Yimeng Yao
2025
Made with Love