diff --git a/src/core/tasks/validate-workflow.xml b/src/core/tasks/validate-workflow.xml index 157af900..8ee7059c 100644 --- a/src/core/tasks/validate-workflow.xml +++ b/src/core/tasks/validate-workflow.xml @@ -10,7 +10,8 @@ If checklist not provided, load checklist.md from workflow location - If document not provided, ask user: "Which document should I validate?" + Try to fuzzy match for files similar to the input document name or if user did not provide the document. If document not + provided or unsure, ask user: "Which document should I validate?" Load both the checklist and document diff --git a/src/modules/bmm/agents/ux-designer.agent.yaml b/src/modules/bmm/agents/ux-designer.agent.yaml index 164f9cc5..6d4c47e4 100644 --- a/src/modules/bmm/agents/ux-designer.agent.yaml +++ b/src/modules/bmm/agents/ux-designer.agent.yaml @@ -22,6 +22,16 @@ agent: workflow: "{project-root}/bmad/bmm/workflows/workflow-status/workflow.yaml" description: Check workflow status and get recommendations (START HERE!) + - trigger: create-design + workflow: "{project-root}/bmad/bmm/workflows/1-discover-workflows/design-thinking/workflow.yaml" + description: Conduct Design Thinking Workshop to Define the User Specification + + - trigger: validate-design + workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/validate-ux-design/workflow.yaml" + checklist: "{project-root}/bmad/bmm/workflows/2-plan-workflows/validate-ux-design/checklist.md" + document: "{output_folder}/ux-spec.md" + description: Validate UX Specification and Design Artifacts + - trigger: ux-spec workflow: "{project-root}/bmad/bmm/workflows/2-plan-workflows/ux-spec/workflow.yaml" description: Create UX/UI Specification and AI Frontend Prompts diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md new file mode 100644 index 00000000..f307ed5e --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/checklist.md @@ -0,0 +1,268 @@ +# Create UX Design Workflow Validation Checklist + +**Purpose**: Validate UX Design Specification is complete, collaborative, and implementation-ready. + +**Paradigm**: Visual collaboration-driven, not template generation + +**Expected Outputs**: + +- ux-design-specification.md +- ux-color-themes.html (color theme visualizer) +- ux-design-directions.html (design mockups) +- Optional: ux-prototype.html, ux-component-showcase.html, ai-frontend-prompt.md + +--- + +## 1. Output Files Exist + +- [ ] **ux-design-specification.md** created in output folder +- [ ] **ux-color-themes.html** generated (interactive color exploration) +- [ ] **ux-design-directions.html** generated (6-8 design mockups) +- [ ] No unfilled {{template_variables}} in specification +- [ ] All sections have content (not placeholder text) + +--- + +## 2. Collaborative Process Validation + +**The workflow should facilitate decisions WITH the user, not FOR them** + +- [ ] **Design system chosen by user** (not auto-selected) +- [ ] **Color theme selected from options** (user saw visualizations and chose) +- [ ] **Design direction chosen from mockups** (user explored 6-8 options) +- [ ] **User journey flows designed collaboratively** (options presented, user decided) +- [ ] **UX patterns decided with user input** (not just generated) +- [ ] **Decisions documented WITH rationale** (why each choice was made) + +--- + +## 3. Visual Collaboration Artifacts + +### Color Theme Visualizer + +- [ ] **HTML file exists and is valid** (ux-color-themes.html) +- [ ] **Shows 3-4 theme options** (or documented existing brand) +- [ ] **Each theme has complete palette** (primary, secondary, semantic colors) +- [ ] **Live UI component examples** in each theme (buttons, forms, cards) +- [ ] **Side-by-side comparison** enabled +- [ ] **User's selection documented** in specification + +### Design Direction Mockups + +- [ ] **HTML file exists and is valid** (ux-design-directions.html) +- [ ] **6-8 different design approaches** shown +- [ ] **Full-screen mockups** of key screens +- [ ] **Design philosophy labeled** for each direction (e.g., "Dense Dashboard", "Spacious Explorer") +- [ ] **Interactive navigation** between directions +- [ ] **Responsive preview** toggle available +- [ ] **User's choice documented WITH reasoning** (what they liked, why it fits) + +--- + +## 4. Design System Foundation + +- [ ] **Design system chosen** (or custom design decision documented) +- [ ] **Current version identified** (if using established system) +- [ ] **Components provided by system documented** +- [ ] **Custom components needed identified** +- [ ] **Decision rationale clear** (why this system for this project) + +--- + +## 5. Core Experience Definition + +- [ ] **Defining experience articulated** (the ONE thing that makes this app unique) +- [ ] **Novel UX patterns identified** (if applicable) +- [ ] **Novel patterns fully designed** (interaction model, states, feedback) +- [ ] **Core experience principles defined** (speed, guidance, flexibility, feedback) + +--- + +## 6. Visual Foundation + +### Color System + +- [ ] **Complete color palette** (primary, secondary, accent, semantic, neutrals) +- [ ] **Semantic color usage defined** (success, warning, error, info) +- [ ] **Color accessibility considered** (contrast ratios for text) +- [ ] **Brand alignment** (follows existing brand or establishes new identity) + +### Typography + +- [ ] **Font families selected** (heading, body, monospace if needed) +- [ ] **Type scale defined** (h1-h6, body, small, etc.) +- [ ] **Font weights documented** (when to use each) +- [ ] **Line heights specified** for readability + +### Spacing & Layout + +- [ ] **Spacing system defined** (base unit, scale) +- [ ] **Layout grid approach** (columns, gutters) +- [ ] **Container widths** for different breakpoints + +--- + +## 7. Design Direction + +- [ ] **Specific direction chosen** from mockups (not generic) +- [ ] **Layout pattern documented** (navigation, content structure) +- [ ] **Visual hierarchy defined** (density, emphasis, focus) +- [ ] **Interaction patterns specified** (modal vs inline, disclosure approach) +- [ ] **Visual style documented** (minimal, balanced, rich, maximalist) +- [ ] **User's reasoning captured** (why this direction fits their vision) + +--- + +## 8. User Journey Flows + +- [ ] **All critical journeys from PRD designed** (no missing flows) +- [ ] **Each flow has clear goal** (what user accomplishes) +- [ ] **Flow approach chosen collaboratively** (user picked from options) +- [ ] **Step-by-step documentation** (screens, actions, feedback) +- [ ] **Decision points and branching** defined +- [ ] **Error states and recovery** addressed +- [ ] **Success states specified** (completion feedback) +- [ ] **Mermaid diagrams or clear flow descriptions** included + +--- + +## 9. Component Library Strategy + +- [ ] **All required components identified** (from design system + custom) +- [ ] **Custom components fully specified**: + - Purpose and user-facing value + - Content/data displayed + - User actions available + - All states (default, hover, active, loading, error, disabled) + - Variants (sizes, styles, layouts) + - Behavior on interaction + - Accessibility considerations +- [ ] **Design system components customization needs** documented + +--- + +## 10. UX Pattern Consistency Rules + +**These patterns ensure consistent UX across the entire app** + +- [ ] **Button hierarchy defined** (primary, secondary, tertiary, destructive) +- [ ] **Feedback patterns established** (success, error, warning, info, loading) +- [ ] **Form patterns specified** (labels, validation, errors, help text) +- [ ] **Modal patterns defined** (sizes, dismiss behavior, focus, stacking) +- [ ] **Navigation patterns documented** (active state, breadcrumbs, back button) +- [ ] **Empty state patterns** (first use, no results, cleared content) +- [ ] **Confirmation patterns** (when to confirm destructive actions) +- [ ] **Notification patterns** (placement, duration, stacking, priority) +- [ ] **Search patterns** (trigger, results, filters, no results) +- [ ] **Date/time patterns** (format, timezone, pickers) + +**Each pattern should have:** + +- [ ] Clear specification (how it works) +- [ ] Usage guidance (when to use) +- [ ] Examples (concrete implementations) + +--- + +## 11. Responsive Design + +- [ ] **Breakpoints defined** for target devices (mobile, tablet, desktop) +- [ ] **Adaptation patterns documented** (how layouts change) +- [ ] **Navigation adaptation** (how nav changes on small screens) +- [ ] **Content organization changes** (multi-column to single, grid to list) +- [ ] **Touch targets adequate** on mobile (minimum size specified) +- [ ] **Responsive strategy aligned** with chosen design direction + +--- + +## 12. Accessibility + +- [ ] **WCAG compliance level specified** (A, AA, or AAA) +- [ ] **Color contrast requirements** documented (ratios for text) +- [ ] **Keyboard navigation** addressed (all interactive elements accessible) +- [ ] **Focus indicators** specified (visible focus states) +- [ ] **ARIA requirements** noted (roles, labels, announcements) +- [ ] **Screen reader considerations** (meaningful labels, structure) +- [ ] **Alt text strategy** for images +- [ ] **Form accessibility** (label associations, error identification) +- [ ] **Testing strategy** defined (automated tools, manual testing) + +--- + +## 13. Coherence and Integration + +- [ ] **Design system and custom components visually consistent** +- [ ] **All screens follow chosen design direction** +- [ ] **Color usage consistent with semantic meanings** +- [ ] **Typography hierarchy clear and consistent** +- [ ] **Similar actions handled the same way** (pattern consistency) +- [ ] **All PRD user journeys have UX design** +- [ ] **All entry points designed** +- [ ] **Error and edge cases handled** +- [ ] **Every interactive element meets accessibility requirements** +- [ ] **All flows keyboard-navigable** +- [ ] **Colors meet contrast requirements** + +--- + +## 14. Decision Rationale + +**Unlike template-driven workflows, this workflow should document WHY** + +- [ ] **Design system choice has rationale** (why this fits the project) +- [ ] **Color theme selection has reasoning** (why this emotional impact) +- [ ] **Design direction choice explained** (what user liked, how it fits vision) +- [ ] **User journey approaches justified** (why this flow pattern) +- [ ] **UX pattern decisions have context** (why these patterns for this app) +- [ ] **Responsive strategy aligned with user priorities** +- [ ] **Accessibility level appropriate for deployment intent** + +--- + +## 15. Implementation Readiness + +- [ ] **Designers can create high-fidelity mockups** from this spec +- [ ] **Developers can implement** with clear UX guidance +- [ ] **Sufficient detail** for frontend development +- [ ] **Component specifications actionable** (states, variants, behaviors) +- [ ] **Flows implementable** (clear steps, decision logic, error handling) +- [ ] **Visual foundation complete** (colors, typography, spacing all defined) +- [ ] **Pattern consistency enforceable** (clear rules for implementation) + +--- + +## 16. Critical Failures (Auto-Fail) + +- [ ] ❌ **No visual collaboration** (color themes or design mockups not generated) +- [ ] ❌ **User not involved in decisions** (auto-generated without collaboration) +- [ ] ❌ **No design direction chosen** (missing key visual decisions) +- [ ] ❌ **No user journey designs** (critical flows not documented) +- [ ] ❌ **No UX pattern consistency rules** (implementation will be inconsistent) +- [ ] ❌ **Missing core experience definition** (no clarity on what makes app unique) +- [ ] ❌ **No component specifications** (components not actionable) +- [ ] ❌ **Responsive strategy missing** (for multi-platform projects) +- [ ] ❌ **Accessibility ignored** (no compliance target or requirements) +- [ ] ❌ **Generic/templated content** (not specific to this project) + +--- + +## Validation Notes + +**Document findings:** + +- UX Design Quality: [Exceptional / Strong / Adequate / Needs Work / Incomplete] +- Collaboration Level: [Highly Collaborative / Collaborative / Somewhat Collaborative / Generated] +- Visual Artifacts: [Complete & Interactive / Partial / Missing] +- Implementation Readiness: [Ready / Needs Design Phase / Not Ready] + +## **Strengths:** + +## **Areas for Improvement:** + +## **Recommended Actions:** + +**Ready for next phase?** [Yes - Proceed to Design / Yes - Proceed to Development / Needs Refinement] + +--- + +_This checklist validates collaborative UX design facilitation, not template generation. A successful UX workflow creates design decisions WITH the user through visual exploration and informed choices._ diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml new file mode 100644 index 00000000..d596f7a4 --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/color-psychology.yaml @@ -0,0 +1,337 @@ +# Color Psychology - Guide for color theme generation +# Maps emotional goals, industries, and brand personalities to color strategies + +emotional_impacts: + trust_and_security: + primary_colors: ["Blue", "Navy", "Deep Blue"] + supporting_colors: ["Gray", "White", "Silver"] + avoid: ["Bright Red", "Neon colors", "Purple"] + industries: ["Finance", "Banking", "Insurance", "Healthcare", "Legal"] + personality: "Professional, Reliable, Stable, Trustworthy" + examples: ["PayPal", "Chase Bank", "Facebook", "LinkedIn"] + + energy_and_excitement: + primary_colors: ["Red", "Orange", "Bright Yellow"] + supporting_colors: ["Black", "White", "Dark Gray"] + avoid: ["Muted tones", "Pastels", "Brown"] + industries: ["Sports", "Entertainment", "Food & Beverage", "Events"] + personality: "Bold, Dynamic, Passionate, Energetic" + examples: ["Coca-Cola", "Netflix", "McDonald's", "Spotify"] + + creativity_and_innovation: + primary_colors: ["Purple", "Magenta", "Electric Blue", "Vibrant Green"] + supporting_colors: ["White", "Black", "Gradients"] + avoid: ["Corporate Blue", "Dull Gray", "Brown"] + industries: ["Tech Startups", "Design", "Creative", "Gaming"] + personality: "Innovative, Creative, Forward-thinking, Unique" + examples: ["Twitch", "Adobe Creative Cloud", "Discord", "Figma"] + + calm_and_wellness: + primary_colors: ["Soft Blue", "Green", "Teal", "Mint"] + supporting_colors: ["White", "Cream", "Light Gray", "Natural tones"] + avoid: ["Harsh Red", "Neon", "Dark/Heavy colors"] + industries: ["Healthcare", "Wellness", "Meditation", "Spa", "Fitness"] + personality: "Peaceful, Healthy, Natural, Balanced" + examples: ["Calm", "Headspace", "Fitbit", "Whole Foods"] + + luxury_and_sophistication: + primary_colors: ["Black", "Gold", "Deep Purple", "Burgundy"] + supporting_colors: ["White", "Cream", "Silver", "Dark Gray"] + avoid: ["Bright primary colors", "Pastels", "Neon"] + industries: ["Luxury Brands", "High-end Retail", "Premium Services"] + personality: "Elegant, Exclusive, Premium, Refined" + examples: ["Chanel", "Rolex", "Lexus", "Apple (premium products)"] + + friendly_and_approachable: + primary_colors: ["Warm Orange", "Coral", "Sunny Yellow", "Sky Blue"] + supporting_colors: ["White", "Cream", "Light Gray"] + avoid: ["Dark/Heavy colors", "Corporate Blue", "Black"] + industries: ["Education", "Community", "Social", "Consumer Apps"] + personality: "Friendly, Warm, Welcoming, Accessible" + examples: ["Mailchimp", "Airbnb", "Duolingo", "Slack"] + + minimal_and_modern: + primary_colors: ["Black", "White", "One accent color"] + supporting_colors: ["Light Gray", "Dark Gray", "Neutral tones"] + avoid: ["Multiple bright colors", "Gradients", "Heavy decoration"] + industries: ["Tech", "Design", "Fashion", "Architecture"] + personality: "Clean, Modern, Focused, Simple" + examples: ["Apple", "Stripe", "Medium", "Notion"] + + playful_and_fun: + primary_colors: ["Bright Pink", "Purple", "Turquoise", "Lime Green"] + supporting_colors: ["White", "Pastels", "Gradients"] + avoid: ["Corporate colors", "Muted tones", "All dark"] + industries: ["Kids", "Gaming", "Entertainment", "Creative Tools"] + personality: "Playful, Fun, Youthful, Energetic" + examples: ["Spotify (brand refresh)", "TikTok", "Snapchat", "Nintendo"] + + natural_and_organic: + primary_colors: ["Earth Green", "Brown", "Terracotta", "Sage"] + supporting_colors: ["Cream", "Beige", "Natural wood tones"] + avoid: ["Neon", "Artificial colors", "Harsh blacks"] + industries: ["Organic", "Sustainability", "Outdoor", "Food"] + personality: "Natural, Authentic, Earthy, Sustainable" + examples: ["Patagonia", "Whole Foods", "The Honest Company", "Allbirds"] + +color_meanings: + blue: + emotions: ["Trust", "Calm", "Professional", "Reliable", "Security"] + variations: + light_blue: "Calm, peaceful, open" + navy: "Professional, authoritative, corporate" + bright_blue: "Energy, tech, modern" + teal: "Sophisticated, unique, creative" + usage: "Most popular brand color, especially tech and finance" + caution: "Overused, can feel cold or corporate" + + red: + emotions: ["Passion", "Energy", "Urgency", "Love", "Danger"] + variations: + bright_red: "Excitement, urgency, action" + dark_red: "Sophistication, luxury" + coral: "Friendly, warm, modern" + usage: "CTAs, warnings, important actions" + caution: "Can be aggressive, use sparingly" + + green: + emotions: ["Growth", "Nature", "Health", "Wealth", "Harmony"] + variations: + bright_green: "Energy, growth, fresh" + forest_green: "Stable, wealthy, traditional" + mint: "Fresh, modern, calm" + lime: "Playful, energetic, youthful" + usage: "Sustainability, health, finance (money)" + caution: "Can feel too natural or environmental" + + yellow: + emotions: ["Happiness", "Optimism", "Warmth", "Caution"] + variations: + bright_yellow: "Happy, energetic, attention-grabbing" + gold: "Luxury, premium, celebration" + mustard: "Warm, retro, sophisticated" + usage: "Accents, highlights, warnings" + caution: "Hard to read on white, can be overwhelming" + + purple: + emotions: ["Creativity", "Luxury", "Wisdom", "Spirituality"] + variations: + bright_purple: "Creative, fun, modern" + deep_purple: "Luxury, sophistication" + lavender: "Calm, gentle, feminine" + usage: "Creative brands, beauty, luxury" + caution: "Can feel too feminine or spiritual for some brands" + + orange: + emotions: ["Energy", "Enthusiasm", "Creativity", "Fun"] + variations: + bright_orange: "Energy, playful, attention" + burnt_orange: "Warm, autumn, natural" + coral: "Friendly, modern, approachable" + usage: "CTAs, playful brands, food" + caution: "Can be overwhelming, use as accent" + + pink: + emotions: ["Playfulness", "Romance", "Youthfulness", "Compassion"] + variations: + hot_pink: "Bold, modern, energetic" + soft_pink: "Gentle, romantic, calming" + neon_pink: "Edgy, youthful, attention-grabbing" + usage: "Beauty, fashion, modern brands breaking gender norms" + caution: "Traditionally gendered, modern usage is more diverse" + + black: + emotions: ["Sophistication", "Luxury", "Power", "Modern"] + usage: "Luxury brands, text, backgrounds, minimalist designs" + best_with: ["White", "Gold", "Silver", "One bright accent"] + caution: "Can feel heavy or dark if overused" + + white: + emotions: ["Purity", "Simplicity", "Clean", "Modern"] + usage: "Backgrounds, spacing, minimalist designs" + best_with: "Any color as accent" + caution: "Needs color for visual interest" + + gray: + emotions: ["Neutral", "Professional", "Sophisticated", "Modern"] + variations: + light_gray: "Subtle, backgrounds, dividers" + charcoal: "Professional, modern, readable" + usage: "Neutral backgrounds, text, shadows" + caution: "Can feel boring or corporate if sole color" + +semantic_colors: + success: + recommended: ["Green", "Teal", "Blue-Green"] + meaning: "Completion, correct, positive action" + usage: "Success messages, confirmations, completed states" + + error: + recommended: ["Red", "Crimson", "Dark Red"] + meaning: "Failure, incorrect, warning" + usage: "Error messages, validation failures, destructive actions" + + warning: + recommended: ["Orange", "Amber", "Yellow"] + meaning: "Caution, attention needed, important" + usage: "Warnings, important notices, confirmations needed" + + info: + recommended: ["Blue", "Light Blue", "Purple"] + meaning: "Information, neutral notification" + usage: "Info messages, tips, neutral notifications" + +color_palette_structures: + monochromatic: + description: "Shades and tints of single color" + good_for: "Minimalist, cohesive, simple" + example: "Various blues from light to dark" + difficulty: "Easy" + + analogous: + description: "Colors next to each other on color wheel" + good_for: "Harmonious, natural, cohesive" + example: "Blue, blue-green, green" + difficulty: "Easy" + + complementary: + description: "Colors opposite on color wheel" + good_for: "High contrast, vibrant, attention-grabbing" + example: "Blue and orange" + difficulty: "Moderate (can be jarring)" + + triadic: + description: "Three colors evenly spaced on wheel" + good_for: "Vibrant, balanced, playful" + example: "Red, yellow, blue" + difficulty: "Moderate" + + split_complementary: + description: "Base color + two adjacent to complement" + good_for: "Balanced, sophisticated, interesting" + example: "Blue, red-orange, yellow-orange" + difficulty: "Moderate" + + 60_30_10_rule: + description: "60% dominant, 30% secondary, 10% accent" + good_for: "Balanced, professional, not overwhelming" + application: + dominant_60: "Background, main surfaces" + secondary_30: "Cards, secondary surfaces, navigation" + accent_10: "CTAs, highlights, important elements" + +industry_color_trends: + tech: + trending: ["Blue (trust)", "Purple (innovation)", "Gradients", "Dark mode"] + examples: ["Facebook Blue", "Stripe Purple", "GitHub Dark"] + + finance: + traditional: ["Blue", "Green (money)", "Navy", "Gold"] + modern: ["Bright Blue", "Teal", "Black with accent"] + + healthcare: + traditional: ["Blue (trust)", "Green (health)", "White (clean)"] + modern: ["Teal", "Soft Blue", "Mint", "Warm accents"] + + ecommerce: + trending: ["Bold colors", "Black & White with accent", "Trust colors"] + cta_colors: ["Orange", "Red", "Bright Green", "for 'Buy' buttons"] + + saas: + trending: ["Blue (trust)", "Purple (innovation)", "Modern Gradients"] + avoid: ["Dull gray", "Brown", "Too many colors"] + + education: + traditional: ["Red", "Blue", "Green", "Yellow (primary colors)"] + modern: ["Friendly Blue", "Warm Orange", "Playful Purple"] + + food_beverage: + appetite: ["Red (stimulates)", "Orange", "Yellow", "Brown (natural)"] + healthy: ["Green", "Earth tones", "Natural colors"] + +theme_generation_strategies: + by_brand_personality: + professional: + primary: "Navy Blue or Charcoal" + secondary: "Light Gray" + accent: "Subtle Blue or Green" + style: "Minimal, clean, trustworthy" + + playful: + primary: "Bright Purple or Turquoise" + secondary: "White" + accent: "Pink or Yellow" + style: "Gradients, rounded, fun" + + luxury: + primary: "Black" + secondary: "White or Cream" + accent: "Gold or Deep Purple" + style: "Sophisticated, minimal, high-end" + + friendly: + primary: "Warm Orange or Coral" + secondary: "Cream or Light Blue" + accent: "Sunny Yellow or Teal" + style: "Warm, approachable, welcoming" + + by_target_audience: + gen_z: + style: "Bold, gradients, high contrast, playful" + colors: ["Bright Purple", "Neon Green", "Hot Pink", "Electric Blue"] + + millennials: + style: "Modern, subtle gradients, sophisticated" + colors: ["Teal", "Coral", "Muted Purple", "Navy"] + + business_professionals: + style: "Clean, professional, trustworthy" + colors: ["Navy", "Charcoal", "Subtle Blue", "Gray"] + + children: + style: "Bright, primary colors, playful" + colors: ["Primary Red", "Bright Yellow", "Sky Blue", "Grass Green"] + +accessibility_considerations: + contrast_ratios: + wcag_aa_normal: "4.5:1 minimum for normal text" + wcag_aa_large: "3:1 minimum for large text (18pt+ or 14pt+ bold)" + wcag_aaa_normal: "7:1 minimum for normal text (enhanced)" + + color_blindness: + types: + - "Deuteranopia (red-green, most common)" + - "Protanopia (red-green)" + - "Tritanopia (blue-yellow, rare)" + - "Achromatopsia (total color blindness, very rare)" + + safe_combinations: + - "Blue and Orange (safe for all types)" + - "Blue and Yellow (safe for red-green)" + - "Purple and Yellow (safe for most)" + + avoid: + - "Red and Green alone (confusing for red-green colorblind)" + - "Blue and Purple alone (hard to distinguish)" + - "Relying only on color (always pair with icon/text)" + + testing_tools: + - "Stark (Figma plugin)" + - "Color Oracle (simulator)" + - "WebAIM Contrast Checker" + - "Coblis Color Blindness Simulator" + +dark_mode_considerations: + benefits: ["Reduced eye strain", "Battery savings (OLED)", "Modern aesthetic", "User preference"] + + color_adjustments: + primary: "Often brighter/more saturated in dark mode" + backgrounds: "True black (#000) vs dark gray (#1a1a1a)" + text: "Not pure white (use #e0e0e0 for less harsh)" + shadows: "Use lighter shadows or colored glows" + + common_issues: + - "Pure black can cause smearing on OLED" + - "Colors appear more vibrant on dark backgrounds" + - "Need different contrast ratios" + - "Shadows don't work (use borders/elevation instead)" diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md new file mode 100644 index 00000000..d0e78348 --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/instructions.md @@ -0,0 +1,1107 @@ +# Create UX Design Workflow Instructions + + + +The workflow execution engine is governed by: {project-root}/bmad/core/tasks/workflow.xml +You MUST have already loaded and processed: {installed_path}/workflow.yaml +This workflow uses ADAPTIVE FACILITATION - adjust your communication style based on {user_skill_level} +The goal is COLLABORATIVE UX DESIGN through visual exploration, not content generation +Communicate all responses in {communication_language} and tailor to {user_skill_level} +Generate all documents in {document_output_language} +SAVE PROGRESS after each major step - use tags throughout + +DOCUMENT OUTPUT: Professional, specific, actionable UX design decisions WITH RATIONALE. User skill level ({user_skill_level}) affects conversation style ONLY, not document content. + + + + + mode: data + data_request: project_config + + + + **Note: No Workflow Status File Found** + +Create UX Design can run standalone or as part of the BMM planning workflow. + +For standalone use, we'll gather requirements as we go. +For integrated use, run `workflow-init` first for better context. + +Set mode: standalone + + + + Store {{status_file_path}} for later updates + Store {{project_level}} for scoping decisions + Set mode: integrated + + + + + A UX designer must understand the WHY before designing the HOW + +Attempt to load context documents using fuzzy matching: - PRD: {prd_file} - Product Brief: {brief_file} - Brainstorming: {brainstorm_file} + + + + Extract and understand: + - Project vision and goals + - Target users and personas + - Core features and user journeys + - Platform requirements (web, mobile, desktop) + - Any technical constraints mentioned + - Brand personality hints + - Competitive landscape references + + + + + Let's start by understanding what you're building. + +**What are you building?** (1-2 sentences about the project) + +**Who is this for?** Describe your ideal user. + + + + I've loaded your project documentation. Let me confirm what I'm seeing: + +**Project:** {{project_summary_from_docs}} +**Target Users:** {{user_summary_from_docs}} + +Does this match your understanding? + + Sounds good? Any corrections? + + + +Now let's dig into the experience itself. + +**What's the core experience?** + +- What's the ONE thing users will do most? +- What should be absolutely effortless? +- Which user action is most critical to get right? + +**Platform:** +Where will users experience this? (Web, mobile app, desktop, multiple platforms) + +This is crucial - **what should users FEEL when using this?** + +Not what they'll do, but what emotion or state they should experience: + +- Empowered and in control? +- Delighted and surprised? +- Efficient and productive? +- Creative and inspired? +- Calm and focused? +- Connected and engaged? +- Something else? + +Really think about the emotional response you want. What feeling would make them tell a friend about this? + +**Inspiration time!** + +Name 2-3 apps your users already love and USE regularly. + +For each one, tell me: + +- What do they do well from a UX perspective? +- What makes the experience compelling? + +Feel free to share: + +- App names (I'll look them up to see current UX) +- Screenshots (if you have examples of what you like) +- Links to products or demos + + For each app mentioned: + {{app_name}} current interface UX design 2025 + Analyze what makes that app's UX effective + Note patterns and principles that could apply to this project + + + If screenshots provided: + Analyze screenshots for UX patterns, visual style, interaction patterns + Note what user finds compelling about these examples + + + Analyze project for UX complexity indicators: + - Number of distinct user roles or personas + - Number of primary user journeys + - Interaction complexity (simple CRUD vs rich interactions) + - Platform requirements (single vs multi-platform) + - Real-time collaboration needs + - Content creation vs consumption + - Novel interaction patterns + + + Based on {user_skill_level}, set facilitation approach: + + + Set mode: UX_EXPERT + - Use design terminology freely (affordances, information scent, cognitive load) + - Move quickly through familiar patterns + - Focus on nuanced tradeoffs and edge cases + - Reference design systems and frameworks by name + + + + Set mode: UX_INTERMEDIATE + - Balance design concepts with clear explanations + - Provide brief context for UX decisions + - Use familiar analogies when helpful + - Confirm understanding at key points + + + + Set mode: UX_BEGINNER + - Explain design concepts in simple terms + - Use real-world analogies extensively + - Focus on "why this matters for users" + - Protect from overwhelming choices + + + + Synthesize and reflect understanding back to {user_name}: + +"Here's what I'm understanding about {{project_name}}: + +**Vision:** {{project_vision_summary}} +**Users:** {{user_summary}} +**Core Experience:** {{core_action_summary}} +**Desired Feeling:** {{emotional_goal}} +**Platform:** {{platform_summary}} +**Inspiration:** {{inspiration_summary_with_ux_patterns}} + +**UX Complexity:** {{complexity_assessment}} + +This helps me understand both what we're building and the experience we're aiming for. It will guide every design decision we make together." + + +Does this capture your vision? Anything I'm missing or misunderstanding? + +Load UX design template: {template} +Initialize output document at {default_output_file} + +project_vision + + + + Modern design systems make many good UX decisions by default + Like starter templates for code, design systems provide proven patterns + +Based on platform and tech stack (if known from PRD), identify design system options: + + For Web Applications: + - Material UI (Google's design language) + - shadcn/ui (Modern, customizable, Tailwind-based) + - Chakra UI (Accessible, themeable) + - Ant Design (Enterprise, comprehensive) + - Radix UI (Unstyled primitives, full control) + - Custom design system + + For Mobile: + - iOS Human Interface Guidelines + - Material Design (Android) + - Custom mobile design + + For Desktop: + - Platform native (macOS, Windows guidelines) + - Electron with web design system + + + +Search for current design system information: +{{platform}} design system 2025 popular options accessibility +{{identified_design_system}} latest version components features + + + + For each relevant design system, understand what it provides: + - Component library (buttons, forms, modals, etc.) + - Accessibility built-in (WCAG compliance) + - Theming capabilities + - Responsive patterns + - Icon library + - Documentation quality + + + Present design system options: + "I found {{design_system_count}} design systems that could work well for your project. + + Think of design systems like a foundation - they provide proven UI components and patterns, + so we're not reinventing buttons and forms. This speeds development and ensures consistency. + + **Your Options:** + + 1. **{{system_name}}** + - {{key_strengths}} + - {{component_count}} components | {{accessibility_level}} + - Best for: {{use_case}} + + 2. **{{system_name}}** + - {{key_strengths}} + - {{component_count}} components | {{accessibility_level}} + - Best for: {{use_case}} + + 3. **Custom Design System** + - Full control over every detail + - More effort, completely unique to your brand + - Best for: Strong brand identity needs, unique UX requirements + + **My Recommendation:** {{recommendation}} for {{reason}} + + This establishes our component foundation and interaction patterns." + + + Which design system approach resonates with you? + +Or tell me: + +- Do you need complete visual uniqueness? (→ custom) +- Want fast development with great defaults? (→ established system) +- Have brand guidelines to follow? (→ themeable system) + + + Record design system decision: + System: {{user_choice}} + Version: {{verified_version_if_applicable}} + Rationale: {{user_reasoning_or_recommendation_accepted}} + Provides: {{components_and_patterns_provided}} + Customization needs: {{custom_components_needed}} + + + + + design_system_decision + + + + Every great app has a defining experience - identify and design it + Some projects need INVENTED UX patterns, not just standard solutions + +Based on PRD/brief analysis, identify the core user experience: - What is the primary action users will repeat? - What makes this app unique vs. competitors? - What should be delightfully easy? + + +Let's identify your app's defining experience - the core interaction that, if we nail it, everything else follows. + +When someone describes your app to a friend, what would they say? + +**Examples:** + +- "It's the app where you swipe to match with people" (Tinder) +- "You can share photos that disappear" (Snapchat) +- "It's like having a conversation with AI" (ChatGPT) +- "Capture and share moments" (Instagram) +- "Freeform content blocks" (Notion) +- "Real-time collaborative canvas" (Figma) + +**What's yours?** What's the ONE experience that defines your app? + +Analyze if this core experience has established UX patterns: + + Standard patterns exist for: + - CRUD operations (Create, Read, Update, Delete) + - E-commerce flows (Browse → Product → Cart → Checkout) + - Social feeds (Infinite scroll, like/comment) + - Authentication (Login, signup, password reset) + - Search and filter + - Content creation (Forms, editors) + - Dashboards and analytics + + Novel patterns may be needed for: + - Unique interaction mechanics (before Tinder, swiping wasn't standard) + - New collaboration models (before Figma, real-time design wasn't solved) + - Unprecedented content types (before TikTok, vertical short video feeds) + - Complex multi-step workflows spanning features + - Innovative gamification or engagement loops + + + + + Engage in collaborative UX pattern design: + "The {{pattern_name}} interaction is novel - no established pattern exists yet! + + Core UX challenge: {{challenge_description}} + + This is exciting - we get to invent the user experience together. Let's design this interaction by thinking through: + + 1. **User Goal:** What does the user want to accomplish? + 2. **Trigger:** How should they initiate this action? (button, gesture, voice, drag, etc.) + 3. **Feedback:** What should they see/feel happening? + 4. **Success:** How do they know it succeeded? + 5. **Errors:** What if something goes wrong? How do they recover? + + Walk me through your mental model for this interaction - the ideal experience from the user's perspective." + + + Use advanced elicitation for UX innovation: + "Let's explore this interaction more deeply. + + - What apps have SIMILAR (not identical) patterns we could learn from? + - What's the absolute fastest this action could complete? + - What's the most delightful way to give feedback? + - Should this work on mobile differently than desktop? + - What would make someone show this to a friend?" + + + Document the novel UX pattern: + Pattern Name: {{pattern_name}} + User Goal: {{what_user_accomplishes}} + Trigger: {{how_initiated}} + Interaction Flow: + 1. {{step_1}} + 2. {{step_2}} + 3. {{step_3}} + Visual Feedback: {{what_user_sees}} + States: {{default_loading_success_error}} + Platform Considerations: {{desktop_vs_mobile_vs_tablet}} + Accessibility: {{keyboard_screen_reader_support}} + Inspiration: {{similar_patterns_from_other_apps}} + + + + +Define the core experience principles: - Speed: How fast should key actions feel? - Guidance: How much hand-holding do users need? - Flexibility: How much control vs. simplicity? - Feedback: Subtle or celebratory? + + +core_experience +novel_ux_patterns + + + + Visual design isn't decoration - it communicates brand and guides attention + SHOW options, don't just describe them - generate HTML visualizations + +Load color psychology data: {color_psychology} + +Do you have existing brand guidelines or a specific color palette in mind? (y/n) + +If yes: Share your brand colors, or provide a link to brand guidelines. +If no: I'll generate theme options based on your project's personality. + + + + Please provide: +- Primary brand color(s) (hex codes if available) +- Secondary colors +- Any brand personality guidelines (professional, playful, minimal, etc.) +- Link to style guide (if available) + + + Extract and document brand colors + Generate semantic color mappings: + - Primary: {{brand_primary}} (main actions, key elements) + - Secondary: {{brand_secondary}} (supporting actions) + - Success: {{success_color}} + - Warning: {{warning_color}} + - Error: {{error_color}} + - Neutral: {{gray_scale}} + + + + + + Based on project personality from PRD/brief, identify 3-4 theme directions: + + Analyze project for: + - Industry (fintech → trust/security, creative → bold/expressive, health → calm/reliable) + - Target users (enterprise → professional, consumers → approachable, creators → inspiring) + - Brand personality keywords mentioned + - Competitor analysis (blend in or stand out?) + + Generate theme directions: + 1. {{theme_1_name}} ({{personality}}) - {{color_strategy}} + 2. {{theme_2_name}} ({{personality}}) - {{color_strategy}} + 3. {{theme_3_name}} ({{personality}}) - {{color_strategy}} + 4. {{theme_4_name}} ({{personality}}) - {{color_strategy}} + + + Generate comprehensive HTML color theme visualizer: + + Create: {color_themes_html} + + For each theme, show: + + **Color Palette Section:** + - Primary, secondary, accent colors as large swatches + - Semantic colors (success, warning, error, info) + - Neutral grayscale (background, text, borders) + - Each swatch labeled with hex code and usage + + **Live Component Examples:** + - Buttons (primary, secondary, disabled states) + - Form inputs (normal, focus, error states) + - Cards with content + - Navigation elements + - Success/error alerts + - Typography in theme colors + + **Side-by-Side Comparison:** + - All themes visible in grid layout + - Responsive preview toggle + - Toggle between light/dark mode if applicable + + **Theme Personality Description:** + - Emotional impact (trustworthy, energetic, calm, sophisticated) + - Best for (enterprise, consumer, creative, technical) + - Visual style (minimal, bold, playful, professional) + + Include CSS with full theme variables for each option. + + + Save HTML visualizer to {color_themes_html} + + 🎨 I've created a color theme visualizer! + +Open this file in your browser: {color_themes_html} + +You'll see {{theme_count}} complete theme options with: + +- Full color palettes +- Actual UI components in each theme +- Side-by-side comparison +- Theme personality descriptions + +Take your time exploring. Which theme FEELS right for your vision? + + + Which color theme direction resonates most? + +You can: + +- Choose a number (1-{{theme_count}}) +- Combine elements: "I like the colors from #2 but the vibe of #3" +- Request variations: "Can you make #1 more vibrant?" +- Describe a custom direction + +What speaks to you? + + + Based on user selection, finalize color palette: + - Extract chosen theme colors + - Apply any requested modifications + - Document semantic color usage + - Note rationale for selection + + + + +Define typography system: + + Based on brand personality and chosen colors: + - Font families (heading, body, monospace) + - Type scale (h1-h6, body, small, tiny) + - Font weights and when to use them + - Line heights for readability + + + Use {{design_system}} default typography as starting point. + Customize if brand requires it. + + + + +Define spacing and layout foundation: - Base unit (4px, 8px system) - Spacing scale (xs, sm, md, lg, xl, 2xl, etc.) - Layout grid (12-column, custom, or design system default) - Container widths for different breakpoints + + +visual_foundation + + + + This is the game-changer - SHOW actual design directions, don't just discuss them + Users make better decisions when they SEE options, not imagine them + +Based on PRD and core experience, identify 2-3 key screens to mock up: + + Priority screens: + 1. Entry point (landing page, dashboard, home screen) + 2. Core action screen (where primary user task happens) + 3. Critical conversion (signup, create, submit, purchase) + + For each screen, extract: + - Primary goal of this screen + - Key information to display + - Primary action(s) + - Secondary actions + - Navigation context + + + +Generate 6-8 different design direction variations: + + Vary these dimensions: + + **Layout Approach:** + - Sidebar navigation vs top nav vs floating action button + - Single column vs multi-column + - Card-based vs list-based vs grid + - Centered vs left-aligned content + + **Visual Hierarchy:** + - Dense (information-rich) vs Spacious (breathing room) + - Bold headers vs subtle headers + - Imagery-heavy vs text-focused + + **Interaction Patterns:** + - Modal workflows vs inline expansion + - Progressive disclosure vs all-at-once + - Drag-and-drop vs click-to-select + + **Visual Weight:** + - Minimal (lots of white space, subtle borders) + - Balanced (clear structure, moderate visual weight) + - Rich (gradients, shadows, visual depth) + - Maximalist (bold, high contrast, dense) + + **Content Approach:** + - Scannable (lists, cards, quick consumption) + - Immersive (large imagery, storytelling) + - Data-driven (charts, tables, metrics) + + + +Create comprehensive HTML design direction showcase: + + Create: {design_directions_html} + + For EACH design direction (6-8 total): + + **Full-Screen Mockup:** + - Complete HTML/CSS implementation + - Using chosen color theme + - Real (or realistic placeholder) content + - Interactive states (hover effects, focus states) + - Responsive behavior + + **Design Philosophy Label:** + - Direction name (e.g., "Dense Dashboard", "Spacious Explorer", "Card Gallery") + - Personality (e.g., "Professional & Efficient", "Friendly & Approachable") + - Best for (e.g., "Power users who need lots of info", "First-time visitors who need guidance") + + **Key Characteristics:** + - Layout: {{approach}} + - Density: {{level}} + - Navigation: {{style}} + - Primary action prominence: {{high_medium_low}} + + **Navigation Controls:** + - Previous/Next buttons to cycle through directions + - Thumbnail grid to jump to any direction + - Side-by-side comparison mode (show 2-3 at once) + - Responsive preview toggle (desktop/tablet/mobile) + - Favorite/flag directions for later comparison + + **Notes Section:** + - User can click to add notes about each direction + - "What I like" and "What I'd change" fields + + + +Save comprehensive HTML showcase to {design_directions_html} + +🎨 Design Direction Mockups Generated! + +I've created {{mockup_count}} different design approaches for your key screens. + +Open: {design_directions_html} + +Each mockup shows a complete vision for your app's look and feel. + +As you explore, look for: +✓ Which layout feels most intuitive for your users? +✓ Which information hierarchy matches your priorities? +✓ Which interaction style fits your core experience? +✓ Which visual weight feels right for your brand? + +You can: + +- Navigate through all directions +- Compare them side-by-side +- Toggle between desktop/mobile views +- Add notes about what you like + +Take your time - this is a crucial decision! + + +Which design direction(s) resonate most with your vision? + +You can: + +- Pick a favorite by number: "Direction #3 is perfect!" +- Combine elements: "The layout from #2 with the density of #5" +- Request modifications: "I like #6 but can we make it less dense?" +- Ask me to explore variations: "Can you show me more options like #4 but with side navigation?" + +What speaks to you? + + +Based on user selection, extract and document design decisions: + + Chosen Direction: {{direction_number_or_hybrid}} + + Layout Decisions: + - Navigation pattern: {{sidebar_top_floating}} + - Content structure: {{single_multi_column}} + - Content organization: {{cards_lists_grid}} + + Hierarchy Decisions: + - Visual density: {{spacious_balanced_dense}} + - Header emphasis: {{bold_subtle}} + - Content focus: {{imagery_text_data}} + + Interaction Decisions: + - Primary action pattern: {{modal_inline_dedicated}} + - Information disclosure: {{progressive_all_at_once}} + - User control: {{guided_flexible}} + + Visual Style Decisions: + - Weight: {{minimal_balanced_rich_maximalist}} + - Depth cues: {{flat_subtle_elevation_dramatic_depth}} + - Border style: {{none_subtle_strong}} + + Rationale: {{why_user_chose_this_direction}} + User notes: {{what_they_liked_and_want_to_change}} + + + + + Generate 2-3 refined variations incorporating requested changes + Update HTML showcase with refined options + Better? Pick your favorite refined version. + + +design_direction_decision + + + + User journeys are conversations, not just flowcharts + Design WITH the user, exploring options for each key flow + +Extract critical user journeys from PRD: - Primary user tasks - Conversion flows - Onboarding sequence - Content creation workflows - Any complex multi-step processes + + +For each critical journey, identify the goal and current assumptions + + + + **User Journey: {{journey_name}}** + +User goal: {{what_user_wants_to_accomplish}} +Current entry point: {{where_journey_starts}} + + + Let's design the flow for {{journey_name}}. + +Walk me through how a user should accomplish this task: + +1. **Entry:** What's the first thing they see/do? +2. **Input:** What information do they need to provide? +3. **Feedback:** What should they see/feel along the way? +4. **Success:** How do they know they succeeded? + +As you think through this, consider: + +- What's the minimum number of steps to value? +- Where are the decision points and branching? +- How do they recover from errors? +- Should we show everything upfront, or progressively? + +Share your mental model for this flow. + + Based on journey complexity, present 2-3 flow approach options: + + + Option A: Single-screen approach (all inputs/actions on one page) + Option B: Wizard/stepper approach (split into clear steps) + Option C: Hybrid (main flow on one screen, advanced options collapsed) + + + + Option A: Guided flow (system determines next step based on inputs) + Option B: User-driven navigation (user chooses path) + Option C: Adaptive (simple mode vs advanced mode toggle) + + + + Option A: Template-first (start from templates, customize) + Option B: Blank canvas (full flexibility, more guidance needed) + Option C: Progressive creation (start simple, add complexity) + + + For each option, explain: + - User experience: {{what_it_feels_like}} + - Pros: {{benefits}} + - Cons: {{tradeoffs}} + - Best for: {{user_type_or_scenario}} + + + Which approach fits best? Or should we blend elements? + + Create detailed flow documentation: + + Journey: {{journey_name}} + User Goal: {{goal}} + Approach: {{chosen_approach}} + + Flow Steps: + 1. {{step_1_screen_and_action}} + - User sees: {{information_displayed}} + - User does: {{primary_action}} + - System responds: {{feedback}} + + 2. {{step_2_screen_and_action}} + ... + + Decision Points: + - {{decision_point}}: {{branching_logic}} + + Error States: + - {{error_scenario}}: {{how_user_recovers}} + + Success State: + - Completion feedback: {{what_user_sees}} + - Next action: {{what_happens_next}} + + [Generate Mermaid diagram showing complete flow] + + + + +user_journey_flows + + + + Balance design system components with custom needs + +Based on design system chosen + design direction mockups + user journeys: + +Identify required components: + + From Design System (if applicable): + - {{list_of_components_provided}} + + Custom Components Needed: + - {{unique_component_1}} ({{why_custom}}) + - {{unique_component_2}} ({{why_custom}}) + + Components Requiring Heavy Customization: + - {{component}} ({{what_customization}}) + + + +For components not covered by {{design_system}}, let's define them together. + +Component: {{custom_component_name}} + +1. What's its purpose? (what does it do for users?) +2. What content/data does it display? +3. What actions can users take with it? +4. What states does it have? (default, hover, active, loading, error, disabled, etc.) +5. Are there variants? (sizes, styles, layouts) + + +For each custom component, document: + + Component Name: {{name}} + Purpose: {{user_facing_purpose}} + + Anatomy: + - {{element_1}}: {{description}} + - {{element_2}}: {{description}} + + States: + - Default: {{appearance}} + - Hover: {{changes}} + - Active/Selected: {{changes}} + - Loading: {{loading_indicator}} + - Error: {{error_display}} + - Disabled: {{appearance}} + + Variants: + - {{variant_1}}: {{when_to_use}} + - {{variant_2}}: {{when_to_use}} + + Behavior: + - {{interaction}}: {{what_happens}} + + Accessibility: + - ARIA role: {{role}} + - Keyboard navigation: {{keys}} + - Screen reader: {{announcement}} + + + +component_library_strategy + + + + These are implementation patterns for UX - ensure consistency across the app + Like the architecture workflow's implementation patterns, but for user experience + +Load UX pattern catalog: {ux_pattern_catalog} + +Based on chosen components and journeys, identify UX consistency decisions needed: + + BUTTON HIERARCHY (How users know what's most important): + - Primary action: {{style_and_usage}} + - Secondary action: {{style_and_usage}} + - Tertiary action: {{style_and_usage}} + - Destructive action: {{style_and_usage}} + + FEEDBACK PATTERNS (How system communicates with users): + - Success: {{pattern}} (toast, inline, modal, page-level) + - Error: {{pattern}} + - Warning: {{pattern}} + - Info: {{pattern}} + - Loading: {{pattern}} (spinner, skeleton, progress bar) + + FORM PATTERNS (How users input data): + - Label position: {{above_inline_floating}} + - Required field indicator: {{asterisk_text_visual}} + - Validation timing: {{onBlur_onChange_onSubmit}} + - Error display: {{inline_summary_both}} + - Help text: {{tooltip_caption_modal}} + + MODAL PATTERNS (How dialogs behave): + - Size variants: {{when_to_use_each}} + - Dismiss behavior: {{click_outside_escape_explicit_close}} + - Focus management: {{auto_focus_strategy}} + - Stacking: {{how_multiple_modals_work}} + + NAVIGATION PATTERNS (How users move through app): + - Active state indication: {{visual_cue}} + - Breadcrumb usage: {{when_shown}} + - Back button behavior: {{browser_back_vs_app_back}} + - Deep linking: {{supported_patterns}} + + EMPTY STATE PATTERNS (What users see when no content): + - First use: {{guidance_and_cta}} + - No results: {{helpful_message}} + - Cleared content: {{undo_option}} + + CONFIRMATION PATTERNS (When to confirm destructive actions): + - Delete: {{always_sometimes_never_with_undo}} + - Leave unsaved: {{warn_or_autosave}} + - Irreversible actions: {{confirmation_level}} + + NOTIFICATION PATTERNS (How users stay informed): + - Placement: {{top_bottom_corner}} + - Duration: {{auto_dismiss_vs_manual}} + - Stacking: {{how_multiple_notifications_appear}} + - Priority levels: {{critical_important_info}} + + SEARCH PATTERNS (How search behaves): + - Trigger: {{auto_or_manual}} + - Results display: {{instant_on_enter}} + - Filters: {{placement_and_behavior}} + - No results: {{suggestions_or_message}} + + DATE/TIME PATTERNS (How temporal data appears): + - Format: {{relative_vs_absolute}} + - Timezone handling: {{user_local_utc}} + - Pickers: {{calendar_dropdown_input}} + + + +For each pattern category, facilitate decision: + + For each pattern, present options and recommendation: + "Let's decide how {{pattern_category}} works throughout your app. + + If we don't decide now, it might work differently on different screens and confuse users. + + **Options:** {{option_a}} vs {{option_b}} vs {{option_c_if_applicable}} + + **My Recommendation:** {{choice}} for {{reason}}" + + + + +ux_pattern_decisions + + + + Responsive design isn't just "make it smaller" - it's adapting the experience + +Based on platform requirements from PRD and chosen design direction: + +Let's define how your app adapts across devices. + +Target devices from PRD: {{devices}} + +For responsive design: + +1. **Desktop** (large screens): + - How should we use the extra space? + - Multi-column layouts? + - Side navigation? + +2. **Tablet** (medium screens): + - Simplified layout from desktop? + - Touch-optimized interactions? + - Portrait vs landscape considerations? + +3. **Mobile** (small screens): + - Bottom navigation or hamburger menu? + - How do multi-column layouts collapse? + - Touch target sizes adequate? + +What's most important for each screen size? + + +Define breakpoint strategy: + + Based on chosen layout pattern from design direction: + + Breakpoints: + - Mobile: {{max_width}} ({{cols}}-column layout, {{nav_pattern}}) + - Tablet: {{range}} ({{cols}}-column layout, {{nav_pattern}}) + - Desktop: {{min_width}} ({{cols}}-column layout, {{nav_pattern}}) + + Adaptation Patterns: + - Navigation: {{how_it_changes}} + - Sidebar: {{collapse_hide_convert}} + - Cards/Lists: {{grid_to_single_column}} + - Tables: {{horizontal_scroll_card_view_hide_columns}} + - Modals: {{full_screen_on_mobile}} + - Forms: {{layout_changes}} + + + +Define accessibility strategy: + + Let's define your accessibility strategy. + +Accessibility means your app works for everyone, including people with disabilities: + +- Can someone using only a keyboard navigate? +- Can someone using a screen reader understand what's on screen? +- Can someone with color blindness distinguish important elements? +- Can someone with motor difficulties use your buttons? + +**WCAG Compliance Levels:** + +- **Level A** - Basic accessibility (minimum) +- **Level AA** - Recommended standard, legally required for government/education/public sites +- **Level AAA** - Highest standard (not always practical for all content) + +**Legal Context:** + +- Government/Education: Must meet WCAG 2.1 Level AA +- Public websites (US): ADA requires accessibility +- EU: Accessibility required + +Based on your deployment intent: {{recommendation}} + +**What level should we target?** + + Accessibility Requirements: + + Compliance Target: {{WCAG_level}} + + Key Requirements: + - Color contrast: {{ratio_required}} (text vs background) + - Keyboard navigation: All interactive elements accessible + - Focus indicators: Visible focus states on all interactive elements + - ARIA labels: Meaningful labels for screen readers + - Alt text: Descriptive text for all meaningful images + - Form labels: Proper label associations + - Error identification: Clear, descriptive error messages + - Touch target size: Minimum {{size}} for mobile + + Testing Strategy: + - Automated: {{tools}} (Lighthouse, axe DevTools) + - Manual: Keyboard-only navigation testing + - Screen reader: {{tool}} testing + + + +responsive_accessibility_strategy + + + + The document is built progressively throughout - now finalize and offer extensions + +Ensure document is complete with all template-output sections filled + +Generate completion summary: + + "Excellent work! Your UX Design Specification is complete. + + **What we created together:** + + - **Design System:** {{choice}} with {{custom_component_count}} custom components + - **Visual Foundation:** {{color_theme}} color theme with {{typography_choice}} typography and spacing system + - **Design Direction:** {{chosen_direction}} - {{why_it_fits}} + - **User Journeys:** {{journey_count}} flows designed with clear navigation paths + - **UX Patterns:** {{pattern_count}} consistency rules established for cohesive experience + - **Responsive Strategy:** {{breakpoint_count}} breakpoints with adaptation patterns for all device sizes + - **Accessibility:** {{WCAG_level}} compliance requirements defined + + **Your Deliverables:** + - UX Design Document: {default_output_file} + - Interactive Color Themes: {color_themes_html} + - Design Direction Mockups: {design_directions_html} + + **What happens next:** + - Designers can create high-fidelity mockups from this foundation + - Developers can implement with clear UX guidance and rationale + - All your design decisions are documented with reasoning for future reference + + You've made thoughtful choices through visual collaboration that will create a great user experience. Ready for design refinement and implementation!" + + + +Save final document to {default_output_file} + + + + mode: update + action: complete_workflow + workflow_name: create-ux-design + + + +**✅ UX Design Specification Complete!** + +**Core Deliverables:** + +- ✅ UX Design Specification: {default_output_file} +- ✅ Color Theme Visualizer: {color_themes_html} +- ✅ Design Direction Mockups: {design_directions_html} + +**Recommended Next Steps:** + +1. **Validate UX Specification** (Recommended first!) - Run the validation checklist with \*validate-design + - Ensures collaborative process was followed + - Validates visual artifacts were generated + - Confirms decision rationale is documented + - Verifies implementation readiness + +2. **Follow-Up Workflows** - This specification can serve as input to: + - **Wireframe Generation Workflow** - Create detailed wireframes from user flows + - **Figma Design Workflow** - Generate Figma files via MCP integration + - **Interactive Prototype Workflow** - Build clickable HTML prototypes + - **Component Showcase Workflow** - Create interactive component library + - **AI Frontend Prompt Workflow** - Generate prompts for v0, Lovable, Bolt + - **Solution Architecture Workflow** - Define technical architecture with UX context + +As additional workflows are run, they will add their outputs to the "Optional Enhancement Deliverables" section of the UX specification. + + + + + +**Planning Workflow Integration:** + +Status updated. Next suggested workflow: {{next_workflow_from_status}} +Run with: workflow {{next_workflow_name}} + + + +completion_summary + + + diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml new file mode 100644 index 00000000..bc2f8981 --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/layout-patterns.yaml @@ -0,0 +1,419 @@ +# Layout Patterns - Guide for design direction generation +# Maps project types and content to layout strategies + +navigation_patterns: + sidebar_navigation: + description: "Vertical navigation panel on left or right" + best_for: ["Desktop apps", "Dashboards", "Admin panels", "Content-heavy sites"] + not_ideal_for: ["Simple sites", "Mobile-only", "Few sections (<5)"] + + variants: + always_visible: + description: "Sidebar always shown on desktop" + width: "200-280px" + good_for: "Frequent navigation, many sections" + + collapsible: + description: "Can collapse to icons only" + collapsed_width: "60-80px" + expanded_width: "200-280px" + good_for: "Space efficiency, user control" + + mini_sidebar: + description: "Icons only, expands on hover" + collapsed_width: "60-80px" + good_for: "Maximum content space, familiar users" + + mobile_strategy: "Hamburger menu or bottom nav" + examples: ["Notion", "Slack", "VS Code", "Gmail"] + + top_navigation: + description: "Horizontal navigation bar at top" + best_for: ["Marketing sites", "Simple apps", "Few sections", "Mobile-friendly"] + not_ideal_for: ["Many menu items (>7)", "Deep hierarchies"] + + variants: + horizontal_menu: + description: "Simple horizontal list" + max_items: "5-7" + good_for: "Simple sites, clear hierarchy" + + mega_menu: + description: "Dropdown panels with rich content" + good_for: "Complex sites, many subsections, ecommerce" + + sticky_header: + description: "Nav stays at top when scrolling" + good_for: "Easy access, wayfinding" + considerations: "Takes screen space, can annoy users" + + mobile_strategy: "Hamburger menu" + examples: ["Apple", "Stripe", "Most marketing sites"] + + tab_navigation: + description: "Horizontal tabs for section switching" + best_for: ["Related content", "Settings", "Multi-view pages"] + not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"] + max_tabs: "5-7 recommended" + placement: ["Below header", "Page level", "Within cards"] + examples: ["Settings pages", "Product details", "Profile pages"] + + bottom_navigation: + description: "Navigation bar at bottom (mobile)" + best_for: ["Mobile apps", "3-5 primary sections", "Quick switching"] + not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"] + ideal_items: "3-5 (4 is optimal)" + each_item: "Icon + short label" + examples: ["Instagram", "Twitter app", "Most mobile apps"] + + floating_action_button: + description: "Primary action button floating over content" + best_for: ["Mobile apps", "Single primary action", "Content-first"] + placement: "Bottom-right (usually)" + examples: ["Gmail (compose)", "Google Maps (directions)", "Notes (new note)"] + +content_organization: + card_based: + description: "Content in distinct card containers" + best_for: ["Scannable content", "Mixed content types", "Visual hierarchy"] + not_ideal_for: ["Dense data", "Text-heavy content"] + + variants: + grid: + description: "Equal-sized cards in grid" + good_for: "Products, gallery, uniform items" + examples: ["Pinterest", "Airbnb listings", "YouTube videos"] + + masonry: + description: "Variable-height cards in columns" + good_for: "Mixed content heights, visual interest" + examples: ["Pinterest", "Unsplash", "Dribbble"] + + horizontal_scroll: + description: "Cards in horizontal row" + good_for: "Categories, featured items, mobile" + examples: ["Netflix rows", "App Store Today"] + + styling: + elevated: "Drop shadows, floating appearance" + bordered: "Subtle borders, flat appearance" + + spacing: + tight: "8-12px gaps (dense, lots of content)" + medium: "16-24px gaps (balanced)" + spacious: "32-48px gaps (premium, breathing room)" + + list_based: + description: "Linear list of items" + best_for: ["Scannable data", "Chronological content", "Dense information"] + not_ideal_for: ["Visual content", "Products", "Gallery"] + + variants: + simple_list: + description: "Text-only list" + good_for: "Simple data, settings, menus" + + rich_list: + description: "Items with images, meta, actions" + good_for: "Email, messages, activity feeds" + examples: ["Gmail inbox", "Twitter feed", "LinkedIn feed"] + + grouped_list: + description: "Lists with section headers" + good_for: "Categorized content, settings" + + interaction: + clickable_rows: "Entire row is clickable" + action_buttons: "Explicit action buttons in row" + swipe_actions: "Swipe to reveal actions (mobile)" + + table_based: + description: "Data in rows and columns" + best_for: ["Structured data", "Comparisons", "Admin panels", "Analytics"] + not_ideal_for: ["Mobile", "Varied content", "Storytelling"] + + mobile_strategy: + horizontal_scroll: "Scroll table horizontally" + hide_columns: "Show only essential columns" + card_view: "Convert each row to card" + + features: + - "Sortable columns" + - "Filterable data" + - "Pagination or infinite scroll" + - "Row selection" + - "Inline editing" + + examples: ["Admin dashboards", "Analytics", "Data management"] + + dashboard_layout: + description: "Widget-based information display" + best_for: ["Data visualization", "Monitoring", "Analytics", "Admin"] + + patterns: + fixed_grid: + description: "Predefined widget positions" + good_for: "Consistent layout, simple dashboards" + + customizable_grid: + description: "Users can rearrange widgets" + good_for: "Power users, personalization" + examples: ["Google Analytics", "Jira dashboards"] + + responsive_grid: + description: "Widgets reflow based on screen size" + good_for: "Mobile support, adaptive layouts" + + feed_based: + description: "Continuous stream of content" + best_for: ["Social media", "News", "Activity", "Discovery"] + + loading: + infinite_scroll: "Load more as user scrolls" + load_more_button: "Explicit action to load more" + pagination: "Page numbers for browsing" + + examples: ["Facebook", "Twitter", "Instagram", "LinkedIn"] + +layout_density: + spacious: + description: "Lots of white space, breathing room" + spacing: "32-64px between sections" + card_padding: "24-32px" + best_for: ["Premium brands", "Focus", "Minimal content"] + examples: ["Apple", "Stripe landing", "Premium portfolios"] + feeling: "Premium, focused, calm, elegant" + + balanced: + description: "Moderate spacing, comfortable reading" + spacing: "16-32px between sections" + card_padding: "16-24px" + best_for: ["Most applications", "General content"] + examples: ["Medium", "Notion", "Most SaaS apps"] + feeling: "Professional, balanced, clear" + + dense: + description: "Compact layout, maximum information" + spacing: "8-16px between sections" + card_padding: "12-16px" + best_for: ["Data-heavy", "Power users", "Admin panels"] + examples: ["Gmail", "Google Analytics", "IDE interfaces"] + feeling: "Efficient, information-rich, powerful" + +content_hierarchy: + hero_first: + description: "Large hero section, then supporting content" + best_for: ["Marketing sites", "Landing pages", "Product pages"] + hero_height: "60-100vh" + examples: ["Stripe", "Apple product pages", "SaaS landing pages"] + + content_first: + description: "Jump straight to content, minimal header" + best_for: ["Blogs", "News", "Content platforms", "Reading"] + examples: ["Medium", "News sites", "Wikipedia"] + + balanced_hierarchy: + description: "Clear but not overwhelming hero" + best_for: ["General applications", "Balanced focus"] + hero_height: "40-60vh" + +visual_weight: + minimal: + description: "Flat, no shadows, subtle borders" + characteristics: + - "No or minimal shadows" + - "Flat colors" + - "Thin or no borders" + - "Lots of white space" + best_for: ["Modern brands", "Focus", "Clarity"] + examples: ["Apple", "Google (recent)", "Superhuman"] + + subtle_depth: + description: "Light shadows, gentle elevation" + characteristics: + - "Subtle drop shadows" + - "Light borders" + - "Layered appearance" + - "Comfortable spacing" + best_for: ["Most applications", "Professional look"] + examples: ["Notion", "Airtable", "Linear"] + + material_depth: + description: "Distinct shadows, clear elevation" + characteristics: + - "Defined shadows" + - "Clear layering" + - "Elevation system" + - "Floating elements" + best_for: ["Tactile feel", "Clarity", "Guidance"] + examples: ["Material Design apps", "Gmail", "Google Drive"] + + rich_visual: + description: "Gradients, textures, visual interest" + characteristics: + - "Gradients" + - "Background patterns" + - "Visual flourishes" + - "Rich shadows" + best_for: ["Consumer brands", "Engagement", "Delight"] + examples: ["Stripe (gradients)", "Instagram", "Spotify"] + +column_layouts: + single_column: + description: "One content column, centered" + max_width: "600-800px" + best_for: ["Reading", "Focus", "Mobile-first", "Forms"] + examples: ["Medium articles", "Substack", "Simple apps"] + + two_column: + description: "Main content + sidebar" + ratios: + main_sidebar: "2:1 or 3:1 (main content wider)" + equal: "1:1 (rare, only for equal importance)" + best_for: ["Blogs with sidebar", "Docs with nav", "Dashboard with filters"] + mobile_strategy: "Stack vertically" + + three_column: + description: "Left nav + main content + right sidebar" + typical_use: "Left nav, center content, right metadata/ads" + best_for: ["Complex apps", "Social media", "News sites"] + mobile_strategy: "Collapse to single column with hamburger" + examples: ["Twitter", "Reddit", "Facebook"] + + multi_column_grid: + description: "2, 3, 4, or more columns" + columns: + two: "Tablets, small screens" + three: "Desktop standard" + four_plus: "Large screens, galleries" + best_for: ["Products", "Gallery", "Cards", "Uniform content"] + responsive: + mobile: "1 column" + tablet: "2 columns" + desktop: "3-4 columns" + large_desktop: "4-6 columns" + +modal_and_overlay_patterns: + center_modal: + sizes: ["Small (400-500px)", "Medium (600-800px)", "Large (900-1200px)"] + best_for: ["Forms", "Confirmations", "Detailed content"] + + drawer_side_panel: + position: "Right (common) or left" + width: "320-600px" + best_for: ["Filters", "Settings", "Details", "Navigation"] + examples: ["E-commerce filters", "Gmail compose", "Slack channel details"] + + fullscreen_modal: + description: "Takes entire viewport" + best_for: ["Mobile primarily", "Complex forms", "Immersive content"] + mobile: "Often default on mobile" + + popover: + description: "Small overlay near trigger element" + best_for: ["Tooltips", "Quick actions", "Contextual menus"] + size: "Small (200-400px)" + +responsive_strategies: + mobile_first: + approach: "Design for mobile, enhance for desktop" + best_for: ["Consumer apps", "High mobile traffic", "Content-first"] + breakpoints: + - "Mobile: 320-767px (base design)" + - "Tablet: 768-1023px (add space, possibly columns)" + - "Desktop: 1024px+ (full layout, sidebars)" + + desktop_first: + approach: "Design for desktop, adapt for mobile" + best_for: ["B2B apps", "Desktop-heavy usage", "Complex interfaces"] + consideration: "Risk of poor mobile experience" + + adaptive_layout: + approach: "Different layouts for different screens, not just scaling" + examples: + - "Desktop: Sidebar nav | Mobile: Bottom nav" + - "Desktop: 3 columns | Tablet: 2 columns | Mobile: 1 column" + - "Desktop: Table | Mobile: Card list" + +design_direction_variations: + # These combine multiple patterns to create distinct design approaches + + dense_dashboard: + description: "Information-rich, efficient, power user focused" + patterns: + navigation: "Mini sidebar or always-visible sidebar" + content: "Dashboard layout with widgets" + density: "Dense" + visual_weight: "Minimal or subtle depth" + hierarchy: "Balanced, not hero-heavy" + best_for: ["Analytics", "Admin panels", "Data tools", "Power users"] + + spacious_explorer: + description: "Generous spacing, discovery-oriented, visual" + patterns: + navigation: "Top nav or hidden sidebar" + content: "Card-based grid or masonry" + density: "Spacious" + visual_weight: "Rich visual or subtle depth" + hierarchy: "Hero-first or balanced" + best_for: ["Content platforms", "Discovery", "Visual products", "Inspiration"] + + focused_creator: + description: "Minimal distractions, content creation focus" + patterns: + navigation: "Minimal top bar or hidden" + content: "Single column or two-column with tools" + density: "Spacious to balanced" + visual_weight: "Minimal" + hierarchy: "Content-first" + best_for: ["Writing tools", "Editors", "Creative apps", "Focus work"] + + social_feed: + description: "Engagement-focused, endless content, familiar" + patterns: + navigation: "Top bar + bottom nav (mobile)" + content: "Feed-based with rich cards" + density: "Balanced" + visual_weight: "Subtle depth to rich" + hierarchy: "Content-first" + best_for: ["Social media", "Content feeds", "Community platforms"] + + enterprise_portal: + description: "Professional, data-heavy, multi-section" + patterns: + navigation: "Sidebar (always visible or collapsible)" + content: "Dashboard or table-based" + density: "Dense to balanced" + visual_weight: "Minimal to subtle" + hierarchy: "Balanced" + best_for: ["B2B SaaS", "Admin tools", "Enterprise apps"] + + marketing_showcase: + description: "Visual storytelling, conversion-focused, impressive" + patterns: + navigation: "Top nav (sticky or hero)" + content: "Hero-first with sections" + density: "Spacious" + visual_weight: "Rich visual" + hierarchy: "Hero-first" + best_for: ["Landing pages", "Marketing sites", "Product showcases"] + + minimal_focus: + description: "Distraction-free, content-centric, elegant" + patterns: + navigation: "Minimal or hidden" + content: "Single column, centered" + density: "Spacious" + visual_weight: "Minimal" + hierarchy: "Content-first" + best_for: ["Reading", "Focus apps", "Premium brands", "Portfolios"] + + playful_interactive: + description: "Fun, engaging, delightful, consumer-friendly" + patterns: + navigation: "Creative (could be any, with personality)" + content: "Card-based or custom layouts" + density: "Balanced to spacious" + visual_weight: "Rich visual" + hierarchy: "Hero or balanced" + best_for: ["Consumer apps", "Gaming", "Entertainment", "Kids"] diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md new file mode 100644 index 00000000..250711cb --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-design-template.md @@ -0,0 +1,145 @@ +# {{project_name}} UX Design Specification + +_Created on {{date}} by {{user_name}}_ +_Generated using BMad Method - Create UX Design Workflow v1.0_ + +--- + +## Executive Summary + +{{project_vision}} + +--- + +## 1. Design System Foundation + +### 1.1 Design System Choice + +{{design_system_decision}} + +--- + +## 2. Core User Experience + +### 2.1 Defining Experience + +{{core_experience}} + +### 2.2 Novel UX Patterns + +{{novel_ux_patterns}} + +--- + +## 3. Visual Foundation + +### 3.1 Color System + +{{visual_foundation}} + +**Interactive Visualizations:** + +- Color Theme Explorer: [ux-color-themes.html](./ux-color-themes.html) + +--- + +## 4. Design Direction + +### 4.1 Chosen Design Approach + +{{design_direction_decision}} + +**Interactive Mockups:** + +- Design Direction Showcase: [ux-design-directions.html](./ux-design-directions.html) + +--- + +## 5. User Journey Flows + +### 5.1 Critical User Paths + +{{user_journey_flows}} + +--- + +## 6. Component Library + +### 6.1 Component Strategy + +{{component_library_strategy}} + +--- + +## 7. UX Pattern Decisions + +### 7.1 Consistency Rules + +{{ux_pattern_decisions}} + +--- + +## 8. Responsive Design & Accessibility + +### 8.1 Responsive Strategy + +{{responsive_accessibility_strategy}} + +--- + +## 9. Implementation Guidance + +### 9.1 Completion Summary + +{{completion_summary}} + +--- + +## Appendix + +### Related Documents + +- Product Requirements: `{{prd_file}}` +- Product Brief: `{{brief_file}}` +- Brainstorming: `{{brainstorm_file}}` + +### Core Interactive Deliverables + +This UX Design Specification was created through visual collaboration: + +- **Color Theme Visualizer**: {{color_themes_html}} + - Interactive HTML showing all color theme options explored + - Live UI component examples in each theme + - Side-by-side comparison and semantic color usage + +- **Design Direction Mockups**: {{design_directions_html}} + - Interactive HTML with 6-8 complete design approaches + - Full-screen mockups of key screens + - Design philosophy and rationale for each direction + +### Optional Enhancement Deliverables + +_This section will be populated if additional UX artifacts are generated through follow-up workflows._ + + + +### Next Steps & Follow-Up Workflows + +This UX Design Specification can serve as input to: + +- **Wireframe Generation Workflow** - Create detailed wireframes from user flows +- **Figma Design Workflow** - Generate Figma files via MCP integration +- **Interactive Prototype Workflow** - Build clickable HTML prototypes +- **Component Showcase Workflow** - Create interactive component library +- **AI Frontend Prompt Workflow** - Generate prompts for v0, Lovable, Bolt, etc. +- **Solution Architecture Workflow** - Define technical architecture with UX context + +### Version History + +| Date | Version | Changes | Author | +| -------- | ------- | ------------------------------- | ------------- | +| {{date}} | 1.0 | Initial UX Design Specification | {{user_name}} | + +--- + +_This UX Design Specification was created through collaborative design facilitation, not template generation. All decisions were made with user input and are documented with rationale._ diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml new file mode 100644 index 00000000..7013a693 --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/ux-pattern-catalog.yaml @@ -0,0 +1,482 @@ +# UX Pattern Catalog - Knowledge base for UX design decisions +# This enables intelligent, composable UX patterns instead of rigid templates + +# ⚠️ CRITICAL: Use WebSearch to verify current design system versions during workflow execution + +design_systems: + web: + material_ui: + name: "Material UI" + current_version: "5.15" + platform: "Web (React)" + good_for: ["Enterprise apps", "Data-heavy interfaces", "Google ecosystem", "Accessibility"] + not_ideal_for: ["Unique brand identity", "Minimal designs", "Non-React"] + components: "300+" + accessibility: "WCAG 2.1 AA compliant" + theming: "Extensive theming system" + documentation: "Excellent" + learning_curve: "Moderate" + bundle_size: "Large (can be optimized)" + beginner_friendly: true + + shadcn_ui: + name: "shadcn/ui" + current_version: "Latest" + platform: "Web (React + Tailwind)" + good_for: ["Modern apps", "Full customization", "Tailwind users", "Copy-paste approach"] + not_ideal_for: ["Non-Tailwind projects", "Quick prototyping", "Beginners"] + components: "50+ (growing)" + accessibility: "WCAG 2.1 AA via Radix primitives" + theming: "Full Tailwind theming" + documentation: "Good" + learning_curve: "Easy if familiar with Tailwind" + bundle_size: "Minimal (tree-shakeable)" + beginner_friendly: false + + chakra_ui: + name: "Chakra UI" + current_version: "2.8" + platform: "Web (React)" + good_for: ["Accessible apps", "Rapid development", "Dark mode", "Component composition"] + not_ideal_for: ["Complex customization", "Non-React"] + components: "50+" + accessibility: "WCAG 2.1 AA compliant (accessibility-first)" + theming: "Powerful theming system" + documentation: "Excellent" + learning_curve: "Easy" + bundle_size: "Moderate" + beginner_friendly: true + + ant_design: + name: "Ant Design" + current_version: "5.12" + platform: "Web (React)" + good_for: ["Enterprise", "Admin panels", "Data tables", "Chinese market"] + not_ideal_for: ["Consumer apps", "Minimal designs", "Non-React"] + components: "60+" + accessibility: "Good (improving)" + theming: "Less design tokens" + documentation: "Excellent" + learning_curve: "Easy" + bundle_size: "Large" + beginner_friendly: true + + radix_ui: + name: "Radix UI" + current_version: "1.0+" + platform: "Web (React)" + good_for: ["Full control", "Unstyled primitives", "Custom design systems"] + not_ideal_for: ["Quick prototyping", "Pre-styled needs", "Beginners"] + components: "25+ primitives" + accessibility: "WCAG 2.1 AA compliant (accessibility-first)" + theming: "Bring your own styles" + documentation: "Excellent" + learning_curve: "Moderate to Hard" + bundle_size: "Minimal" + beginner_friendly: false + + tailwind_ui: + name: "Tailwind UI" + platform: "Web (Any framework + Tailwind)" + good_for: ["Tailwind users", "Marketing sites", "High-quality examples"] + not_ideal_for: ["Non-Tailwind", "Free tier"] + components: "500+ examples (paid)" + accessibility: "Good" + theming: "Tailwind theming" + documentation: "Excellent" + learning_curve: "Easy if familiar with Tailwind" + bundle_size: "Minimal" + beginner_friendly: true + + headless_ui: + name: "Headless UI" + current_version: "1.7" + platform: "Web (React, Vue)" + good_for: ["Unstyled primitives", "Full control", "Tailwind users"] + not_ideal_for: ["Pre-styled needs", "Quick prototyping"] + components: "13 primitives" + accessibility: "WCAG 2.1 AA compliant" + theming: "Bring your own styles" + documentation: "Good" + learning_curve: "Moderate" + bundle_size: "Minimal" + beginner_friendly: false + + mobile: + ios_hig: + name: "iOS Human Interface Guidelines" + platform: "iOS" + good_for: ["iOS apps", "Native feel", "Apple ecosystem"] + not_ideal_for: ["Cross-platform", "Custom branding"] + components: "Native UIKit components" + accessibility: "Built-in VoiceOver support" + documentation: "Excellent (Apple HIG)" + learning_curve: "Moderate" + beginner_friendly: true + + material_design: + name: "Material Design (Mobile)" + platform: "Android" + good_for: ["Android apps", "Google ecosystem", "Accessibility"] + not_ideal_for: ["iOS", "Custom branding"] + components: "Material Components for Android" + accessibility: "Built-in TalkBack support" + documentation: "Excellent" + learning_curve: "Moderate" + beginner_friendly: true + + react_native_paper: + name: "React Native Paper" + platform: "React Native (iOS & Android)" + good_for: ["Cross-platform", "Material Design", "Quick development"] + not_ideal_for: ["Native platform guidelines", "Highly custom designs"] + components: "30+" + accessibility: "Good" + documentation: "Good" + learning_curve: "Easy" + beginner_friendly: true + +button_hierarchy_patterns: + standard: + name: "Standard Button Hierarchy" + primary: + description: "Most important action on screen" + style: "Filled with primary color, high contrast" + usage: "One per screen (save, submit, next, create)" + example: "Submit Form, Create Account, Save Changes" + + secondary: + description: "Alternative or supporting action" + style: "Outlined or subtle fill with secondary color" + usage: "Secondary actions, cancel alternatives" + example: "Cancel, Go Back, Learn More" + + tertiary: + description: "Least prominent action" + style: "Text-only button, minimal styling" + usage: "Low-priority actions, links" + example: "Skip, Dismiss, View Details" + + destructive: + description: "Dangerous or irreversible action" + style: "Red or error color, often requires confirmation" + usage: "Delete, remove, clear data" + example: "Delete Account, Remove Item, Clear All" + +feedback_patterns: + toast_notification: + name: "Toast Notification" + good_for: ["Non-blocking feedback", "Success confirmations", "Quick info"] + not_ideal_for: ["Critical errors", "Required user action", "Detailed messages"] + placement: ["Top-right", "Bottom-center", "Top-center"] + duration: "2-5 seconds (auto-dismiss)" + actions: "Optional undo or action button" + + inline_message: + name: "Inline Message" + good_for: ["Form validation", "Contextual errors", "Field-specific feedback"] + not_ideal_for: ["Global messages", "Unrelated to visible content"] + placement: "Adjacent to related element" + duration: "Persistent until fixed or dismissed" + actions: "Minimal (usually just dismiss or fix)" + + modal_alert: + name: "Modal Alert/Dialog" + good_for: ["Critical errors", "Blocking actions", "Required confirmations"] + not_ideal_for: ["Non-critical info", "Frequent messages", "Quick feedback"] + placement: "Center overlay" + duration: "Requires user dismissal" + actions: "Clear action buttons (OK, Cancel, etc.)" + + banner: + name: "Banner Notification" + good_for: ["System-wide messages", "Important updates", "Persistent alerts"] + not_ideal_for: ["Transient feedback", "Frequent changes"] + placement: "Top of page/screen" + duration: "Persistent until dismissed" + actions: "Optional actions or dismiss" + +form_patterns: + labels: + above_input: + name: "Labels Above Input" + good_for: ["Clarity", "Mobile-friendly", "Accessibility"] + not_ideal_for: ["Horizontal space constraints"] + style: "Label above, left-aligned" + + floating_label: + name: "Floating/Inline Label" + good_for: ["Space efficiency", "Modern aesthetic", "Material Design"] + not_ideal_for: ["Accessibility (can be confusing)", "Complex forms"] + style: "Label inside input, floats on focus" + + side_by_side: + name: "Side-by-Side Label" + good_for: ["Dense forms", "Desktop layouts", "Admin panels"] + not_ideal_for: ["Mobile", "Long labels", "Accessibility"] + style: "Label to left of input, aligned" + + validation: + on_blur: + name: "Validate on Blur" + description: "Check field when user leaves it" + good_for: "Immediate feedback without being disruptive" + timing: "After user finishes typing and moves away" + + on_change: + name: "Validate on Change" + description: "Real-time validation as user types" + good_for: "Password strength, character limits, format checking" + timing: "As user types (debounced)" + + on_submit: + name: "Validate on Submit" + description: "Check all fields when form submitted" + good_for: "Simple forms, avoiding interruption" + timing: "When user clicks submit" + + progressive: + name: "Progressive Validation" + description: "Validate completed fields immediately, others on submit" + good_for: "Balance between guidance and interruption" + timing: "Hybrid approach" + +modal_patterns: + sizes: + small: + width: "400-500px" + usage: "Confirmations, simple alerts, single-field inputs" + + medium: + width: "600-800px" + usage: "Forms, detailed content, most common use case" + + large: + width: "900-1200px" + usage: "Complex forms, content preview, rich media" + + fullscreen: + width: "100% viewport" + usage: "Mobile primarily, immersive experiences" + + dismiss_behavior: + click_outside: + description: "Click backdrop to close" + good_for: "Non-critical modals, user-initiated" + not_ideal_for: "Unsaved changes, critical confirmations" + + escape_key: + description: "Press ESC to close" + good_for: "All modals (accessibility)" + implementation: "Always include for keyboard users" + + explicit_close: + description: "Must click X or Cancel button" + good_for: "Critical modals, unsaved changes, confirmations" + not_ideal_for: "Frequent, non-blocking interactions" + +navigation_patterns: + sidebar: + name: "Sidebar Navigation" + good_for: ["Desktop apps", "Many sections", "Persistent navigation"] + not_ideal_for: ["Simple sites", "Few sections", "Mobile-only"] + variants: + - "Always visible (desktop)" + - "Collapsible (hamburger on mobile)" + - "Mini sidebar (icons only, expands on hover)" + + top_nav: + name: "Top Navigation Bar" + good_for: ["Marketing sites", "Few sections", "Mobile-friendly"] + not_ideal_for: ["Many menu items", "Deep hierarchies"] + variants: + - "Horizontal menu" + - "Mega menu (dropdown panels)" + - "Hamburger menu (mobile)" + + tabs: + name: "Tab Navigation" + good_for: ["Related content sections", "Switching views", "Settings"] + not_ideal_for: ["Unrelated sections", "Too many tabs (>7)"] + variants: + - "Horizontal tabs" + - "Vertical tabs" + - "Pill tabs" + + bottom_nav: + name: "Bottom Navigation (Mobile)" + good_for: ["Mobile apps", "3-5 primary sections", "Quick switching"] + not_ideal_for: ["Desktop", "Many sections", "Deep hierarchies"] + best_practices: "3-5 items, icon + label, highlight active" + +empty_state_patterns: + first_use: + description: "User's first time, no content yet" + components: + - "Illustration or icon" + - "Welcoming message" + - "Clear call-to-action (create first item)" + - "Optional: Tutorial or guide link" + + no_results: + description: "Search or filter returned nothing" + components: + - "Clear message (No results found for 'X')" + - "Suggestions (check spelling, try different keywords)" + - "Alternative action (clear filters, browse all)" + + cleared_content: + description: "User deleted/cleared content" + components: + - "Acknowledgment (Content cleared)" + - "Undo option (if possible)" + - "Action to create new content" + +confirmation_patterns: + no_confirmation: + description: "No confirmation dialog, immediate action with undo" + good_for: "Low-risk actions, undo available" + example: "Archive email (with undo toast)" + + simple_confirmation: + description: "Single confirmation dialog" + good_for: "Moderate-risk actions" + example: "Delete item? [Cancel] [Delete]" + + typed_confirmation: + description: "User must type specific text to confirm" + good_for: "High-risk, irreversible actions" + example: "Type 'DELETE' to confirm account deletion" + + multi_step_confirmation: + description: "Multiple confirmations or checkboxes" + good_for: "Critical, irreversible, high-impact actions" + example: "Delete account: check consequences, type confirmation, verify email" + +loading_patterns: + spinner: + name: "Spinner/Circular Progress" + good_for: ["Unknown duration", "Small areas", "Button states"] + usage: "Indeterminate progress" + + progress_bar: + name: "Linear Progress Bar" + good_for: ["Known duration", "File uploads", "Multi-step processes"] + usage: "Determinate progress (0-100%)" + + skeleton_screen: + name: "Skeleton/Placeholder" + good_for: ["Content loading", "Better perceived performance", "Layout stability"] + usage: "Show content structure while loading" + + optimistic_ui: + name: "Optimistic Update" + good_for: ["Instant feedback", "High success rate actions", "Smooth UX"] + usage: "Show result immediately, rollback if fails" + +responsive_breakpoints: + mobile_first: + sm: "640px (small phones)" + md: "768px (tablets portrait)" + lg: "1024px (tablets landscape, small desktops)" + xl: "1280px (desktops)" + xxl: "1536px (large desktops)" + + common_devices: + mobile: "320px - 767px" + tablet: "768px - 1023px" + desktop: "1024px+" + +interaction_patterns: + drag_and_drop: + good_for: ["Reordering lists", "File uploads", "Visual organization"] + not_ideal_for: ["Mobile (touch conflicts)", "Accessibility (needs fallback)"] + accessibility: "Must provide keyboard alternative" + + swipe_gestures: + good_for: ["Mobile navigation", "Quick actions (swipe to delete)", "Cards"] + not_ideal_for: ["Desktop", "Ambiguous actions"] + best_practices: "Visual feedback, undo option" + + infinite_scroll: + good_for: ["Social feeds", "Discovery", "Engagement"] + not_ideal_for: ["Finding specific items", "Footer access", "Performance"] + best_practices: "Load more button as fallback, preserve scroll position" + + pagination: + good_for: ["Data tables", "Search results", "Performance", "Findability"] + not_ideal_for: ["Social feeds", "Real-time content"] + variants: ["Numbered pages", "Previous/Next", "Load More button"] + +animation_guidelines: + duration: + micro: "50-100ms (button hover, checkbox toggle)" + small: "150-250ms (dropdown open, tooltip appear)" + medium: "250-400ms (modal open, drawer slide)" + large: "400-600ms (page transitions, complex animations)" + + easing: + ease_out: "Decelerates (entering animations)" + ease_in: "Accelerates (exiting animations)" + ease_in_out: "Both (moving between states)" + linear: "Constant speed (loading spinners)" + + principles: + - "Animations should feel natural, not robotic" + - "Use for feedback, transitions, and delight" + - "Don't slow down user tasks" + - "Respect prefers-reduced-motion" + - "60fps (under 16ms per frame)" + +accessibility_patterns: + keyboard_navigation: + tab_order: "Logical, top-to-bottom, left-to-right" + skip_links: "Skip to main content" + focus_trapping: "Modal keeps focus inside" + escape_key: "Close modals, cancel actions" + + screen_readers: + landmarks: "header, nav, main, aside, footer" + headings: "h1-h6 hierarchy (don't skip levels)" + aria_labels: "Descriptive labels for icon buttons" + live_regions: "Announce dynamic content changes" + + color_contrast: + wcag_aa: + normal_text: "4.5:1 contrast ratio" + large_text: "3:1 contrast ratio (18pt+ or 14pt+ bold)" + ui_components: "3:1 contrast ratio" + + wcag_aaa: + normal_text: "7:1 contrast ratio" + large_text: "4.5:1 contrast ratio" + +# Novel UX Pattern Examples (for inspiration) +novel_patterns_inspiration: + - pattern: "Swipe to match" + origin: "Tinder" + innovation: "Gamified decision-making through gesture" + + - pattern: "Stories (ephemeral content)" + origin: "Snapchat, then Instagram" + innovation: "Time-limited content creates urgency and authenticity" + + - pattern: "Infinite canvas" + origin: "Figma, Miro" + innovation: "Spatial organization without page boundaries" + + - pattern: "Real-time collaborative cursors" + origin: "Figma, Google Docs" + innovation: "See others' activity in real-time" + + - pattern: "Pull to refresh" + origin: "Tweetie (Twitter client)" + innovation: "Natural gesture for content updates" + + - pattern: "Card-based swiping" + origin: "Tinder, then widely adopted" + innovation: "Binary decisions through kinetic interaction" + + - pattern: "Algorithmic feed" + origin: "Facebook, TikTok" + innovation: "Personalized infinite content discovery" diff --git a/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/workflow.yaml b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/workflow.yaml new file mode 100644 index 00000000..0496a97b --- /dev/null +++ b/src/modules/bmm/workflows/2-plan-workflows/create-ux-design/workflow.yaml @@ -0,0 +1,55 @@ +# Create UX Design Workflow Configuration +name: create-ux-design +description: "Collaborative UX design facilitation workflow that creates exceptional user experiences through visual exploration and informed decision-making. Unlike template-driven approaches, this workflow facilitates discovery, generates visual options, and collaboratively designs the UX with the user at every step." +author: "BMad" + +# Critical variables from config +config_source: "{project-root}/bmad/bmm/config.yaml" +output_folder: "{config_source}:output_folder" +user_name: "{config_source}:user_name" +communication_language: "{config_source}:communication_language" +document_output_language: "{config_source}:document_output_language" +user_skill_level: "{config_source}:user_skill_level" +date: system-generated + +# Input requirements - We work from PRD, Brief, or Brainstorming docs +recommended_inputs: + - prd: "Product Requirements Document with features and user journeys" + - product_brief: "Product brief with vision and target users" + - brainstorming: "Brainstorming documents with ideas and concepts" + +# Input file references (fuzzy matched from output folder) +prd_file: "{output_folder}/bmm-PRD.md or PRD.md or product-requirements.md" +brief_file: "{output_folder}/product-brief.md or brief.md or project-brief.md" +brainstorm_file: "{output_folder}/brainstorming.md or brainstorm.md or ideation.md" + +# Module path and component files +installed_path: "{project-root}/bmad/bmm/workflows/2-plan-workflows/create-ux-design" +instructions: "{installed_path}/instructions.md" +validation: "{installed_path}/checklist.md" +template: "{installed_path}/ux-design-template.md" + +# Knowledge bases for intelligent UX decisions +ux_pattern_catalog: "{installed_path}/ux-pattern-catalog.yaml" +color_psychology: "{installed_path}/color-psychology.yaml" +layout_patterns: "{installed_path}/layout-patterns.yaml" + +# Output configuration - Progressive saves throughout workflow +default_output_file: "{output_folder}/ux-design-specification.md" +color_themes_html: "{output_folder}/ux-color-themes.html" +design_directions_html: "{output_folder}/ux-design-directions.html" + +# Workflow metadata +version: "1.0.0" +paradigm: "visual-collaboration-driven" +execution_time: "45-120 minutes depending on project complexity and user engagement" +features: + - "Design system discovery and selection" + - "Live HTML color theme visualization" + - "6-8 design direction mockup generation" + - "Adaptive facilitation by skill level" + - "Novel UX pattern design for unique concepts" + - "Progressive document building (saves after each step)" + - "Visual decision-making with actual mockups" + - "WebSearch for current design systems and trends" + - "Serves as input to follow-up workflows (wireframes, Figma, prototypes, architecture)"