BMAD-METHOD/src/modules/wds/data/agent-guides/freya/strategic-design.md

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?

  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.


  • 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.