AI Skill Report Card
Designing B2B Data Visualizations
B2B Data Visualization Design
Quick Start13 / 15
Python# DATAVIZ Framework Applied 1. One Insight Rule: "SaaS companies with visual content get 94% more leads" 2. Chart Type: Comparison → Horizontal bar chart 3. Data-Ink: Remove gridlines, use direct labels, minimize non-essential elements 4. Visual Hierarchy: Eye entry at insight callout → bars → supporting text 5. Brand Style: Company colors, fonts, consistent spacing 6. Export: SVG for web, 300dpi PNG for PDF, square format for LinkedIn
Recommendation▾
Make the Quick Start section more immediately actionable - provide a complete example with actual data rather than just the framework steps
Workflow14 / 15
Phase 1: Strategy & Structure Progress:
- Apply "One Insight" Rule - define single takeaway
- Select chart type using DATAVIZ matrix
- Plan visual hierarchy (entry point → flow → key takeaway)
Phase 2: Design & Optimize Progress:
- Apply data-ink ratio principles
- Implement brand-consistent styling
- Test readability at target sizes
Phase 3: Output & Distribution Progress:
- Export in required formats
- Verify quality across use cases
Recommendation▾
Reduce verbosity in sections like 'Data-Ink Ratio Optimization' - Claude knows what data-ink ratio is, focus on B2B-specific applications
Chart Type Selection Matrix
Comparison: Bar charts (horizontal for long labels), column charts, dot plots
- Use when: Comparing values across categories
- B2B examples: Revenue by quarter, feature adoption rates
Distribution: Histograms, box plots, violin plots
- Use when: Showing spread of data
- B2B examples: Customer satisfaction scores, response times
Composition: Stacked bars, pie charts (max 5 slices), treemaps
- Use when: Parts of a whole
- B2B examples: Budget allocation, market share breakdown
Relationship: Scatter plots, line charts, correlation matrices
- Use when: Showing connections between variables
- B2B examples: Price vs. adoption, time-series trends
Data-Ink Ratio Optimization
Remove:
- Unnecessary gridlines (keep major ones only)
- 3D effects and shadows
- Decorative elements that don't aid comprehension
Emphasize:
- Direct data labels over legends when possible
- Consistent color coding
- Clear axis labels and units
Example Optimization: Before: Gridlines + legend + 3D bars + decorative background After: Direct labels + minimal gridlines + flat bars + white background
Visual Hierarchy Framework
Eye Entry Point (0.5 seconds):
- Bold headline with key insight
- High-contrast color for main data point
- Size: 24-32pt for headlines
Narrative Flow (3-5 seconds):
- Logical reading path (Z-pattern for Western audiences)
- Progressive disclosure of supporting data
- Consistent spacing (8px grid system)
Key Takeaway (reinforcement):
- Callout box or highlighted annotation
- Action-oriented language
- Brand color accent
Examples16 / 20
Example 1: SaaS Metric Dashboard Input: Monthly recurring revenue data for 12 months Output: Line chart with:
- One insight: "MRR grew 340% after product redesign in Q3"
- Entry point: Large percentage callout
- Flow: Annotated inflection point → trend line → supporting metrics
- Export: 1200x800 PNG for blog, 1080x1080 for LinkedIn
Example 2: Market Research Infographic Input: Survey data on B2B buying preferences Output: Horizontal bar chart with:
- One insight: "Price ranks 4th in B2B software decisions"
- Entry point: Surprising statistic highlighted
- Flow: Ranked bars → methodology note → CTA
- Brand styling: Company colors, consistent typography
Recommendation▾
Provide more concrete input/output examples with actual numbers and visual descriptions rather than conceptual examples
Best Practices
- Mobile-first sizing: Design for smallest screen, scale up
- Color accessibility: Ensure 4.5:1 contrast ratio minimum
- Typography hierarchy: Max 3 font sizes, consistent font family
- White space: Use 1.5x line spacing, generous margins
- Data labels: Round to 2 significant digits max
- Sources: Always include data source and date
Export Format Guide
Web Use:
- SVG for scalability and crisp text
- PNG fallback at 2x resolution
- WebP for faster loading
Print/PDF:
- 300 DPI minimum
- CMYK color profile
- Embedded fonts
Social Media:
- Square format (1080x1080) for Instagram/LinkedIn
- Horizontal (1200x630) for Twitter/Facebook
- High contrast for mobile viewing
Common Pitfalls
- Multiple insights: Trying to communicate too many points in one visual
- Chart junk: Adding decorative elements that distract from data
- Poor mobile experience: Not testing readability on small screens
- Inconsistent branding: Using different colors/fonts across series
- Missing context: Not providing scale, timeframe, or methodology
- Wrong chart type: Using pie charts for more than 5 categories
- Unreadable labels: Text too small or poor contrast