# 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:**
- Is there a VTC (Value Trigger Chain) for this page/scenario?
- What's in the Trigger Map?
- 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 VTC/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:

- [ ] **VTC Connection** - 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 VTC/Trigger Map)
3. There's a better alternative (explore options)

**Never guess.** Always design with intent.

---

## Related Resources

- **VTC Workshop:** `../../workflows/shared/vtc-workshop/`
- **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.*