Web & mobile UI UX Design, SEO
TikTok
2025.5-2025.8
Year
2025
Team
TikTok
User Growth
Role
User Research
Prompt Engineer
AI Product Design
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.
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.
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
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.