Recording Page Sidebar Redesign

Background

The current recording page editor in our product has an inconsistency issue with the left sidebar design. While the overall recording page editor looks great and maintains consistency across the platform, the sidebar stands out as problematic for several reasons:

Current Issues:

  • Icons in the sidebar have inconsistent weights, making them appear visually unbalanced

  • The sidebar design is not consistent with icons used across other Neeto products

  • The current structure (icon with text below) is not used anywhere else in the Neeto ecosystem

  • Overall lack of design consistency compared to other product components

Proposed Solutions

Solution 1: Fixed Sidebar

Description: Implement a traditional fixed sidebar with icons positioned to the left and text labels to the right of each icon. This approach extends the current sidebar to accommodate text labels alongside the redesigned icons.

Advantages:

  • Highest consistency with standard UI patterns across the industry

  • Easiest to implement from an engineering perspective

  • Clear navigation with always-visible text labels

  • Professional appearance that aligns with Neeto branding standards

  • Predictable user experience with familiar navigation patterns

Disadvantages:

  • Requires dimension adjustments to accommodate the wider sidebar

  • Video player size reduction needed for transcript, chapters, CTA, and leads pages

  • Layout constraints may affect content organization on some pages

Solution 2: Auto-Close Sidebar

Description: Implement a dynamic sidebar that expands to show text labels only on the basic info page and collapses to icon-only view when navigating to other sections (transcript, chapters, CTAs, etc.).

Advantages:

  • Maintains larger video player on most pages except basic info

  • Space efficiency by showing full labels only when on the basic info page

  • Adaptive interface that adjusts based on current page context

Disadvantages:

  • Poor user experience for navigation clarity

  • Requires memorization of icon meanings when in collapsed state

  • Inconsistent behavior across different pages

  • User confusion about available actions when icons are unlabeled

Solution 3: Collapsible Sidebar

Description: Implement a sidebar similar to the one used in NeetoCal's admin panel, featuring a collapse/expand toggle button. Users can manually control whether they want to see the full sidebar with text labels or just the icon version.

Advantages:

  • User control over interface density

  • Flexible space management - users can expand video player when needed

  • Consistent with existing Neeto patterns (already implemented in NeetoCal)

  • Accommodates different user preferences for interface complexity

Disadvantages:

  • Requires title/header addition to make the collapsed state meaningful

  • Additional UI complexity with toggle controls

  • Potential confusion about current sidebar state

  • Not the optimal design solution according to design assessment

  • Hybrid approach that may not fully solve consistency issues

Solution 4: Wistia Style (Overlay Sidebar)

Description: Implement a system where the main page takes up most space, but clicking on navigation items collapses the main content and opens the relevant settings panel. The sidebar can overlay on top of content when expanded, similar to Vistia's implementation.

Advantages:

  • Maximum space utilization for video player by default

  • Dynamic content area that adapts to user actions

  • Modern interface pattern seen in contemporary applications

  • Tooltip support for icon identification when collapsed

  • Flexible layout that prioritizes content when sidebar is not needed

Disadvantages:

  • Complex interaction patterns that may confuse users

  • Overlay behavior can obscure important content

  • More complex state management for different view modes

  • Potential usability issues with overlapping interface elements

  • Higher implementation complexity compared to traditional sidebar approaches

Competitive Analysis Reference

Current State:

  • Our video player is currently the largest among competitors, providing good user experience for video editing

Industry Comparison:

  • Wistia: Uses significantly smaller video player with extensive sidebar and bottom panels

  • Loom: Default video player in studio is notably smaller than current implementation

  • Industry Standard: Most video editing platforms sacrifice some video player size for comprehensive tooling accessibility

This analysis suggests that reducing video player size to accommodate better navigation and tooling is an acceptable trade-off that aligns with industry standards.