bmad-enhanced 1.3.1 → 1.3.2

package/_bmad/bme/_vortex/workflows/_deprecated/empathy-map/validate.md

@@ -0,0 +1,117 @@
+---
+workflow: validate-empathy-map
+type: single-file
+description: Validate an existing empathy map against user research evidence
+author: Emma (contextualization-expert)
+---
+
+# Validate Existing Empathy Map
+
+Bring me an empathy map and I'll help you validate it against user research evidence.
+
+## Why Validation Matters
+
+Empathy maps lose value if they're based on assumptions instead of research. Validation ensures:
+- Every insight traces back to evidence
+- No speculation or "we think users want..."
+- Team stays grounded in user reality
+
+## Validation Process
+
+### 1. Evidence Check
+
+For each insight in the empathy map, ask:
+
+**Can you point to research that supports this?**
+- Direct quote from interview?
+- Observed behavior?
+- Survey data?
+- Analytics?
+
+**Red Flags:**
+- "We think users want..."
+- "Users probably feel..."
+- "Based on our internal discussions..."
+- No citation to research source
+
+### 2. Specificity Check
+
+**Is the target user specific enough?**
+- ❌ "Mobile users"
+- ❌ "Marketing professionals"
+- ✅ "Marketing managers at mid-sized B2B companies managing lead generation"
+
+**Are pain points concrete?**
+- ❌ "Bad UX"
+- ✅ "Campaign creation button hidden in nested menu (3 clicks deep)"
+
+**Are gains measurable?**
+- ❌ "Want to be more efficient"
+- ✅ "Complete campaign setup in under 10 minutes vs. current 45 minutes"
+
+### 3. Completeness Check
+
+**Did you explore all dimensions?**
+- [ ] Says (direct quotes)
+- [ ] Thinks (inferred thoughts)
+- [ ] Does (observable actions)
+- [ ] Feels (emotional states)
+- [ ] Pains (obstacles/frustrations)
+- [ ] Gains (desired outcomes)
+
+**Did you capture both positive and negative?**
+- Not just problems (pain points)
+- Also aspirations (gains)
+- Moments of delight AND frustration
+
+### 4. Actionability Check
+
+**Can designers use this?**
+- Are pain points specific enough to inform design decisions?
+- Are gains clear enough to prioritize features?
+
+**Can product managers use this?**
+- Can they defend feature decisions with user insights?
+- Can they communicate user needs to stakeholders?
+
+---
+
+## Your Turn
+
+**Please share:**
+1. The empathy map you want to validate (paste content or provide file path)
+2. The research sources that informed it
+
+I'll review it and provide:
+- **Evidence gaps** - Insights lacking research support
+- **Specificity issues** - Vague statements that need clarification
+- **Missing dimensions** - Areas you didn't explore
+- **Validation score** - Overall assessment (Strong / Needs Work / Speculative)
+
+---
+
+## Validation Criteria
+
+**Strong Empathy Map:**
+- ✅ Every insight backed by cited research
+- ✅ Specific target user definition
+- ✅ Concrete, measurable pain points and gains
+- ✅ All 6 dimensions explored (Says, Thinks, Does, Feels, Pains, Gains)
+- ✅ Both positive and negative aspects captured
+- ✅ Actionable for designers and product managers
+
+**Needs Work:**
+- ⚠️ Some insights lack research support
+- ⚠️ Target user could be more specific
+- ⚠️ Pain points or gains are vague
+- ⚠️ Missing some dimensions
+
+**Speculative:**
+- ❌ Many insights are assumptions
+- ❌ No clear research sources
+- ❌ "We think" instead of "Users said"
+- ❌ Not actionable
+
+---
+
+Ready to validate your empathy map? Share it with me and I'll provide detailed feedback! 🎨

package/_bmad/bme/_vortex/workflows/_deprecated/empathy-map/workflow.md

