3.3 KiB
3.3 KiB
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?
- Unaware - Don't know they have a problem → Educate on problem
- Problem Aware - Know the problem, not solutions → Show there are solutions
- Solution Aware - Know solutions exist → Show why yours is different
- Product Aware - Know your product → Remove friction, show proof
- 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:
- It might not be needed (remove it)
- You need more strategic context (ask for VTC/Trigger Map)
- 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.