initial commit

_bmad/wds/data/agent-guides/freya/strategic-design.md

@@ -0,0 +1,116 @@
+# Freya's Strategic Design Guide
+
+**When to load:** Before designing any page, component, or user flow
+
+---
+
+## Core Principle
+
+**Every design decision connects to strategy.** Never design in a vacuum.
+
+---
+
+## Before You Design Anything
+
+### 1. Load Strategic Context
+
+**Ask yourself:**
+- What's in the Trigger Map for this page/scenario?
+- What does the Product Brief say?
+
+**If missing:** Suggest creating one first. Design without strategy is decoration.
+
+---
+
+### 2. Connect to Business Goals
+
+**Every major design choice should answer:**
+- Which business goal does this serve?
+- How does this move the needle on our success metrics?
+
+**Example:**
+- ❌ "Let's make this button blue because it's pretty"
+- ✅ "This CTA should be prominent because it serves the 'Convert Problem Aware users' goal"
+
+---
+
+### 3. Identify User Driving Forces
+
+**From the Trigger Map, ask:**
+- What positive driving forces should we trigger? (wishes, desires, aspirations)
+- What negative driving forces should we address? (fears, frustrations, anxieties)
+
+**Example:**
+- User wants to "feel like an industry expert"
+- User fears "looking unprofessional to clients"
+- Design should make them feel capable, not overwhelmed
+
+---
+
+### 4. Customer Awareness Stage
+
+**Where are users in their journey?**
+
+1. **Unaware** - Don't know they have a problem → Educate on problem
+2. **Problem Aware** - Know the problem, not solutions → Show there are solutions
+3. **Solution Aware** - Know solutions exist → Show why yours is different
+4. **Product Aware** - Know your product → Remove friction, show proof
+5. **Most Aware** - Ready to buy/use → Make it easy, reinforce decision
+
+**Design implications:**
+- Unaware users need more context, education
+- Most Aware users need less explanation, more action
+
+---
+
+### 5. Content Hierarchy (Golden Circle)
+
+**Structure content as:** WHY → HOW → WHAT
+
+- **WHY** - Purpose, benefit, emotional hook (first)
+- **HOW** - Process, approach, differentiation (second)
+- **WHAT** - Features, specifics, details (last)
+
+**Example:**
+```
+Hero Section:
+├── Headline (WHY): "Stop losing clients to competitors with better proposals"
+├── Subhead (HOW): "Create stunning proposals in minutes with AI-powered templates"
+└── Features (WHAT): "10,000+ templates, Smart pricing, E-signatures"
+```
+
+---
+
+## Strategic Design Checklist
+
+Before finalizing any design:
+
+- [ ] **Trigger Map** - Which driving force does this serve?
+- [ ] **Business Goal** - How does this support our objectives?
+- [ ] **Customer Awareness** - Appropriate for their awareness stage?
+- [ ] **Golden Circle** - WHY before HOW before WHAT?
+- [ ] **Logical Explanation** - Can I defend this decision strategically?
+
+---
+
+## When You're Stuck
+
+**If you can't connect a design choice to strategy:**
+1. It might not be needed (remove it)
+2. You need more strategic context (ask for Trigger Map)
+3. There's a better alternative (explore options)
+
+**Never guess.** Always design with intent.
+
+---
+
+## Related Resources
+
+- **Trigger Mapping:** `../../docs/method/phase-2-trigger-mapping-guide.md`
+- **Customer Awareness:** `../../docs/models/customer-awareness-cycle.md`
+- **Golden Circle:** `../../docs/models/golden-circle.md`
+
+---
+
+*Strategic design is what makes WDS different. Every pixel has a purpose.*
+