117 lines
3.2 KiB
Markdown
117 lines
3.2 KiB
Markdown
# 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.*
|
|
|