Movie Community
Movie Community
By leading the redesign of the detail page, I optimized information hierarchy and browsing flow, which enhanced clarity and boosted purchase intent.
By leading the redesign of the detail page, I optimized information hierarchy and browsing flow, which enhanced clarity and boosted purchase intent.
Type:
Type:
Layout & Hierarchy
Layout & Hierarchy
Tools:
Tools:
Figma,Photoshop
Figma,Photoshop
Date:
Date:
Nov 2022-Jan 2023
Nov 2022-Jan 2023
Preview
Preview
https://m.bilibili.com/bangumi
https://m.bilibili.com/bangumi
Overview
It is a community where bilibili movie fans share their taste in films, recorde their opinions about movies, build their film lists, or simply keep track of every film they watched.
It is a community where bilibili movie fans share their taste in films, recorde their opinions about movies, build their film lists, or simply keep track of every film they watched.
Objective
Design Optimisation: Refined the existing page layout and interface to enhance usability and overall user experience.
Design Optimisation: Refined the existing page layout and interface to enhance usability and overall user experience.
Design Optimisation: Refined the existing page layout and interface to enhance usability and overall user experience.
Feature Enhancement: Implement new community-focused features to increase user engagement and platform retention.
Feature Enhancement: Implement new community-focused features to increase user engagement and platform retention.
Feature Enhancement: Implement new community-focused features to increase user engagement and platform retention.
Research Insights
The Movie Community Page hard to navigate, engage with, and personalize
The Movie Community Page hard to navigate, engage with, and personalize
I ran interviews and a short survey to identify pain points. Findings highlighted navigation friction, low content engagement, and missing tracking features, guiding improvements to layout, creator visibility, and personalization tools.
I ran interviews and a short survey to identify pain points. Findings highlighted navigation friction, low content engagement, and missing tracking features, guiding improvements to layout, creator visibility, and personalization tools.
Competitive Analysis
To inform my design decisions, I analyzed competitors and found they rely on dark poster visuals, point-based layouts, and prominent CTAs to guide users. These patterns revealed a clear opportunity to refine hierarchy and create a more engaging, intuitive review experience in my redesign.
To inform my design decisions, I analyzed competitors and found they rely on dark poster visuals, point-based layouts, and prominent CTAs to guide users. These patterns revealed a clear opportunity to refine hierarchy and create a more engaging, intuitive review experience in my redesign.
Design Strategy
Research and competitive analysis highlighted key issues in the detail page: cluttered layouts, low engagement, and weak sharing incentives. To address these, I set three design goals:
Research and competitive analysis highlighted key issues in the detail page: cluttered layouts, low engagement, and weak sharing incentives. To address these, I set three design goals:
Research and competitive analysis highlighted key issues in the detail page: cluttered layouts, low engagement, and weak sharing incentives. To address these, I set three design goals:
Streamline browsing: simplify hierarchy and reduce cognitive load.
Streamline browsing: simplify hierarchy and reduce cognitive load.
Streamline browsing: simplify hierarchy and reduce cognitive load.
Boost participation: add habit-forming features that motivate repeat use.
Boost participation: add habit-forming features that motivate repeat use.
Boost participation: add habit-forming features that motivate repeat use.
Enhance shareability: design stronger visuals that encourage viral spread.
Enhance shareability: design stronger visuals that encourage viral spread.
Enhance shareability: design stronger visuals that encourage viral spread.
Solution 1
Upgraded browsing experience
Hierarchy Simplification
Hierarchy Simplification
I reorganised the page structure by conducting modular analysis. Non-essential information was moved to secondary pages, allowing the main interface to highlight core functions and decision-critical content—streamlining the user journey.
I reorganised the page structure by conducting modular analysis. Non-essential information was moved to secondary pages, allowing the main interface to highlight core functions and decision-critical content—streamlining the user journey.
Layout Optimization
Layout Optimization
I explored multiple structural approaches to simplify the information hierarchy and improve clarity—testing different content groupings, layout flows, and visual emphasis. Through continuous iteration and collaboration with the product team, we landed on a streamlined design that surfaces key features and relevant content up front.
I explored multiple structural approaches to simplify the information hierarchy and improve clarity—testing different content groupings, layout flows, and visual emphasis. Through continuous iteration and collaboration with the product team, we landed on a streamlined design that surfaces key features and relevant content up front.
Visual Consistency
Visual Consistency
To create a more cohesive and polished experience, I standardised key design elements and reduced visual clutter, making the page easier to scan and more visually harmonious.
To create a more cohesive and polished experience, I standardised key design elements and reduced visual clutter, making the page easier to scan and more visually harmonious.
To create a more cohesive and polished experience, I standardised key design elements and reduced visual clutter, making the page easier to scan and more visually harmonious.
This included:
· Unifying color styles for consistent visual identity
· Refining the layout of long review modules
· Enhancing the typographic hierarchy for improved readability
This included:
· Unifying color styles for consistent visual identity
· Refining the layout of long review modules
· Enhancing the typographic hierarchy for improved readability
This included:
· Unifying color styles for consistent visual identity
· Refining the layout of long review modules
· Enhancing the typographic hierarchy for improved readability
Solution 2
Check-In Feature for Habit Formation
To address the issue of low visibility and deep entry points, I introduced a new “Check-In” feature that encourages users to log their viewing activity. The goal was to build daily habits and strengthen community engagement by making the action more accessible, motivating, and rewarding. Given the content-driven nature of the platform, I asked:
To address the issue of low visibility and deep entry points, I introduced a new “Check-In” feature that encourages users to log their viewing activity. The goal was to build daily habits and strengthen community engagement by making the action more accessible, motivating, and rewarding. Given the content-driven nature of the platform, I asked:
The Challenge
How might we motivate users to check in consistently and form daily habits?
How might we motivate users to check in consistently and form daily habits?
To explore this, I adopted the Fogg Behavior Model (FBM) as a framework, focusing on three core elements
To explore this, I adopted the Fogg Behavior Model (FBM) as a framework, focusing on three core elements
Motivation: Redesigned the page
Motivation: Redesigned the page
I updated the community detail page to encourage habitual use by:
I updated the community detail page to encourage habitual use by:
I updated the community detail page to encourage habitual use by:
Replacing the “Bookmarks” tab with a prominent “Check-In” button in the top nav
Adding recommended rankings to support discovery and encourage interaction
Strengthening core CTAs with bold visuals for better visibility and engagement
Replacing the “Bookmarks” tab with a prominent “Check-In” button in the top nav
Adding recommended rankings to support discovery and encourage interaction
Strengthening core CTAs with bold visuals for better visibility and engagement
Replacing the “Bookmarks” tab with a prominent “Check-In” button in the top nav
Adding recommended rankings to support discovery and encourage interaction
Strengthening core CTAs with bold visuals for better visibility and engagement
Ability: Enhanced accessibility
Ability: Enhanced accessibility
To lower the barrier to action, I streamlined the check-in flow with a more intuitive and lightweight interaction design.
To lower the barrier to action, I streamlined the check-in flow with a more intuitive and lightweight interaction design.
Prompt: Trigger Engagement Loops
Prompt: Trigger Engagement Loops
To encourage repeat engagement, I enhanced personal feedback visibility and added a visually-driven history module.
To encourage repeat engagement, I enhanced personal feedback visibility and added a visually-driven history module.
Solution 3
Revamped Share Card Visuals
To drive viral sharing, I redesigned the share cards with a skeuomorphic visual approach—using full-screen movie covers and realistic textures to create emotional appeal. The layout was also reorganized for better readability and visual balance, enhancing both function and form.
To drive viral sharing, I redesigned the share cards with a skeuomorphic visual approach—using full-screen movie covers and realistic textures to create emotional appeal. The layout was also reorganized for better readability and visual balance, enhancing both function and form.
