3.5 KiB
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
The transition from strategy to creation
Lesson 2: Why Specifications Matter
The New Code: Specifications as the Foundation of Professional AI-Assisted Development
Lesson 3: Meet Freya
Your UX design partner
Ready?
Module 08: Outline Scenarios →
Let's start designing.
Part of the WDS Course: From Designer to Linchpin