whiteport-design-studio 0.2.2 → 0.3.0

package/docs/learn/module-07-design-phase/lesson-03-meet-freya.md

@@ -0,0 +1,200 @@
+# Module 07: Design Phase Introduction
+
+## Lesson 3: Meet Freya
+
+**Your UX design partner for the entire design workflow**
+
+---
+
+## Who is Freya?
+
+Freya is the WDS UX design agent. She guides you through every step of the design workflow — from outlining scenarios to creating complete conceptual specifications, from sketching to design systems.
+
+If Saga helped you think strategically about **what** to build and **why**, Freya helps you figure out **how** it should work and **what it should feel like**.
+
+**Freya's role in WDS:**
+
+| Phase | What Freya Does | Modules |
+|-------|----------------|---------|
+| Outline Scenarios | Translates trigger maps into user journeys | 08 |
+| Conceptual Sketching | Guides visualization of key moments | 09 |
+| Storyboarding | Structures the flow of each scenario | 10 |
+| Conceptual Specifications | Creates detailed specs from storyboards | 11 |
+| Functional Components | Identifies patterns across specifications | 12 |
+| Design System | Establishes the mode for your project | 13 |
+| Visual Design | Applies visual language to specifications | 15 |
+| Design Delivery | Packages specifications for handoff | 16 |
+
+That's **eight modules** of design work. Freya is your constant companion through all of it.
+
+✅ **Checkpoint:** You understand that Freya leads the design workflow (Modules 08-13, 15-16)
+
+---
+
+## The WHY Before WHAT Methodology
+
+Freya's core principle is simple:
+
+> **Every design decision connects to strategy. Never design in a vacuum.**
+
+Before Freya designs anything — a button, a page, a flow — she asks:
+
+1. **WHY** does this need to exist? (Which business goal does it serve?)
+2. **WHO** is this for? (Which target group, at what awareness stage?)
+3. **WHAT** driving forces are at play? (What motivates or worries the user?)
+
+Only after answering these questions does Freya move to **HOW** it should work.
+
+**Example — Dog Week onboarding:**
+
+A traditional designer might start with: *"Let's design the registration page."*
+
+Freya starts differently:
+
+- **WHY:** Business goal BG01 is "5,000 active teams in year one." Registration is the gateway.
+- **WHO:** Dog owners who are "Problem Aware" — they know they want to connect with other dog people but haven't found the right platform yet.
+- **WHAT:** Positive driver: "I want to find my tribe." Negative driver: "I don't want another app that wastes my time."
+- **HOW:** Registration must feel instant, personal, and immediately rewarding. The user should feel they've found their people within 30 seconds.
+
+Now you're not designing a form. You're designing a **first impression that triggers belonging**.
+
+✅ **Checkpoint:** You understand WHY before WHAT — every design decision traces back to strategy
+
+---
+
+## How Freya Works With You
+
+Freya doesn't design **for** you — she designs **with** you. Think of it as a collaboration where you each bring something essential:
+
+**What you bring:**
+- User empathy and intuition
+- Creative vision
+- Domain knowledge
+- Aesthetic judgment
+
+**What Freya brings:**
+- Structural thinking and methodology
+- Connection to strategic documents (Product Brief, Trigger Map)
+- Consistency checking across scenarios
+- Specification writing discipline
+
+### The Collaboration Flow
+
+In practice, working with Freya follows a pattern:
+
+1. **You share context** — "Here's my Trigger Map and the scenario I want to design"
+2. **Freya loads strategy** — She reads your Product Brief, Trigger Map, and any existing specs
+3. **You explore together** — She asks questions, you make decisions, she structures them
+4. **She produces specifications** — Detailed, buildable documents that capture your design decisions
+5. **You review and refine** — Your judgment drives the final result
+
+### Starting a Session with Freya
+
+When you begin working with Freya on a design task, she'll typically want to know:
+
+- Which scenario are you working on?
+- What strategic documents exist? (Product Brief, Trigger Map, Platform Requirements)
+- What have you already sketched or decided?
+- Are there constraints from Platform Requirements?
+
+**Pro tip:** The more strategic context you give Freya upfront, the better her suggestions will be. If you share your Trigger Map, she can proactively suggest scenarios and design approaches you might not have considered.
+
+✅ **Checkpoint:** You understand the collaboration model — your creativity + Freya's structure
+
+---
+
+## Freya's Design Workflow
+
+Here's how Freya approaches each stage of the design workflow:
+
+### Stage 1: Outline Scenarios (Module 08)
+
+Freya takes your Trigger Map and asks: *"What are the key journeys that connect business goals to user satisfaction?"*
+
+She helps you define **sunshine scenarios** — the shortest path from current state to desired state, for both the user and the business.
+
+### Stage 2: Conceptual Sketching (Module 09)
+
+Before any detailed specification, Freya encourages **hand sketching**. Quick, rough, exploratory. The goal is to visualize the key moments in each scenario without getting locked into details.
+
+### Stage 3: Storyboarding (Module 10)
+
+Freya helps you arrange your sketches into a **linear storyboard** — a frame-by-frame sequence showing how the user moves through the scenario. Each frame captures a transformation.
+
+### Stage 4: Conceptual Specifications (Module 11)
+
+This is where Freya truly shines. She transforms your storyboards into **detailed specifications** — section by section, widget by widget, element by element. Every specification connects back to the strategic WHY.
+
+### Stage 5: Components & System (Modules 12-13)
+
+As specifications accumulate, Freya identifies **patterns** — elements that appear across multiple specifications become functional components. These components form the foundation of your design system.
+
+### Stage 6: Visual Design & Delivery (Modules 15-16)
+
+Finally, Freya helps apply visual language to your specifications and packages everything for handoff — whether to developers, AI coding agents, or your own implementation work.
+
+✅ **Checkpoint:** You understand Freya's six-stage design workflow
+
+---
+
+## When to Engage Freya
+
+**Start with Freya when:**
+- You've completed your Trigger Map (Module 06) and are ready to design
+- You want to translate strategy into concrete user experiences
+- You need to create or refine specifications
+
+**Don't start with Freya when:**
+- You haven't completed the strategic foundation yet (go back to Saga)
+- You want to write code (that's handled in a development session)
+- You're still figuring out business goals or target groups
+
+### The Two Agents — Quick Reference
+
+| Agent | Domain | When to Use |
+|-------|--------|------------|
+| **Saga** | Strategy | Product Brief, Trigger Mapping, Platform Requirements |
+| **Freya** | Design | Scenarios, Sketching, Specifications, Components, Visual Design |
+
+Saga hands off to Freya. Freya handles both design and development. But the workflow isn't one-way — you'll often loop back to earlier stages as you learn from design and implementation.
+
+---
+
+## What Makes Freya Different
+
+Traditional design tools let you push pixels. Freya helps you **think through design decisions** and capture them as specifications that anyone (or any AI) can build from.
+
+**Traditional approach:**
+1. Open Figma
+2. Start placing rectangles
+3. Hope it works
+4. Redo when developers have questions
+
+**WDS approach with Freya:**
+1. Load strategic context
+2. Define the scenario and key transformations
+3. Sketch and storyboard the journey
+4. Write specifications that answer every question
+5. Build with confidence — the spec IS the design
+
+The specification Freya helps you create isn't documentation of a design. **It IS the design.** This is the fundamental shift you learned about in Lesson 2.
+
+---
+
+## Ready for Design
+
+You now have everything you need to begin the design workflow:
+
+- ✅ A Product Brief (your North Star)
+- ✅ A Trigger Map (your strategic compass)
+- ✅ Platform Requirements (your boundaries)
+- ✅ An understanding of why specifications matter
+- ✅ A design partner (Freya) ready to guide you
+
+**Next up:** Module 08, where you and Freya will outline your first scenarios — translating your Trigger Map into concrete user journeys.
+
+---
+
+[← Back to Lesson 2](lesson-02-why-specifications-matter.md) | [Module Overview](module-07-design-phase-overview.md) | [Next: Module 08 →](../module-08-outline-scenarios/module-08-outline-scenarios-overview.md)
+
+*Part of Module 07: Design Phase*

package/docs/learn/module-07-design-phase/module-07-design-phase-overview.md

@@ -0,0 +1,148 @@
+# Module 07: The Design Phase
+
+**Time: 20 min | Agent: Freya | Phase: Design | Focus: Overview**
+
+---
+
+## Welcome to the Heart of WDS
+
+You've completed Strategy. You have:
+- A Product Brief (your North Star)
+- Platform Requirements (your boundaries)
+- A Trigger Map (user psychology mapped)
+
+Now it's time to design.
+
+---
+
+## What This Phase Contains
+
+8 modules covering UX design and visual design. This is where creative discipline becomes real.
+
+| Module | What You'll Do | Focus |
+|--------|---------------|-------|
+| 08 | Outline Scenarios | UX |
+| 09 | Conceptual Sketching | UX |
+| 10 | Storyboarding | UX |
+| 11 | Conceptual Specifications | UX |
+| 12 | Functional Components | UX |
+| 13 | Design System | Systems |
+| 14 | Agentic Development | Build |
+| 15 | Visual Design | Visual |
+| 16 | Design Delivery | Delivery |
+
+---
+
+## The Flow
+
+```
+Outline → Sketch → Storyboard → Specify → Components → Visual → System → Deliver
+```
+
+It's not strictly linear. You'll loop back. That's the point.
+
+---
+
+## Meet Freya
+
+Freya is your design partner. She:
+
+- Thinks WITH you, not FOR you
+- Asks "WHY?" before "WHAT?"
+- Connects every decision to your Trigger Map
+- Won't let you skip the hard thinking
+
+She's not here to make pretty pictures. She's here to make **decisions visible**.
+
+---
+
+## Multiple Entry Points
+
+Every step offers choices:
+
+| Entry Point | How It Works |
+|-------------|--------------|
+| **I have a sketch** | You provide, AI refines |
+| **I have inspiration** | You share, AI extracts patterns |
+| **Dream it up** | AI creates options, you pick |
+| **Let's discuss** | Conversation shapes the concept |
+
+**Same step. Same output. Different starting points.**
+
+---
+
+## Creative Discipline in Action
+
+> "Creative discipline enables creativity, not constrains it."
+
+Each module is a discrete step with:
+- Clear input (what you need to start)
+- Clear output (what you'll produce)
+- Clear purpose (why it matters)
+
+This structure doesn't limit you. It focuses you.
+
+---
+
+## What You'll Create
+
+By the end of this phase:
+
+- **Scenario outlines** — The journeys you're designing
+- **Conceptual sketches** — Visual explorations
+- **Storyboards** — Sequenced flows
+- **Detailed specifications** — Every decision documented
+- **Component definitions** — Reusable patterns
+- **Visual designs** — How it actually looks
+- **Design system** — Your component library (if enabled)
+- **Delivery package** — Ready for implementation
+
+---
+
+## Design System
+
+Remember from setup:
+
+| Mode | What Happens |
+|------|--------------|
+| **1. None** | Ad-hoc styling, no extraction |
+| **2. Building** | System grows from your work |
+| **3. Library** | Use external + your branding |
+| **4. Existing** | Import from previous projects |
+
+This affects how Freya works with you throughout the phase.
+
+---
+
+## The Principle
+
+Every pixel has a reason.
+Every interaction traces back to user psychology.
+Every component connects to a business goal.
+
+**Nothing is decoration. Everything is decision.**
+
+---
+
+## Lessons
+
+### [Lesson 1: Entering Design Mode](lesson-01-entering-design.md)
+The transition from strategy to creation
+
+### [Lesson 2: Why Specifications Matter](lesson-02-why-specifications-matter.md)
+The New Code: Specifications as the Foundation of Professional AI-Assisted Development
+
+### [Lesson 3: Meet Freya](lesson-03-meet-freya.md)
+Your UX design partner
+
+---
+
+## Ready?
+
+**[Module 08: Outline Scenarios →](../module-08-outline-scenarios/module-08-outline-scenarios-overview.md)**
+
+Let's start designing.
+
+---
+
+*Part of the WDS Course: From Designer to Linchpin*