IM Center
IM Center
Collaborating closely with cross-functional teams, I iterated on the IM Center to streamline communication flows and foster stronger user connections.
Collaborating closely with cross-functional teams, I iterated on the IM Center to streamline communication flows and foster stronger user connections.
Type:
Type:
Flows & Messaging
Flows & Messaging
Tools:
Tools:
Figma,AE
Figma,AE
Date:
Date:
Mar-Apr 2024
Mar-Apr 2024
Preview
Preview
https://message.bilibili.com
https://message.bilibili.com
Overview
The Message Center serves as bilibili's bridge between the platform and its users, functioning as a key interaction hub for creators and fans. Through private messages and likes, fans can directly support their favourite creators, while creators gain recognition that motivates continued content production.
The Message Center serves as bilibili's bridge between the platform and its users, functioning as a key interaction hub for creators and fans. Through private messages and likes, fans can directly support their favourite creators, while creators gain recognition that motivates continued content production.
The Problems
Flooded inbox leads to clutter and low engagement
Flooded inbox leads to clutter and low engagement
Users found themselves struggling with an inbox that never felt under control. Notifications arrived endlessly, spam mixed with real conversations, and important messages were buried. Instead of feeling connected, many felt frustrated—and over time, less motivated to come back and engage.
Users found themselves struggling with an inbox that never felt under control. Notifications arrived endlessly, spam mixed with real conversations, and important messages were buried. Instead of feeling connected, many felt frustrated—and over time, less motivated to come back and engage.
📉
📉
Business Pain Points
Business Pain Points
Low retention and weak engagement
Underutilized messaging functions
Missed opportunities to drive community growth
Low retention and weak engagement
Underutilized messaging functions
Missed opportunities to drive community growth
😣
😣
User Pain Points
User Pain Points
Messages were buried under spam
No clear structure or priority guidance
Poor sense of connection or reward from interaction
Messages were buried under spam
No clear structure or priority guidance
Poor sense of connection or reward from interaction
Goals
After aligning with PM and stakeholders, I narrowed the redesign into two primary goals
After aligning with PM and stakeholders, I narrowed the redesign into two primary goals
Make messaging simple, organized, and relevant
Enable meaningful, emotionally rewarding interactions between creators and users
Make messaging simple, organized, and relevant
Enable meaningful, emotionally rewarding interactions between creators and users
Make messaging simple, organized, and relevant
Enable meaningful, emotionally rewarding interactions between creators and users
Design Strategy
Based on these insights, I developed a three-tiered strategy
Based on these insights, I developed a three-tiered strategy
Based on these insights, I developed a three-tiered strategy
Functional Optimization: Restructure information and reduce friction
Functional Optimization: Restructure information and reduce friction
Functional Optimization: Restructure information and reduce friction
Engagement Design: Build incentives and emotional connection
Engagement Design: Build incentives and emotional connection
Engagement Design: Build incentives and emotional connection
Visual Redesign: Improve clarity, hierarchy, and consistency
Visual Redesign: Improve clarity, hierarchy, and consistency
Visual Redesign: Improve clarity, hierarchy, and consistency
Design Execution-For Users
Streamlined Messaging for Clarity and Focus
Streamlined Messaging for Clarity and Focus
Faced with a cluttered inbox and low-value content overload, I focused on improving message hierarchy and cleaning efficiency. I restructured messages into two clear categories—User Interactions and Platform Services—to reduce cognitive friction and improve scanability.
Faced with a cluttered inbox and low-value content overload, I focused on improving message hierarchy and cleaning efficiency. I restructured messages into two clear categories—User Interactions and Platform Services—to reduce cognitive friction and improve scanability.
Design Execution-For Creators
Refined Quick Access for Clarity and Relevance
Refined Quick Access for Clarity and Relevance
Creators needed easier access to important messages and better support for meaningful interactions, shifting the experience from passive alerts to tools that actively help them connect with their audience.
Creators needed easier access to important messages and better support for meaningful interactions, shifting the experience from passive alerts to tools that actively help them connect with their audience.
Deliver More Effective CTA with Action Prompts
Deliver More Effective CTA with Action Prompts
I tested various prompt styles, from homepage summaries to subtle alerts, and chose a lightweight bubble prompt. It highlights important interactions without being disruptive and fits smoothly into the overall UI flow.
I tested various prompt styles, from homepage summaries to subtle alerts, and chose a lightweight bubble prompt. It highlights important interactions without being disruptive and fits smoothly into the overall UI flow.
Design Execution-For Platform
Strengthened Structure and Visual Harmony
Strengthened Structure and Visual Harmony
To help users spot important messages and keep the layout flexible as the platform grows, I reshaped the message center and refined its visuals.
To help users spot important messages and keep the layout flexible as the platform grows, I reshaped the message center and refined its visuals.
