# TikTok Analytics Dashboard - Visual Mockup
## Dashboard Layout Blueprint
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ TikTok L'AURA - Candle Dashboard Last 30 Days ▼ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ VIEWS │ │ LIKES │ │ COMMENTS │ │ SHARES │ │ WATCH % │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ 1.2M │ │ 45.3K │ │ 12.8K │ │ 3.2K │ │ 67.5% │ │
│ │ ↑ 12.3% │ │ ↑ 8.5% │ │ ↑ 15.2% │ │ ↑ 6.8% │ │ ↓ 2.1% │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Views & Engagement Over Time │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 50K │ ╱╲ │ │
│ │ │ ╱╲ ╱ ╲ │ │
│ │ 40K │ ╱╲ ╱ ╲ ╱ ╲ ╱╲ │ │
│ │ │ ╱╲ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │ │
│ │ 30K │ ╱╲ ╱ ╲ ╱ ╲ ╲╱ ╲╱ ╲ ╱╲ │ │
│ │ │ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │ │
│ │ 20K │ ╱ ╲ ╲╱ ╲ ╱ ╲ │ │
│ │ │ ╱ ╲╱ ╲ │ │
│ │ 10K │╱ ╲ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │
│ │ Nov 10 Nov 17 Nov 24 Dec 01 Dec 08 │ │
│ │ ──── Views (Primary) ──── Likes (Secondary) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────┬────────────────────────────────────────┤
│ │ │
│ Top 10 Videos by Views │ Watch % by Video Duration │
│ ┌────────────────────────────┐ │ ┌────────────────────────────────┐ │
│ │ Candle Tutorial #3 ████████ │ │ 100% │ ● │ │
│ │ ASMR Unboxing ███████ │ │ │ ● ● │ │
│ │ Product Demo ██████ │ │ 75% │ ● ● ● ● ● ● │ │
│ │ Behind Scenes ██████ │ │ │ ● ● ● ● │ │
│ │ Gift Ideas █████ │ │ 50% │ │ │
│ │ Scent Review ████ │ │ │ │ │
│ │ Quick Tips ████ │ │ 25% │ │ │
│ │ DIY Decor ███ │ │ └──────────────────────────│ │
│ │ Mood Lighting ███ │ │ 15s 30s 60s 90s 120s │ │
│ │ Relaxation Guide ██ │ │ Bubble size = Total views │ │
│ └────────────────────────────┘ │ └────────────────────────────────┘ │
│ │ │
├────────────────────────────────────┴────────────────────────────────────────┤
│ │
│ ┌────────────────────┬────────────────────┬────────────────────────────┐ │
│ │ Performance Split │ Upload vs Views │ Engagement Breakdown │ │
│ │ │ │ │ │
│ │ ╱───╲ │ ┌─┐ ┌──┐ ┌─┐ │ ┌─────────────────────┐ │ │
│ │ │ 23% │ │ │█│ │██│ │█│ │ │█████ Likes │ │ │
│ │ │High │ │ └─┘ └──┘ └─┘ │ │███ Comments │ │ │
│ │ ╲___╱ │ M T W T │ │█ Shares │ │ │
│ │ ╱─────╲ │ ─── Views/Day │ └─────────────────────┘ │ │
│ │ │ 45% │ │ ─── Videos │ Per top 15 videos │ │
│ │ │Medium │ │ │ │ │
│ │ ╲_____╱ │ │ │ │
│ │ ╱───────╲ │ │ │ │
│ │ │ 32% │ │ │ │ │
│ │ │ Low │ │ │ │ │
│ │ ╲_______╱ │ │ │ │
│ └────────────────────┴────────────────────┴────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Recent Video Performance (Last 30 Days) │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Title │ Date │ Views │ Likes │ Comments │ Watch%│ │
│ ├─────────────────────────────────────────────────────────────────────┤ │
│ │ New Year Candle... │ 2025-12-08 │ 45.2K │ 2.1K │ 487 │ 78.2% │ │
│ │ Holiday Gift Guide │ 2025-12-07 │ 38.9K │ 1.8K │ 423 │ 71.5% │ │
│ │ ASMR Lighting... │ 2025-12-06 │ 52.1K │ 2.5K │ 612 │ 82.1% │ │
│ │ Scent Review Thai │ 2025-12-05 │ 29.4K │ 1.2K │ 298 │ 65.8% │ │
│ │ Unboxing Premium │ 2025-12-04 │ 41.7K │ 1.9K │ 534 │ 75.4% │ │
│ │ Quick Tutorial │ 2025-12-03 │ 33.6K │ 1.5K │ 367 │ 68.9% │ │
│ │ ... │ ... │ ... │ ... │ ... │ ... │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ [Load More...] │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
```
---
## Section-by-Section Breakdown
### 1. Header KPI Cards (Top Section)
**Visual Style:**
- Large, bold numbers
- Percentage change indicators with up/down arrows
- Color coding: Green for positive trends, Red for negative
- Icon for each metric (optional)
**Example Design:**
```
┌──────────────────┐
│ 👁 TOTAL VIEWS │
│ │
│ 1,234,567 │
│ ↑ +12.3% │
│ vs last period │
└──────────────────┘
```
### 2. Views & Engagement Trends (Line Chart)
**Chart Configuration:**
- Dual Y-axis: Views (left), Likes (right)
- X-axis: Date (group by day/week)
- Line styles: Solid blue for views, Dashed pink for likes
- Data points visible
- Hover tooltip shows exact values
- Grid lines for easier reading
**Data Points:**
- Each peak represents a high-performing video day
- Valleys indicate lower performance periods
- Use to identify patterns (best posting days, viral spikes)
### 3. Top 10 Videos (Horizontal Bar Chart)
**Visual Elements:**
- Video description (truncated to 30 chars) on Y-axis
- View count on X-axis
- Bars colored by watch completion % (gradient)
- Values displayed at end of bars
- Clickable bars to filter dashboard
**Color Scale:**
- Green (>75% watch rate)
- Yellow (50-75%)
- Red (<50%)
### 4. Watch % by Duration (Scatter Plot)
**Chart Details:**
- X-axis: Video duration (0-120 seconds)
- Y-axis: Watch completion percentage
- Bubble size: Total views (larger = more views)
- Bubble color: Engagement rate (darker = higher engagement)
**Insights to Look For:**
- Sweet spot duration (highest watch % cluster)
- Too long videos (low watch % on right side)
- Viral short-form (large bubbles on left)
### 5. Performance Distribution (Pie Chart)
**Segments:**
- High: >10,000 views (23% - 35 videos)
- Medium: 1,000-10,000 views (45% - 68 videos)
- Low: <1,000 views (32% - 47 videos)
**Visual:**
- Distinct colors for each tier
- Show both percentage and count
- Center hole shows total video count
### 6. Upload Frequency vs Views (Combo Chart)
**Dual Metrics:**
- Bars: Number of videos posted per day
- Line: Average views per video that day
**Insight:**
- Does posting more = better performance?
- Optimal posting frequency
- Quality vs quantity analysis
### 7. Engagement Breakdown (Stacked Bar)
**For Top 15 Videos:**
- Bottom stack: Likes (pink)
- Middle stack: Comments (purple)
- Top stack: Shares (teal)
**Shows:**
- Which videos drive most engagement
- Engagement type distribution
- Outliers (high shares = viral potential)
### 8. Recent Performance Table
**Columns:**
1. Video Title (truncated, with tooltip for full text)
2. Publication Date
3. Views (formatted with K/M suffix)
4. Likes (formatted)
5. Comments (formatted)
6. Watch % (color-coded cell background)
**Features:**
- Sortable columns
- Clickable rows to open video
- Color-coded watch % cells
- Pagination (20 per page)
---
## Interactive Features
### Filters (Top Right)
```
┌─────────────────────────┐
│ Date Range: Last 30d ▼ │
│ Performance: All ▼ │
│ Duration: All ▼ │
│ [Reset Filters] │
└─────────────────────────┘
```
### Cross-Filtering
- Click any chart element to filter entire dashboard
- Example: Click "High" in pie chart → only show high performers
- Clear filter button visible when active
### Drill-Down
- Click bar in Top 10 chart → show detailed view
- Click date range in trend chart → zoom into that period
- Click table row → open video in new tab
---
## Mobile Responsive Layout
### Desktop (>1200px)
- 5 KPI cards in row
- 2-column layout for middle charts
- 3-column for bottom section
### Tablet (768-1200px)
- 3 KPI cards per row (total 2 rows)
- Single column for charts
- Stacked layout
### Mobile (<768px)
- 1 KPI card per row
- Simplified charts (fewer data points)
- Horizontal scroll for table
---
## Color Palette
### Primary Colors
```
Blue (Views): #3B82F6
Pink (Likes): #EC4899
Purple (Comments): #8B5CF6
Teal (Shares): #14B8A6
```
### Performance Indicators
```
Success (High): #10B981
Warning (Med): #F59E0B
Error (Low): #EF4444
```
### Background
```
Light Mode: #FFFFFF (cards), #F9FAFB (background)
Dark Mode: #1F2937 (cards), #111827 (background)
```
---
## Typography
### Headers
- Dashboard Title: 24px, Bold
- Section Titles: 18px, Semi-Bold
- Card Labels: 14px, Medium
### Data
- Large Numbers (KPIs): 32px, Bold
- Chart Values: 12px, Regular
- Table Text: 14px, Regular
---
## Spacing & Layout
### Card Padding
- Interior: 20px
- Gap between cards: 16px
### Chart Heights
- KPI Cards: 120px
- Trend Chart: 300px
- Small Charts: 250px
- Table: 400px (scrollable)
### Margins
- Top/Bottom: 24px
- Left/Right: 16px
- Between sections: 32px
---
## Animation & Transitions
### On Load
- Cards fade in sequentially (100ms delay each)
- Charts draw/animate data (500ms duration)
- Numbers count up from 0 to value
### On Interaction
- Hover: Scale 1.02, shadow increase
- Click: Ripple effect
- Filter apply: Fade out → update → fade in (300ms)
### Transitions
- All transitions: 200ms ease-in-out
- Data updates: 300ms
- Skeleton loading while fetching data
---
## Accessibility
### Color Blind Friendly
- Use patterns in addition to colors
- Sufficient contrast ratios (WCAG AA)
- Text labels on all chart elements
### Keyboard Navigation
- Tab through all interactive elements
- Enter to activate filters/clicks
- Escape to close modals/reset
### Screen Readers
- Alt text for all charts
- ARIA labels on buttons
- Table headers properly marked
---
## Export Options
### Available Formats
- PNG: Full dashboard screenshot
- PDF: Formatted report with charts
- CSV: Raw data from table
- Excel: Data + basic formatting
### Share Options
- Copy dashboard URL
- Generate embed code
- Email report
- Schedule automated reports
---
## Performance Optimization
### Lazy Loading
- Load visible charts first
- Defer below-the-fold content
- Progressive image loading
### Caching
- Cache static data (5 minutes)
- Real-time updates for KPIs
- Background refresh every 30 seconds
### Data Limits
- Top N queries (10-20 items max)
- Pagination for tables
- Date range restrictions
---
## Success Metrics for Dashboard
After implementation, track:
1. Dashboard load time (<2 seconds)
2. User engagement (time spent viewing)
3. Interaction rate (clicks per session)
4. Data refresh rate (real-time vs cached)
5. User feedback (usefulness rating)
---
## Next Steps After Creation
1. **Test with real data** - Ensure all 150 videos load correctly
2. **Validate calculations** - Spot-check metrics against raw data
3. **User testing** - Get feedback from stakeholders
4. **Iterate design** - Adjust based on usage patterns
5. **Set up alerts** - Notify when metrics hit thresholds
6. **Schedule reports** - Auto-send weekly/monthly summaries
---
This mockup provides a complete visual guide for creating your TikTok analytics dashboard in Lark Base. Follow the layout and styling guidelines to create a professional, actionable dashboard.