@@ -0,0 +1,44 @@
+---
+workflow: empathy-map
+type: step-file
+description: Create user empathy maps through structured 6-step process
+author: Emma (contextualization-expert)
+---
+
+# Create Empathy Map Workflow
+
+This workflow guides you through creating a comprehensive empathy map for a target user.
+
+## What is an Empathy Map?
+
+An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. It externalizes knowledge about users to create a shared understanding and aid decision-making.
+
+## Workflow Structure
+
+**Step-file architecture:**
+- Just-in-time loading (each step loads only when needed)
+- Sequential enforcement (must complete step N before step N+1)
+- State tracking in frontmatter (progress preserved)
+
+## Steps Overview
+
+1. **Define Target User** - Who are we creating this empathy map for?
+2. **Says & Thinks** - What do they say aloud? What do they think?
+3. **Does & Feels** - What actions do they take? What emotions do they feel?
+4. **Pain Points** - What frustrates, blocks, or challenges them?
+5. **Gains** - What do they want to achieve? What are their needs?
+6. **Synthesize** - Create the final empathy map artifact
+
+## Output
+
+**Artifact:** Empathy map markdown file in `{output_folder}/empathy-map-{user-name}-{date}.md`
+
+**Template:** Uses [empathy-map.template.md](empathy-map.template.md)
+
+---
+
+## INITIALIZATION
+
+Load config from {project-root}/_bmad/bme/_designos/config.yaml
+
+Load step: {project-root}/_bmad/bme/_designos/workflows/empathy-map/steps/step-01-define-user.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-01-define-requirements.md

@@ -0,0 +1,85 @@
+---
+step: 1
+workflow: wireframe
+title: Define Requirements
+---
+
+# Step 1: Define Requirements
+
+Before we create a wireframe, we need to understand exactly what we're building and why.
+
+## Why This Matters
+
+A wireframe is only useful if it solves a real problem. Generic wireframes waste time. Specific wireframes (for a specific screen, user, and goal) accelerate design and development.
+
+## Your Task
+
+Answer these questions to define your wireframe requirements:
+
+### 1. What are we wireframing?
+
+- **Scope:** Single screen? User flow (multiple screens)? Full app?
+- **Screen name:** What do you call this screen? (e.g., "Dashboard Home", "Checkout Flow", "Product Detail Page")
+- **Platform:** Web (desktop)? Web (mobile)? Mobile app (iOS/Android)?
+- **Viewport size:**
+  - Mobile: 375px width (iPhone standard)
+  - Tablet: 768px width
+  - Desktop: 1024px+ width
+  - Responsive: All of the above?
+
+### 2. Who is this for?
+
+- **Target user:** Who will use this screen? (Reference an empathy map if available, e.g., "Sarah Chen from empathy-map-sarah-chen-2026-02-14.md")
+- **User's primary goal:** What is the ONE thing users come here to do?
+- **User's technical proficiency:** Tech-savvy? Average? Non-technical?
+- **User context:** Are they rushed? Exploring? Completing a specific task?
+
+### 3. What's the core functionality?
+
+- **Primary action:** The MAIN thing users do on this screen (e.g., "Check account balance")
+- **Secondary actions:** Supporting tasks (e.g., "View recent transactions", "Transfer money")
+- **Information displayed:** What data does the screen show? (e.g., "Balance, last 5 transactions, quick action buttons")
+- **Data sources:** Where does the information come from? (APIs, databases, user input)
+
+### 4. Design constraints?
+
+- **Existing design system?** Are you using Material Design, iOS Human Interface Guidelines, custom component library?
+- **Brand guidelines?** Any must-have elements (logo placement, color scheme - high level only)
+- **Technical constraints?** Third-party integrations, API limitations, performance requirements?
+- **Accessibility requirements?** WCAG 2.1 Level AA compliance? Screen reader support?
+
+## Example
+
+```
+Screen: Dashboard Home (Mobile Banking App)
+Platform: Mobile app (iOS/Android)
+Viewport: 375px width (mobile-first)
+
+User: Sarah Chen (see empathy-map-sarah-chen-2026-02-14.md)
+Primary Goal: Check account balance quickly
+Technical Proficiency: Medium-high
+Context: Rushed, 3-5 daily check-ins, sessions < 2 minutes
+
+Primary Action: Check account balance
+Secondary Actions: View recent transactions, quick transfer, pay bills
+Information: Balance, last updated timestamp, 5 recent transactions, quick action buttons
+Data Sources: Banking API (balance, transactions)
+
+Constraints:
+- Must support Face ID for authentication
+- Follow iOS/Android platform patterns
+- WCAG 2.1 Level AA (minimum 44px touch targets)
+- Performance: Load balance in < 1 second
+```
+
+---
+
+## Your Turn
+
+Please define your wireframe requirements using the structure above.
+
+## Next Step
+
+When you've defined your requirements and I've confirmed they're specific enough, I'll load:
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-02-user-flows.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-02-user-flows.md

