Project Overview 👋
During my internship, I conducted a design audit across 3 platforms. The analysis revealed that Lighthouse - a risk management tool used by TikTok’s moderation teams to review content and assess potential risks - had the most significant room for improvement.
Given its impact and the audit findings, I selected Lighthouse as the focus for deeper design exploration. To align with timeline constraints and decouple from immediate business dependencies, I identified the media information card as a high-impact, feasible area for improvement and began redesigning it to enhance clarity, usability, and visual hierarchy.
My contribution
I took full ownership of the redesign, from identifying the opportunity to delivering refined solutions. To build a strong foundation, I proactively collaborated across teams to gather context, shadowed senior designers to understand workflow nuances, and audited the semi-complete design system to uncover detailed consistency issues. I then led the prototyping process, proposed targeted improvements, and iterated based on stakeholder feedback, ensuring the final solution was both user-centered and feasible for implementation.
Timeline
2 months
Jun- Aug 2023
Team
Product Manager
Product designer
Dev Team
Content moderation Team
My Role
Product Designer
Tool
Figma
FigJam
Feishu
Solution
To improve usability and consistency, I led the redesign of the core information card used in Lighthouse’s search result page. The original design was cluttered, inconsistent across media types, and difficult for assessors to navigate efficiently. My solution focused on streamlining content presentation, enhancing interactions, and creating a unified framework.
Key improvements included:
Content organization: Restructured the card layout by prioritizing essential information, grouping related elements, and aligning with natural reading patterns to improve clarity and usability and reduce cognitive load.
Interaction design: Enhanced interaction flows to support faster decision-making and smoother task execution.
Design scalability: Developed a flexible framework that applies across different media types (video, audio, photo posts, etc.), ensuring a consistent and scalable experience.
Timeline
Context
What’s Lighthouse?
Lighthouse is an internal platform used by TikTok’s moderation team to review media content, assess potential risks, and take action to ensure platform safety and policy compliance. Given the high volume of content assessors need to process, it’s crucial that information is presented in a way that supports quick scanning and efficient decision-making.
Why I chose this direction?
To streamline the process, media information is organized into cards displayed in a list format - making these cards the primary container for content review. As such, the effectiveness of the information card design plays a critical role in the overall usability and efficiency of the platform. Recognizing this, I chose the design of the information card as the core challenge for this project.
1. Problem Identification
Issue #1:
Unstructured and Inconsistent Information Layout
Information within and across cards is often repetitive, inconsistently prioritized, and poorly grouped. This lack of clear hierarchy and structure creates visual clutter, disrupts reading flow, and makes it difficult for users to quickly locate and act on key details.
Issue #2:
Inefficient and Inconsistent Interaction Design
The interface suffers from overused popovers, mismatched components, and inconsistent interactions across card types. These issues disrupt user flow, create confusion, and affect the review process.
Issue #3:
Content Accuracy and Consistency Issues
Incorrect or unclear information, along with inconsistent copywriting, leads to confusion and slows down decision-making by forcing users to repeatedly interpret similar content in different ways.
2. Analysis & Design
Problem Synthesize
Based on the three main problem areas identified, I developed targeted solution directions and synthesized them into four key design principles to guide the rest of the design process.
1️⃣ How to reprioritize all the information?
After identifying key usability issues, I conducted a thorough analysis of all types of information cards. I focused on the video card - one of the most complex and information-dense examples - as a representative case.
I mapped out all the data points displayed and reorganized them by relevance and usage priority. This helped establish a clearer information hierarchy, distinguishing between primary content (e.g., media details and status), secondary information (e.g., user details), and tertiary metadata.
Principle #1:
Prioritize and Group Information Logically
2️⃣ How to organize & group the information?
Idea 1
Content-Based Grouping & Prioritization
Group related information and prioritize it based on its relevance to the core media content, ensuring a more logical and user-friendly structure.
Idea 2
Interaction-Based Grouping
Organize information based on how users interact with it, allowing for more intuitive navigation and smoother task flows.
How to optimize the presentation of information？
Enhanced Readability through Alignment & Visual Aids
Improve clarity by aligning text consistently and incorporating visual cues such as spacing, dividers, background colors - making content easier to scan and digest at a glance.
Principle #2:
Communicate Clearly and Accurately
How to make card-level interactions more intuitive and seamless?
1. Streamline the Navigation
Enabling direct access to the detail page through a clickable hotspot simplifies one of the most frequent actions, making the overall experience faster and more efficient.
2. Prioritizing Key Actions with Integrated Interaction
To streamline handling process, I replaced the standard modal with a context-aware floating panel positioned near the relevant content. This design surfaces key actions in context, enabling quicker decisions.
Also, the design reduce redundancy by combining status display and interaction in a single element.
Principle #3:
Enable Intuitive and Efficient Interactions
How to keep the consistency across different types of cards?
To create a unified experience, all cards follow a shared structural template that aligns with the user’s natural reading flow - from top to bottom and left to right.
Information is organized into clearly defined sections with descending priority, ensuring consistency in both content structure and interaction across media types.
The layout includes:
Action Area (Top):
Displays handling-related actions or statuses (e.g., review status), ensuring high visibility for key decision points.Media Section (if applicable):
Shows the primary media content (e.g., video, image), placed prominently to support contextual understanding.Process Indicators:
Includes labels related to the moderation or review process.Primary Information:
Core content directly related to the media (e.g., video ID, creation time, region), always positioned consistently.Secondary Information:
Additional but important context such as user identity and profile data.Tertiary Information:
Other supporting content related to the media but lower in review priority (e.g., Q&A type, ad status).
Don’t forget about accessibility
To support a wider range of users, I incorporated shape-based indicators alongside color and text in key labels. This ensures that critical information can be quickly identified through multiple visual cues, improving accessibility for users with different abilities and visual preferences.
Principle #4:
Ensure Interaction and Visual Consistency
3. Testing (Next step) & Finalizing
Due to the limited timeframe of my internship, I wasn’t able to bring this project through full implementation. However, I outlined a clear next-step plan to guide further development and ensure continuity:
Next Step Plan
1️⃣ Conduct user testing to evaluate two alternative approaches to information presentation:
Idea 1: Content-Based Grouping & Prioritization
Idea 2: Interaction-Based Grouping
Testing Goals
Readability: Which structure makes it easier to scan and understand information at a glance?
Task flow: Which layout better supports common review tasks (e.g. flagging content, verifying identity)?
Efficiency: Which option reduces time-to-decision and minimizes cognitive effort?
Preference: What do moderators perceive as more intuitive or helpful in their daily workflow?
2️⃣ Cross-Functional Collaboration & Design Guideline Development
To ensure the proposed framework is scalable and grounded in real-world needs, I outlined a collaboration plan with product, engineering, and moderation teams. This involved aligning on business priorities, understanding data constraints, and gathering insights from actual moderation workflows.
Based on this input, I proposed mapping content types into the new layout by priority and developing a design guideline to formalize consistent patterns for structure, hierarchy, and edge cases. This guideline would act as a shared foundation to support consistent, scalable implementation across teams.
3️⃣ Define Measurable Success Criteria
To evaluate the impact of the redesigned cards, I proposed the following key metrics:
Design System Integration
To ensure a smooth handoff and maintain consistency across the platform, I documented detailed design specifications for the information card component. I referenced the existing Semi Design System to align typography, color, spacing, padding, and component behaviors with current design standards. Where necessary, I adapted or extended existing tokens to accommodate the specific needs of the card layout while staying within the system’s visual and structural language.
This not only streamlined communication with developers during implementation but also ensured scalability and consistency across future card variations.
Font & Color
Padding & Spacing
What I Learned ?
Design as a system-level solutions
I learned to think beyond visuals and focus on how design impacts workflows, operational efficiency, and business outcomes.
Designing Scalable Solutions
I learned to think beyond individual screens and focus on building reusable structures and frameworks that can scale across workflows and future use cases.
Cross-Functional Communication
I gained valuable experience collaborating with PMs, engineers, and end users, learning how to translate design ideas into actionable, aligned solutions across disciplines.
Proactive Ownership
I learned to identify opportunities, take initiative, and build momentum around a problem space, even when operating within a fast-paced, time-limited internship setting.
Last but not the least !
I’m so thankful to the Platform Design team for being incredibly supportive and welcoming throughout my internship at TikTok. From designers to PMs and engineers - everyone was open to sharing knowledge, and always willing to help me make sense of complex challenges.
Because of that support, I felt encouraged to step outside my comfort zone, ask better questions, and grow both as a designer and a teammate. This experience really showed me how powerful design can be when it’s backed by a thoughtful, collaborative team. I’m truly grateful to have been part of it, and I hope our paths cross again soon! 🩵
