AI Skill Report Card
Analyzing Design Patterns
Design Pattern Analysis & Extraction
Quick Start
Visit a site that caught your attention, take a screenshot, then analyze:
Pattern: [Name the pattern]
Context: [Where/when it appears]
Mechanism: [How it works]
Why it works: [Psychology/usability reason]
Adaptation: [How to apply elsewhere]
Recommendation▾
Add more concrete input/output examples showing the full analysis process with real website patterns and their extracted principles
Workflow
Step 1: Capture
- Screenshot the specific interaction/layout
- Note the URL and context
- Record your initial reaction
Step 2: Deconstruct
- Identify the core mechanism
- Map the user flow
- Note micro-interactions and timing
Step 3: Abstract the Principle
- Strip away visual styling
- Focus on the behavioral pattern
- Identify the underlying need it solves
Step 4: Cross-Pollinate
- Look for similar patterns in non-digital contexts (physical spaces, games, nature)
- Consider inverse applications
- Test in different contexts
Progress Checklist:
- Pattern captured and named
- Core mechanism identified
- Principle abstracted
- Adaptation strategy defined
- Cross-domain inspiration explored
Recommendation▾
Include a template or framework for documenting patterns consistently (e.g., a standardized format with specific fields to fill out)
Examples
Example 1: Stripe's Progressive Disclosure Input: Stripe's pricing page that reveals complexity gradually Output:
- Pattern: Confidence-building revelation
- Mechanism: Start simple, add detail on demand
- Why: Reduces cognitive load while maintaining transparency
- Adaptation: Apply to onboarding flows, feature explanations
Example 2: Physical Inspiration - Hotel Key Cards Input: Hotel key card that only works when you're supposed to be there Output:
- Pattern: Contextual permissions
- Digital adaptation: Features that unlock based on user journey stage
- Application: Progressive feature access in apps
Recommendation▾
Expand the cross-domain inspiration section with specific examples of how physical world patterns translate to digital interfaces
Best Practices
- Study edge cases - Look at error states, empty states, loading states
- Time-box analysis - 15 minutes max per pattern to avoid overthinking
- Document immediately - Insights fade quickly
- Test assumptions - What you think works might not
- Look beyond screens - Architecture, retail, games, nature all inform UX
- Focus on jobs-to-be-done - What problem does this really solve?
Common Pitfalls
- Don't copy aesthetics - extract the behavioral principle
- Don't assume context - what works for Stripe might not work for your users
- Don't collect without applying - build a practice pipeline
- Don't ignore failed patterns - understand why they don't work
- Don't stay in your domain - the best insights come from unexpected places
- Don't trust your first interpretation - dig deeper into the "why"