@@ -0,0 +1,59 @@
+---
+step: 2
+workflow: wireframe
+title: User Flows
+---
+
+# Step 2: User Flows
+
+Let's map how users navigate through your wireframe(s).
+
+## Why This Matters
+
+Understanding user flows prevents designing dead-end screens or confusing navigation. Every screen needs clear entry points and exit points.
+
+## Your Task
+
+### 1. Entry Points
+How do users arrive at this screen?
+- From home screen? From search? From notification?
+- Deep link? QR code? Email link?
+- What's their mental state? (rushing, exploring, completing task)
+
+### 2. Primary Flow (Happy Path)
+Map the ideal journey from entry to goal completion:
+
+```
+Entry → Action → Response → Goal Achieved
+```
+
+Example:
+```
+Home Screen
+    ↓ (Tap "Balance")
+Face ID Authentication
+    ↓ (Success)
+Balance Display
+    ↓ (Goal: See balance)
+[Done] or Continue to Secondary Action
+```
+
+### 3. Alternative Flows
+What if...?
+- User makes an error?
+- Data is unavailable?
+- Authentication fails?
+- User wants to go back?
+- User abandons the flow?
+
+### 4. Exit Points
+How do users leave?
+- Goal completed → where next?
+- Task abandoned → how to recover?
+- Navigation to related features?
+
+## Next Step
+
+When you've mapped user flows, I'll load:
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-03-information-architecture.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-03-information-architecture.md

@@ -0,0 +1,68 @@
+---
+step: 3
+workflow: wireframe
+title: Information Architecture
+---
+
+# Step 3: Information Architecture
+
+Let's organize content and UI elements hierarchically.
+
+## Your Task
+
+### 1. Content Priority (Visual Hierarchy)
+What's most important on this screen?
+
+**Primary (above the fold, largest/boldest):**
+- The ONE thing users came here to see/do
+
+**Secondary (mid-screen, medium emphasis):**
+- Supporting information and actions
+
+**Tertiary (below fold or subtle):**
+- Metadata, help text, less critical features
+
+### 2. Grouping
+How to organize related elements?
+
+- **Visual grouping:** Cards? Sections? Accordions?
+- **Logical grouping:** By task? By time? By category?
+- **Separation:** Spacing? Dividers? Background colors?
+
+### 3. Navigation
+How do users move around?
+
+- **Primary nav:** Top bar? Bottom tabs? Sidebar? Hamburger menu?
+- **Secondary nav:** Breadcrumbs? Tabs? Segmented controls?
+- **Back/Close:** Where do these buttons go?
+
+### 4. Information Density
+How much is too much?
+
+- **Progressive disclosure:** Show essentials, hide details until needed
+- **Lazy loading:** Load more on scroll?
+- **Pagination vs. infinite scroll**
+
+## Example
+
+```
+Dashboard Screen (Mobile - 375px)
+
+[Visual Hierarchy]
+Primary: Account balance ($$$) - Hero section, centered, large
+Secondary: Quick actions (3 buttons) - Mid section
+Tertiary: Recent transactions (list) - Bottom, scrollable
+
+[Grouping]
+Section 1: Hero (balance + last updated)
+Section 2: Quick Actions (3 icon buttons, horizontal)
+Section 3: Activity (transaction list with "Load More")
+
+[Navigation]
+Bottom Tab Bar: [Home] [Accounts] [Cards] [Profile]
+Top Bar: [Menu ☰] [Notifications 🔔]
+```
+
+## Next Step
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-04-wireframe-sketch.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-04-wireframe-sketch.md

