Web Feed
Web Feed
I redesigned Bilibili’s dynamic feed to deliver a cleaner, more cohesive browsing experience that strengthened engagement and community interaction.
I redesigned Bilibili’s dynamic feed to deliver a cleaner, more cohesive browsing experience that strengthened engagement and community interaction.
Type:
Type:
Layout Redesign & Experience
Layout Redesign & Experience
Tools:
Tools:
Figma, Protopie
Figma, Protopie
Date:
Date:
Feb-Mar 2022
Feb-Mar 2022
Preview
Preview
https://t.bilibili.com
https://t.bilibili.com
Overview
The Bilibili Web Feed is where users follow creators, share updates, and explore community content. However, the page had become outdated, with rigid layouts and old visuals that no longer met user needs. Since the Feed is also a key channel for content distribution, refreshing it was critical. The redesign focused on modernising the look, unifying brand style, and improving browsing and interaction to make the Feed more engaging and efficient.
The Bilibili Web Feed is where users follow creators, share updates, and explore community content. However, the page had become outdated, with rigid layouts and old visuals that no longer met user needs. Since the Feed is also a key channel for content distribution, refreshing it was critical. The redesign focused on modernising the look, unifying brand style, and improving browsing and interaction to make the Feed more engaging and efficient.
The Results
20%
20%
efficiency
12%
12%
duration
25%
25%
DAU uptake
The Problems
Outdated pages lead to inconsistency and poor experiences
Outdated pages lead to inconsistency and poor experiences
Business Problem: Inflexible layouts limit growth. The rigid grid and outdated styling cannot support scalable content or evolving brand identity.
Business Problem: Inflexible layouts limit growth. The rigid grid and outdated styling cannot support scalable content or evolving brand identity.
User Problem: Clunky browsing and interactions. Users face inconsistent module alignment, poor readability, and inefficient task flows.
The Challenge
How might we redesign the Web Feed to to deliver a modern, usable, and brand-consistent experience?
How might we redesign the Web Feed to to deliver a modern, usable, and brand-consistent experience?
Usability Findings
Inconsistent multi-screen experience
Inconsistent multi-screen experience
I began with a design audit to understand the current layout logic of the Web Feed. The page relies on simple proportional scaling, which results in poor layout adaptability across different screen sizes.
I began with a design audit to understand the current layout logic of the Web Feed. The page relies on simple proportional scaling, which results in poor layout adaptability across different screen sizes.
Layout Adaptation Exploration
Homepage grid was not suitable for Feed content
Homepage grid was not suitable for Feed content
Given the challenge of limited time and resources, my first approach was to reuse the grid system from Bilibili’s homepage, which had proven effective for responsive layouts. However, the results on the Web Feed were not ideal.
Given the challenge of limited time and resources, my first approach was to reuse the grid system from Bilibili’s homepage, which had proven effective for responsive layouts. However, the results on the Web Feed were not ideal.
Competitive insights
After analysing comparable products and other Bilibili web pages, I found that layout effectiveness depends on the content type. For feeds with a lot of text, adapting to different screen sizes requires controlling the content width and adding more breakpoints.
After analysing comparable products and other Bilibili web pages, I found that layout effectiveness depends on the content type. For feeds with a lot of text, adapting to different screen sizes requires controlling the content width and adding more breakpoints.
Design Strategy
Establish a Responsive Grid
Establish a Responsive Grid
I redesigned the feed’s grid system by defining screen widths and setting three key breakpoints. This ensured smoother adaptation across devices and brought more consistency and order to the overall layout.
I redesigned the feed’s grid system by defining screen widths and setting three key breakpoints. This ensured smoother adaptation across devices and brought more consistency and order to the overall layout.
Streamline the Visual Experience
Streamline the Visual Experience
The feed’s fragmented alignment and excessive colors created visual noise. Through redesign, module alignment was standardized and the palette simplified, making the interface more cohesive and improving readability.
The feed’s fragmented alignment and excessive colors created visual noise. Through redesign, module alignment was standardized and the palette simplified, making the interface more cohesive and improving readability.
Design Iteration
Enhance Emotional Expression
Enhance Emotional Expression
Based on user feedback and internal discussions, I collaborated with the creative team to enhance background illustrations across the interface. This strengthened the sense of community and enriched the platform’s emotional and brand expression.
Based on user feedback and internal discussions, I collaborated with the creative team to enhance background illustrations across the interface. This strengthened the sense of community and enriched the platform’s emotional and brand expression.