🎨 AiPro Institute™ Prompt Library
Digital UI/UX & Web Design
📊 Dashboard UI Design
Data-Driven Interface for Analytics, KPIs & Business Intelligence
🛠️ Tool Compatibility
📝 The Prompt
Design a comprehensive dashboard UI for:
🎯 Dashboard Purpose & Context:
• Dashboard Type: [Analytics Dashboard / Sales Dashboard / Marketing Dashboard / Finance Dashboard / Operations Dashboard / CRM Dashboard / E-commerce Admin / Project Management / Healthcare Analytics / Executive Overview]
• Primary Use Case: [Real-time monitoring / Historical analysis / Predictive insights / Team collaboration / Executive reporting]
• User Persona: [C-level executive / Data analyst / Marketing manager / Sales team / Operations staff / External client]
• Key Goals: [Quick decision-making / Identify trends / Track performance / Spot anomalies / Generate reports]
📈 Key Performance Indicators (KPIs):
• Primary Metrics (3–5): [e.g., Revenue, Conversion Rate, Customer Acquisition Cost, Churn Rate, NPS]
• Secondary Metrics (5–10): [Supporting KPIs that provide context to primary metrics]
• Metric Display Style: [Number with % change / Sparkline chart / Gauge / Progress bar / Comparison vs. target]
• Time Period: [Real-time / Last 7 days / Last 30 days / Quarter / Year / Custom date range]
• Comparison Logic: [vs. previous period / vs. same period last year / vs. target / trend direction (up/down arrows)]
📊 Data Visualization Components:
1. Charts & Graphs
• Line Charts: [Time-series trends — revenue over time, traffic growth, etc.]
• Bar Charts: [Category comparisons — sales by region, product performance]
• Pie/Donut Charts: [Composition breakdown — market share, traffic sources]
• Area Charts: [Volume over time with filled regions — cumulative metrics]
• Heatmaps: [Activity patterns — user behavior by hour/day, geographic intensity]
• Scatter Plots: [Correlation analysis — customer lifetime value vs. acquisition cost]
• Funnel Charts: [Conversion funnels — signup to paid customer journey]
2. Data Tables
• Table Purpose: [Top performers list / Recent transactions / User activity log / Detailed breakdown]
• Columns (5–8): [Name, Metric 1, Metric 2, Status, Action buttons]
• Table Features: [Sortable columns / Search/filter / Pagination / Inline editing / Export to CSV/Excel]
• Row Actions: [View details / Edit / Delete / Quick actions dropdown]
3. Stat Cards / KPI Widgets
• Card Count: [4–8 stat cards in top row]
• Card Content: [Large metric number / Label / % change indicator / Mini sparkline / Trend arrow (up/down)]
• Card Layout: [Horizontal grid / 2×2 grid / 4×1 row / Flexible responsive]
🎨 Visual Design System:
1. Color Palette
• Primary Brand Color: [HEX code — used for CTAs, highlights]
• Secondary Colors: [HEX codes for chart series, categories]
• Status Colors: [Success: #10b981 Green / Warning: #f59e0b Orange / Danger: #ef4444 Red / Info: #3b82f6 Blue]
• Background Colors: [Page background: #f9fafb Light Gray / Card background: #ffffff White / Dark mode option: Yes/No]
• Data Visualization Palette: [5–7 distinct colors for chart series — colorblind-safe]
2. Typography
• Primary Font: [Inter / Roboto / Open Sans / System font stack]
• Font Sizes: [H1: 32px / H2: 24px / H3: 20px / Body: 14px / Small: 12px / Numbers: 28–48px bold]
• Font Weights: [Regular 400 for body / Medium 500 for labels / Bold 700 for numbers & headers]
3. Layout & Grid
• Screen Size: [Desktop: 1920×1080 / Laptop: 1440×900 / Tablet: 1024×768 / Responsive down to 768px]
• Grid System: [12-column grid / 8px baseline grid / 16px padding/margins]
• Card/Widget Spacing: [16px between cards / 24px section margins / 8px internal padding]
• Sidebar Width: [Collapsed: 64px / Expanded: 240px / Fixed or collapsible]
🧭 Navigation & Structure:
1. Top Navigation Bar
• Left Side: [Logo / Dashboard title / Breadcrumbs]
• Right Side: [Search bar / Notifications bell / User profile dropdown / Settings icon]
• Height: [60–70px]
2. Sidebar Menu
• Menu Items (5–10): [Dashboard / Analytics / Reports / Customers / Settings / etc.]
• Icon Style: [Outlined / Filled / Line-style icons]
• Active State: [Highlight color / Left border accent / Background fill]
• Sub-menus: [Yes/No — expandable accordion OR separate pages]
3. Dashboard Layout Sections
• Section 1 (Top Row): [KPI stat cards — 4×1 horizontal layout]
• Section 2 (Middle): [2-column layout: Large chart (left 66%) + Stat summary (right 33%)]
• Section 3 (Bottom): [Data table OR 2–3 smaller charts in grid]
• Section Headers: [Section title + filter dropdown OR date range picker]
⚙️ Interactive Features:
• Date Range Selector: [Dropdown: Last 7 days / Last 30 days / Custom range with calendar picker]
• Filters: [Multi-select dropdowns: Region, Product, Team, Status]
• Export Options: [Export to PDF / CSV / Excel / Share dashboard link]
• Refresh Control: [Auto-refresh every X seconds / Manual refresh button / Last updated timestamp]
• Hover States: [Chart tooltips with detailed data / Card hover elevation / Interactive legends]
• Drill-Down: [Click chart to see detailed breakdown / Modal overlay OR navigate to detail page]
📱 Responsive Design:
• Desktop (1440px+): [Full layout with sidebar + 3-column grid]
• Tablet (768–1024px): [Collapsible sidebar + 2-column grid + stacked charts]
• Mobile (< 768px): [Bottom tab bar navigation + Single-column stacked layout + Simplified charts]
♿ Accessibility & UX:
• Contrast Ratio: [WCAG AA minimum 4.5:1 for text / 3:1 for UI elements]
• Colorblind Mode: [Chart palettes tested for deuteranopia & protanopia]
• Keyboard Navigation: [Tab through all interactive elements / Enter to activate / Esc to close modals]
• Screen Reader Support: [ARIA labels for charts / Alt text for icons / Semantic HTML]
• Loading States: [Skeleton loaders for charts / Spinner for data fetch / Progress indicators]
• Empty States: [Friendly message + illustration when no data available]
• Error States: [Clear error messages + Retry button / Fallback UI if data fails to load]
✅ Deliverables Required:
1. High-fidelity dashboard UI design (Figma/Sketch/Adobe XD file)
2. Component library (reusable cards, charts, buttons, inputs)
3. Responsive breakpoint designs (desktop, tablet, mobile)
4. Dark mode variant (if applicable)
5. Interactive prototype with click-through flows
6. Design system documentation (colors, typography, spacing, components)
7. Developer handoff specs (dimensions, colors, fonts, assets)
🚀 Output Format:
Deliver a production-ready dashboard UI design that prioritizes data clarity, user efficiency, and visual hierarchy, enabling users to quickly understand key metrics and take informed actions.
🧠 The Logic: 6 Design Principles
1️⃣ Data Hierarchy
Most important KPIs at the top. Users scan F-pattern. Place critical metrics above the fold. Progressive disclosure for deeper insights.
2️⃣ Chart Selection Logic
Right chart for the data story: Line for trends, bar for comparisons, pie for composition. Never use 3D charts or cluttered visuals.
3️⃣ Cognitive Load Reduction
Limit to 5–7 metrics per view. Use white space. Avoid chart junk. Every element must serve a purpose or be removed.
4️⃣ Actionable Insights
Data informs action. Include CTAs near metrics ("View Report," "Investigate Drop"). Dashboards guide decisions, not just display numbers.
5️⃣ Performance Optimization
Fast load times critical. Lazy-load charts below fold. Cache data. Show skeleton loaders. Users abandon slow dashboards.
6️⃣ Responsive Data Viz
Charts must adapt to screen size. Simplify on mobile (show fewer data points, larger touch targets). Desktop ≠ Mobile.
🎨 Output Preview: 4 Real-World Examples
Example 1: SaaS Analytics Dashboard
Top Row: 4 stat cards — MRR ($142K, +12%), Active Users (8,423, +8%), Churn (2.1%, -0.3%), NPS (67, +5)
Main Chart: Line chart — MRR growth over 12 months (blue line) with comparison to previous year (gray dashed)
Right Panel: Donut chart — Revenue by plan (Starter 15%, Pro 60%, Enterprise 25%)
Bottom: Table — Top 10 customers by MRR with columns: Company, Plan, MRR, Growth %, Action (View Profile)
Filters: Date range picker (top-right), Plan type dropdown
Colors: Primary blue (#3b82f6), green for positive trends, red for negative
Example 2: E-commerce Admin Dashboard
Top Row: 5 stat cards — Today's Sales ($12,450, +18%), Orders (187, +22%), Avg Order Value ($66.58, -3%), Conversion Rate (3.2%, +0.4%), Cart Abandonment (68%, -5%)
Main Chart: Area chart — Sales by hour (today vs. yesterday) with shaded regions
Right Panel: Bar chart — Top 5 products by revenue
Bottom Left: Line chart — Traffic sources over 7 days (Organic, Paid, Social, Direct)
Bottom Right: Recent orders list with status badges (Processing, Shipped, Delivered)
Colors: Teal primary (#00B8D9), orange accents, status colors for order badges
Example 3: Marketing Campaign Dashboard
Top Row: 4 stat cards — Impressions (2.4M, +35%), Clicks (48.2K, +28%), CTR (2.01%, -0.12%), Cost per Click ($1.83, +$0.15)
Main Chart: Multi-line chart — 4 campaigns compared over 30 days (Impressions & Clicks on dual Y-axis)
Right Panel: Funnel chart — Campaign journey: Impressions → Clicks → Leads → Conversions (with drop-off %)
Bottom: Heatmap — Best performing days/hours for ad clicks
Filters: Campaign selector (multi-select), Channel filter (Facebook, Google, LinkedIn)
Colors: Purple primary (#7c3aed), multi-color palette for campaigns
Example 4: Executive Overview Dashboard
Top Row: 6 stat cards — Revenue ($8.2M, +14% YoY), Profit Margin (23%, +2%), Customers (12,458, +9%), Employee Count (245, +12), Cash Runway (18 months), Burn Rate ($450K/mo)
Main Chart: Stacked area chart — Revenue breakdown by division (Sales, Services, Products) over 12 months
Right Panel: Gauge chart — Progress toward annual revenue target (68% complete)
Bottom Left: Bar chart — Department headcount vs. budget allocation
Bottom Right: Scatter plot — Customer acquisition cost vs. lifetime value by channel
Colors: Navy (#002D62), gold (#D4AF37) accents, subdued professional palette
🔗 3-Step Chain Strategy
Step 1: KPI Definition & Data Audit
Prompt: "For a [dashboard type] serving [user persona], identify: (1) Top 5 primary KPIs with business definitions, (2) 8–10 secondary metrics that provide context, (3) Data sources for each metric, (4) Refresh frequency requirements (real-time / hourly / daily), (5) Benchmark or target values. Output: KPI specification document with metric prioritization."
Expected Output: Structured list of metrics with clear business logic, ensuring dashboard design focuses on what matters most to users.
Step 2: UI Design & Layout Execution
Prompt: "Design a dashboard UI in [Figma/Sketch] for [dashboard type]. Layout: (1) Top row: 4 stat cards for [primary KPIs], (2) Main section: Line chart showing [trend metric] over time, (3) Right sidebar: [donut/bar chart] for breakdown, (4) Bottom: Data table with top performers. Apply brand colors [HEX codes], use [font]. Include responsive breakpoints (1440px, 1024px, 768px)."
Expected Output: Complete high-fidelity dashboard design with all charts, tables, and UI components positioned and styled.
Step 3: Interactivity & Developer Handoff
Prompt: "Add interactive states to dashboard design: (1) Hover tooltips on chart data points, (2) Date range picker in top-right, (3) Filter dropdowns for [dimensions], (4) Loading skeleton states for charts, (5) Empty state UI when no data. Create component library (buttons, cards, inputs, charts). Export developer handoff specs: CSS color variables, spacing tokens, font sizes, SVG icons, and click interactions."
Expected Output: Production-ready design with interactive prototype, component library, and full developer documentation for seamless implementation.
💡 6 HITL (Human-in-the-Loop) Refinement Tips
🎓 AiPro Institute™
Empowering professionals with world-class AI prompt engineering resources
Part of the Digital UI/UX & Web Design Collection