@@ -0,0 +1,97 @@
+---
+step: 4
+workflow: wireframe
+title: Wireframe Sketch
+---
+
+# Step 4: Wireframe Sketch
+
+Time to create the low-fidelity wireframe layout using ASCII art.
+
+## Grid System
+
+- **Mobile:** 8pt grid, 16px margins
+- **Desktop:** 12-column grid, 24px gutters
+- **Alignment:** Everything snaps to grid
+
+## ASCII Wireframe Syntax
+
+```
+┌─────────────────────────────────┐  ← Top border
+│ ☰ Menu    Page Title       🔔   │  ← Header bar
+├─────────────────────────────────┤  ← Section divider
+│                                 │
+│        Main Content Area        │  ← Content section
+│                                 │
+│  ┌─────┐  ┌─────┐  ┌─────┐    │  ← Button row
+│  │ Btn1│  │ Btn2│  │ Btn3│    │
+│  └─────┘  └─────┘  └─────┘    │
+├─────────────────────────────────┤
+│ [Home] [Search] [Profile]      │  ← Bottom nav
+└─────────────────────────────────┘  ← Bottom border
+```
+
+## Component Placement
+
+1. **Header** (56-72px height)
+   - Logo/back button (left)
+   - Page title (center)
+   - Actions/notifications (right)
+
+2. **Content area**
+   - Primary content (hero, main action)
+   - Secondary content (supporting info)
+   - Tertiary content (metadata, help)
+
+3. **Navigation** (48-72px height)
+   - Bottom tabs (mobile)
+   - Sidebar (desktop)
+
+## Typography Hierarchy
+
+- **H1:** Screen title (24-32px)
+- **H2:** Section headers (20-24px)
+- **Body:** Content text (16px)
+- **Caption:** Metadata (12-14px)
+
+## Example: Mobile Dashboard
+
+```
+┌─────────────────────────────────┐
+│ ☰                          🔔   │ ← Header (56px)
+├─────────────────────────────────┤
+│                                 │
+│     Account Balance             │ ← H1 (Hero section)
+│      $12,458.32                 │ ← Large text
+│   Last updated: 2 min ago       │ ← Caption
+│                                 │
+├─────────────────────────────────┤
+│  ┌─────┐  ┌─────┐  ┌─────┐    │ ← Quick Actions
+│  │Trans│  │ Pay │  │Depo │    │   (3 buttons,
+│  │ fer │  │Bills│  │sit  │    │    100×48px each)
+│  └─────┘  └─────┘  └─────┘    │
+├─────────────────────────────────┤
+│ Recent Transactions         ↗   │ ← H2 + "See All"
+│ ┌───────────────────────────┐  │
+│ │ 🏪 Starbucks   -$5.42  →  │  │ ← Transaction item
+│ └───────────────────────────┘  │   (64px height)
+│ ┌───────────────────────────┐  │
+│ │ 💰 Salary    +$4,200   →  │  │
+│ └───────────────────────────┘  │
+│ ... (3 more items)              │
+│ [Load More Transactions]        │ ← Button
+├─────────────────────────────────┤
+│ [🏠] [💳] [📊] [👤]            │ ← Bottom tabs (72px)
+└─────────────────────────────────┘
+```
+
+## Your Turn
+
+Create your wireframe sketch using ASCII art. Include:
+- Header, content area, navigation
+- Component placements
+- Size annotations (px)
+
+## Next Step
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-05-components.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-05-components.md

@@ -0,0 +1,128 @@
+---
+step: 5
+workflow: wireframe
+title: Components & Interactions
+---
+
+# Step 5: Components & Interactions
+
+Let's specify UI components, their states, and interactive behaviors.
+
+## Component Library
+
+Document which components are used:
+
+**Buttons:**
+- Primary CTA (main action)
+- Secondary (supporting action)
+- Tertiary/Text (less emphasis)
+
+**Input Controls:**
+- Text fields, dropdowns, checkboxes, radio buttons, toggles
+
+**Data Display:**
+- Cards, lists, tables, grids
+
+**Feedback:**
+- Toasts, alerts, modals, bottom sheets
+
+**Progress:**
+- Spinners, progress bars, skeleton screens
+
+## Interaction Specifications
+
+### Tap/Click Interactions
+```
+Element X → Action Y
+Example:
+- Tap "Transfer" button → Navigate to Transfer screen
+- Tap transaction item → Show transaction details modal
+- Pull to refresh → Reload balance and transactions
+```
+
+### Gestures (Mobile)
+```
+- Swipe left on transaction → Delete (with confirmation)
+- Swipe right on transaction → Mark as reviewed
+- Long press → Show context menu
+- Pinch to zoom → (if applicable)
+```
+
+### Keyboard (Desktop)
+```
+- Tab → Navigate between fields
+- Enter → Submit/Next
+- Esc → Cancel/Close modal
+```
+
+## Component States
+
+For each interactive component, define:
+
+**Button States:**
+- Default (idle)
+- Hover (desktop)
+- Pressed/Active
+- Disabled (greyed out)
+- Loading (spinner)
+
+**Input Field States:**
+- Empty (placeholder visible)
+- Focused (cursor visible, border highlighted)
+- Filled (user input present)
+- Error (validation failed, show error message)
+- Disabled
+
+**Screen States:**
+- Loading (skeleton/spinner)
+- Empty (no data, show empty state illustration)
+- Error (failed to load, show retry button)
+- Success (data loaded, normal display)
+
+## Responsive Breakpoints
+
+### Mobile (320px - 767px)
+- Single column layout
+- Stack buttons vertically
+- Bottom navigation
+
+### Tablet (768px - 1023px)
+- Two-column layout possible
+- Buttons side-by-side
+- Bottom or side navigation
+
+### Desktop (1024px+)
+- Multi-column layouts
+- Sidebar navigation
+- Hover states visible
+
+## Example
+
+```
+[Components Used]
+1. Button (Primary)
+   - Elements: "Transfer", "Pay Bills", "Deposit"
+   - Size: 100×48px, Border radius: 8px
+   - States: Default, Pressed, Disabled, Loading
+
+2. Transaction List Item
+   - Layout: [Icon 32×32] [Name + Amount] [Arrow →]
+   - Height: 64px
+   - Tap → Transaction detail screen
+   - Swipe left → Delete with confirmation
+
+[Interactions]
+- Tap balance → Account details screen
+- Tap quick action → Respective flow
+- Pull to refresh → Reload (with spinner)
+- Swipe transaction → Delete/Archive
+
+[Responsive]
+- Mobile (375px): Single column, stacked
+- Tablet (768px): Two columns for quick actions
+- Desktop (1024px+): Sidebar + main content
+```
+
+## Next Step
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-06-synthesize.md

