lukeslp

ux-journey

Comprehensive UX analysis coordinating design, accessibility, and gamification agents for user flow and interaction evaluation.

lukeslp 2 Updated 4mo ago
GitHub

Install

npx skillscat add lukeslp/dreamer-skills/ux-journey

Install via the SkillsCat registry.

SKILL.md

UX Journey Analysis

You are conducting a comprehensive user experience analysis. This skill combines design expertise, accessibility review, and engagement evaluation to create delightful, inclusive, and effective user experiences.

UX Analysis Domains

1. Design System & Visual Hierarchy (@geepers_design / design-system-architect)

Swiss Design Principles:

  • Grid systems and mathematical precision
  • Typography hierarchy (size, weight, color)
  • Whitespace and rhythm
  • Color application (purposeful, not decorative)
  • Consistency across components

Evaluation Criteria:

  • Does the eye flow naturally through the interface?
  • Is importance clearly communicated?
  • Are patterns repeated predictably?
  • Is contrast sufficient (4.5:1 text, 3:1 UI)?

2. Accessibility & Inclusive Design (@geepers_a11y / accessibility-ux-reviewer)

WCAG 2.1 AA Compliance:

  • Keyboard navigation
  • Screen reader support
  • Touch targets (44x44px minimum)
  • Color independence
  • Motion sensitivity (prefers-reduced-motion)
  • Cognitive accessibility

AAC-Specific Considerations (if applicable):

  • Symbol clarity
  • Large touch targets for motor accessibility
  • Predictable navigation
  • High-frequency word prioritization

3. Engagement & Gamification (@geepers_game / gameifier-ux-enhancer)

Core Loop Analysis:

  • What is the fundamental interaction pattern?
  • Is there clear progression?
  • Are loops satisfying and complete?

Feedback Systems:

  • How does the system communicate success/failure?
  • Is feedback immediate and satisfying?
  • Are there visual, auditory cues?

Reward Structures:

  • What rewards does the system offer?
  • Are rewards frequent enough?
  • Is there variety (intrinsic/extrinsic)?

4. Interaction Patterns (@geepers_design)

User Flow Analysis:

  • Navigation clarity
  • Form interactions
  • Error handling and recovery
  • Loading states and feedback
  • Mobile considerations

Execution Strategy

Launch agents in PARALLEL:

1. @geepers_design - Visual design and hierarchy review
2. @geepers_a11y - Accessibility audit
3. @geepers_design - Interaction pattern analysis
4. @geepers_game - Engagement and gamification opportunities

Output Format

๐ŸŽจ UX JOURNEY ANALYSIS

Project: {name}
Interface: {specific page/component}
Date: {timestamp}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
           EXPERIENCE SCORE
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

Overall UX Grade: [A-F]

๐ŸŽจ Visual Design:    [โ˜…โ˜…โ˜…โ˜…โ˜†] 4/5
โ™ฟ Accessibility:     [โ˜…โ˜…โ˜…โ˜†โ˜†] 3/5
๐ŸŽฎ Engagement:       [โ˜…โ˜…โ˜†โ˜†โ˜†] 2/5
๐Ÿ”„ Interaction Flow: [โ˜…โ˜…โ˜…โ˜…โ˜†] 4/5

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
          USER JOURNEY MAP
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

[Entry] โ†’ [Discovery] โ†’ [Action] โ†’ [Feedback] โ†’ [Completion]
   โœ“         โš ๏ธ            โœ“          โŒ           โš ๏ธ

Pain Points Identified:
1. Discovery: {description of friction}
2. Feedback: {missing or poor feedback}

Moments of Delight:
1. {positive experience}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
         DESIGN EVALUATION
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

Visual Hierarchy: [CLEAR/MODERATE/CONFUSED]
- Primary CTA visibility: {assessment}
- Information architecture: {assessment}
- Typography system: {assessment}

Swiss Design Compliance:
โœ“ Grid alignment
โœ“ Consistent spacing (8px base)
โš ๏ธ Typography scale could be more pronounced
โŒ Color used decoratively in {location}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
      ACCESSIBILITY FINDINGS
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

WCAG Status: [AA COMPLIANT/PARTIALLY/NON-COMPLIANT]

Critical Issues:
- [A11Y] {description}

Keyboard Navigation: [FULL/PARTIAL/BROKEN]
Screen Reader: [EXCELLENT/GOOD/POOR]
Color Contrast: [PASSING/FAILING]

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
       ENGAGEMENT ANALYSIS
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

Core Loop Satisfaction: [HIGH/MEDIUM/LOW]

Gamification Opportunities:
1. ๐Ÿ† {achievement system suggestion}
2. ๐Ÿ“ˆ {progress indicator suggestion}
3. ๐ŸŽฏ {goal/milestone suggestion}
4. โœจ {micro-interaction suggestion}

Feedback System Quality:
- Success feedback: {rating}
- Error feedback: {rating}
- Progress indication: {rating}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
         RECOMMENDATIONS
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

Quick Wins (High Impact, Low Effort):
1. {immediate improvement}
2. {easy fix}

Strategic Improvements:
1. {medium-term enhancement}
2. {design system update}

Engagement Enhancements:
1. {gamification addition}
2. {feedback improvement}

UX Evaluation Framework

The 5 E's of UX

  1. Effective - Can users accomplish their goals?
  2. Efficient - How quickly can they do it?
  3. Engaging - Is the experience enjoyable?
  4. Error-tolerant - How gracefully does it handle mistakes?
  5. Easy to learn - Can new users figure it out?

Emotional Journey Mapping

Track user emotions through the flow:

  • ๐Ÿ˜Š Delight - Exceeds expectations
  • ๐Ÿ˜ Neutral - Meets expectations
  • ๐Ÿ˜• Frustration - Below expectations
  • ๐Ÿ˜ค Abandonment - Complete failure

When to Use UX Journey

  • New feature design - Before building
  • Post-implementation review - After building
  • User feedback analysis - When users report issues
  • Competitive analysis - Comparing to alternatives
  • Periodic review - Quarterly UX health checks

Key Principles

  1. User-centered - Always start with user goals
  2. Inclusive - Accessibility is not optional
  3. Delightful - Good UX creates joy
  4. Measurable - Define success metrics
  5. Iterative - UX improves through feedback

Related Skills

  • /quality-audit - Includes accessibility as part of broader audit
  • /scout - Quick check may surface obvious UX issues
  • /data-artist - For data visualization UX specifically