8.3 KiB

Raw Blame History

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:

WHY does this need to exist? (Which business goal does it serve?)
WHO is this for? (Which target group, at what awareness stage?)
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:

You share context — "Here's my Trigger Map and the scenario I want to design"
Freya loads strategy — She reads your Product Brief, Trigger Map, and any existing specs
You explore together — She asks questions, you make decisions, she structures them
She produces specifications — Detailed, buildable documents that capture your design decisions
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:

Open Figma
Start placing rectangles
Hope it works
Redo when developers have questions

WDS approach with Freya:

Load strategic context
Define the scenario and key transformations
Sketch and storyboard the journey
Write specifications that answer every question
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 | Module Overview | Next: Module 08 →

Part of Module 07: Design Phase

8.3 KiB Raw Blame History