SongDrive

Appearance

Edit

Interface Design ​

Current Design & In-Progress Redesigns ​

SongDrive UI Redesign - With Screenshots (57 words) ​

  • Status: IN PROGRESS - Active UI improvements with implementation screenshots
  • Summary: Visual documentation of redesign across mobile and desktop platforms. Desktop implementation derived from Jordan's suggestions, deployed at https://new-dashboard.songdrive.pages.dev (PR #208).
  • Mobile Components Redesigned:
    • Dashboard: New mobile dashboard layout (screenshot provided)
    • Audio Player Bottom Sheet: Redesigned audio controls with bottom sheet pattern. Known issue: User must open bottom sheet to seek playhead (UX friction point identified)
    • Search Bottom Sheet: New search interface using bottom sheet pattern
    • Settings Bottom Sheet: Settings interface using bottom sheet pattern
    • Project View Page: Redesigned project view with three screenshot variations showing different states
  • Desktop Components Redesigned:
    • Dashboard: New desktop dashboard with two screenshot variations
    • Project View Page: Redesigned project view with two screenshot variations
  • Implementation Status: Active development with deployed preview environment
  • Related: Mobile file view design, dashboard experience requirements

Dashboard Experience ​

SongDrive dashboard experience - 2025 (77 words) ​

  • Status: DESIGN REQUIREMENTS - Dashboard specifications
  • Summary: Specific dashboard layout requirements prioritizing recent activity and cross-device workflows. Defines exact user story for voice memo workflow.
  • Dashboard Layout Requirements:
    • Top Priority: Recent activity MUST be at top of page
    • Special Emphasis: Especially important when there's new activity
    • Content Priority: Uploads and updates should be prominently displayed
  • User Story - Voice Memo Workflow:
    • Step 1: User shares voice memo from phone to SongDrive
    • Step 2: User logs in on computer and wants to listen
    • Requirement: Voice memo should be "front and center on the dashboard"
    • Design Goal: Seamless cross-device experience for mobile capture → desktop production workflow
  • Design Philosophy: The thing you just uploaded should be immediately accessible when you switch devices
  • Related: Desired UX principles, mobile file view, UI redesign dashboard

Mobile Interface Design ​

SongDrive mobile file view - YouTube Music Inspiration (121 words) ​

  • Status: DESIGN PROPOSAL - Mobile redesign concept
  • Summary: Mobile file view redesign inspired by YouTube Music interface patterns. Focus on compact controls and content prioritization.
  • Design Specifications:
    • Lyrics Display: Lyrics replace artwork in primary viewing area (YouTube Music pattern)
    • Audio Controls: Moved lower and made more compact to maximize content space
    • Full-Screen Button: Dedicated button to make lyrics full screen
    • Action Buttons:
      • Lyrics (toggle/view)
      • Comments (view/add)
      • Star (favorite/bookmark)
      • More (dropdown with rename, delete, move to project)
  • Feature Requests from Design:
    • Unlistened Projects Feature: Visit projects you haven't listened to yet, to help organize and categorize new content
    • Missing Bounces Indicator: Feature showing which projects don't have bounces
    • Desktop Bounce Workflow: Workflow to help create bounces and organize them properly on desktop
  • Design Inspiration: YouTube Music's content-first mobile interface
  • Related: UI Redesign mobile components, desired UX principles

SongDrive - Browsing Projects - With Screenshots (333 words) ​

  • Status: DESIGN PROPOSAL - Navigation redesign
  • Summary: Major navigation redesign inspired by Google Drive's grid/list views and hierarchical structure. Proposes nested project hierarchy using react-arborist library. Includes Google Drive screenshots for reference.
  • User Goals for Browsing:
    • Creating new project + data entry on new project
    • Data entry on existing project
    • Follow up on someone else's actions (possibly from push notification)
  • Target Design Pattern: Google Drive-style interface with grid views and list views
  • Technical Implementation:
    • Proposed Library: react-arborist (https://github.com/brimdata/react-arborist)
    • Purpose: Nested tree view component for hierarchical project structure
    • Benefit: Show application projects and local importable projects in digestible way
    • Screenshot: Includes example of react-arborist in use
  • Current Data Hierarchy:
    Workspaces
└── Projects (FLAT - no hierarchy currently)
    └── Files
        └── Comments
  • Current Hierarchy Details:
    • Workspaces: Can be offline/online. Segment data access, invite-only. Scoped to individual efforts, music collective, or producer-client relationships. Producer can have multiple private workspaces per client.
    • Projects: Currently FLAT list with no sub-projects or folders
    • Files: Will eventually support revisions and nested structure to match DAW project structure
    • Comments: Can attach to files and projects, though only files supported in UI currently
  • Proposed New Hierarchy:
    • Nested Projects: Projects can contain sub-projects, creating folder-like structure
    • Project Types: Any level can be artist, album, song, new idea, or eventually setlist preparation for live performance
    • Flexibility: Hierarchical organization without rigid type constraints
  • Google Drive Pattern Analysis (with screenshots):
    • Home - Grid View: Suggestions based on recent activity. ONLY individual files, NO folders. Content-first discovery.
    • Home - List View: Recent activity in list format. Again, NO folders. Pure activity stream.
    • "My Drive" - Grid View: Folders displayed in separate grid from files. Visual separation of containers vs content.
    • "My Drive" - List View: Folders appear FIRST before any files. Hierarchical priority in list format.
  • Design Takeaways:
    • Home view = activity-based, no folders (focus on content)
    • "My Drive" view = hierarchy-based, folders prominent (focus on organization)
    • Apply same pattern distinction to SongDrive navigation
  • Related: Large Data Milestone search features, UI redesign project view, terminology changes

Desktop & Mobile Patterns ​

Mobile Patterns ​

From the UI redesign documentation:

  • Bottom sheet UI pattern (audio player, search, settings)
  • Lyrics replace artwork in file view
  • Compact controls maximize content space
  • Action buttons: Lyrics, Comments, Star, More (rename/delete/move)

Desktop Patterns ​

  • Dashboard prioritizes recent uploads/updates
  • Project view redesigned (two variations)
  • Grid and list view options (Google Drive pattern)

Known UX Issues ​

From the design analysis:

  • Audio player bottom sheet requires opening to seek (friction point)
  • "Type: Song" label confusing in project tables (to be removed)
  • Font and spacing need polish