Ctrl+K
- 1.52 kB initial commit
- 224 Bytes Create a modern, engaging dashboard system for Zivvy's martial arts school management platform that drives engagement through gamification, social proof, and clear visual hierarchy. The design should balance data visualization with action-oriented elements that encourage daily use. BRAND GUIDELINES Primary Colors: Professional blues/grays with energetic accent colors (greens for success, oranges for urgency) Typography: Clean, modern sans-serif (Inter, Poppins, or similar) Style: Clean SaaS aesthetic with subtle gamification elements Tone: Professional yet encouraging, data-driven but not overwhelming PAGE STRUCTURE 1. MAIN MARKETING COMMAND CENTER Top Section - Live Activity Ticker Horizontal scrolling ticker showing real-time platform activity Format: "School name + action + result" Example: "Dragon Dojo sent 47 emails • 3 new trials from Elite Martial Arts • $420 generated from surveys" Subtle animation, pauseable on hover Key Metrics Row (4 cards) Today's Wins (icon: flame) This Week (icon: trending up) This Month (icon: dollar sign) Trending % (icon: rocket) Each card shows primary metric large, secondary metric small Use color coding: green for above average, yellow for on-track, red for needs attention Feature Performance Cards (Grid Layout) Each feature card should include: Feature name with icon (Campaigns, Surveys, Landing Pages, Reviews, etc.) Visual progress bar showing % to monthly goal Last/Top performer with key metric Three action buttons: [View All] [Create New] [Templates] Subtle hover effect that expands to show more details 2. INDIVIDUAL FEATURE DASHBOARDS (e.g., Surveys Dashboard) Hero Section Feature name with description Global action button: "Create New [Feature]" (prominent, right-aligned) View toggles: Grid View | List View | Performance View Performance Summary Bar 4-5 key metrics in horizontal pills Include comparative indicators (↑↓ and % change) Metrics vary by feature but always include usage, engagement, and revenue Main Content Area - Split Layout Left Side (70%): Tab navigation: Your [Items] | Templates | Premier Templates | Done For You Search bar with smart placeholder text Filter options: Status, Date Range, Performance Grid/List of items with cards showing: Status badge (Active/Draft/Paused) Title and description Performance metrics (views, responses, conversion rate) Social proof (# of schools using, avg performance) Action menu (Edit, Duplicate, View Stats, Archive) Right Side (30%): "Quick Stats" panel Performance chart (line or bar graph) "Trending Up" and "Needs Attention" items Achievement progress Next unlock progression 3. UNIVERSAL COMPONENTS Status Badges Design: 🟢 Active - Green background 🔥 Trending - Orange gradient ⭐ Top Performer - Gold with star 🆕 New - Blue 🔒 Locked - Gray with lock icon 📊 Analytics Available - Purple Progress Bars: Rounded corners, 8px height Gradient fill for completed portion Percentage displayed on or near bar Contextual colors based on performance Achievement Notifications: Slide in from top-right Include icon, title, description Auto-dismiss after 5 seconds Stack if multiple achievements Comparison Displays: You vs Industry Average vs Top 10% Use distinctive colors for each Bar charts or line graphs Hover for exact numbers INTERACTION PATTERNS Hover States: Cards: Subtle shadow elevation and border highlight Buttons: Darken 10% with smooth transition Stats: Reveal additional context/details Charts: Show exact values in tooltip Click Actions: Templates: Open preview modal with "Use Template" CTA Stats: Expand to detailed analytics view Achievements: Show progress breakdown Quick Wins: Slide-out panel with instructions Loading States: Skeleton screens for initial load Subtle pulse animation Progressive data loading (show what's ready) RESPONSIVE BEHAVIOR Desktop: Full dashboard with all panels Tablet: Collapsible right sidebar, simplified charts Mobile: Single column, swipeable metric cards, bottom navigation ACCESSIBILITY REQUIREMENTS WCAG 2.1 AA compliance Keyboard navigation support Screen reader friendly labels Color contrast minimum 4.5:1 Focus indicators on all interactive elements SPECIAL FEATURES TO HIGHLIGHT Live Activity Feed: Real-time updates without page refresh Subtle animation for new items Click to filter by activity type Health Score Visualization: Circular progress indicator or speedometer Color-coded segments Breakdown on hover/click Unlock Progression: Visual timeline or progress path Show completed, current, and future unlocks Estimated time to next unlock Quick Win Module: Card with timer icon showing time investment Clear problem statement One-click action button "Skip to next" option COPY GUIDELINES Action buttons: Start with verbs (Create, View, Analyze) Success messages: Celebrate achievements ("Awesome! You've...") Empty states: Encouraging and action-oriented ("Ready to create your first...?") Error states: Helpful and solution-focused ("Let's fix this together...") TECHNICAL NOTES Implement smooth animations (300-400ms transitions) Lazy load images and heavy content WebSocket for real-time updates Local storage for view preferences Export functionality for all data views SUCCESS METRICS TO DISPLAY Always show comparison context (you vs average vs best) Use sparklines for trends in small spaces Revenue attribution should be prominent Time-based comparisons (this week vs last week) - Initial Deployment
- 58.9 kB Create a modern, engaging dashboard system for Zivvy's martial arts school management platform that drives engagement through gamification, social proof, and clear visual hierarchy. The design should balance data visualization with action-oriented elements that encourage daily use. BRAND GUIDELINES Primary Colors: Professional blues/grays with energetic accent colors (greens for success, oranges for urgency) Typography: Clean, modern sans-serif (Inter, Poppins, or similar) Style: Clean SaaS aesthetic with subtle gamification elements Tone: Professional yet encouraging, data-driven but not overwhelming PAGE STRUCTURE 1. MAIN MARKETING COMMAND CENTER Top Section - Live Activity Ticker Horizontal scrolling ticker showing real-time platform activity Format: "School name + action + result" Example: "Dragon Dojo sent 47 emails • 3 new trials from Elite Martial Arts • $420 generated from surveys" Subtle animation, pauseable on hover Key Metrics Row (4 cards) Today's Wins (icon: flame) This Week (icon: trending up) This Month (icon: dollar sign) Trending % (icon: rocket) Each card shows primary metric large, secondary metric small Use color coding: green for above average, yellow for on-track, red for needs attention Feature Performance Cards (Grid Layout) Each feature card should include: Feature name with icon (Campaigns, Surveys, Landing Pages, Reviews, etc.) Visual progress bar showing % to monthly goal Last/Top performer with key metric Three action buttons: [View All] [Create New] [Templates] Subtle hover effect that expands to show more details 2. INDIVIDUAL FEATURE DASHBOARDS (e.g., Surveys Dashboard) Hero Section Feature name with description Global action button: "Create New [Feature]" (prominent, right-aligned) View toggles: Grid View | List View | Performance View Performance Summary Bar 4-5 key metrics in horizontal pills Include comparative indicators (↑↓ and % change) Metrics vary by feature but always include usage, engagement, and revenue Main Content Area - Split Layout Left Side (70%): Tab navigation: Your [Items] | Templates | Premier Templates | Done For You Search bar with smart placeholder text Filter options: Status, Date Range, Performance Grid/List of items with cards showing: Status badge (Active/Draft/Paused) Title and description Performance metrics (views, responses, conversion rate) Social proof (# of schools using, avg performance) Action menu (Edit, Duplicate, View Stats, Archive) Right Side (30%): "Quick Stats" panel Performance chart (line or bar graph) "Trending Up" and "Needs Attention" items Achievement progress Next unlock progression 3. UNIVERSAL COMPONENTS Status Badges Design: 🟢 Active - Green background 🔥 Trending - Orange gradient ⭐ Top Performer - Gold with star 🆕 New - Blue 🔒 Locked - Gray with lock icon 📊 Analytics Available - Purple Progress Bars: Rounded corners, 8px height Gradient fill for completed portion Percentage displayed on or near bar Contextual colors based on performance Achievement Notifications: Slide in from top-right Include icon, title, description Auto-dismiss after 5 seconds Stack if multiple achievements Comparison Displays: You vs Industry Average vs Top 10% Use distinctive colors for each Bar charts or line graphs Hover for exact numbers INTERACTION PATTERNS Hover States: Cards: Subtle shadow elevation and border highlight Buttons: Darken 10% with smooth transition Stats: Reveal additional context/details Charts: Show exact values in tooltip Click Actions: Templates: Open preview modal with "Use Template" CTA Stats: Expand to detailed analytics view Achievements: Show progress breakdown Quick Wins: Slide-out panel with instructions Loading States: Skeleton screens for initial load Subtle pulse animation Progressive data loading (show what's ready) RESPONSIVE BEHAVIOR Desktop: Full dashboard with all panels Tablet: Collapsible right sidebar, simplified charts Mobile: Single column, swipeable metric cards, bottom navigation ACCESSIBILITY REQUIREMENTS WCAG 2.1 AA compliance Keyboard navigation support Screen reader friendly labels Color contrast minimum 4.5:1 Focus indicators on all interactive elements SPECIAL FEATURES TO HIGHLIGHT Live Activity Feed: Real-time updates without page refresh Subtle animation for new items Click to filter by activity type Health Score Visualization: Circular progress indicator or speedometer Color-coded segments Breakdown on hover/click Unlock Progression: Visual timeline or progress path Show completed, current, and future unlocks Estimated time to next unlock Quick Win Module: Card with timer icon showing time investment Clear problem statement One-click action button "Skip to next" option COPY GUIDELINES Action buttons: Start with verbs (Create, View, Analyze) Success messages: Celebrate achievements ("Awesome! You've...") Empty states: Encouraging and action-oriented ("Ready to create your first...?") Error states: Helpful and solution-focused ("Let's fix this together...") TECHNICAL NOTES Implement smooth animations (300-400ms transitions) Lazy load images and heavy content WebSocket for real-time updates Local storage for view preferences Export functionality for all data views SUCCESS METRICS TO DISPLAY Always show comparison context (you vs average vs best) Use sparklines for trends in small spaces Revenue attribution should be prominent Time-based comparisons (this week vs last week) - Initial Deployment
- 388 Bytes initial commit