[TIMELINE]
APRIL 2024 - PRESENT
[ROLE]
[TEAM]
context
TikTok’s web platform represents a huge growth opportunity, especially in the US and EU, but hadn’t been updated for over two years, becoming a patchwork of features from different business lines without a clear direction. Our team set out to revamp the entire site, creating a cohesive experience through a new component library that prioritized usability and brand integrity. As the point of contact for this high-visibility project, I led collaboration across multiple teams to ensure seamless execution.
[CONTEXT]
more context on
why we worked on this project
👥 For users
The current website experience feels outdated and lacks usability, making it difficult for users to navigate seamlessly, often leading to frustration.
💼 For business
The pace and quality of our design efforts lag behind competitors, which negatively affects overall market positioning and performance metrics.
👬 For internal teams
Without a cohesive design system and proper workflows, PM, design and engineering teams struggled with efficiency.
users
We first started by gathering more information about our desktop users, such as their age groups and the specific scenarios in which they preferred using desktops. This helped us understand the broader context of their usage, enabling us to tailor our design approach to meet their unique needs and preferences. Below are some insights about our users from a recent study with web users.
problems
We collaborated closely with researchers and data scientists to deeply understand user pain points, pulling key actionable insights from user behavior data. This collaboration allowed us to identify critical friction points and areas for improvement. In addition, I partnered with another designer to conduct an in-depth design audit for each page of the site, systematically categorizing problems (120+) by component, type, and priority. This audit helped us identify inconsistencies and prioritize components that needed the most attention, ensuring the redesign addressed both usability and design integrity.
what were the people problems
backed by user research and behavior data?
1
Users felt less immersed in the content than they do on mobile.
Users experienced issues that prevent them from having an immersive experience like they do on the native app.
2
Users struggled to find content they liked.
The web experience didn’t effectively surface personalized or engaging content, making it harder for users to discover videos they enjoyed.
3
Users found it difficult to navigate and engage with content.
The lack of a clear visual hierarchy made it hard for users to know where to focus their attention, leading to reduced interaction with key features.
[problems]
what are the key issues
found from the design audit?
1
Mobile-first components, inconsistent visual and interaction design
The original web experience relied heavily on mobile components, which led to key issues in sizing, states, and usability that weren’t optimized for desktop. This inconsistency made key elements less functional and visually off on web platforms.
2
Visual clutter, not prioritizing content
The original design lacked a clear structure for prioritizing content, making it difficult for users to engage with what mattered most. This misalignment failed to reflect TikTok’s core value proposition of showcasing engaging, entertaining content front and center, ultimately weakening the user experience and brand consistency.
3
Lack of a standardized video experience
There were three different video players across key pages (For You, Browser mode, SEO page), each with its own layout, creating confusion for users who encountered inconsistent interactions and designs.
4
Inefficient navigation
The interface was cluttered with excessive visual elements that overwhelmed users and detracted from the core content. For example, clunky navigation contributed to this problem by adding redundant pages and distracting visual elements like suggested accounts, banners, etc.
5
Poor responsiveness
The lack of a proper grid system and consideration for responsiveness meant that elements were abruptly cut off at various breakpoints. Common screen sizes weren’t accounted for, and video grid pages had inconsistent layouts, with different styles for preview cards across the site.
ideating
After thoroughly analyzing the problem space, we established clear design goals and began by focusing on the most critical pages to tackle pressing issues. Once we had a rough draft of our vision, we prioritized the necessary components, identifying those that needed to be created or revised. This process involved extensive collaboration with multiple teams to ensure alignment and to refine the components effectively.
How might we
Create a unique experience that caters to web-specific scenarios like multitasking, while maintaining a seamless,
user-centered approach?
keywords that guided our design
1
Immersive
The redesign prioritizes an immersive experience by minimizing distractions. Use subtle visual cues to enhance user engagement and encourage deeper immersion in the videos.
2
Content-first
The redesign puts video content front and center. This "content-first" approach emphasizes TikTok's core value: providing engaging and entertaining video content.
3
Seamless
The redesign ensures seamless transitions and content discovery, allowing users to effortlessly browse, watch, and interact with videos. Smooth animations and intuitive navigation keep users engaged within the flow of their experience, reducing friction.
4
Efficient
The redesign prioritizes efficiency by streamlining interactions and providing quick access to essential features. The integrated video details panel, playful interaction slideshow, and global search with keyboard shortcuts all contribute to a more efficient and intuitive user experience.
validating
We collaborated closely with the TikTok Design System team to define which components should be created new or expanded using existing components. The Web redesign team was responsible for creating new web-specific components and the Design System team focused on making the existing components flexible to use in web. We developed 2-3 variants to test their impact, ensuring we didn’t negatively affect key performance metrics. We also structured the components to be easily modifiable for quick updates and seamless A/B testing. By leveraging Figma’s components and properties features, we made the design as flexible and scalable as possible.
refining
After completing the component work, we collaborated closely with the PM team to redesign all key pages. Together, we developed a phased roadmap that introduced the new design incrementally. This approach allowed for smoother integration while addressing the most critical user needs first.
Disclaimer: The design below isn't the current version; updates and redesigns are still in progress as we continue A/B testing.
For You Page
before
After
Global Navigation
before
After
Immersive Player
before
After
Explore
before
After
Profile
before
After
Grid System
New
New Web Components
New
Monica Jeon 2025