home / skills / dylantarre / animation-principles / product-manager

This skill helps product managers prioritize animation ROI and strategy using Disney's principles to drive measurable business outcomes.

npx playbooks add skill dylantarre/animation-principles --skill product-manager

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.4 KB
---
name: product-manager
description: Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
---

# Product Manager: Animation ROI & Strategy

You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.

## The 12 Principles for Product Strategy

### 1. Squash and Stretch
**Value**: Increases perceived quality and responsiveness. Users rate "squishy" interactions as more premium.
**Priority**: High for consumer apps, medium for B2B. Quick win—CSS-only implementation.

### 2. Anticipation
**Value**: Reduces user errors, decreases support tickets. Pre-action cues prevent accidental submissions.
**Priority**: High for destructive actions (delete, purchase). Measure: error rate reduction, support volume.

### 3. Staging
**Value**: Improves feature discovery and onboarding completion. Guided attention increases activation.
**Priority**: Critical for new user flows. Track: onboarding funnel completion, time-to-value.

### 4. Straight Ahead vs Pose to Pose
**Value**: Development efficiency trade-off. Pose to pose = predictable timeline, easier QA. Straight ahead = creative flexibility, harder to estimate.
**Priority**: Process decision—establish which approach for which feature type.

### 5. Follow Through and Overlapping Action
**Value**: Content hierarchy comprehension. Users understand information architecture through motion sequencing.
**Priority**: High for complex dashboards, data-heavy interfaces. Metric: task completion rate.

### 6. Slow In and Slow Out
**Value**: Perceived performance improvement. Proper easing makes apps feel faster without backend optimization.
**Priority**: High ROI—no infrastructure cost. Quick implementation with significant perception gains.

### 7. Arc
**Value**: Premium feel differentiation. Curved paths distinguish from competitors using linear motion.
**Priority**: Medium—brand differentiator. Consider for flagship interactions, hero moments.

### 8. Secondary Action
**Value**: Emotional engagement without feature cost. Micro-interactions increase delight metrics.
**Priority**: Low initial, high polish phase. Add after core functionality. Track: NPS, retention correlation.

### 9. Timing
**Value**: Performance perception. 200ms transitions feel instant. Poor timing feels broken.
**Priority**: Critical foundation. Establish timing system early. Technical debt if ignored.

### 10. Exaggeration
**Value**: Feature noticeability. New features need attention-grabbing introduction before settling to subtle.
**Priority**: High for feature launches, notifications. Balance against accessibility requirements.

### 11. Solid Drawing
**Value**: Spatial consistency reduces cognitive load. Users navigate faster with predictable spatial behavior.
**Priority**: Architecture decision. Define spatial system in design system. Long-term efficiency.

### 12. Appeal
**Value**: Brand equity and trust. Polished animation correlates with perceived reliability.
**Priority**: Table stakes for consumer, differentiator for B2B. Competitive analysis metric.

## Prioritization Framework

**Must Have**: Timing, Staging, Anticipation (usability impact)
**Should Have**: Easing, Follow-through (perception improvement)
**Nice to Have**: Secondary action, Arc, Exaggeration (delight layer)

Always include reduced-motion alternative in scope.

Overview

This skill helps product managers prioritize animation investments using Disney’s 12 animation principles to drive measurable business outcomes. It frames each principle in terms of user value, priority levels, and concrete metrics so PMs can justify motion work and build a motion roadmap. The guidance emphasizes usability, perception, and business KPIs rather than purely decorative motion.

How this skill works

The skill maps each of the 12 principles to product priorities, typical ROI, and recommended metrics (e.g., error rate, onboarding completion, task completion). It produces a prioritization framework (Must/Should/Nice) and prescriptive implementation guidance such as quick wins, accessibility considerations, and when to include reduced-motion alternatives. Use it to convert animation concepts into measurable product initiatives.

When to use it

  • Prioritizing animation features in a product roadmap or quarterly plan
  • Designing motion for critical user flows like onboarding, destructive actions, or dashboards
  • Building a motion system or design-system guidance for consistent spatial and timing rules
  • Making a business case for animation work to stakeholders or engineering
  • Planning feature launches that need attention-grabbing intro animations

Best practices

  • Treat Timing, Staging, and Anticipation as must-haves for usability impact
  • Define a global timing and easing system early to avoid technical debt
  • Always include a reduced-motion alternative and test for accessibility
  • Start with CSS or micro-interactions for quick wins (squash/stretch, easing)
  • Prioritize follow-through and overlapping action for complex, data-heavy interfaces

Example use cases

  • Reduce accidental destructive actions by adding anticipation cues; measure support ticket reduction
  • Increase onboarding completion by staging key steps with guided attention animations
  • Improve perceived performance by applying slow-in/slow-out easing; measure perceived speed surveys
  • Differentiate flagship interactions with arc-based motion and subtle exaggeration during launch
  • Add secondary micro-interactions late in the roadmap to boost NPS and retention correlation

FAQ

Which animation principles should I implement first?

Prioritize Timing, Staging, and Anticipation for usability and error reduction; add easing and follow-through next for perception gains.

How do I measure the impact of animation changes?

Use direct metrics: error rate, support volume, onboarding funnel completion, task completion, perceived performance surveys, NPS, and retention correlation.