package/_bmad/bme/_vortex/workflows/_deprecated/wireframe/steps/step-06-synthesize.md

@@ -0,0 +1,83 @@
+---
+step: 6
+workflow: wireframe
+title: Synthesize
+---
+
+# Step 6: Synthesize
+
+Time to bring it all together and create the final wireframe artifact!
+
+## Why This Matters
+
+We've gathered requirements, mapped user flows, designed information architecture, sketched wireframes, and specified components. Now we synthesize everything into a professional wireframe document that designers and developers can use.
+
+## What I'll Create
+
+Using the template at `wireframe.template.md`, I'll generate your complete wireframe artifact with:
+
+1. **Executive Summary** - Key design decisions at a glance
+2. **Requirements** - What we're solving for
+3. **User Flows** - How users navigate
+4. **Information Architecture** - Content organization
+5. **Wireframe Sketches** - ASCII art layouts
+6. **Component Specifications** - Detailed component specs
+7. **Interaction Design** - Behaviors and states
+8. **Responsive Breakpoints** - Adaptive layouts
+9. **Accessibility Notes** - WCAG compliance
+10. **Design Rationale** - Why these decisions?
+11. **Next Steps** - Handoff to high-fidelity design
+
+## Output Location
+
+**File:** `{output_folder}/wireframe-{screen-name}-{date}.md`
+
+Example: `wireframe-dashboard-home-2026-02-15.md`
+
+## Before I Generate
+
+Let me review all the information we've gathered:
+
+### Requirements Checklist
+- [ ] Screen name and platform defined
+- [ ] Target user identified
+- [ ] Primary action clear
+- [ ] Constraints documented
+
+### Flow Checklist
+- [ ] Entry points mapped
+- [ ] Happy path defined
+- [ ] Alternative flows considered
+- [ ] Exit points clear
+
+### Architecture Checklist
+- [ ] Visual hierarchy established
+- [ ] Content grouped logically
+- [ ] Navigation patterns defined
+
+### Wireframe Checklist
+- [ ] ASCII sketch created
+- [ ] Grid system followed
+- [ ] Component placements clear
+
+### Components Checklist
+- [ ] All components identified
+- [ ] Interactions specified
+- [ ] States documented
+- [ ] Responsive behavior defined
+
+## Your Turn
+
+Please confirm you're ready for me to generate the final wireframe artifact, or let me know if we need to revise any section.
+
+## What's Next After This?
+
+Once I create your wireframe artifact, you can:
+
+1. **Validate with users** - Show the wireframe to users and get feedback
+2. **Share with team** - Get stakeholder alignment on structure
+3. **Create high-fidelity designs** - Use this as foundation for visual design
+4. **Prototype** - Build interactive prototype from wireframe
+5. **Develop** - Hand off to developers with clear specifications
+
+Great work! This wireframe will be a solid foundation for your design and development. 🎨