Bilibili Space
Bilibili Space
Through my design of a scalable system, Bilibili’s Personal Space achieved greater visual consistency and improved cross-platform design efficiency.
Through my design of a scalable system, Bilibili’s Personal Space achieved greater visual consistency and improved cross-platform design efficiency.
Type:
Type:
Design System & Components
Design System & Components
Tools:
Tools:
Figma,Wecom Excel
Figma,Wecom Excel
Date:
Date:
May-Jun 2024
May-Jun 2024
Preview
Preview
https://space.bilibili.com
https://space.bilibili.com
Overview
To address Space’s aging UI, I restructured the design system with a scalable component library. This updated system maintains visual consistency across Bilibili products and supports future modular expansion.
To address Space’s aging UI, I restructured the design system with a scalable component library. This updated system maintains visual consistency across Bilibili products and supports future modular expansion.
The Results
70%
70%
components standardized
25%
25%
faster design iterations
50+
50+
components documented
Design Alignment
Diverse components cause visual misalignment and friction
Diverse components cause visual misalignment and friction
The homepage set a new design benchmark. To handle the complexity of Personal Space, I expanded the system with patterns that enabled richer interactions while maintaining visual harmony.
The homepage set a new design benchmark. To handle the complexity of Personal Space, I expanded the system with patterns that enabled richer interactions while maintaining visual harmony.
Design Audit
Before the redesign, a full audit with the product team highlighted key UX pain points and user feedback.The Space page was visually outdated and inconsistent with other Bilibili interfaces. I proposed a visual refresh and revamped design system to improve usability and streamline future design work.
Before the redesign, a full audit with the product team highlighted key UX pain points and user feedback.The Space page was visually outdated and inconsistent with other Bilibili interfaces. I proposed a visual refresh and revamped design system to improve usability and streamline future design work.
Design Alignment
Diverse components cause visual misalignment and friction
Diverse components cause visual misalignment and friction
The homepage set a new design benchmark. To handle the complexity of Personal Space, I expanded the system with patterns that enabled richer interactions while maintaining visual harmony.
The homepage set a new design benchmark. To handle the complexity of Personal Space, I expanded the system with patterns that enabled richer interactions while maintaining visual harmony.
Design Strategy
These issues revealed deeper problems in the underlying design system, prompting us to rethink how we could create a more unified, intuitive, and scalable experience.
These issues revealed deeper problems in the underlying design system, prompting us to rethink how we could create a more unified, intuitive, and scalable experience.
Inconsistency
Inconsistency
The Space page looked dated, which made the experience feel fragmented and out of sync with the rest of the site.
Poor Usability
Poor Usability
Outdated icons and clunky interaction flows got in the way of smooth navigation, making it harder for users to move.
Low Efficiency
Low Efficiency
Inconsistent flows and repeated components disrupted the page, turning browsing into a slow and tiring task.
Design Principles
North Star Design Principles
North Star Design Principles
To address fragmentation and inefficiencies in the Space page design system, we adopted the North Star Design Principles—focusing on clarity, consistency, and efficiency—as our guiding framework.
To address fragmentation and inefficiencies in the Space page design system, we adopted the North Star Design Principles—focusing on clarity, consistency, and efficiency—as our guiding framework.
Brand Consistency
Brand Consistency
Defined a unified design language system, and aligned with the updated homepage and overall product ecosystem.
Visual Simplify
Visual Simplify
Reduce visual noise and streamline UI elements to improve readability, visual hierarchy, and consistency across pages.
Improved Usability
Improved Usability
Refined components to ensure interactions are intuitive, clear, straightforward, accessible, and efficient.
Brand Consistency
Refined the Color Guidelines
Refined the Color Guidelines
I refined and streamlined the existing color palette, centering it around Bilibili’s signature blue. The updated color system ensures visual consistency with the homepage while reinforcing the overall brand tone.
I refined and streamlined the existing color palette, centering it around Bilibili’s signature blue. The updated color system ensures visual consistency with the homepage while reinforcing the overall brand tone.
Updated icon styles
Updated icon styles
To align with the design system and enhance visual consistency, I standardised the icon styles by adopting a unified monochrome linear set. This reduced visual clutter, reinforced the brand tone, and helped users focus on key functions.
To align with the design system and enhance visual consistency, I standardised the icon styles by adopting a unified monochrome linear set. This reduced visual clutter, reinforced the brand tone, and helped users focus on key functions.
Optimized Typography Hierarchy
Optimized Typography Hierarchy
I refined the typography scale creating a clearer hierarchy and improving content scannability. This adjustment better aligned the Personal Space page with the design system’s type standards and enhanced overall readability.
I refined the typography scale creating a clearer hierarchy and improving content scannability. This adjustment better aligned the Personal Space page with the design system’s type standards and enhanced overall readability.
Visual Simplicity
Visual Simplicity
To achieve a cleaner and more modern look, I replaced the grey background blocks with a full-width white layout and used subtle divider lines to separate sections. This simplification reduced visual noise and aligned the page with the design system’s minimal aesthetic.
To achieve a cleaner and more modern look, I replaced the grey background blocks with a full-width white layout and used subtle divider lines to separate sections. This simplification reduced visual noise and aligned the page with the design system’s minimal aesthetic.
Refined the Color Guidelines
Unified filter styles
Unified filter styles
As part of aligning with the design system, I unified inconsistent filter styles by adopting a flat layout for simpler scenarios. This improved visual consistency and helped users interact with familiar patterns across the product.
As part of aligning with the design system, I unified inconsistent filter styles by adopting a flat layout for simpler scenarios. This improved visual consistency and helped users interact with familiar patterns across the product.
Optimized sidebar interactions
Optimized sidebar interactions
I optimized the sidebar interactions to reduce cognitive load, improve navigation efficiency, and enhance the overall browsing experience through structural and behavioral refinements.
I optimized the sidebar interactions to reduce cognitive load, improve navigation efficiency, and enhance the overall browsing experience through structural and behavioral refinements.
Updated Website Design System
To support the team better, I refined the documentation—including usage guidelines and component previews—to help new team members onboard quickly and implement the system effectively.
To support the team better, I refined the documentation—including usage guidelines and component previews—to help new team members onboard quickly and implement the system effectively.
