Bài 11: Thiết kế Dashboard E-commerce
Mục tiêu bài học
🎯 Sau bài này, bạn sẽ có thể:
- Thiết kế dashboard hierarchy phù hợp với từng đối tượng sử dụng
- Chọn đúng loại biểu đồ cho từng loại KPI e-commerce
- Xây dựng Executive Dashboard với các metrics quan trọng nhất
- Tạo Operational Dashboard cho team vận hành hàng ngày
- Áp dụng nguyên tắc visual design để dashboard dễ đọc và actionable
Thuật ngữ quan trọng
📖 Thuật ngữ Dashboard Design
| Thuật ngữ | Giải thích | Ví dụ |
|---|---|---|
| KPI Card / Scorecard | Thẻ hiển thị 1 metric chính | GMV: 50B ▲12% |
| Sparkline | Biểu đồ mini trend | Đường xu hướng nhỏ bên cạnh KPI |
| Dashboard Hierarchy | Thứ bậc dashboard theo cấp | Strategic → Tactical → Operational |
| Above the Fold | Phần dashboard nhìn thấy mà không cần cuộn | Top KPI cards |
| Drill-down | Khả năng đi sâu vào chi tiết | Click vào category → xem sub-category |
| Data Storytelling | Kể chuyện bằng dữ liệu | Annotate insight trên chart |
| Refresh Rate | Tần suất cập nhật data | Real-time, hourly, daily |
| Filter / Slicer | Bộ lọc tương tác | Lọc theo thời gian, category, region |
Kiểm tra thuật ngữ
Câu hỏi: "Above the fold" trong dashboard design nghĩa là gì? Tại sao concept này quan trọng?
Trả lời: "Above the fold" là phần dashboard người dùng nhìn thấy ngay khi mở mà không cần scroll. Concept này quan trọng vì nghiên cứu cho thấy 80% người dùng chỉ xem phần đầu dashboard — các KPI quan trọng nhất phải nằm ở đây.
Dashboard Hierarchy
📊 3 Tầng Dashboard cho E-commerce
E-commerce Dashboard Hierarchy
| Tầng | Audience | Refresh | Mục đích | Số charts |
|---|---|---|---|---|
| Strategic | C-level, Board | Weekly/Monthly | Theo dõi health tổng thể | 6-8 |
| Tactical | Manager, Lead | Daily/Weekly | Phân tích & tối ưu | 8-12 |
| Operational | Team member | Real-time/Hourly | Monitor & phản ứng nhanh | 10-15 |
Đừng nhồi nhét 30+ charts vào 1 dashboard! Mỗi dashboard nên focus vào 1 câu hỏi chính và tối đa 12-15 visualizations. Nếu cần nhiều hơn, tách thành nhiều dashboard.
Executive KPI Dashboard
🎯 Dashboard 1: Executive Overview
Layout Design
Executive Dashboard Layout
SQL cho KPI Cards
1-- Executive KPI Cards - Current Month vs Previous Month2WITH current_month AS (3 SELECT 4 SUM(total_amount) AS gmv,5 COUNT(DISTINCT order_id) AS total_orders,6 ROUND(AVG(total_amount), 0) AS aov,7 COUNT(DISTINCT customer_id) AS unique_customers8 FROM fact_orders9 WHERE order_status IN ('delivered', 'shipped', 'processing')10 AND DATE_TRUNC('month', order_date) = DATE_TRUNC('month', CURRENT_DATE)11),12prev_month AS (13 SELECT 14 SUM(total_amount) AS gmv,15 COUNT(DISTINCT order_id) AS total_orders,16 ROUND(AVG(total_amount), 0) AS aov,17 COUNT(DISTINCT customer_id) AS unique_customers18 FROM fact_orders19 WHERE order_status IN ('delivered', 'shipped', 'processing')20 AND DATE_TRUNC('month', order_date) = DATE_TRUNC('month', CURRENT_DATE) - INTERVAL '1 month'21)22SELECT 23 -- KPI Card 1: GMV24 c.gmv AS current_gmv,25 p.gmv AS prev_gmv,26 ROUND((c.gmv - p.gmv) * 100.0 / p.gmv, 1) AS gmv_growth_pct,27 28 -- KPI Card 2: Orders29 c.total_orders AS current_orders,30 ROUND((c.total_orders - p.total_orders) * 100.0 / p.total_orders, 1) AS orders_growth_pct,31 32 -- KPI Card 3: AOV33 c.aov AS current_aov,34 ROUND((c.aov - p.aov) * 100.0 / p.aov, 1) AS aov_growth_pct,35 36 -- KPI Card 4: Customers37 c.unique_customers AS current_customers,38 ROUND((c.unique_customers - p.unique_customers) * 100.0 / p.unique_customers, 1) AS customers_growth_pct39FROM current_month c, prev_month p;SQL cho Revenue Trend Chart
1-- Monthly Revenue Trend (last 12 months)2SELECT 3 DATE_TRUNC('month', order_date) AS month,4 SUM(total_amount) AS gmv,5 SUM(CASE WHEN order_status = 'delivered' THEN total_amount ELSE 0 END) AS net_revenue,6 COUNT(DISTINCT order_id) AS orders,7 COUNT(DISTINCT customer_id) AS customers,8 ROUND(AVG(total_amount), 0) AS aov9FROM fact_orders10WHERE order_date >= CURRENT_DATE - INTERVAL '12 months'11AND order_status NOT IN ('cancelled')12GROUP BY DATE_TRUNC('month', order_date)13ORDER BY month;Chọn đúng Chart Type
| Metric | Chart Type | Lý do |
|---|---|---|
| GMV, Orders, AOV | KPI Card + Sparkline | Số đơn lẻ, cần thấy nhanh + trend |
| Revenue Trend | Line Chart | Thể hiện xu hướng theo thời gian |
| Revenue by Category | Treemap hoặc Bar | So sánh phần chiếm tỷ trọng |
| New vs Returning | Stacked Bar | So sánh 2 nhóm qua thời gian |
| Satisfaction | Gauge + Number | Metric có target rõ ràng |
| Funnel | Funnel Chart | Thể hiện conversion giảm dần |
| Geographic | Map / Heatmap | Data có yếu tố địa lý |
Operational Dashboard
⚙️ Dashboard 2: Daily Operations
KPI cho Operations Team
1-- Daily Operational Metrics2SELECT 3 order_date,4 5 -- Volume metrics6 COUNT(DISTINCT order_id) AS total_orders,7 SUM(total_amount) AS daily_gmv,8 9 -- Fulfillment metrics10 COUNT(CASE WHEN order_status = 'delivered' THEN 1 END) AS delivered,11 COUNT(CASE WHEN order_status = 'shipped' THEN 1 END) AS in_transit,12 COUNT(CASE WHEN order_status = 'processing' THEN 1 END) AS processing,13 COUNT(CASE WHEN order_status = 'cancelled' THEN 1 END) AS cancelled,14 15 -- Rates16 ROUND(17 COUNT(CASE WHEN order_status = 'cancelled' THEN 1 END) * 100.0 / 18 COUNT(*), 119 ) AS cancel_rate,20 21 -- Performance22 ROUND(AVG(23 CASE WHEN delivered_date IS NOT NULL 24 THEN delivered_date - order_date END25 ), 1) AS avg_delivery_days2627FROM fact_orders28WHERE order_date >= CURRENT_DATE - INTERVAL '30 days'29GROUP BY order_date30ORDER BY order_date DESC;Seller Performance Monitor
1-- Sellers cần attention hôm nay2SELECT 3 s.seller_name,4 s.seller_type,5 COUNT(DISTINCT o.order_id) AS today_orders,6 COUNT(CASE WHEN o.order_status = 'cancelled' THEN 1 END) AS cancelled,7 ROUND(8 COUNT(CASE WHEN o.order_status = 'cancelled' THEN 1 END) * 100.0 / 9 NULLIF(COUNT(*), 0), 110 ) AS cancel_rate,11 COALESCE(ROUND(AVG(r.review_score), 2), 0) AS avg_rating_last7d12FROM fact_orders o13JOIN fact_order_items oi ON o.order_id = oi.order_id14JOIN dim_seller s ON oi.seller_id = s.seller_id15LEFT JOIN fact_reviews r ON o.order_id = r.order_id16 AND r.review_date >= CURRENT_DATE - INTERVAL '7 days'17WHERE o.order_date >= CURRENT_DATE - INTERVAL '7 days'18GROUP BY s.seller_name, s.seller_type19HAVING COUNT(CASE WHEN o.order_status = 'cancelled' THEN 1 END) * 100.0 / 20 NULLIF(COUNT(*), 0) > 1021ORDER BY cancel_rate DESC;Alert Rules Table
| Alert | Condition | Severity | Action |
|---|---|---|---|
| High Cancel Rate | Cancel > 15% trong ngày | 🔴 Critical | Điều tra ngay, check inventory |
| Low Rating Spike | Rating < 3 tăng > 50% vs tuần trước | 🟡 Warning | Review seller, check product |
| Delivery Delay | Avg delivery > 5 ngày | 🟡 Warning | Check logistics partner |
| GMV Drop | GMV giảm > 20% vs cùng kỳ | 🔴 Critical | Check traffic source, checkout |
| Cart Abandonment | Abandon > 75% | 🟠 Monitor | Review UX, pricing |
Category & Product Dashboard
🏷️ Dashboard 3: Category Performance
1-- Category Performance Summary2SELECT 3 p.category,4 COUNT(DISTINCT oi.order_id) AS total_orders,5 SUM(oi.price * oi.quantity) AS revenue,6 ROUND(7 SUM(oi.price * oi.quantity) * 100.0 / 8 SUM(SUM(oi.price * oi.quantity)) OVER(), 19 ) AS revenue_share_pct,10 COUNT(DISTINCT oi.product_id) AS active_products,11 ROUND(AVG(r.review_score), 2) AS avg_rating,12 13 -- Growth vs prev period14 ROUND(15 (SUM(CASE WHEN o.order_date >= CURRENT_DATE - INTERVAL '30 days' 16 THEN oi.price * oi.quantity ELSE 0 END) -17 SUM(CASE WHEN o.order_date BETWEEN CURRENT_DATE - INTERVAL '60 days' 18 AND CURRENT_DATE - INTERVAL '30 days' 19 THEN oi.price * oi.quantity ELSE 0 END)) * 100.0 /20 NULLIF(SUM(CASE WHEN o.order_date BETWEEN CURRENT_DATE - INTERVAL '60 days' 21 AND CURRENT_DATE - INTERVAL '30 days' 22 THEN oi.price * oi.quantity ELSE 0 END), 0), 123 ) AS mom_growth_pct24FROM fact_order_items oi25JOIN dim_product p ON oi.product_id = p.product_id26JOIN fact_orders o ON oi.order_id = o.order_id27LEFT JOIN fact_reviews r ON oi.order_id = r.order_id 28 AND oi.product_id = r.product_id29WHERE o.order_status = 'delivered'30GROUP BY p.category31ORDER BY revenue DESC;Dashboard Design Best Practices
🎨 Nguyên tắc thiết kế Dashboard
Dashboard Design Principles
Checklist thiết kế Dashboard
| # | Tiêu chí | Mô tả |
|---|---|---|
| 1 | 5-second Rule | Người xem hiểu dashboard nói gì trong 5 giây đầu? |
| 2 | So What? | Mỗi chart trả lời được câu hỏi "Vậy thì sao?" |
| 3 | Actionable | Nhìn vào dashboard, biết cần làm gì tiếp? |
| 4 | Context | Có so sánh (MoM, YoY, vs target) không? |
| 5 | Audience | Phù hợp với người sẽ xem chưa? |
| 6 | No Clutter | Bỏ được element nào mà không mất ý nghĩa? |
| 7 | Color Purpose | Mỗi màu có ý nghĩa rõ ràng (xanh=tốt, đỏ=xấu)? |
| 8 | Mobile Ready | Dashboard có đọc được trên mobile không? |
Dashboard giỏi không chỉ hiển thị số — nó kể một câu chuyện. Thêm annotations ("Revenue tăng 15% nhờ campaign Black Friday"), highlight anomalies, và luôn đặt context (so sánh với target hoặc kỳ trước).
Tổng kết & Bài tập
📝 Tóm tắt bài học
Những điểm chính:
- Dashboard Hierarchy: Strategic → Tactical → Operational — mỗi tầng có audience và refresh rate khác nhau
- Executive Dashboard: Focus vào GMV, Orders, AOV, Customer metrics với MoM comparison
- Operational Dashboard: Real-time monitoring cancel rate, delivery, seller issues
- Chart Selection: Chọn chart type phù hợp — line cho trend, bar cho comparison, funnel cho conversion
- Design Principles: 5-second rule, progressive disclosure, context, actionable insights
💡 Self-check Questions:
- Khi nào nên dùng Treemap thay vì Pie chart?
- CEO và Operations Manager cần dashboard khác nhau thế nào?
- "Above the fold" nên chứa những metrics nào cho e-commerce?
