AI Skill Report Card
Creating Design Value Reports
YAML--- name: creating-design-value-reports description: Creates quarterly reports demonstrating design's business impact using the DESIGN-VALUE framework with output, outcome, efficiency, and qualitative metrics. Use when preparing design team performance reviews or business stakeholder updates. ---
Creating Design Value Reports
Quick Start15 / 15
HTML<!DOCTYPE html> <html> <head> <title>Q[X] 2024 Design Impact Report</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 20px; max-width: 8.5in; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; } .metric-card { background: #f8f9fa; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #667eea; } .big-number { font-size: 2em; font-weight: bold; color: #667eea; } .small-text { font-size: 0.9em; color: #666; } .impact-section { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } .testimonial { background: #fff; border: 1px solid #e9ecef; padding: 15px; border-radius: 6px; font-style: italic; } </style> </head> <body> <div class="header"> <h1>Design Impact Report - Q[X] 2024</h1> <p>Connecting creative excellence to measurable business outcomes</p> </div> <div class="metrics-grid"> <div class="metric-card"> <div class="big-number">[X]</div> <div class="small-text">Assets Delivered</div> </div> <div class="metric-card"> <div class="big-number">[X]%</div> <div class="small-text">Conversion Lift</div> </div> <div class="metric-card"> <div class="big-number">[X]</div> <div class="small-text">Days Saved</div> </div> <div class="metric-card"> <div class="big-number">[X]%</div> <div class="small-text">System Coverage</div> </div> </div> <div class="impact-section"> <div> <h3>Key Outcomes</h3> <ul> <li><strong>[Product/Page]:</strong> [X]% conversion improvement</li> <li><strong>Performance:</strong> [X]ms faster load time</li> <li><strong>SEO:</strong> [X] position improvement for key terms</li> </ul> </div> <div class="testimonial"> "[Stakeholder quote about design impact]" <br><small>— [Name, Title]</small> </div> </div> </body> </html>
Recommendation▾
Add specific formula or calculation method for key metrics like 'conversion lift' and 'days saved' to make the workflow more actionable
Workflow14 / 15
Progress:
- Collect output metrics from design tools/project management
- Gather outcome data from analytics platforms
- Calculate efficiency improvements
- Source stakeholder testimonials
- Create visual report using template
- Present to stakeholders with narrative
1. Output Metrics Collection
- Assets delivered: Count from Figma/design tools
- Components built: Track design system additions
- Coverage percentage: Components used / total UI elements
2. Outcome Metrics Tracking
- A/B test results for design changes
- Google Analytics conversion rate comparisons
- PageSpeed Insights before/after scores
- Search Console ranking improvements
3. Efficiency Calculations
- Design-to-dev handoff time (Figma timestamps)
- Revision cycles: Compare pre/post design system
- Component reuse: Track Figma instance usage
4. Qualitative Evidence
- Slack/email testimonials from stakeholders
- Competitive analysis screenshots
- User feedback scores
Recommendation▾
Include a section on tool integrations (Google Analytics API, Figma API) for automated data collection rather than manual processes
Examples18 / 20
Example 1: SaaS Landing Page Redesign Input: Landing page redesign project Output:
- Output: 12 assets delivered, 8 new components, 75% system coverage
- Outcome: 23% conversion improvement, 1.2s faster load, #3 to #1 ranking
- Efficiency: 40% faster handoffs, 60% fewer revisions
- Qualitative: "Design directly contributed to our best quarter" - VP Sales
Example 2: E-commerce Product Pages Input: Product page optimization Output:
- Output: 45 product page variants, 15 components, 90% system coverage
- Outcome: 18% add-to-cart increase, 15% bounce reduction
- Efficiency: 3-day to 1-day design cycles, 85% component reuse
- Qualitative: User satisfaction up 2.1 points (5-point scale)
Recommendation▾
Provide a bad example showing what NOT to include in design value reports to complement the good examples
Best Practices
Data Collection:
- Set up tracking before design changes launch
- Use UTM parameters for design-specific campaigns
- Screenshot before/after states for visual proof
Storytelling:
- Lead with business outcome, then show design contribution
- Use percentage improvements over raw numbers
- Include dollar impact when possible ($X revenue attributed)
Visual Design:
- Keep to single page for executive attention
- Use consistent color coding for metric types
- Include small charts/graphs for trend data
Stakeholder Alignment:
- Match metrics to audience priorities (revenue for executives, efficiency for ops)
- Include competitive context ("outperforming industry average")
- Show trajectory, not just point-in-time snapshots
Common Pitfalls
Attribution Errors:
- Don't claim 100% credit for business metric improvements
- Acknowledge other factors (marketing, product, seasonality)
- Use "contributed to" language for large outcomes
Vanity Metrics:
- Avoid "pixels pushed" or "hours worked" metrics
- Don't report design system adoption without business impact
- Skip social media engagement unless tied to business goals
Presentation Mistakes:
- Don't bury key metrics in dense paragraphs
- Avoid technical jargon for business stakeholders
- Don't present data without the "so what" interpretation
Data Quality:
- Don't use metrics from too-short time periods
- Avoid cherry-picked date ranges that favor design
- Don't mix correlation with causation in claims