julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3.2 KiB
3.2 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:
- 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?
- 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:
- 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:
- It might not be needed (remove it)
- You need more strategic context (ask for Trigger Map)
- There's a better alternative (explore options)
Never guess. Always design with intent.
Related Resources
- Trigger Mapping:
../../docs/method/phase-wds-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.