Rename learn-wds to learn, update for workshop refactor
- Rename docs/learn-wds/ to docs/learn/ and update all 17 references - Module 02: Replace manual clone/mkdir/Mimir with npx installer + direct agent activation (Saga, Freya, Idunn — no Mimir) - Module 08: Replace 9-section scenario template with Q1-Q8 dialog format matching the actual workflow (step-05-outline-scenario.md) - Update scenario naming convention to persona-based (01-name-purpose) - Update folder structure to NN.step-page-slug format Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
03f890f98a
commit
9a093356c6
|
|
@ -1,3 +1,3 @@
|
||||||
# Exclude internal material from npm package
|
# Exclude internal material from npm package
|
||||||
docs/learn-wds/course-explainers/
|
docs/learn/course-explainers/
|
||||||
docs/learn-wds/Webinars/
|
docs/learn/Webinars/
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ your-project/
|
||||||
│ └── module.yaml # Module definition
|
│ └── module.yaml # Module definition
|
||||||
├── _wds-learn/ # Learning material (optional, safe to delete)
|
├── _wds-learn/ # Learning material (optional, safe to delete)
|
||||||
│ ├── getting-started/
|
│ ├── getting-started/
|
||||||
│ ├── learn-wds/
|
│ ├── learn/
|
||||||
│ ├── method/
|
│ ├── method/
|
||||||
│ ├── models/
|
│ ├── models/
|
||||||
│ └── tools/
|
│ └── tools/
|
||||||
|
|
|
||||||
|
|
@ -50,14 +50,14 @@ Complete documentation for Whiteport Design Studio - a design-first methodology
|
||||||
|
|
||||||
**How to use WDS with AI agents:** Step-by-step course using WDS agents + Cursor/Windsurf.
|
**How to use WDS with AI agents:** Step-by-step course using WDS agents + Cursor/Windsurf.
|
||||||
|
|
||||||
- **[Complete WDS Course](learn-wds/)** - Sequential learning path
|
- **[Complete WDS Course](learn/)** - Sequential learning path
|
||||||
- **[Course Overview](learn-wds/00-course-overview.md)** - What you'll learn
|
- **[Course Overview](learn/00-course-overview.md)** - What you'll learn
|
||||||
- **[Module 01: Why WDS Matters](learn-wds/module-01-why-wds-matters/)** - The problem & solution
|
- **[Module 01: Why WDS Matters](learn/module-01-why-wds-matters/)** - The problem & solution
|
||||||
- **[Module 02: Installation & Setup](learn-wds/module-02-installation-setup/)** - Get WDS running
|
- **[Module 02: Installation & Setup](learn/module-02-installation-setup/)** - Get WDS running
|
||||||
- **[Module 03: Alignment & Signoff](learn-wds/module-03-alignment-signoff/)** - Stakeholder alignment
|
- **[Module 03: Alignment & Signoff](learn/module-03-alignment-signoff/)** - Stakeholder alignment
|
||||||
- **[Module 04: Product Brief](learn-wds/module-04-product-brief/)** - Create strategic foundation
|
- **[Module 04: Product Brief](learn/module-04-product-brief/)** - Create strategic foundation
|
||||||
- **[Module 05: Trigger Mapping](learn-wds/module-05-map-triggers-outcomes/)** - Map user psychology
|
- **[Module 05: Trigger Mapping](learn/module-05-map-triggers-outcomes/)** - Map user psychology
|
||||||
- **[Module 06+](learn-wds/)** - Continue through all phases
|
- **[Module 06+](learn/)** - Continue through all phases
|
||||||
|
|
||||||
**This course is WDS-specific** - teaching you to use Saga, Freya, and Idunn agents.
|
**This course is WDS-specific** - teaching you to use Saga, Freya, and Idunn agents.
|
||||||
|
|
||||||
|
|
@ -129,7 +129,7 @@ Complete documentation for Whiteport Design Studio - a design-first methodology
|
||||||
→ Read phase guides as needed
|
→ Read phase guides as needed
|
||||||
|
|
||||||
**Learn to use WDS with AI agents**
|
**Learn to use WDS with AI agents**
|
||||||
→ Take the [Complete WDS Course](learn-wds/)
|
→ Take the [Complete WDS Course](learn/)
|
||||||
→ Follow sequential modules
|
→ Follow sequential modules
|
||||||
|
|
||||||
**See what WDS creates**
|
**See what WDS creates**
|
||||||
|
|
@ -153,7 +153,7 @@ docs/
|
||||||
├── getting-started/ # Quick start guides (15 min total)
|
├── getting-started/ # Quick start guides (15 min total)
|
||||||
├── models/ # External strategic frameworks
|
├── models/ # External strategic frameworks
|
||||||
├── method/ # Whiteport's methodology guides
|
├── method/ # Whiteport's methodology guides
|
||||||
├── learn-wds/ # WDS-specific course (agent-driven)
|
├── learn/ # WDS-specific course (agent-driven)
|
||||||
├── deliverables/ # Specifications for what you create
|
├── deliverables/ # Specifications for what you create
|
||||||
├── examples/ # Real project examples
|
├── examples/ # Real project examples
|
||||||
└── README.md # This navigation hub
|
└── README.md # This navigation hub
|
||||||
|
|
@ -163,7 +163,7 @@ docs/
|
||||||
|
|
||||||
1. **models/** → "What are the foundational frameworks?" (external, attributed)
|
1. **models/** → "What are the foundational frameworks?" (external, attributed)
|
||||||
2. **method/** → "How does WDS methodology work?" (Whiteport instruments)
|
2. **method/** → "How does WDS methodology work?" (Whiteport instruments)
|
||||||
3. **learn-wds/** → "How do I use WDS agents?" (WDS-specific)
|
3. **learn/** → "How do I use WDS agents?" (WDS-specific)
|
||||||
4. **examples/** → "Show me a real project" (reference implementation)
|
4. **examples/** → "Show me a real project" (reference implementation)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -194,7 +194,7 @@ https://www.youtube.com/watch?v=TdujvNYI-3g&list=PL094dWo_kC3t1Z0fs85P99ZK5T3tPv
|
||||||
There's a course overview that walks through the WDS approach step by step. It covers working in the IDE, creating foundations, design systems, and collaborating with developers.
|
There's a course overview that walks through the WDS approach step by step. It covers working in the IDE, creating foundations, design systems, and collaborating with developers.
|
||||||
|
|
||||||
No pressure, but here it is if you want to explore:
|
No pressure, but here it is if you want to explore:
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md
|
||||||
```
|
```
|
||||||
|
|
||||||
### Swedish
|
### Swedish
|
||||||
|
|
@ -202,7 +202,7 @@ https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/mo
|
||||||
Det finns en kursöversikt som går igenom WDS-tillvägagångssättet steg för steg. Den täcker att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare.
|
Det finns en kursöversikt som går igenom WDS-tillvägagångssättet steg för steg. Den täcker att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare.
|
||||||
|
|
||||||
Ingen press, men här är den om du vill utforska:
|
Ingen press, men här är den om du vill utforska:
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
@ -320,7 +320,7 @@ https://github.com/whiteport-collective/whiteport-design-studio
|
||||||
Found this course about WDS that walks through working in the IDE, creating foundations, design systems, and collaborating with developers using AI agents.
|
Found this course about WDS that walks through working in the IDE, creating foundations, design systems, and collaborating with developers using AI agents.
|
||||||
|
|
||||||
It's free and might be helpful if you're interested in this kind of thing:
|
It's free and might be helpful if you're interested in this kind of thing:
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md
|
||||||
```
|
```
|
||||||
|
|
||||||
### Swedish
|
### Swedish
|
||||||
|
|
@ -328,7 +328,7 @@ https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/mo
|
||||||
Hittade den här kursen om WDS som går igenom att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare med hjälp av AI-agenter.
|
Hittade den här kursen om WDS som går igenom att jobba i IDE:n, skapa grunder, designsystem och samarbeta med utvecklare med hjälp av AI-agenter.
|
||||||
|
|
||||||
Den är gratis och kan vara till hjälp om du är intresserad av den här typen av saker:
|
Den är gratis och kan vara till hjälp om du är intresserad av den här typen av saker:
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview.md
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -317,10 +317,10 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 00: Getting Started with WDS</h3>
|
<h3 style="margin-top: 0;">Module 00: Getting Started with WDS</h3>
|
||||||
<p>Learn the fundamentals of WDS and get your environment set up. This module covers everything you need to know to start your journey with Whiteport Design Studio - from understanding the core concepts to installing the framework and activating your first AI agent.</p>
|
<p>Learn the fundamentals of WDS and get your environment set up. This module covers everything you need to know to start your journey with Whiteport Design Studio - from understanding the core concepts to installing the framework and activating your first AI agent.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview/00-getting-started-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/01-prerequisites.md">Lesson 01: Prerequisites & Setup Requirements</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview/01-prerequisites.md">Lesson 01: Prerequisites & Setup Requirements</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/02-learning-paths.md">Lesson 02: Choose Your Learning Path</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview/02-learning-paths.md">Lesson 02: Choose Your Learning Path</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/03-support.md">Lesson 03: Getting Support & Community</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/00-course-overview/03-support.md">Lesson 03: Getting Support & Community</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -339,10 +339,10 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 01: Why WDS Matters</h3>
|
<h3 style="margin-top: 0;">Module 01: Why WDS Matters</h3>
|
||||||
<p>Discover why traditional design-to-development handoffs fail and how WDS transforms the designer's role from task-doer to strategic leader. Learn about the AI revolution in product development and why conceptual specifications are the key to staying relevant.</p>
|
<p>Discover why traditional design-to-development handoffs fail and how WDS transforms the designer's role from task-doer to strategic leader. Learn about the AI revolution in product development and why conceptual specifications are the key to staying relevant.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-01-why-wds-matters/module-01-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/lesson-01-the-problem.md">Lesson 01: The Problem - Lost Design Intent</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-01-why-wds-matters/lesson-01-the-problem.md">Lesson 01: The Problem - Lost Design Intent</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/lesson-02-the-solution.md">Lesson 02: The Solution - Conceptual Specifications</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-01-why-wds-matters/lesson-02-the-solution.md">Lesson 02: The Solution - Conceptual Specifications</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/lesson-03-the-path-forward.md">Lesson 03: The Path Forward - Your Role in the AI Era</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-01-why-wds-matters/lesson-03-the-path-forward.md">Lesson 03: The Path Forward - Your Role in the AI Era</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -361,7 +361,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 02: Installation & Setup</h3>
|
<h3 style="margin-top: 0;">Module 02: Installation & Setup</h3>
|
||||||
<p>Get WDS installed and running on your machine. This hands-on module walks you through GitHub setup, IDE configuration, cloning the repository, and activating your first AI agent. By the end, you'll have a fully functional WDS environment ready for your first project.</p>
|
<p>Get WDS installed and running on your machine. This hands-on module walks you through GitHub setup, IDE configuration, cloning the repository, and activating your first AI agent. By the end, you'll have a fully functional WDS environment ready for your first project.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-02-installation-setup/module-02-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md">Lesson 01: GitHub & IDE Setup</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md">Lesson 01: GitHub & IDE Setup</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md">Lesson 02: Quick Start Guide</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md">Lesson 02: Quick Start Guide</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -382,10 +382,10 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 03: Alignment & Signoff</h3>
|
<h3 style="margin-top: 0;">Module 03: Alignment & Signoff</h3>
|
||||||
<p>Get stakeholders aligned and secure commitment before starting the project. Learn the discovery discipline, create compelling alignment documents, and generate appropriate signoff documents (external contracts or internal signoff). Master the art of understanding before solving.</p>
|
<p>Get stakeholders aligned and secure commitment before starting the project. Learn the discovery discipline, create compelling alignment documents, and generate appropriate signoff documents (external contracts or internal signoff). Master the art of understanding before solving.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-03-alignment-signoff/module-03-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/lesson-01-understanding-alignment.md">Lesson 01: Understanding Alignment</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-03-alignment-signoff/lesson-01-understanding-alignment.md">Lesson 01: Understanding Alignment</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/lesson-02-creating-alignment-document.md">Lesson 02: Creating Your Alignment Document</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-03-alignment-signoff/lesson-02-creating-alignment-document.md">Lesson 02: Creating Your Alignment Document</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/lesson-03-negotiation-acceptance.md">Lesson 03: Negotiation & Acceptance</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-03-alignment-signoff/lesson-03-negotiation-acceptance.md">Lesson 03: Negotiation & Acceptance</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -404,8 +404,8 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 04: Product Brief</h3>
|
<h3 style="margin-top: 0;">Module 04: Product Brief</h3>
|
||||||
<p>Create your strategic foundation through AI-guided conversation. Learn how the Product Brief becomes the most powerful prompt you'll ever create - stopping AI hallucinations before they start and making your idea better through 30 structured questions. Everything happens in one environment with zero copy-paste chaos.</p>
|
<p>Create your strategic foundation through AI-guided conversation. Learn how the Product Brief becomes the most powerful prompt you'll ever create - stopping AI hallucinations before they start and making your idea better through 30 structured questions. Everything happens in one environment with zero copy-paste chaos.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-04-product-brief/module-04-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-04-product-brief/module-04-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-04-product-brief/tutorial-04.md">Tutorial 04: Creating Your Product Brief with Saga</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-04-product-brief/tutorial-04.md">Tutorial 04: Creating Your Product Brief with Saga</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -424,19 +424,19 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3 style="margin-top: 0;">Module 05: Trigger Mapping</h3>
|
<h3 style="margin-top: 0;">Module 05: Trigger Mapping</h3>
|
||||||
<p>Connect business goals to user psychology through 5 structured workshops. Learn the proven Effect Management methodology (20+ years heritage), map both positive and negative psychological drivers, and create a visual one-page strategy map. Includes systematic feature scoring for data-driven prioritization.</p>
|
<p>Connect business goals to user psychology through 5 structured workshops. Learn the proven Effect Management methodology (20+ years heritage), map both positive and negative psychological drivers, and create a visual one-page strategy map. Includes systematic feature scoring for data-driven prioritization.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/module-05-overview.md">Module Introduction</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/module-05-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-01-missing-link.md">Lesson 01: The Missing Link</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-01-missing-link.md">Lesson 01: The Missing Link</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-02-heritage-evolution.md">Lesson 02: The Heritage & Evolution</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-02-heritage-evolution.md">Lesson 02: The Heritage & Evolution</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-03-five-workshops-overview.md">Lesson 03: The Five Workshops Overview</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-03-five-workshops-overview.md">Lesson 03: The Five Workshops Overview</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-04-workshop-1-business-goals.md">Lesson 04: Workshop 1 - Business Goals</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-04-workshop-1-business-goals.md">Lesson 04: Workshop 1 - Business Goals</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-05-workshop-2-target-groups.md">Lesson 05: Workshop 2 - Target Groups</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-05-workshop-2-target-groups.md">Lesson 05: Workshop 2 - Target Groups</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-06-workshop-3-driving-forces.md">Lesson 06: Workshop 3 - Driving Forces</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-06-workshop-3-driving-forces.md">Lesson 06: Workshop 3 - Driving Forces</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-07-workshop-4-prioritization.md">Lesson 07: Workshop 4 - Prioritization</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-07-workshop-4-prioritization.md">Lesson 07: Workshop 4 - Prioritization</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-08-workshop-5-feature-impact.md">Lesson 08: Workshop 5 - Feature Impact</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-08-workshop-5-feature-impact.md">Lesson 08: Workshop 5 - Feature Impact</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-09-positive-negative-drivers.md">Lesson 09: Positive & Negative Drivers</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-09-positive-negative-drivers.md">Lesson 09: Positive & Negative Drivers</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-10-visual-trigger-map.md">Lesson 10: The Visual Trigger Map</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-10-visual-trigger-map.md">Lesson 10: The Visual Trigger Map</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/lesson-11-feature-impact-scoring.md">Lesson 11: Feature Impact Scoring</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/lesson-11-feature-impact-scoring.md">Lesson 11: Feature Impact Scoring</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-05-trigger-mapping/tutorial-05.md">Tutorial 05: Creating Your Trigger Map with Saga</a></li>
|
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn/module-05-trigger-mapping/tutorial-05.md">Tutorial 05: Creating Your Trigger Map with Saga</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -83,7 +83,7 @@ While these are real projects (not sanitized templates), you can:
|
||||||
|
|
||||||
- **[Getting Started](../getting-started/)** - Installation and quick start
|
- **[Getting Started](../getting-started/)** - Installation and quick start
|
||||||
- **[Method Guides](../method/)** - Tool-agnostic methodology references
|
- **[Method Guides](../method/)** - Tool-agnostic methodology references
|
||||||
- **[Learn WDS Course](../learn-wds/)** - Step-by-step learning path
|
- **[Learn WDS Course](../learn/)** - Step-by-step learning path
|
||||||
- **[Workflows](../src/workflows/)** - Detailed workflow instructions
|
- **[Workflows](../src/workflows/)** - Detailed workflow instructions
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@ Integrate recently added WDS features into the course materials:
|
||||||
|
|
||||||
### Rough Approach
|
### Rough Approach
|
||||||
|
|
||||||
1. Create new learn-wds module: "Working with Agent Dialogs"
|
1. Create new learn module: "Working with Agent Dialogs"
|
||||||
2. Update page specification lessons to include Open Questions
|
2. Update page specification lessons to include Open Questions
|
||||||
3. Add Eira to agent personas documentation
|
3. Add Eira to agent personas documentation
|
||||||
4. Create hands-on exercises for each feature
|
4. Create hands-on exercises for each feature
|
||||||
|
|
@ -111,7 +111,7 @@ These three features represent significant additions to the WDS methodology:
|
||||||
|
|
||||||
### Open Questions
|
### Open Questions
|
||||||
|
|
||||||
- Which learn-wds module should Agent Dialogs go in? (New module or extend existing?)
|
- Which learn module should Agent Dialogs go in? (New module or extend existing?)
|
||||||
- Should Open Questions be part of the page specification lesson or standalone?
|
- Should Open Questions be part of the page specification lesson or standalone?
|
||||||
- Is Eira documented enough to add to the course, or needs more definition first?
|
- Is Eira documented enough to add to the course, or needs more definition first?
|
||||||
- Should we create a dedicated example project showcasing all three features?
|
- Should we create a dedicated example project showcasing all three features?
|
||||||
|
|
@ -134,7 +134,7 @@ These three features represent significant additions to the WDS methodology:
|
||||||
## When I Return
|
## When I Return
|
||||||
|
|
||||||
1. Review all three feature locations and documentation
|
1. Review all three feature locations and documentation
|
||||||
2. Check existing learn-wds modules for best placement
|
2. Check existing learn modules for best placement
|
||||||
3. Draft course content outline for each feature
|
3. Draft course content outline for each feature
|
||||||
4. Create hands-on exercises
|
4. Create hands-on exercises
|
||||||
5. Identify any gaps in feature documentation that need filling first
|
5. Identify any gaps in feature documentation that need filling first
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ src/modules/wds/
|
||||||
│ ├── getting-started/ ✅ Installation, quick start, activation
|
│ ├── getting-started/ ✅ Installation, quick start, activation
|
||||||
│ ├── method/ ✅ 11 methodology guides (tool-agnostic)
|
│ ├── method/ ✅ 11 methodology guides (tool-agnostic)
|
||||||
│ ├── models/ ✅ 6 strategic models (external frameworks)
|
│ ├── models/ ✅ 6 strategic models (external frameworks)
|
||||||
│ ├── learn-wds/ ✅ 12 modules (agent-driven course)
|
│ ├── learn/ ✅ 12 modules (agent-driven course)
|
||||||
│ ├── deliverables/ ✅ 8 artifact specifications
|
│ ├── deliverables/ ✅ 8 artifact specifications
|
||||||
│ └── examples/ ✅ 2 real projects (WDS-Presentation, v6-conversion)
|
│ └── examples/ ✅ 2 real projects (WDS-Presentation, v6-conversion)
|
||||||
├── templates/ ✅ 3 YAML templates
|
├── templates/ ✅ 3 YAML templates
|
||||||
|
|
@ -292,7 +292,7 @@ src/modules/wds/
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### 4. Learn WDS Course (`docs/learn-wds/`)
|
#### 4. Learn WDS Course (`docs/learn/`)
|
||||||
|
|
||||||
**12 Sequential Modules:**
|
**12 Sequential Modules:**
|
||||||
- Module 00: Course Overview
|
- Module 00: Course Overview
|
||||||
|
|
@ -561,7 +561,7 @@ src/modules/wds/
|
||||||
**Issue:** Module numbering inconsistent (skips 7, 11, 13+)
|
**Issue:** Module numbering inconsistent (skips 7, 11, 13+)
|
||||||
**Impact:** Low - course still functional
|
**Impact:** Low - course still functional
|
||||||
**Recommendation:** Audit and renumber in future release
|
**Recommendation:** Audit and renumber in future release
|
||||||
**File:** `learn-wds-audit.md` (created during analysis)
|
**File:** `learn-audit.md` (created during analysis)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -190,7 +190,7 @@ Integration Readiness: ✅ 95% (testing in BMad needed)
|
||||||
### For WDS Team
|
### For WDS Team
|
||||||
|
|
||||||
1. **Monitor Alpha Feedback** - VTC Workshop validation
|
1. **Monitor Alpha Feedback** - VTC Workshop validation
|
||||||
2. **Course Audit** - Fix learn-wds module numbering (future release)
|
2. **Course Audit** - Fix learn module numbering (future release)
|
||||||
3. **README Cleanup** - Consider renaming workflow README.md files (future release)
|
3. **README Cleanup** - Consider renaming workflow README.md files (future release)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -257,7 +257,7 @@ DD-XXX for everything (instead of DD-XXX + SU-XXX) reduced complexity while main
|
||||||
- **WDS Method Guides:** `../../method/`
|
- **WDS Method Guides:** `../../method/`
|
||||||
- **WDS Workflows:** `../../src/workflows/`
|
- **WDS Workflows:** `../../src/workflows/`
|
||||||
- **Other Examples:** `../` (WDS Presentation, etc.)
|
- **Other Examples:** `../` (WDS Presentation, etc.)
|
||||||
- **Course Materials:** `../../learn-wds/`
|
- **Course Materials:** `../../learn/`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ You should see:
|
||||||
|
|
||||||
- [About WDS](about-wds.md) - Understand what WDS is and why it exists
|
- [About WDS](about-wds.md) - Understand what WDS is and why it exists
|
||||||
- [Quick Start Guide](quick-start.md) - Your first 5 minutes
|
- [Quick Start Guide](quick-start.md) - Your first 5 minutes
|
||||||
- [Learn WDS Course](../learn-wds/00-course-overview.md) - Learn the concepts deeply
|
- [Learn WDS Course](../learn/00-course-overview.md) - Learn the concepts deeply
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,7 @@ You created **conceptual specifications** in 5 minutes:
|
||||||
|
|
||||||
### Learn the Concepts
|
### Learn the Concepts
|
||||||
|
|
||||||
[Learn WDS Course](../learn-wds/00-course-overview.md) - Deep dive into WDS methodology
|
[Learn WDS Course](../learn/00-course-overview.md) - Deep dive into WDS methodology
|
||||||
|
|
||||||
### Start Your Project
|
### Start Your Project
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
|
|
||||||
### 🎓 Take the Course
|
### 🎓 Take the Course
|
||||||
|
|
||||||
**[WDS Course: From Designer to Linchpin](../learn-wds/00-course-overview.md)**
|
**[WDS Course: From Designer to Linchpin](../learn/00-course-overview.md)**
|
||||||
|
|
||||||
Complete training from project brief to AI-ready specifications:
|
Complete training from project brief to AI-ready specifications:
|
||||||
|
|
||||||
**Module 01: Why WDS Matters**
|
**Module 01: Why WDS Matters**
|
||||||
Learn how to be indispensable in the AI era. Understand the paradigm shift where design becomes specification.
|
Learn how to be indispensable in the AI era. Understand the paradigm shift where design becomes specification.
|
||||||
→ [Start Module 01](../learn-wds/module-01-why-wds-matters/module-01-overview.md)
|
→ [Start Module 01](../learn/module-01-why-wds-matters/module-01-overview.md)
|
||||||
|
|
||||||
**Modules 02-16: Complete WDS Workflow**
|
**Modules 02-16: Complete WDS Workflow**
|
||||||
Master every phase from trigger mapping through design system to development handoff. Each module includes:
|
Master every phase from trigger mapping through design system to development handoff. Each module includes:
|
||||||
|
|
@ -23,7 +23,7 @@ Master every phase from trigger mapping through design system to development han
|
||||||
- **Tutorials** - Step-by-step hands-on guides
|
- **Tutorials** - Step-by-step hands-on guides
|
||||||
- **Practice** - Apply to your own project
|
- **Practice** - Apply to your own project
|
||||||
|
|
||||||
→ [View All Modules](../learn-wds/00-course-overview.md)
|
→ [View All Modules](../learn/00-course-overview.md)
|
||||||
|
|
||||||
**Best for:** Comprehensive learning with structured curriculum
|
**Best for:** Comprehensive learning with structured curriculum
|
||||||
|
|
||||||
|
|
@ -39,11 +39,11 @@ Step-by-step workflows for:
|
||||||
|
|
||||||
**Phase 1: Project Brief**
|
**Phase 1: Project Brief**
|
||||||
Define vision, goals, stakeholders, and constraints that guide all design decisions.
|
Define vision, goals, stakeholders, and constraints that guide all design decisions.
|
||||||
→ [Tutorial: Create Project Brief](../learn-wds/module-04-product-brief/tutorial-04.md)
|
→ [Tutorial: Create Project Brief](../learn/module-04-product-brief/tutorial-04.md)
|
||||||
|
|
||||||
**Phase 2: Trigger Mapping**
|
**Phase 2: Trigger Mapping**
|
||||||
Understand WHO your users are, WHAT triggers their needs, and WHY your business exists. Create a Trigger Map that connects user psychology to business value.
|
Understand WHO your users are, WHAT triggers their needs, and WHY your business exists. Create a Trigger Map that connects user psychology to business value.
|
||||||
→ [Tutorial: Map Triggers & Outcomes](../learn-wds/module-05-map-triggers-outcomes/tutorial-04.md)
|
→ [Tutorial: Map Triggers & Outcomes](../learn/module-05-map-triggers-outcomes/tutorial-04.md)
|
||||||
|
|
||||||
**Phase 3: Platform Requirements**
|
**Phase 3: Platform Requirements**
|
||||||
Document technical constraints, integrations, and infrastructure needs.
|
Document technical constraints, integrations, and infrastructure needs.
|
||||||
|
|
@ -51,7 +51,7 @@ Document technical constraints, integrations, and infrastructure needs.
|
||||||
|
|
||||||
**Phase 4: UX Design**
|
**Phase 4: UX Design**
|
||||||
Transform ideas into conceptual specifications that preserve your design intent. AI agents help you think through solutions, then capture your brilliance in specifications that give your designs eternal life.
|
Transform ideas into conceptual specifications that preserve your design intent. AI agents help you think through solutions, then capture your brilliance in specifications that give your designs eternal life.
|
||||||
→ [Tutorial: Initialize Scenario](../learn-wds/module-08-initialize-scenario/tutorial-08.md) | [Tutorial: Conceptual Specs](../learn-wds/module-12-conceptual-specs/tutorial-12.md)
|
→ [Tutorial: Initialize Scenario](../learn/module-08-initialize-scenario/tutorial-08.md) | [Tutorial: Conceptual Specs](../learn/module-12-conceptual-specs/tutorial-12.md)
|
||||||
|
|
||||||
**Phase 5: Design System**
|
**Phase 5: Design System**
|
||||||
Extract design tokens, create reusable components, and generate interactive HTML catalog.
|
Extract design tokens, create reusable components, and generate interactive HTML catalog.
|
||||||
|
|
@ -123,14 +123,14 @@ Join the WDS community for:
|
||||||
|
|
||||||
## Quick Links
|
## Quick Links
|
||||||
|
|
||||||
- [Course](../learn-wds/00-course-overview.md)
|
- [Course](../learn/00-course-overview.md)
|
||||||
- [Workflows](../wds-workflows-guide.md)
|
- [Workflows](../wds-workflows-guide.md)
|
||||||
- [Modular Architecture](../src/workflows/4-ux-design/modular-architecture/00-MODULAR-ARCHITECTURE-GUIDE.md)
|
- [Modular Architecture](../src/workflows/4-ux-design/modular-architecture/00-MODULAR-ARCHITECTURE-GUIDE.md)
|
||||||
- [Conceptual Specifications](../src/workflows/4-ux-design/CONCEPTUAL-SPECIFICATIONS.md)
|
- [Conceptual Specifications](../src/workflows/4-ux-design/CONCEPTUAL-SPECIFICATIONS.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Ready to dive deeper? Start with the [Course](../learn-wds/00-course-overview.md)!**
|
**Ready to dive deeper? Start with the [Course](../learn/00-course-overview.md)!**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,211 +0,0 @@
|
||||||
# WDS Course: From Designer to Linchpin
|
|
||||||
|
|
||||||
**Master the complete WDS methodology and become indispensable as a designer in the AI era**
|
|
||||||
|
|
||||||
[Watch the Course Introduction Video](https://www.youtube.com/watch?v=CQ5Aai_r-uo)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Welcome to the WDS Course
|
|
||||||
|
|
||||||
This comprehensive course teaches you the complete WDS workflow through **practical modules** that transform how you design products.
|
|
||||||
|
|
||||||
**The paradigm shift:**
|
|
||||||
|
|
||||||
- The design becomes the specification
|
|
||||||
- The specification becomes the product
|
|
||||||
- The code is just the printout
|
|
||||||
|
|
||||||
**What you'll become:**
|
|
||||||
|
|
||||||
- The linchpin designer who makes things happen
|
|
||||||
- The gatekeeper between business goals and user needs
|
|
||||||
- The irreplaceable designer in the AI era
|
|
||||||
|
|
||||||
**Time investment:** ~10 hours total
|
|
||||||
**Result:** Complete mastery of WDS methodology from project brief to AI-ready specifications
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Who Created WDS?
|
|
||||||
|
|
||||||
**Mårten Angner** is a UX designer and founder of Whiteport, a design and development agency based in Sweden. After years of working with AI tools, Mårten observed that traditional design handoffs were breaking down. Designers would create beautiful mockups, hand them off to developers, and watch their creative intent get lost in translation.
|
|
||||||
|
|
||||||
Mårten developed WDS to solve this problem - a methodology where design thinking is preserved and amplified through AI implementation, not diluted and lost.
|
|
||||||
|
|
||||||
**The Mission:** WDS is completely free and open-source. Mårten created it as a **plugin module for BMad Method** - an open-source AI-augmented development framework - to give designers everywhere the tools they need to thrive in the AI era.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Before You Start
|
|
||||||
|
|
||||||
**[→ Getting Started Guide](00-getting-started/overview.md)**
|
|
||||||
|
|
||||||
Review prerequisites, choose your learning path, and get support:
|
|
||||||
|
|
||||||
- **Prerequisites** - Skills, tools, time investment
|
|
||||||
- **Learning Paths** - Full immersion, quick start, or self-paced
|
|
||||||
- **Support** - Testimonials, FAQ, community
|
|
||||||
|
|
||||||
**Reading time:** ~15 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Course Structure
|
|
||||||
|
|
||||||
Each module contains:
|
|
||||||
|
|
||||||
- **Lessons** - Theory and concepts (with NotebookLM audio support)
|
|
||||||
- **Tutorial** - Step-by-step hands-on guide (for practical modules)
|
|
||||||
- **Practice** - Apply to your own project
|
|
||||||
|
|
||||||
**Learning format:**
|
|
||||||
|
|
||||||
- **Lessons** - Read as documentation or generate audio with NotebookLM
|
|
||||||
- **Tutorials** - Follow step-by-step guides with AI support
|
|
||||||
- **Practice** - Apply to real projects as you learn
|
|
||||||
- **Workshops** - Use for team training
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Course Modules
|
|
||||||
|
|
||||||
### Foundation
|
|
||||||
|
|
||||||
- [Module 01: Why WDS Matters](module-01-why-wds-matters/module-01-overview.md)
|
|
||||||
- [Module 02: Installation & Setup](module-02-installation-setup/module-02-overview.md) • [Tutorial →](module-02-installation-setup/tutorial-02.md)
|
|
||||||
|
|
||||||
### Pre-Phase 1: Alignment & Signoff (Optional)
|
|
||||||
|
|
||||||
- [Module 03: Alignment & Signoff](module-03-alignment-signoff/module-03-overview.md) • [Tutorial →](module-03-alignment-signoff/tutorial-03.md)
|
|
||||||
*Skip if doing it yourself - go straight to Project Brief*
|
|
||||||
|
|
||||||
### Phase 1: Project Brief
|
|
||||||
|
|
||||||
- [Module 04: Create Project Brief](module-04-project-brief/) • [Tutorial →](module-04-project-brief/tutorial-04.md)
|
|
||||||
|
|
||||||
### Phase 2: Trigger Mapping
|
|
||||||
|
|
||||||
- [Module 04: Identify Target Groups](module-04-identify-target-groups/)
|
|
||||||
- [Module 05: Map Triggers & Outcomes](module-05-map-triggers-outcomes/) • [Tutorial →](module-05-map-triggers-outcomes/tutorial-05.md)
|
|
||||||
- [Module 06: Prioritize Features](module-06-prioritize-features/)
|
|
||||||
|
|
||||||
### Phase 3: Platform Requirements
|
|
||||||
|
|
||||||
- [Module 07: Platform Requirements](module-07-platform-requirements/)
|
|
||||||
- [Module 08: Functional Requirements](module-08-functional-requirements/)
|
|
||||||
|
|
||||||
### Phase 4: Conceptual Design (UX Design)
|
|
||||||
|
|
||||||
- [Module 09: Initialize Scenario](module-09-initialize-scenario/) • [Tutorial →](module-09-initialize-scenario/tutorial-09.md)
|
|
||||||
- [Module 10: Sketch Interfaces](module-10-sketch-interfaces/)
|
|
||||||
- [Module 11: Analyze with AI](module-11-analyze-with-ai/)
|
|
||||||
- [Module 12: Decompose Components](module-12-decompose-components/)
|
|
||||||
- [Module 13: Conceptual Specifications](module-13-conceptual-specs/) • [Tutorial →](module-13-conceptual-specs/tutorial-13.md)
|
|
||||||
- [Module 14: Validate Specifications](module-14-validate-specifications/)
|
|
||||||
|
|
||||||
### Phase 5: Design System
|
|
||||||
|
|
||||||
- [Module 15: Extract Design Tokens](module-15-extract-design-tokens/)
|
|
||||||
- [Module 16: Component Library](module-16-component-library/)
|
|
||||||
|
|
||||||
### Phase 6: Development Integration
|
|
||||||
|
|
||||||
- [Module 17: UI Roadmap](module-17-ui-roadmap/)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Learning Paths
|
|
||||||
|
|
||||||
**Complete Course:** All 17 modules (~12 hours)
|
|
||||||
|
|
||||||
**Quick Start:** Modules 1, 2, 5, 9, 13 (~4 hours)
|
|
||||||
|
|
||||||
**Phase-Specific:** Jump to any phase as needed
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## NotebookLM Integration
|
|
||||||
|
|
||||||
Each module has matching content for NotebookLM:
|
|
||||||
|
|
||||||
- Feed module lessons to NotebookLM
|
|
||||||
- Generate audio podcasts for learning on the go
|
|
||||||
- Generate video presentations for team training
|
|
||||||
- Create study guides and summaries
|
|
||||||
|
|
||||||
**All modules are optimized for AI-assisted learning.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Module Structure
|
|
||||||
|
|
||||||
Every module follows the same pattern:
|
|
||||||
|
|
||||||
**1. Inspiration (10 min)**
|
|
||||||
|
|
||||||
- Why this step matters
|
|
||||||
- The transformation you'll experience
|
|
||||||
- Real-world impact
|
|
||||||
|
|
||||||
**2. Teaching (20 min)**
|
|
||||||
|
|
||||||
- How to do it with confidence
|
|
||||||
- AI support at each step
|
|
||||||
- Dog Week example walkthrough
|
|
||||||
|
|
||||||
**3. Practice (10 min)**
|
|
||||||
|
|
||||||
- Apply to your own project
|
|
||||||
- Step-by-step instructions
|
|
||||||
- Success criteria
|
|
||||||
|
|
||||||
**4. Tutorial (optional)**
|
|
||||||
|
|
||||||
- Quick step-by-step guide
|
|
||||||
- "Just show me how to do it"
|
|
||||||
- For practical modules only
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## After the Course
|
|
||||||
|
|
||||||
Once you've completed the modules:
|
|
||||||
|
|
||||||
1. **[Workflows Guide](../workflows/WDS-WORKFLOWS-GUIDE.md)** - Reference documentation
|
|
||||||
2. **[Quick Start](../getting-started/quick-start.md)** - Try WDS with agent
|
|
||||||
3. **[Community](https://discord.gg/whiteport)** - Get help and share your work
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
**What you need:**
|
|
||||||
|
|
||||||
- Basic design thinking and UX principles
|
|
||||||
- Ability to sketch interfaces (hand-drawn or digital)
|
|
||||||
- Understanding of user needs and business goals
|
|
||||||
- Willingness to think deeply about WHY
|
|
||||||
|
|
||||||
**What you DON'T need:**
|
|
||||||
|
|
||||||
- ❌ Coding skills
|
|
||||||
- ❌ Advanced technical knowledge
|
|
||||||
- ❌ Experience with AI tools
|
|
||||||
- ❌ Formal design education
|
|
||||||
|
|
||||||
**If you can design interfaces and explain your thinking, you're ready to start.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Ready to Begin?
|
|
||||||
|
|
||||||
Ten hours of learning. A lifetime of being indispensable.
|
|
||||||
|
|
||||||
**[Start with Module 01: Why WDS Matters →](module-01-why-wds-matters/module-01-overview.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**This course is free and open-source**
|
|
||||||
**Created by Mårten Angner and the Whiteport team**
|
|
||||||
**Integrated with BMad Method for seamless design-to-development workflow**
|
|
||||||
|
|
@ -1,635 +0,0 @@
|
||||||
1
|
|
||||||
00:00:00,220 --> 00:00:02,723
|
|
||||||
All right, let's get right into it. We're
|
|
||||||
|
|
||||||
2
|
|
||||||
00:00:02,723 --> 00:00:04,600
|
|
||||||
talking about something that is sitting
|
|
||||||
|
|
||||||
3
|
|
||||||
00:00:04,600 --> 00:00:07,103
|
|
||||||
at the absolute heart of being a designer
|
|
||||||
|
|
||||||
4
|
|
||||||
00:00:07,103 --> 00:00:08,980
|
|
||||||
today. It's a choice, a really
|
|
||||||
|
|
||||||
5
|
|
||||||
00:00:08,980 --> 00:00:10,544
|
|
||||||
fundamental choice that frankly, every
|
|
||||||
|
|
||||||
6
|
|
||||||
00:00:10,544 --> 00:00:13,360
|
|
||||||
single one of us has to make now that
|
|
||||||
|
|
||||||
7
|
|
||||||
00:00:13,360 --> 00:00:16,176
|
|
||||||
AI is in the picture. And really, it all
|
|
||||||
|
|
||||||
8
|
|
||||||
00:00:16,176 --> 00:00:18,053
|
|
||||||
comes down to this one question.
|
|
||||||
|
|
||||||
9
|
|
||||||
00:00:18,053 --> 00:00:20,873
|
|
||||||
Seriously, in the age of AI. Are you
|
|
||||||
|
|
||||||
10
|
|
||||||
00:00:20,873 --> 00:00:23,407
|
|
||||||
going to be replaceable or are you going
|
|
||||||
|
|
||||||
11
|
|
||||||
00:00:23,407 --> 00:00:25,624
|
|
||||||
to be indispensable? This isn't about the
|
|
||||||
|
|
||||||
12
|
|
||||||
00:00:25,624 --> 00:00:28,158
|
|
||||||
software you use or how fast you can
|
|
||||||
|
|
||||||
13
|
|
||||||
00:00:28,158 --> 00:00:30,692
|
|
||||||
work, it's about who you decide to be.
|
|
||||||
|
|
||||||
14
|
|
||||||
00:00:30,692 --> 00:00:33,225
|
|
||||||
See, to really get this, you have to
|
|
||||||
|
|
||||||
15
|
|
||||||
00:00:33,225 --> 00:00:35,759
|
|
||||||
understand that we are at a major turning
|
|
||||||
|
|
||||||
16
|
|
||||||
00:00:35,759 --> 00:00:38,293
|
|
||||||
point. This isn't just some new trend or
|
|
||||||
|
|
||||||
17
|
|
||||||
00:00:38,293 --> 00:00:40,827
|
|
||||||
another tool to learn now. This is a
|
|
||||||
|
|
||||||
18
|
|
||||||
00:00:40,827 --> 00:00:43,254
|
|
||||||
genuine crossroads. And the path you take
|
|
||||||
|
|
||||||
19
|
|
||||||
00:00:43,254 --> 00:00:45,709
|
|
||||||
from here is going to define your entire
|
|
||||||
|
|
||||||
20
|
|
||||||
00:00:45,709 --> 00:00:48,164
|
|
||||||
career. OK, so look at these two paths.
|
|
||||||
|
|
||||||
21
|
|
||||||
00:00:48,164 --> 00:00:50,312
|
|
||||||
On one side, you've got the factory
|
|
||||||
|
|
||||||
22
|
|
||||||
00:00:50,312 --> 00:00:51,847
|
|
||||||
designer. This is probably pretty
|
|
||||||
|
|
||||||
23
|
|
||||||
00:00:51,847 --> 00:00:53,995
|
|
||||||
familiar, right? You get a ticket, you
|
|
||||||
|
|
||||||
24
|
|
||||||
00:00:53,995 --> 00:00:56,143
|
|
||||||
execute on it. You deliver some mockups.
|
|
||||||
|
|
||||||
25
|
|
||||||
00:00:56,143 --> 00:00:57,984
|
|
||||||
It's predictable work. But here's the
|
|
||||||
|
|
||||||
26
|
|
||||||
00:00:57,984 --> 00:00:59,826
|
|
||||||
catch. That's the work you're now
|
|
||||||
|
|
||||||
27
|
|
||||||
00:00:59,826 --> 00:01:02,557
|
|
||||||
competing with AI to do. But then
|
|
||||||
|
|
||||||
28
|
|
||||||
00:01:02,557 --> 00:01:04,709
|
|
||||||
there's the other path, the linchpin
|
|
||||||
|
|
||||||
29
|
|
||||||
00:01:04,709 --> 00:01:06,501
|
|
||||||
designer. This person doesn't just
|
|
||||||
|
|
||||||
30
|
|
||||||
00:01:06,501 --> 00:01:09,011
|
|
||||||
execute, they create order out of total
|
|
||||||
|
|
||||||
31
|
|
||||||
00:01:09,011 --> 00:01:11,880
|
|
||||||
chaos. They find the human truth in a
|
|
||||||
|
|
||||||
32
|
|
||||||
00:01:11,880 --> 00:01:14,031
|
|
||||||
project and deliver strategy. One is
|
|
||||||
|
|
||||||
33
|
|
||||||
00:01:14,031 --> 00:01:15,824
|
|
||||||
replaceable, the other is indispensable.
|
|
||||||
|
|
||||||
34
|
|
||||||
00:01:15,824 --> 00:01:18,693
|
|
||||||
So you might be asking, why is that
|
|
||||||
|
|
||||||
35
|
|
||||||
00:01:18,693 --> 00:01:21,203
|
|
||||||
factory designer path so dangerous all of
|
|
||||||
|
|
||||||
36
|
|
||||||
00:01:21,203 --> 00:01:24,065
|
|
||||||
a sudden?Well, it boils down to
|
|
||||||
|
|
||||||
37
|
|
||||||
00:01:24,065 --> 00:01:26,729
|
|
||||||
this new threat that is just taking over
|
|
||||||
|
|
||||||
38
|
|
||||||
00:01:26,729 --> 00:01:28,727
|
|
||||||
the Internet. And that threat is
|
|
||||||
|
|
||||||
39
|
|
||||||
00:01:28,727 --> 00:01:31,058
|
|
||||||
something called AI slop. We are all
|
|
||||||
|
|
||||||
40
|
|
||||||
00:01:31,058 --> 00:01:33,389
|
|
||||||
seeing it. The Internet is just getting
|
|
||||||
|
|
||||||
41
|
|
||||||
00:01:33,389 --> 00:01:35,054
|
|
||||||
flooded with these generic soulless
|
|
||||||
|
|
||||||
42
|
|
||||||
00:01:35,054 --> 00:01:37,718
|
|
||||||
interfaces. I mean, they look OK on the
|
|
||||||
|
|
||||||
43
|
|
||||||
00:01:37,718 --> 00:01:39,716
|
|
||||||
surface. They've got all the right
|
|
||||||
|
|
||||||
44
|
|
||||||
00:01:39,716 --> 00:01:42,047
|
|
||||||
buttons, but they feel empty. There's no
|
|
||||||
|
|
||||||
45
|
|
||||||
00:01:42,047 --> 00:01:43,890
|
|
||||||
spark. No soul, nothing that actually
|
|
||||||
|
|
||||||
46
|
|
||||||
00:01:43,890 --> 00:01:45,864
|
|
||||||
connects with a real human being. And
|
|
||||||
|
|
||||||
47
|
|
||||||
00:01:45,864 --> 00:01:48,119
|
|
||||||
here's the part that's kind of tough to
|
|
||||||
|
|
||||||
48
|
|
||||||
00:01:48,119 --> 00:01:50,657
|
|
||||||
hear, but we have to face it. AI is
|
|
||||||
|
|
||||||
49
|
|
||||||
00:01:50,657 --> 00:01:52,913
|
|
||||||
amazing at that factory work. If your job
|
|
||||||
|
|
||||||
50
|
|
||||||
00:01:52,913 --> 00:01:55,451
|
|
||||||
is just to churn out mockups and follow a
|
|
||||||
|
|
||||||
51
|
|
||||||
00:01:55,451 --> 00:01:56,861
|
|
||||||
system, well, you're competing against
|
|
||||||
|
|
||||||
52
|
|
||||||
00:01:56,861 --> 00:01:58,552
|
|
||||||
something that can do it instantly,
|
|
||||||
|
|
||||||
53
|
|
||||||
00:01:58,552 --> 00:02:00,244
|
|
||||||
perfectly, and can try 100 different
|
|
||||||
|
|
||||||
54
|
|
||||||
00:02:00,244 --> 00:02:02,500
|
|
||||||
versions in a minute. And you know what?
|
|
||||||
|
|
||||||
55
|
|
||||||
00:02:02,670 --> 00:02:05,477
|
|
||||||
It never gets tired and it never needs a
|
|
||||||
|
|
||||||
56
|
|
||||||
00:02:05,477 --> 00:02:07,348
|
|
||||||
coffee break. This creates a really
|
|
||||||
|
|
||||||
57
|
|
||||||
00:02:07,348 --> 00:02:09,842
|
|
||||||
brutal new reality in the market. It used
|
|
||||||
|
|
||||||
58
|
|
||||||
00:02:09,842 --> 00:02:12,025
|
|
||||||
to be that a mediocre, soulless product
|
|
||||||
|
|
||||||
59
|
|
||||||
00:02:12,025 --> 00:02:14,832
|
|
||||||
would at least gets a launch and then it
|
|
||||||
|
|
||||||
60
|
|
||||||
00:02:14,832 --> 00:02:17,015
|
|
||||||
would fail. But today, users can spot
|
|
||||||
|
|
||||||
61
|
|
||||||
00:02:17,015 --> 00:02:19,198
|
|
||||||
that generic nobody cared about this vibe
|
|
||||||
|
|
||||||
62
|
|
||||||
00:02:19,198 --> 00:02:21,381
|
|
||||||
a mile away. These products don't even
|
|
||||||
|
|
||||||
63
|
|
||||||
00:02:21,381 --> 00:02:23,642
|
|
||||||
get the chance to fail. Anymore, they're
|
|
||||||
|
|
||||||
64
|
|
||||||
00:02:23,642 --> 00:02:25,856
|
|
||||||
just ignored from the very beginning. OK,
|
|
||||||
|
|
||||||
65
|
|
||||||
00:02:25,856 --> 00:02:28,069
|
|
||||||
so if competing with AI on production
|
|
||||||
|
|
||||||
66
|
|
||||||
00:02:28,069 --> 00:02:30,915
|
|
||||||
work is a dead end, how in the world
|
|
||||||
|
|
||||||
67
|
|
||||||
00:02:30,915 --> 00:02:32,812
|
|
||||||
do you become that indispensable lynchpin
|
|
||||||
|
|
||||||
68
|
|
||||||
00:02:32,812 --> 00:02:34,709
|
|
||||||
designer? Well, it's not about working
|
|
||||||
|
|
||||||
69
|
|
||||||
00:02:34,709 --> 00:02:36,922
|
|
||||||
harder. It's about a complete shift in
|
|
||||||
|
|
||||||
70
|
|
||||||
00:02:36,922 --> 00:02:39,768
|
|
||||||
how you see your job. And that shift is
|
|
||||||
|
|
||||||
71
|
|
||||||
00:02:39,768 --> 00:02:41,665
|
|
||||||
really the core of this methodology
|
|
||||||
|
|
||||||
72
|
|
||||||
00:02:41,665 --> 00:02:44,071
|
|
||||||
called white port design. Audio, or WDS
|
|
||||||
|
|
||||||
73
|
|
||||||
00:02:44,071 --> 00:02:46,501
|
|
||||||
for short, and it totally reframes what
|
|
||||||
|
|
||||||
74
|
|
||||||
00:02:46,501 --> 00:02:49,278
|
|
||||||
you do with WTF. You're not just making
|
|
||||||
|
|
||||||
75
|
|
||||||
00:02:49,278 --> 00:02:51,708
|
|
||||||
pictures of a product, you are literally
|
|
||||||
|
|
||||||
76
|
|
||||||
00:02:51,708 --> 00:02:53,444
|
|
||||||
architecting the product itself. Think
|
|
||||||
|
|
||||||
77
|
|
||||||
00:02:53,444 --> 00:02:56,221
|
|
||||||
about it this way, Your design is the
|
|
||||||
|
|
||||||
78
|
|
||||||
00:02:56,221 --> 00:02:58,303
|
|
||||||
blueprint, it is the specification, the
|
|
||||||
|
|
||||||
79
|
|
||||||
00:02:58,303 --> 00:03:01,080
|
|
||||||
code at the very end. That's just the
|
|
||||||
|
|
||||||
80
|
|
||||||
00:03:01,080 --> 00:03:03,163
|
|
||||||
final print out of your brilliant
|
|
||||||
|
|
||||||
81
|
|
||||||
00:03:03,163 --> 00:03:05,762
|
|
||||||
thinking. Now, this is so important
|
|
||||||
|
|
||||||
82
|
|
||||||
00:03:05,762 --> 00:03:07,976
|
|
||||||
because a lot of people think that
|
|
||||||
|
|
||||||
83
|
|
||||||
00:03:07,976 --> 00:03:10,191
|
|
||||||
working with AI is all about getting
|
|
||||||
|
|
||||||
84
|
|
||||||
00:03:10,191 --> 00:03:12,089
|
|
||||||
better at writing prompts, right? Like
|
|
||||||
|
|
||||||
85
|
|
||||||
00:03:12,089 --> 00:03:14,304
|
|
||||||
you're just a factory worker telling the
|
|
||||||
|
|
||||||
86
|
|
||||||
00:03:14,304 --> 00:03:16,835
|
|
||||||
machine what to do. But with WDS, you
|
|
||||||
|
|
||||||
87
|
|
||||||
00:03:16,835 --> 00:03:18,416
|
|
||||||
flip that entirely. Your strategic
|
|
||||||
|
|
||||||
88
|
|
||||||
00:03:18,416 --> 00:03:19,998
|
|
||||||
thinking, your design decisions, that
|
|
||||||
|
|
||||||
89
|
|
||||||
00:03:19,998 --> 00:03:21,896
|
|
||||||
becomes the input. You're not prompting,
|
|
||||||
|
|
||||||
90
|
|
||||||
00:03:21,896 --> 00:03:24,111
|
|
||||||
you're leading. And this quote just nails
|
|
||||||
|
|
||||||
91
|
|
||||||
00:03:24,111 --> 00:03:26,551
|
|
||||||
the mindset shift. We all think of
|
|
||||||
|
|
||||||
92
|
|
||||||
00:03:26,551 --> 00:03:28,914
|
|
||||||
writing specs as the boring, tedious part
|
|
||||||
|
|
||||||
93
|
|
||||||
00:03:28,914 --> 00:03:31,616
|
|
||||||
of the job, don't we? But in this
|
|
||||||
|
|
||||||
94
|
|
||||||
00:03:31,616 --> 00:03:33,642
|
|
||||||
world, it's the exact opposite. Creating
|
|
||||||
|
|
||||||
95
|
|
||||||
00:03:33,642 --> 00:03:35,668
|
|
||||||
the specification is the most important
|
|
||||||
|
|
||||||
96
|
|
||||||
00:03:35,668 --> 00:03:38,369
|
|
||||||
thing you do. It's the moment you capture
|
|
||||||
|
|
||||||
97
|
|
||||||
00:03:38,369 --> 00:03:40,733
|
|
||||||
your unique creative genius and make it
|
|
||||||
|
|
||||||
98
|
|
||||||
00:03:40,733 --> 00:03:43,096
|
|
||||||
permanent. Make it immortal. So how does
|
|
||||||
|
|
||||||
99
|
|
||||||
00:03:43,096 --> 00:03:45,460
|
|
||||||
this big idea of immortal genius actually?
|
|
||||||
|
|
||||||
100
|
|
||||||
00:03:45,540 --> 00:03:48,078
|
|
||||||
Work in practice. This isn't just some
|
|
||||||
|
|
||||||
101
|
|
||||||
00:03:48,078 --> 00:03:50,253
|
|
||||||
vague philosophy, it's a really concrete
|
|
||||||
|
|
||||||
102
|
|
||||||
00:03:50,253 --> 00:03:52,428
|
|
||||||
process that's built around 4 specific
|
|
||||||
|
|
||||||
103
|
|
||||||
00:03:52,428 --> 00:03:54,604
|
|
||||||
deliverables. These are the things a
|
|
||||||
|
|
||||||
104
|
|
||||||
00:03:54,604 --> 00:03:56,416
|
|
||||||
linchpin designer actually produces. So
|
|
||||||
|
|
||||||
105
|
|
||||||
00:03:56,416 --> 00:03:59,317
|
|
||||||
here they are, the artifacts of a true
|
|
||||||
|
|
||||||
106
|
|
||||||
00:03:59,317 --> 00:04:01,492
|
|
||||||
linchpin. You start with the project
|
|
||||||
|
|
||||||
107
|
|
||||||
00:04:01,492 --> 00:04:04,030
|
|
||||||
brief, getting everyone on the same page
|
|
||||||
|
|
||||||
108
|
|
||||||
00:04:04,030 --> 00:04:06,546
|
|
||||||
about why we're even. Doing this, then
|
|
||||||
|
|
||||||
109
|
|
||||||
00:04:06,546 --> 00:04:09,201
|
|
||||||
you create a trigger map to make sure
|
|
||||||
|
|
||||||
110
|
|
||||||
00:04:09,201 --> 00:04:10,861
|
|
||||||
you're building things that users
|
|
||||||
|
|
||||||
111
|
|
||||||
00:04:10,861 --> 00:04:12,852
|
|
||||||
actually need. After that, your brilliant
|
|
||||||
|
|
||||||
112
|
|
||||||
00:04:12,852 --> 00:04:14,844
|
|
||||||
ideas get captured in crystal clear
|
|
||||||
|
|
||||||
113
|
|
||||||
00:04:14,844 --> 00:04:16,836
|
|
||||||
scenario specs. And finally, the design
|
|
||||||
|
|
||||||
114
|
|
||||||
00:04:16,836 --> 00:04:19,159
|
|
||||||
system makes sure that brilliance can be
|
|
||||||
|
|
||||||
115
|
|
||||||
00:04:19,159 --> 00:04:21,483
|
|
||||||
scaled and repeated. See how each step
|
|
||||||
|
|
||||||
116
|
|
||||||
00:04:21,483 --> 00:04:24,138
|
|
||||||
builds on the last. It's a system for
|
|
||||||
|
|
||||||
117
|
|
||||||
00:04:24,138 --> 00:04:26,926
|
|
||||||
impact. So where does AI fit
|
|
||||||
|
|
||||||
118
|
|
||||||
00:04:26,926 --> 00:04:29,591
|
|
||||||
in all of this? This is the beautiful
|
|
||||||
|
|
||||||
119
|
|
||||||
00:04:29,591 --> 00:04:32,256
|
|
||||||
part. In the WDS world, AI agents are
|
|
||||||
|
|
||||||
120
|
|
||||||
00:04:32,256 --> 00:04:34,255
|
|
||||||
your creative partners. They're like an
|
|
||||||
|
|
||||||
121
|
|
||||||
00:04:34,255 --> 00:04:35,921
|
|
||||||
assistant you can brainstorm with,
|
|
||||||
|
|
||||||
122
|
|
||||||
00:04:35,921 --> 00:04:37,587
|
|
||||||
explore different paths with debate
|
|
||||||
|
|
||||||
123
|
|
||||||
00:04:37,587 --> 00:04:39,919
|
|
||||||
tradeoffs. And then once you've made the
|
|
||||||
|
|
||||||
124
|
|
||||||
00:04:39,919 --> 00:04:41,918
|
|
||||||
smart decision, they become obsessed with
|
|
||||||
|
|
||||||
125
|
|
||||||
00:04:41,918 --> 00:04:43,251
|
|
||||||
perfectly documenting your brilliance,
|
|
||||||
|
|
||||||
126
|
|
||||||
00:04:43,251 --> 00:04:46,062
|
|
||||||
not trying to replace it. OK. O you're
|
|
||||||
|
|
||||||
127
|
|
||||||
00:04:46,062 --> 00:04:47,819
|
|
||||||
probably thinking, this all sounds
|
|
||||||
|
|
||||||
128
|
|
||||||
00:04:47,819 --> 00:04:49,926
|
|
||||||
amazing, but is it actually practical?
|
|
||||||
|
|
||||||
129
|
|
||||||
00:04:49,926 --> 00:04:52,736
|
|
||||||
Can I really do this? Well, let's look
|
|
||||||
|
|
||||||
130
|
|
||||||
00:04:52,736 --> 00:04:55,546
|
|
||||||
at how you can start making this change
|
|
||||||
|
|
||||||
131
|
|
||||||
00:04:55,546 --> 00:04:57,653
|
|
||||||
literally today. To learn this entire
|
|
||||||
|
|
||||||
132
|
|
||||||
00:04:57,653 --> 00:04:59,760
|
|
||||||
methodology from start to finish, it
|
|
||||||
|
|
||||||
133
|
|
||||||
00:04:59,760 --> 00:05:02,219
|
|
||||||
takes about 10 hours. That's it. We're
|
|
||||||
|
|
||||||
134
|
|
||||||
00:05:02,219 --> 00:05:04,678
|
|
||||||
talking about a 10 hour investment of
|
|
||||||
|
|
||||||
135
|
|
||||||
00:05:04,678 --> 00:05:06,683
|
|
||||||
your time. To completely change the
|
|
||||||
|
|
||||||
136
|
|
||||||
00:05:06,683 --> 00:05:08,457
|
|
||||||
direction of your career and getting
|
|
||||||
|
|
||||||
137
|
|
||||||
00:05:08,457 --> 00:05:10,230
|
|
||||||
started couldn't be easier. The entire
|
|
||||||
|
|
||||||
138
|
|
||||||
00:05:10,230 --> 00:05:12,300
|
|
||||||
course is free, it's open source, right
|
|
||||||
|
|
||||||
139
|
|
||||||
00:05:12,300 --> 00:05:14,370
|
|
||||||
on GitHub. There are no subscriptions, no
|
|
||||||
|
|
||||||
140
|
|
||||||
00:05:14,370 --> 00:05:16,439
|
|
||||||
secret fees. The only thing you'd ever
|
|
||||||
|
|
||||||
141
|
|
||||||
00:05:16,439 --> 00:05:18,804
|
|
||||||
pay for are the AI credits you actually
|
|
||||||
|
|
||||||
142
|
|
||||||
00:05:18,804 --> 00:05:21,465
|
|
||||||
use, which ends up being maybe 15 or 20
|
|
||||||
|
|
||||||
143
|
|
||||||
00:05:21,465 --> 00:05:23,535
|
|
||||||
bucks a month, and there's a whole
|
|
||||||
|
|
||||||
144
|
|
||||||
00:05:23,535 --> 00:05:25,604
|
|
||||||
community on Discord ready to help you
|
|
||||||
|
|
||||||
145
|
|
||||||
00:05:25,604 --> 00:05:28,115
|
|
||||||
out. So we're right back where we
|
|
||||||
|
|
||||||
146
|
|
||||||
00:05:28,115 --> 00:05:30,589
|
|
||||||
started. The choice is right in front of
|
|
||||||
|
|
||||||
147
|
|
||||||
00:05:30,589 --> 00:05:33,372
|
|
||||||
you. One path has you competing in a race
|
|
||||||
|
|
||||||
148
|
|
||||||
00:05:33,372 --> 00:05:35,846
|
|
||||||
against AI that you just can't win. The
|
|
||||||
|
|
||||||
149
|
|
||||||
00:05:35,846 --> 00:05:38,010
|
|
||||||
other path leads to you becoming that
|
|
||||||
|
|
||||||
150
|
|
||||||
00:05:38,010 --> 00:05:39,247
|
|
||||||
strategic, indispensable designer whose
|
|
||||||
|
|
||||||
151
|
|
||||||
00:05:39,247 --> 00:05:41,412
|
|
||||||
vision is so valuable it's treated like
|
|
||||||
|
|
||||||
152
|
|
||||||
00:05:41,412 --> 00:05:43,267
|
|
||||||
gold. Ultimately, the tools and the
|
|
||||||
|
|
||||||
153
|
|
||||||
00:05:43,267 --> 00:05:45,122
|
|
||||||
specific techniques don't matter as much
|
|
||||||
|
|
||||||
154
|
|
||||||
00:05:45,122 --> 00:05:47,329
|
|
||||||
as the mindset. The real change happens
|
|
||||||
|
|
||||||
155
|
|
||||||
00:05:47,329 --> 00:05:49,199
|
|
||||||
inside. It's about you deciding who you
|
|
||||||
|
|
||||||
156
|
|
||||||
00:05:49,199 --> 00:05:51,604
|
|
||||||
want to be in this new world of design.
|
|
||||||
|
|
||||||
157
|
|
||||||
00:05:51,604 --> 00:05:53,742
|
|
||||||
O, I'll leave you with that one last
|
|
||||||
|
|
||||||
158
|
|
||||||
00:05:53,742 --> 00:05:55,613
|
|
||||||
question. Which designer do you choose to
|
|
||||||
|
|
||||||
159
|
|
||||||
00:05:55,613 --> 00:05:55,880
|
|
||||||
become?
|
|
||||||
|
|
@ -1,807 +0,0 @@
|
||||||
1
|
|
||||||
00:00:00,080 --> 00:00:01,915
|
|
||||||
All right, let's dive into something
|
|
||||||
|
|
||||||
2
|
|
||||||
00:00:01,915 --> 00:00:04,363
|
|
||||||
that, let's be honest, can feel a little
|
|
||||||
|
|
||||||
3
|
|
||||||
00:00:04,363 --> 00:00:06,504
|
|
||||||
intimidating for a lot of designers. The
|
|
||||||
|
|
||||||
4
|
|
||||||
00:00:06,504 --> 00:00:08,340
|
|
||||||
whole technical setup for the Whiteboard
|
|
||||||
|
|
||||||
5
|
|
||||||
00:00:08,340 --> 00:00:10,481
|
|
||||||
Design Studio course, we're going to go
|
|
||||||
|
|
||||||
6
|
|
||||||
00:00:10,481 --> 00:00:13,234
|
|
||||||
on a little journey here and the goal is
|
|
||||||
|
|
||||||
7
|
|
||||||
00:00:13,234 --> 00:00:15,681
|
|
||||||
to take that feeling of, uh, this is
|
|
||||||
|
|
||||||
8
|
|
||||||
00:00:15,681 --> 00:00:18,129
|
|
||||||
complicated and turn it into, OK, I got
|
|
||||||
|
|
||||||
9
|
|
||||||
00:00:18,129 --> 00:00:20,647
|
|
||||||
this. Does this sound at all familiar?I
|
|
||||||
|
|
||||||
10
|
|
||||||
00:00:20,647 --> 00:00:22,861
|
|
||||||
bet it does. This is probably the number
|
|
||||||
|
|
||||||
11
|
|
||||||
00:00:22,861 --> 00:00:24,798
|
|
||||||
one thing we hear from amazing designers
|
|
||||||
|
|
||||||
12
|
|
||||||
00:00:24,798 --> 00:00:27,012
|
|
||||||
who are totally ready to grow, but they
|
|
||||||
|
|
||||||
13
|
|
||||||
00:00:27,012 --> 00:00:29,226
|
|
||||||
feel like the tools are this giant wall
|
|
||||||
|
|
||||||
14
|
|
||||||
00:00:29,226 --> 00:00:31,717
|
|
||||||
in front of them. If that's you, I just
|
|
||||||
|
|
||||||
15
|
|
||||||
00:00:31,717 --> 00:00:34,485
|
|
||||||
want you to know you are so not alone. In
|
|
||||||
|
|
||||||
16
|
|
||||||
00:00:34,485 --> 00:00:36,975
|
|
||||||
fact, this is the perfect place for us to
|
|
||||||
|
|
||||||
17
|
|
||||||
00:00:36,975 --> 00:00:38,913
|
|
||||||
start. And here's the absolute truth. The
|
|
||||||
|
|
||||||
18
|
|
||||||
00:00:38,913 --> 00:00:41,559
|
|
||||||
thing you have to keep in mind?Every
|
|
||||||
|
|
||||||
19
|
|
||||||
00:00:41,559 --> 00:00:43,656
|
|
||||||
single expert you admire, every designer
|
|
||||||
|
|
||||||
20
|
|
||||||
00:00:43,656 --> 00:00:46,452
|
|
||||||
who seems to have it all figured out.
|
|
||||||
|
|
||||||
21
|
|
||||||
00:00:46,452 --> 00:00:48,549
|
|
||||||
They all started right here, uncertain,
|
|
||||||
|
|
||||||
22
|
|
||||||
00:00:48,549 --> 00:00:50,995
|
|
||||||
maybe a little nervous, wondering if they
|
|
||||||
|
|
||||||
23
|
|
||||||
00:00:50,995 --> 00:00:53,791
|
|
||||||
could really get the hang of it. Well,
|
|
||||||
|
|
||||||
24
|
|
||||||
00:00:53,791 --> 00:00:56,587
|
|
||||||
they did, and you will too. So let's
|
|
||||||
|
|
||||||
25
|
|
||||||
00:00:56,587 --> 00:00:59,033
|
|
||||||
just face that technical hurdle head on.
|
|
||||||
|
|
||||||
26
|
|
||||||
00:00:59,033 --> 00:01:01,615
|
|
||||||
Our first mission is super simple. We're
|
|
||||||
|
|
||||||
27
|
|
||||||
00:01:01,615 --> 00:01:03,819
|
|
||||||
going to demystify all these tools. We're
|
|
||||||
|
|
||||||
28
|
|
||||||
00:01:03,819 --> 00:01:06,024
|
|
||||||
going to take that scary sounding jargon
|
|
||||||
|
|
||||||
29
|
|
||||||
00:01:06,024 --> 00:01:08,228
|
|
||||||
and justice, turn it into ideas that
|
|
||||||
|
|
||||||
30
|
|
||||||
00:01:08,228 --> 00:01:10,433
|
|
||||||
actually make sense. First U Git and
|
|
||||||
|
|
||||||
31
|
|
||||||
00:01:10,433 --> 00:01:12,952
|
|
||||||
GitHub, people get these mixed U all the
|
|
||||||
|
|
||||||
32
|
|
||||||
00:01:12,952 --> 00:01:15,157
|
|
||||||
time. Are they the same thing? Not
|
|
||||||
|
|
||||||
33
|
|
||||||
00:01:15,157 --> 00:01:17,991
|
|
||||||
really. And the best way to get it is
|
|
||||||
|
|
||||||
34
|
|
||||||
00:01:17,991 --> 00:01:20,510
|
|
||||||
with this analogy. Think of Git as the
|
|
||||||
|
|
||||||
35
|
|
||||||
00:01:20,510 --> 00:01:22,566
|
|
||||||
engine. It's the powerful. Thing working
|
|
||||||
|
|
||||||
36
|
|
||||||
00:01:22,566 --> 00:01:25,071
|
|
||||||
behind the scenes, keeping track of every
|
|
||||||
|
|
||||||
37
|
|
||||||
00:01:25,071 --> 00:01:27,576
|
|
||||||
single change you make. And GitHub, well,
|
|
||||||
|
|
||||||
38
|
|
||||||
00:01:27,576 --> 00:01:30,081
|
|
||||||
GitHub is the car. It's the sleek,
|
|
||||||
|
|
||||||
39
|
|
||||||
00:01:30,081 --> 00:01:31,870
|
|
||||||
user-friendly website where you actually
|
|
||||||
|
|
||||||
40
|
|
||||||
00:01:31,870 --> 00:01:34,733
|
|
||||||
store and share your project. O what is
|
|
||||||
|
|
||||||
41
|
|
||||||
00:01:34,733 --> 00:01:36,880
|
|
||||||
GitHub really? Let's just forget the
|
|
||||||
|
|
||||||
42
|
|
||||||
00:01:36,880 --> 00:01:39,027
|
|
||||||
whole intimidating tech reputation for a
|
|
||||||
|
|
||||||
43
|
|
||||||
00:01:39,027 --> 00:01:41,532
|
|
||||||
second. At its heart, it's basically just
|
|
||||||
|
|
||||||
44
|
|
||||||
00:01:41,532 --> 00:01:43,758
|
|
||||||
cloud. Storage, but with a superpower and
|
|
||||||
|
|
||||||
45
|
|
||||||
00:01:43,758 --> 00:01:45,856
|
|
||||||
that superpower is a time machine Every
|
|
||||||
|
|
||||||
46
|
|
||||||
00:01:45,856 --> 00:01:48,254
|
|
||||||
time you save your work, it doesn't just
|
|
||||||
|
|
||||||
47
|
|
||||||
00:01:48,254 --> 00:01:50,651
|
|
||||||
back it U, it creates a specific version
|
|
||||||
|
|
||||||
48
|
|
||||||
00:01:50,651 --> 00:01:53,349
|
|
||||||
you can go back to at anytime It's like
|
|
||||||
|
|
||||||
49
|
|
||||||
00:01:53,349 --> 00:01:55,447
|
|
||||||
the ultimate safety net for your entire
|
|
||||||
|
|
||||||
50
|
|
||||||
00:01:55,447 --> 00:01:57,844
|
|
||||||
design process. OK, so now we know what
|
|
||||||
|
|
||||||
51
|
|
||||||
00:01:57,844 --> 00:02:00,542
|
|
||||||
it is let's take that first big step we
|
|
||||||
|
|
||||||
52
|
|
||||||
00:02:00,542 --> 00:02:02,340
|
|
||||||
are going to create your professional.
|
|
||||||
|
|
||||||
53
|
|
||||||
00:02:02,420 --> 00:02:04,604
|
|
||||||
Home on the Internet your very first
|
|
||||||
|
|
||||||
54
|
|
||||||
00:02:04,604 --> 00:02:07,100
|
|
||||||
GitHub repository and you are going to be
|
|
||||||
|
|
||||||
55
|
|
||||||
00:02:07,100 --> 00:02:09,284
|
|
||||||
amazed at how simple this is. Seriously,
|
|
||||||
|
|
||||||
56
|
|
||||||
00:02:09,284 --> 00:02:12,092
|
|
||||||
you just go to github.com & up. You know,
|
|
||||||
|
|
||||||
57
|
|
||||||
00:02:12,092 --> 00:02:14,276
|
|
||||||
just like you would for any other
|
|
||||||
|
|
||||||
58
|
|
||||||
00:02:14,276 --> 00:02:17,084
|
|
||||||
website. A little pro tip, try to pick a
|
|
||||||
|
|
||||||
59
|
|
||||||
00:02:17,084 --> 00:02:18,332
|
|
||||||
professional sounding username because
|
|
||||||
|
|
||||||
60
|
|
||||||
00:02:18,332 --> 00:02:20,516
|
|
||||||
you might end up sharing this with
|
|
||||||
|
|
||||||
61
|
|
||||||
00:02:20,516 --> 00:02:22,700
|
|
||||||
clients one day. You verify your e-mail.
|
|
||||||
|
|
||||||
62
|
|
||||||
00:02:22,920 --> 00:02:24,768
|
|
||||||
And, well, that's literally it. And
|
|
||||||
|
|
||||||
63
|
|
||||||
00:02:24,768 --> 00:02:26,924
|
|
||||||
justice like that, you've done it. No,
|
|
||||||
|
|
||||||
64
|
|
||||||
00:02:26,924 --> 00:02:29,388
|
|
||||||
really, take a second and let that sink
|
|
||||||
|
|
||||||
65
|
|
||||||
00:02:29,388 --> 00:02:31,544
|
|
||||||
in. That thing that might have seemed
|
|
||||||
|
|
||||||
66
|
|
||||||
00:02:31,544 --> 00:02:33,700
|
|
||||||
kind of complicated a few minutes ago,
|
|
||||||
|
|
||||||
67
|
|
||||||
00:02:33,700 --> 00:02:36,164
|
|
||||||
you just did it. That feeling of progress
|
|
||||||
|
|
||||||
68
|
|
||||||
00:02:36,164 --> 00:02:38,320
|
|
||||||
right there. We're going to keep building
|
|
||||||
|
|
||||||
69
|
|
||||||
00:02:38,320 --> 00:02:40,784
|
|
||||||
on that. Now, when you create your first
|
|
||||||
|
|
||||||
70
|
|
||||||
00:02:40,784 --> 00:02:42,632
|
|
||||||
project folder, they call it a
|
|
||||||
|
|
||||||
71
|
|
||||||
00:02:42,632 --> 00:02:44,772
|
|
||||||
repository. You have a little choice to
|
|
||||||
|
|
||||||
72
|
|
||||||
00:02:44,772 --> 00:02:47,002
|
|
||||||
make. You can have a single repo where
|
|
||||||
|
|
||||||
73
|
|
||||||
00:02:47,002 --> 00:02:48,953
|
|
||||||
all your design specs and maybe some
|
|
||||||
|
|
||||||
74
|
|
||||||
00:02:48,953 --> 00:02:50,905
|
|
||||||
future code live together, which by the
|
|
||||||
|
|
||||||
75
|
|
||||||
00:02:50,905 --> 00:02:52,856
|
|
||||||
way, is perfect for beginners. Or you
|
|
||||||
|
|
||||||
76
|
|
||||||
00:02:52,856 --> 00:02:54,528
|
|
||||||
could have separate repos for everything,
|
|
||||||
|
|
||||||
77
|
|
||||||
00:02:54,528 --> 00:02:56,758
|
|
||||||
which is more of a big corporate thing
|
|
||||||
|
|
||||||
78
|
|
||||||
00:02:56,758 --> 00:02:58,709
|
|
||||||
for this course. Trust me, we're going
|
|
||||||
|
|
||||||
79
|
|
||||||
00:02:58,709 --> 00:03:00,660
|
|
||||||
with the single repo. It keeps everything
|
|
||||||
|
|
||||||
80
|
|
||||||
00:03:00,660 --> 00:03:02,890
|
|
||||||
simple and all in one place. So once
|
|
||||||
|
|
||||||
81
|
|
||||||
00:03:02,890 --> 00:03:04,563
|
|
||||||
you've named your repository and you
|
|
||||||
|
|
||||||
82
|
|
||||||
00:03:04,563 --> 00:03:06,867
|
|
||||||
click that. The right button boom, that's
|
|
||||||
|
|
||||||
83
|
|
||||||
00:03:06,867 --> 00:03:09,551
|
|
||||||
it. You are now officially a GitHub user.
|
|
||||||
|
|
||||||
84
|
|
||||||
00:03:09,551 --> 00:03:11,900
|
|
||||||
You have a professional space to house
|
|
||||||
|
|
||||||
85
|
|
||||||
00:03:11,900 --> 00:03:14,248
|
|
||||||
your work. Feels pretty good, right? OK,
|
|
||||||
|
|
||||||
86
|
|
||||||
00:03:14,248 --> 00:03:16,597
|
|
||||||
now let's build the workshop where you'll
|
|
||||||
|
|
||||||
87
|
|
||||||
00:03:16,597 --> 00:03:18,945
|
|
||||||
actually do the designing All right, we
|
|
||||||
|
|
||||||
88
|
|
||||||
00:03:18,945 --> 00:03:21,629
|
|
||||||
have our cloud storage all set U Now
|
|
||||||
|
|
||||||
89
|
|
||||||
00:03:21,629 --> 00:03:23,978
|
|
||||||
it's time to build your local workshop
|
|
||||||
|
|
||||||
90
|
|
||||||
00:03:23,978 --> 00:03:26,050
|
|
||||||
we're going to install. Something called
|
|
||||||
|
|
||||||
91
|
|
||||||
00:03:26,050 --> 00:03:29,020
|
|
||||||
an IDE, and I promise you it is not
|
|
||||||
|
|
||||||
92
|
|
||||||
00:03:29,020 --> 00:03:30,1000
|
|
||||||
nearly as complicated as that acronym
|
|
||||||
|
|
||||||
93
|
|
||||||
00:03:30,1000 --> 00:03:33,970
|
|
||||||
sounds. O what on earth is an IDE? It's
|
|
||||||
|
|
||||||
94
|
|
||||||
00:03:33,970 --> 00:03:36,280
|
|
||||||
just a fancy acronym for your digital
|
|
||||||
|
|
||||||
95
|
|
||||||
00:03:36,280 --> 00:03:38,590
|
|
||||||
workspace. And here's the best way to
|
|
||||||
|
|
||||||
96
|
|
||||||
00:03:38,590 --> 00:03:40,900
|
|
||||||
think about it. If Microsoft Word is
|
|
||||||
|
|
||||||
97
|
|
||||||
00:03:40,900 --> 00:03:43,540
|
|
||||||
where you write documents and IDE is your
|
|
||||||
|
|
||||||
98
|
|
||||||
00:03:43,540 --> 00:03:44,860
|
|
||||||
workspace for crafting design
|
|
||||||
|
|
||||||
99
|
|
||||||
00:03:44,860 --> 00:03:46,904
|
|
||||||
specifications for WDS. We highly, highly
|
|
||||||
|
|
||||||
100
|
|
||||||
00:03:46,904 --> 00:03:48,771
|
|
||||||
recommend an app called Cursor because
|
|
||||||
|
|
||||||
101
|
|
||||||
00:03:48,771 --> 00:03:51,261
|
|
||||||
it's built for the kind of AI assisted
|
|
||||||
|
|
||||||
102
|
|
||||||
00:03:51,261 --> 00:03:53,750
|
|
||||||
work we'll be doing, and installing it is
|
|
||||||
|
|
||||||
103
|
|
||||||
00:03:53,750 --> 00:03:55,618
|
|
||||||
something you've done 1000 times before.
|
|
||||||
|
|
||||||
104
|
|
||||||
00:03:55,618 --> 00:03:57,796
|
|
||||||
You just download it, click through the
|
|
||||||
|
|
||||||
105
|
|
||||||
00:03:57,796 --> 00:03:59,352
|
|
||||||
installer like any other application,
|
|
||||||
|
|
||||||
106
|
|
||||||
00:03:59,352 --> 00:04:01,842
|
|
||||||
pick a light or dark theme, the important
|
|
||||||
|
|
||||||
107
|
|
||||||
00:04:01,842 --> 00:04:04,332
|
|
||||||
choice, and then you sign in with that
|
|
||||||
|
|
||||||
108
|
|
||||||
00:04:04,332 --> 00:04:06,199
|
|
||||||
brand new GitHub account you just
|
|
||||||
|
|
||||||
109
|
|
||||||
00:04:06,199 --> 00:04:08,039
|
|
||||||
created. And that seamlessly connects
|
|
||||||
|
|
||||||
110
|
|
||||||
00:04:08,039 --> 00:04:09,912
|
|
||||||
your local computer to your cloud
|
|
||||||
|
|
||||||
111
|
|
||||||
00:04:09,912 --> 00:04:12,097
|
|
||||||
storage. OK, so inside your new IDE,
|
|
||||||
|
|
||||||
112
|
|
||||||
00:04:12,097 --> 00:04:14,282
|
|
||||||
you're going to find something called a
|
|
||||||
|
|
||||||
113
|
|
||||||
00:04:14,282 --> 00:04:16,468
|
|
||||||
terminal. And yet, for a lot of
|
|
||||||
|
|
||||||
114
|
|
||||||
00:04:16,468 --> 00:04:18,653
|
|
||||||
designers, that little black box with the
|
|
||||||
|
|
||||||
115
|
|
||||||
00:04:18,653 --> 00:04:20,526
|
|
||||||
blinking cursor looks pretty scary. It
|
|
||||||
|
|
||||||
116
|
|
||||||
00:04:20,526 --> 00:04:23,336
|
|
||||||
feels like you need to be some kind of
|
|
||||||
|
|
||||||
117
|
|
||||||
00:04:23,336 --> 00:04:25,521
|
|
||||||
coding genius just to touch it. But
|
|
||||||
|
|
||||||
118
|
|
||||||
00:04:25,521 --> 00:04:28,061
|
|
||||||
here's the secret you. Do not need to
|
|
||||||
|
|
||||||
119
|
|
||||||
00:04:28,061 --> 00:04:30,197
|
|
||||||
learn some new complex language for this
|
|
||||||
|
|
||||||
120
|
|
||||||
00:04:30,197 --> 00:04:32,333
|
|
||||||
entire course. You are almost always just
|
|
||||||
|
|
||||||
121
|
|
||||||
00:04:32,333 --> 00:04:34,774
|
|
||||||
going to be copying commands that we give
|
|
||||||
|
|
||||||
122
|
|
||||||
00:04:34,774 --> 00:04:36,910
|
|
||||||
you and pasting them into the terminal.
|
|
||||||
|
|
||||||
123
|
|
||||||
00:04:36,910 --> 00:04:39,351
|
|
||||||
That's it. It's just another way to talk
|
|
||||||
|
|
||||||
124
|
|
||||||
00:04:39,351 --> 00:04:41,182
|
|
||||||
to your computer typing instead of
|
|
||||||
|
|
||||||
125
|
|
||||||
00:04:41,182 --> 00:04:43,318
|
|
||||||
clicking. And now for the magic trick.
|
|
||||||
|
|
||||||
126
|
|
||||||
00:04:43,318 --> 00:04:45,759
|
|
||||||
We've got our home in the cloud on
|
|
||||||
|
|
||||||
127
|
|
||||||
00:04:45,759 --> 00:04:47,971
|
|
||||||
GitHub, and we've got our workshop. On
|
|
||||||
|
|
||||||
128
|
|
||||||
00:04:47,971 --> 00:04:50,219
|
|
||||||
our computer, the next step is to connect
|
|
||||||
|
|
||||||
129
|
|
||||||
00:04:50,219 --> 00:04:52,748
|
|
||||||
them. We're going to bring a copy of your
|
|
||||||
|
|
||||||
130
|
|
||||||
00:04:52,748 --> 00:04:54,996
|
|
||||||
roject home. We do this with a process
|
|
||||||
|
|
||||||
131
|
|
||||||
00:04:54,996 --> 00:04:56,963
|
|
||||||
called cloning, and all that really means
|
|
||||||
|
|
||||||
132
|
|
||||||
00:04:56,963 --> 00:04:59,491
|
|
||||||
is making a local copy of your project on
|
|
||||||
|
|
||||||
133
|
|
||||||
00:04:59,491 --> 00:05:01,177
|
|
||||||
your computer that stays perfectly In
|
|
||||||
|
|
||||||
134
|
|
||||||
00:05:01,177 --> 00:05:03,425
|
|
||||||
Sync with what's on GitHub. You can think
|
|
||||||
|
|
||||||
135
|
|
||||||
00:05:03,425 --> 00:05:05,673
|
|
||||||
of it exactly like Dropbox sync, but with
|
|
||||||
|
|
||||||
136
|
|
||||||
00:05:05,673 --> 00:05:07,359
|
|
||||||
that super powerful version history that
|
|
||||||
|
|
||||||
137
|
|
||||||
00:05:07,359 --> 00:05:09,471
|
|
||||||
time. Machine built right in and the
|
|
||||||
|
|
||||||
138
|
|
||||||
00:05:09,471 --> 00:05:11,819
|
|
||||||
process is just so simple. You copy the
|
|
||||||
|
|
||||||
139
|
|
||||||
00:05:11,819 --> 00:05:14,168
|
|
||||||
URL from your GitHub page, you open U
|
|
||||||
|
|
||||||
140
|
|
||||||
00:05:14,168 --> 00:05:16,516
|
|
||||||
that terminal in your IDE and you just
|
|
||||||
|
|
||||||
141
|
|
||||||
00:05:16,516 --> 00:05:18,864
|
|
||||||
type git clone and then paste the link.
|
|
||||||
|
|
||||||
142
|
|
||||||
00:05:18,864 --> 00:05:21,506
|
|
||||||
But now check out Step 4. This is the
|
|
||||||
|
|
||||||
143
|
|
||||||
00:05:21,506 --> 00:05:23,854
|
|
||||||
really cool part. If you don't happen to
|
|
||||||
|
|
||||||
144
|
|
||||||
00:05:23,854 --> 00:05:26,202
|
|
||||||
have git installed yet, your IDE is smart
|
|
||||||
|
|
||||||
145
|
|
||||||
00:05:26,202 --> 00:05:28,904
|
|
||||||
enough to see that it'll. Pop up and ask
|
|
||||||
|
|
||||||
146
|
|
||||||
00:05:28,904 --> 00:05:31,501
|
|
||||||
if you want to install it, you click 1
|
|
||||||
|
|
||||||
147
|
|
||||||
00:05:31,501 --> 00:05:33,521
|
|
||||||
button and it does everything for you.
|
|
||||||
|
|
||||||
148
|
|
||||||
00:05:33,521 --> 00:05:36,407
|
|
||||||
And just like that get us set U OK? With
|
|
||||||
|
|
||||||
149
|
|
||||||
00:05:36,407 --> 00:05:38,427
|
|
||||||
all the tools locked and loaded, we've
|
|
||||||
|
|
||||||
150
|
|
||||||
00:05:38,427 --> 00:05:40,736
|
|
||||||
made it to the final and honestly the
|
|
||||||
|
|
||||||
151
|
|
||||||
00:05:40,736 --> 00:05:42,756
|
|
||||||
most exciting part of this whole setup.
|
|
||||||
|
|
||||||
152
|
|
||||||
00:05:42,756 --> 00:05:45,064
|
|
||||||
It's time to bring in the White Port
|
|
||||||
|
|
||||||
153
|
|
||||||
00:05:45,064 --> 00:05:46,796
|
|
||||||
Design Studio methodology and meet your
|
|
||||||
|
|
||||||
154
|
|
||||||
00:05:46,796 --> 00:05:49,268
|
|
||||||
personal AI guide, Mimir. First, you'll
|
|
||||||
|
|
||||||
155
|
|
||||||
00:05:49,268 --> 00:05:51,571
|
|
||||||
create a special folder called Docs, and
|
|
||||||
|
|
||||||
156
|
|
||||||
00:05:51,571 --> 00:05:54,533
|
|
||||||
what's so cool about this is it lays out
|
|
||||||
|
|
||||||
157
|
|
||||||
00:05:54,533 --> 00:05:56,836
|
|
||||||
the entire WDC process for you. These
|
|
||||||
|
|
||||||
158
|
|
||||||
00:05:56,836 --> 00:05:58,810
|
|
||||||
eight folders aren't just random names,
|
|
||||||
|
|
||||||
159
|
|
||||||
00:05:58,810 --> 00:06:00,785
|
|
||||||
they are the complete battle tested
|
|
||||||
|
|
||||||
160
|
|
||||||
00:06:00,785 --> 00:06:02,759
|
|
||||||
design methodology that's going to guide
|
|
||||||
|
|
||||||
161
|
|
||||||
00:06:02,759 --> 00:06:05,720
|
|
||||||
you all the way from the first idea to
|
|
||||||
|
|
||||||
162
|
|
||||||
00:06:05,720 --> 00:06:07,695
|
|
||||||
the final delivery. This folder becomes
|
|
||||||
|
|
||||||
163
|
|
||||||
00:06:07,695 --> 00:06:10,110
|
|
||||||
the single source of truth. For your
|
|
||||||
|
|
||||||
164
|
|
||||||
00:06:10,110 --> 00:06:12,558
|
|
||||||
entire project and now you meet your
|
|
||||||
|
|
||||||
165
|
|
||||||
00:06:12,558 --> 00:06:15,007
|
|
||||||
guide. Mimir is the AI orchestrator for
|
|
||||||
|
|
||||||
166
|
|
||||||
00:06:15,007 --> 00:06:17,806
|
|
||||||
WDS. And what this means is that from
|
|
||||||
|
|
||||||
167
|
|
||||||
00:06:17,806 --> 00:06:20,255
|
|
||||||
this moment forward, you are never alone.
|
|
||||||
|
|
||||||
168
|
|
||||||
00:06:20,255 --> 00:06:22,703
|
|
||||||
Anytime you feel stuck, anytime you have
|
|
||||||
|
|
||||||
169
|
|
||||||
00:06:22,703 --> 00:06:25,502
|
|
||||||
a question or you just need a little
|
|
||||||
|
|
||||||
170
|
|
||||||
00:06:25,502 --> 00:06:27,951
|
|
||||||
direction, you just type at WD Schmear
|
|
||||||
|
|
||||||
171
|
|
||||||
00:06:27,951 --> 00:06:30,715
|
|
||||||
right there in your IDE. And your guide
|
|
||||||
|
|
||||||
172
|
|
||||||
00:06:30,715 --> 00:06:33,039
|
|
||||||
will be there to help you out. And with
|
|
||||||
|
|
||||||
173
|
|
||||||
00:06:33,039 --> 00:06:34,846
|
|
||||||
that, you're done. The set is complete.
|
|
||||||
|
|
||||||
174
|
|
||||||
00:06:34,846 --> 00:06:37,170
|
|
||||||
You are ready to go. But hey, before we
|
|
||||||
|
|
||||||
175
|
|
||||||
00:06:37,170 --> 00:06:39,236
|
|
||||||
move on, let's just hit pause for a
|
|
||||||
|
|
||||||
176
|
|
||||||
00:06:39,236 --> 00:06:41,044
|
|
||||||
second and look back at everything you
|
|
||||||
|
|
||||||
177
|
|
||||||
00:06:41,044 --> 00:06:43,110
|
|
||||||
just did. No, seriously, take a moment. A
|
|
||||||
|
|
||||||
178
|
|
||||||
00:06:43,110 --> 00:06:45,175
|
|
||||||
lot of designers get stuck at this stage
|
|
||||||
|
|
||||||
179
|
|
||||||
00:06:45,175 --> 00:06:47,241
|
|
||||||
for a long time, but you just pushed
|
|
||||||
|
|
||||||
180
|
|
||||||
00:06:47,241 --> 00:06:49,307
|
|
||||||
right through it. Do you realize what a
|
|
||||||
|
|
||||||
181
|
|
||||||
00:06:49,307 --> 00:06:52,118
|
|
||||||
big deal that is?I mean, look
|
|
||||||
|
|
||||||
182
|
|
||||||
00:06:52,118 --> 00:06:54,611
|
|
||||||
at this list. You created a GitHub
|
|
||||||
|
|
||||||
183
|
|
||||||
00:06:54,611 --> 00:06:56,392
|
|
||||||
account and a professional repository,
|
|
||||||
|
|
||||||
184
|
|
||||||
00:06:56,392 --> 00:06:58,529
|
|
||||||
you installed a professional grade IDE,
|
|
||||||
|
|
||||||
185
|
|
||||||
00:06:58,529 --> 00:07:01,022
|
|
||||||
you actually used the command line to
|
|
||||||
|
|
||||||
186
|
|
||||||
00:07:01,022 --> 00:07:03,159
|
|
||||||
clone your first project, you integrated
|
|
||||||
|
|
||||||
187
|
|
||||||
00:07:03,159 --> 00:07:05,296
|
|
||||||
the entire WDS framework, and you
|
|
||||||
|
|
||||||
188
|
|
||||||
00:07:05,296 --> 00:07:07,432
|
|
||||||
activated your personal AI guide. This
|
|
||||||
|
|
||||||
189
|
|
||||||
00:07:07,432 --> 00:07:09,925
|
|
||||||
wasn't just about clicking a few buttons,
|
|
||||||
|
|
||||||
190
|
|
||||||
00:07:09,925 --> 00:07:12,712
|
|
||||||
this was a transformation. You may have
|
|
||||||
|
|
||||||
191
|
|
||||||
00:07:12,712 --> 00:07:14,837
|
|
||||||
started out feeling like a nervous
|
|
||||||
|
|
||||||
192
|
|
||||||
00:07:14,837 --> 00:07:17,316
|
|
||||||
beginner, but right now you are a
|
|
||||||
|
|
||||||
193
|
|
||||||
00:07:17,316 --> 00:07:19,795
|
|
||||||
designer who is equipped with a fully
|
|
||||||
|
|
||||||
194
|
|
||||||
00:07:19,795 --> 00:07:21,566
|
|
||||||
professional industry standard set. O.
|
|
||||||
|
|
||||||
195
|
|
||||||
00:07:21,566 --> 00:07:23,691
|
|
||||||
Let's end with this thought. After
|
|
||||||
|
|
||||||
196
|
|
||||||
00:07:23,691 --> 00:07:25,461
|
|
||||||
everything you just accomplished, there
|
|
||||||
|
|
||||||
197
|
|
||||||
00:07:25,461 --> 00:07:28,294
|
|
||||||
is no more. I might be able to
|
|
||||||
|
|
||||||
198
|
|
||||||
00:07:28,294 --> 00:07:31,128
|
|
||||||
do this. You just proved to yourself that
|
|
||||||
|
|
||||||
199
|
|
||||||
00:07:31,128 --> 00:07:33,836
|
|
||||||
you are able. The setup is done,
|
|
||||||
|
|
||||||
200
|
|
||||||
00:07:33,836 --> 00:07:36,174
|
|
||||||
your environment is ready, and your guide
|
|
||||||
|
|
||||||
201
|
|
||||||
00:07:36,174 --> 00:07:38,846
|
|
||||||
me mayor is waiting for you. Welcome to
|
|
||||||
|
|
||||||
202
|
|
||||||
00:07:38,846 --> 00:07:39,180
|
|
||||||
WDS.
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
# NotebookLM Prompt: Getting Started with WDS
|
|
||||||
|
|
||||||
**Use this prompt to generate audio/video content from the Getting Started sections**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
**This is a single, self-contained prompt file.**
|
|
||||||
|
|
||||||
Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prompt
|
|
||||||
|
|
||||||
Create an engaging 15-minute podcast conversation between two hosts discussing the Whiteport Design Studio (WDS) course getting started guide.
|
|
||||||
|
|
||||||
**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.**
|
|
||||||
|
|
||||||
**Host 1 (The Skeptic):** A designer who's heard about WDS but is uncertain about investing time in another methodology. Asks practical questions about prerequisites, time commitment, and real-world value.
|
|
||||||
|
|
||||||
**Host 2 (The Advocate):** A designer who understands WDS deeply and can explain why it matters, especially in the AI era. Enthusiastic but grounded in practical benefits.
|
|
||||||
|
|
||||||
**Conversation structure:**
|
|
||||||
|
|
||||||
### 1. Opening (2 min) - Hook the listener
|
|
||||||
|
|
||||||
Start with The Skeptic expressing fatigue: "Another design methodology? I've been through Lean UX, Design Thinking, Jobs to be Done... what makes Whiteport Design Studio different?"
|
|
||||||
|
|
||||||
The Advocate responds with the core paradigm shift that changes everything: "Here's what's different - in Whiteport Design Studio, the design becomes the specification. The specification becomes the product. The code is just the printout - the projection to the end user." Explain that this isn't just another process overlay, it's a fundamental shift in how designers work with AI.
|
|
||||||
|
|
||||||
**Background context:** The Advocate explains that Whiteport Design Studio (WDS) was created by Mårten Angner, a UX designer and founder of Whiteport, a design and development agency from Sweden. Mårten developed Whiteport Design Studio as a plugin module for the BMad Method - an open-source AI-augmented development framework. The goal was to give designers everywhere free and open-source access to AI agents specifically tailored for design work. After years of working with AI tools, Mårten realized that traditional design handoffs were breaking down. Designers needed a methodology where their thinking could be preserved and amplified through AI implementation, not lost in translation. WDS emerged from real-world projects where designers could deliver deeper, more complete work while becoming the strategic thinkers their teams need. By making it open-source and integrating it with BMad Method, Mårten ensures that any designer can access these powerful AI-augmented workflows without cost barriers.
|
|
||||||
|
|
||||||
Introduce the context: we're in the AI era where AI can generate mockups in seconds, follow design systems perfectly, and iterate endlessly. The question isn't whether AI will change design - it already has. The question is: which side of the line are you on? Are you doing factory work that AI can replace, or are you a linchpin designer who makes things happen?
|
|
||||||
|
|
||||||
Give a quick overview: this conversation will explore the crossroads every designer faces right now - the choice between becoming replaceable or indispensable. We'll talk about the four deliverables that transform your work, why specifications are where your creative brilliance becomes immortal, and yes - briefly - the simple setup. But this isn't about tools. This is about your future as a designer.
|
|
||||||
|
|
||||||
### 2. The Designer's Crossroads (4 min) - The choice you're facing right now
|
|
||||||
|
|
||||||
The Skeptic gets real: "I'm at a crossroads. I see AI generating mockups in seconds. I see my value being questioned. I don't know if I should double down on craft or learn to work with AI or just... give up and find a new career. What am I supposed to do?"
|
|
||||||
|
|
||||||
The Advocate responds with empathy: "You're standing at the most important moment in design history. And here's the truth - you have a choice to make. Not about tools. Not about techniques. About who you are as a designer."
|
|
||||||
|
|
||||||
**The Factory Designer Path:** Keep doing what you've been doing. Get briefs, make mockups, hand them off, hope for the best. It's comfortable. It's familiar. But AI is getting better at this every single day. If your value comes from executing predictable outputs, you're competing with something that never sleeps, never has creative block, and costs pennies.
|
|
||||||
|
|
||||||
**The Linchpin Designer Path:** Become the person who walks into chaos and creates order. The one who connects business goals to user psychology to technical constraints and finds the human truth at the intersection. The one whose creative thinking is so valuable that it needs to be preserved for eternity - captured in Conceptual Specifications that give your designs immortal life.
|
|
||||||
|
|
||||||
The Advocate pauses: "WDS is the path to becoming a linchpin designer. But I need you to understand - this isn't about learning new tools. This is about transforming how you think about your role. You're not a mockup maker anymore. You're a strategic thinker whose creative brilliance deserves to be captured and preserved."
|
|
||||||
|
|
||||||
The Skeptic asks: "But practically - what does that actually mean? What changes?"
|
|
||||||
|
|
||||||
The Advocate: "Everything changes. You create four deliverables that transform your work. And yes, there's a learning curve - you'll work in an IDE instead of just Figma, you'll use GitHub, you'll invest about 10 hours learning the methodology. But those are just the mechanics. The real transformation is internal - from someone who makes things pretty to someone who creates strategic design systems that preserve your creative genius."
|
|
||||||
|
|
||||||
### 3. The Four Deliverables - Where Your Brilliance Becomes Immortal (6 min)
|
|
||||||
|
|
||||||
The Skeptic asks: "Okay, you've convinced me I need to transform. But what does that actually look like? What will I create that's so different?"
|
|
||||||
|
|
||||||
The Advocate gets passionate: "You'll create four deliverables - but these aren't just documents. These are the artifacts that prove you're a linchpin designer. These are where your creative brilliance becomes immortal. Let me walk you through each one."
|
|
||||||
|
|
||||||
**First: Your Project Brief** - This isn't a typical brief. It's your project's strategic foundation with vision and goals clearly defined, stakeholders and constraints documented, and the foundation for every design decision you'll make. This becomes your north star. When stakeholders ask 'why did we build it this way?' you point to the brief. When developers need context, it's all there. When you need to defend a design decision, the reasoning is documented. This is strategic thinking made visible.
|
|
||||||
|
|
||||||
**Second: Your Trigger Map** - This is pure strategic gold. You've identified and prioritized target groups, mapped user triggers and outcomes, and prioritized features by impact. This tells you exactly what to build and why. No more guessing what features matter. No more building things nobody uses. The trigger map creates a logical chain of reasoning between the business goals and the users' goals that is traceable to every feature and piece of content in the product. When product managers ask 'what should we build next?' you have the answer, backed by user psychology and business impact.
|
|
||||||
|
|
||||||
**Third: Scenario Specifications** - This is where your brilliance comes to life. Here's the magic: AI agents in WDS support you throughout the design process - helping you explore what to draw, discussing design solutions with pros and cons, collaborating as you finalize your design. Then, once you've made all your design decisions, the agents become genuinely interested in capturing every nuance of your thinking in text. They help you document everything your sketch can't convey - why every object is placed exactly where it is, how it connects to the wider picture, what alternatives you considered and rejected. These Conceptual Specifications give your designs eternal life. It's your thinking, your creative integrity, captured and preserved. Not factory work - this is where your design brilliance becomes immortal.
|
|
||||||
|
|
||||||
**Fourth: Your Design System Foundation** - Design tokens extracted from your specs, component patterns identified, and reusable architecture defined. This scales your design decisions across the entire product. Every color, every spacing decision, every interaction pattern - documented and reusable. You're not just designing one screen anymore. You're creating a system that scales infinitely. This is how your design thinking compounds over time.
|
|
||||||
|
|
||||||
The Advocate pauses for emphasis: "These four deliverables transform you from someone who makes mockups to someone who creates strategic design systems. Each one builds on the last. Each one amplifies your impact. And here's the key - the course walks you through creating all of them, step by step, for your own project."
|
|
||||||
|
|
||||||
The Skeptic asks: "But wait - writing specifications sounds like factory work. Isn't that exactly what we're trying to avoid?" The Advocate responds with passion: "That's the beautiful reframe! In WDS, you're not grinding out documentation. The AI agents are your creative partners. They help you think through design solutions, explore alternatives, discuss trade-offs. Then - and this is crucial - they're genuinely fascinated by your thinking. They want to capture every nuance, every decision, every insight. It's like having a brilliant assistant who's obsessed with preserving your creative genius for eternity. The specifications aren't factory work - they're the point where your brilliance comes to life in a form that gives your designs eternal life. Your thinking, your creative integrity, captured perfectly so it can never be lost."
|
|
||||||
|
|
||||||
### 4. The AI Era Reality Check (3 min) - Why this matters now
|
|
||||||
|
|
||||||
The Skeptic voices the deeper fear: "But I still don't understand - why NOW? Why is this moment so critical? Won't AI just replace designers anyway? Why invest time learning anything when AI is getting better every day?"
|
|
||||||
|
|
||||||
The Advocate addresses this head-on with the factory mindset versus linchpin mindset concept from Seth Godin's book "Linchpin: Are You Indispensable?" For over a century, we've been trained to be cogs in a machine - show up, follow instructions, do your part, go home. Replaceable. Interchangeable. Traditional design work follows this exact pattern: get a brief, create mockups, hand off to developers, hope for the best. That's factory work, just with Figma instead of an assembly line.
|
|
||||||
|
|
||||||
Here's the uncomfortable truth: AI is really, really good at factory work. If your value as a designer comes from creating predictable outputs based on clear instructions, you're competing with something that's faster, more consistent, and infinitely scalable. AI can generate mockups instantly, follow design systems perfectly, iterate through hundreds of variations without fatigue, and work 24/7 at the same quality level.
|
|
||||||
|
|
||||||
But - and this is crucial - AI cannot be a linchpin. It can't walk into chaos and create order. It can't sense when a client is asking for the wrong thing. It can't connect a business goal to a psychological insight to a technical constraint and come up with something nobody expected but everyone loves.
|
|
||||||
|
|
||||||
The internet is drowning in what we call "AI slop" - generic interfaces that look fine but feel dead. Products that check all the boxes but have no soul. This is what happens when you let AI do the thinking. But here's the brutal market reality: bad products used to fail after launch. Now bad products never even get to start. Users have infinite options. They can smell soulless design from a mile away. If your product doesn't immediately feel different, feel right, feel like someone actually cared - it's dead on arrival.
|
|
||||||
|
|
||||||
This is the opportunity. Linchpin designers do what AI fundamentally cannot do: they give products a soul. They navigate five dimensions of thinking simultaneously - business goals, user psychology, product strategy, technical constraints, and design execution - and find the human truth at the intersection. They make judgment calls that create emotional resonance. They build trust through thoughtful decisions. They care about the outcome in a way that shows in every interaction.
|
|
||||||
|
|
||||||
The Advocate explains the transformation: "Designers who master WDS become strategic thinkers who deliver complete value. But here's the crucial difference from traditional AI tools - in WDS, AI agents are your creative partners, not your replacements. They help you explore design solutions, discuss pros and cons, support your thinking process. Then they become fascinated documentarians of your brilliance - capturing every nuance of your creative decisions in Conceptual Specifications that give your designs eternal life."
|
|
||||||
|
|
||||||
The key insight: with WDS, your design contribution completely replaces prompting. You make design decisions with AI as your thinking partner. Then AI helps capture your creative integrity in text - not factory work, but preserving your genius. The result is an absolute goldmine for everyone - providing clarity that works like clockwork, replacing hours of pointless back-and-forth prompting. You remain in the loop as the skilled, experienced designer who evaluates AI's work, catches its confident mistakes, and ensures what ships actually makes sense.
|
|
||||||
|
|
||||||
### 5. The Simple Path Forward (2 min) - How to begin
|
|
||||||
|
|
||||||
The Skeptic asks: "Okay, I'm convinced this is the transformation I need. But how do I actually start?"
|
|
||||||
|
|
||||||
The Advocate: "The path is simple. Go to the WDS GitHub repository. Start with Module 01 - Why WDS Matters. Three lessons, 30 minutes. You'll understand the transformation deeply.
|
|
||||||
|
|
||||||
Then the course walks you through creating your four deliverables, step by step. Yes, you'll need to install an IDE and learn GitHub - the course shows you how. It's about 10 hours total to learn the methodology. There's a BMad Discord channel where real designers help each other.
|
|
||||||
|
|
||||||
But here's what matters - this isn't about the tools. The tools are just the mechanics. This is about choosing to become a linchpin designer whose creative brilliance gets preserved for eternity. That's the real transformation."
|
|
||||||
|
|
||||||
The Skeptic: "And the cost?"
|
|
||||||
|
|
||||||
The Advocate: "Free and open-source. The only cost is AI credits when you're actually using the system - you pay for what you use, when you use it. Starts around $15-20 per month for typical design work, but you're only paying when the AI is actively helping you. No subscriptions to WDS itself, no course fees, no hidden costs. Mårten created Whiteport Design Studio to help designers thrive in the AI era, not to sell you something. The real cost is choosing to transform. That's the investment that matters."
|
|
||||||
|
|
||||||
### 6. Closing (1 min) - The choice is yours
|
|
||||||
|
|
||||||
The Advocate brings it home with the paradigm shift: "Remember this - the design becomes the specification. The specification becomes the product. The code is just the printout - the projection to the end user."
|
|
||||||
|
|
||||||
The Skeptic, now transformed, says: "I see it now. This isn't about tools or techniques. It's about choosing who I want to be as a designer. Factory worker or linchpin. Replaceable or indispensable."
|
|
||||||
|
|
||||||
The Advocate confirms: "Exactly. You're standing at a crossroads. One path leads to competing with AI for factory work. The other path leads to becoming irreplaceable - the designer whose creative brilliance is so valuable it deserves to be preserved for eternity.
|
|
||||||
|
|
||||||
WDS gives you the methodology to walk that second path. Four deliverables that prove you're a linchpin designer. AI agents as creative partners who help you think, then capture your genius. Ten hours of learning that transforms your career forever.
|
|
||||||
|
|
||||||
The question isn't whether to learn WDS. The question is: which designer do you choose to become?"
|
|
||||||
|
|
||||||
The Skeptic ends with: "I choose to be indispensable. I'm in."
|
|
||||||
|
|
||||||
The Advocate: "Then go to the WDS GitHub repository. Start with Module 01. The transformation begins now."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Resources to Include
|
|
||||||
|
|
||||||
At the end of the podcast, The Advocate should mention these resources for listeners who want to explore further:
|
|
||||||
|
|
||||||
**Getting Started:**
|
|
||||||
|
|
||||||
- Whiteport Design Studio Course: Start with Module 01 - Why WDS Matters
|
|
||||||
- GitHub Repository: github.com/bmad-code-org (full course materials, examples, templates)
|
|
||||||
- BMad Method Website: bmadmethod.com (case studies, blog posts, methodology deep dives)
|
|
||||||
|
|
||||||
**Community & Support:**
|
|
||||||
|
|
||||||
- GitHub Discussions: Ask questions, share projects, get feedback
|
|
||||||
- NotebookLM Integration: Generate audio/video versions of any module
|
|
||||||
- Workshop Materials: Available for team training
|
|
||||||
|
|
||||||
**Real-World Examples:**
|
|
||||||
|
|
||||||
- Case Studies: See real transformations from traditional to Whiteport Design Studio approach
|
|
||||||
- Design System Examples: How Whiteport Design Studio scales across products
|
|
||||||
- Specification Templates: Start with proven patterns
|
|
||||||
|
|
||||||
**Tools & Templates:**
|
|
||||||
|
|
||||||
- Project Brief Template: Start your first WDS project
|
|
||||||
- Trigger Map Template: Map user needs to features
|
|
||||||
- Scenario Specification Template: Create AI-ready specs
|
|
||||||
- Design Token Extraction Guide: Build your design system
|
|
||||||
|
|
||||||
The Advocate emphasizes: "Everything is free and open-source. BMad Method built Whiteport Design Studio to help designers thrive in the AI era, not to sell you something. Download it, use it, share it with your team, contribute back if you find it valuable. The only cost is your time - 10 hours to learn, a lifetime of being indispensable."
|
|
||||||
|
|
||||||
**Tone:**
|
|
||||||
|
|
||||||
- Conversational and engaging, not academic
|
|
||||||
- The Skeptic asks real questions designers actually have
|
|
||||||
- The Advocate provides concrete answers with examples
|
|
||||||
- Both hosts are enthusiastic but realistic about the learning curve
|
|
||||||
- Use the testimonials naturally in conversation
|
|
||||||
- Reference real case studies showing traditional vs WDS transformation
|
|
||||||
|
|
||||||
**Key messages to emphasize:**
|
|
||||||
|
|
||||||
- **The designer's crossroads** - factory worker or linchpin, replaceable or indispensable
|
|
||||||
- **The existential choice** - this is about who you choose to become, not what tools you learn
|
|
||||||
- **Four deliverables** - where your creative brilliance becomes immortal
|
|
||||||
- **The paradigm shift** - design IS the specification, specifications preserve your genius
|
|
||||||
- **AI as creative partner** - helps you think, then captures your brilliance (not factory work)
|
|
||||||
- **Conceptual Specifications** - where your thinking gets eternal life
|
|
||||||
- **The transformation** - from mockup maker to strategic thinker
|
|
||||||
- **Why NOW matters** - AI slop is drowning the internet, linchpin designers give products soul
|
|
||||||
- Tools are secondary - 10 hours learning, IDE + GitHub, BMad Discord support
|
|
||||||
- Free and open-source (only pay for AI credits when you use it - ~$15-20/month typical)
|
|
||||||
|
|
||||||
**Avoid:**
|
|
||||||
|
|
||||||
- Being too salesy or promotional
|
|
||||||
- Oversimplifying the learning curve
|
|
||||||
- Making unrealistic promises
|
|
||||||
- Technical jargon without explanation
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Expected Output
|
|
||||||
|
|
||||||
A natural, engaging conversation that:
|
|
||||||
|
|
||||||
- **Focuses on the designer's existential crossroads** - the choice between factory work and linchpin work
|
|
||||||
- **Makes the transformation emotional and personal** - this is about who you choose to become
|
|
||||||
- **Emphasizes the four deliverables** as proof of linchpin designer status
|
|
||||||
- **Reframes specifications** from factory work to where creative brilliance becomes immortal
|
|
||||||
- **Positions AI as creative partner** - helps you think, then captures your genius
|
|
||||||
- **Explains why NOW matters** - AI slop vs products with soul
|
|
||||||
- Mentions practical setup briefly (tools are secondary to transformation)
|
|
||||||
- Provides clear next steps (go to GitHub, start Module 01)
|
|
||||||
- Takes 15 minutes to listen to
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Alternative: Video Script
|
|
||||||
|
|
||||||
If generating video instead of audio, add these visual elements:
|
|
||||||
|
|
||||||
**On-screen text:**
|
|
||||||
|
|
||||||
- "The Designer's Crossroads: Factory Worker or Linchpin?"
|
|
||||||
- "Replaceable or Indispensable - You Choose"
|
|
||||||
- The four deliverables as graphics (Project Brief, Trigger Map, Conceptual Specifications, Design System)
|
|
||||||
- "Where Your Creative Brilliance Becomes Immortal"
|
|
||||||
- The paradigm shift statement as a title card
|
|
||||||
- "AI as Creative Partner - Not Replacement"
|
|
||||||
- "Next: Module 01 - The Transformation Begins" as closing card
|
|
||||||
|
|
||||||
**B-roll suggestions:**
|
|
||||||
|
|
||||||
- Designer at crossroads - two paths diverging
|
|
||||||
- Factory assembly line vs creative studio (visual metaphor)
|
|
||||||
- The four deliverables as beautiful artifacts
|
|
||||||
- Designer collaborating with AI - thinking together
|
|
||||||
- Conceptual Specifications capturing design brilliance
|
|
||||||
- Before/after: generic AI slop vs product with soul
|
|
||||||
- Designer's creative thinking being preserved in text
|
|
||||||
- Linchpin designer making strategic decisions
|
|
||||||
- Community of transformed designers
|
|
||||||
- The transformation journey - mockup maker to strategic thinker
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Usage Tips
|
|
||||||
|
|
||||||
1. **Upload THIS SINGLE FILE** to NotebookLM - no other files needed
|
|
||||||
2. **Use the prompt exactly** as written for best results
|
|
||||||
3. **Generate multiple versions** and pick the best one
|
|
||||||
4. **Share the audio/video** with your team or community
|
|
||||||
5. **Iterate** - if the output isn't quite right, refine the prompt
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
After generating the Getting Started content:
|
|
||||||
|
|
||||||
- Create NotebookLM prompt for Module 01: Why WDS Matters
|
|
||||||
- Build prompts for all 16 modules (complete audio course library)
|
|
||||||
- Share in BMad Discord designer channel
|
|
||||||
- Use in workshops and team training
|
|
||||||
- Iterate based on community feedback
|
|
||||||
|
|
||||||
**[← Back to Getting Started Overview](overview.md)**
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "DESIGNERS DILEMMA" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "DELIVER FROM SPECS OR" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "BECOME INDISPENSABLE!" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "00 Getting started" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Woman looking at wireframe sketches on the table
|
|
||||||
- Skip the tablet
|
|
||||||
- Keep the character stylized as it is
|
|
||||||
- Expression: Thoughtful, considering options
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- Add subtle tech/design elements (wireframes, UI shapes)
|
|
||||||
- Keep as in reference image
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: wireframe sketches, design notes
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
Module 00 - Your Path to Becoming a Linchpin Designer - WDS Course
|
|
||||||
<https://www.youtube.com/watch?v=qYPYx01YLUc>
|
|
||||||
|
|
||||||
Standing at a crossroads? This 15-minute video explores the most important choice you'll make as a designer in the AI era: Will you be replaceable or indispensable?
|
|
||||||
|
|
||||||
*You'll discover:*
|
|
||||||
✅ The paradigm shift: Design becomes specification
|
|
||||||
✅ Four core deliverables that transform your work
|
|
||||||
✅ Why specifications preserve your creative brilliance
|
|
||||||
✅ How to get started (10 hours to learn)
|
|
||||||
✅ AI as your creative partner, not replacement
|
|
||||||
|
|
||||||
*Free & open-source* | Created by Mårten Angner, Whiteport (Sweden)
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The Fundamental Choice
|
|
||||||
00:30 Two Paths: Factory vs Linchpin Designer
|
|
||||||
01:22 The Threat of AI Slop
|
|
||||||
02:25 How to Become Indispensable
|
|
||||||
02:38 The WDS Paradigm Shift
|
|
||||||
03:25 Specifications as Creative Genius
|
|
||||||
03:46 The Four Core Deliverables
|
|
||||||
04:25 AI as Your Creative Partner
|
|
||||||
04:45 Getting Started: 10 Hours to Transform
|
|
||||||
05:26 Your Choice, Your Future
|
|
||||||
|
|
||||||
🎯 Two Paths
|
|
||||||
|
|
||||||
*Factory Designer* - Predictable outputs, competing with AI, replaceable
|
|
||||||
*Linchpin Designer* - Strategic thinking, creating order from chaos, indispensable
|
|
||||||
|
|
||||||
*Four Core Deliverables:*
|
|
||||||
• Product Brief • Trigger Map • Scenario Specifications • Design System Foundation
|
|
||||||
|
|
||||||
Course Resources
|
|
||||||
|
|
||||||
*WDS Presentation:*
|
|
||||||
<https://whiteport.com/whiteport-design-studio/>
|
|
||||||
|
|
||||||
Installation Guide:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/getting-started/installation.md>
|
|
||||||
|
|
||||||
Quick Start:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/getting-started/quick-start.md>
|
|
||||||
|
|
||||||
UX-Design channel in the BMad Discord Community:
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
GitHub Discussions:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
Next Module: Module 01 - Why WDS Matters
|
|
||||||
<https://www.youtube.com/watch?v=Xhw5JB7mpxw>
|
|
||||||
|
|
||||||
*Full Course:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
*Next Steps:*
|
|
||||||
1. Watch Module 01
|
|
||||||
2. Download an IDE (Cursor, VS Code, Windsurf)
|
|
||||||
3. Install WDS
|
|
||||||
4. Join Discord community
|
|
||||||
5. Start creating your four deliverables
|
|
||||||
|
|
||||||
*Time Investment:* 10 hours | *Payoff:* A lifetime of being indispensable
|
|
||||||
|
|
||||||
🎨 *About WDS*
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). Free access to AI agents for designers while preserving creative thinking through specifications. Become 5x more productive with creative control.
|
|
||||||
|
|
||||||
#UXDesign #AIDesign #LinchpinDesigner #WDS #BMadMethod #DesignSpecification
|
|
||||||
|
|
||||||
💡 *The Choice:* Factory work (replaceable) or Linchpin work (indispensable)?
|
|
||||||
|
|
||||||
The design becomes the specification. The specification becomes the product. The code is just the printout.
|
|
||||||
|
|
||||||
*Ready to transform? Start Module 01! 🚀*
|
|
||||||
<https://www.youtube.com/watch?v=Xhw5JB7mpxw>
|
|
||||||
|
|
@ -1,418 +0,0 @@
|
||||||
# NotebookLM Prompt: Module 01 - Why WDS Matters
|
|
||||||
|
|
||||||
**Use this prompt to generate audio/video content for Module 01: Why WDS Matters**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
**This is a single, self-contained prompt file.**
|
|
||||||
|
|
||||||
Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prompt
|
|
||||||
|
|
||||||
Create an engaging 30-minute podcast conversation between two hosts discussing Module 01 of the Whiteport Design Studio (WDS) course: Why WDS Matters.
|
|
||||||
|
|
||||||
**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.**
|
|
||||||
|
|
||||||
**Host 1 (The Skeptic):** A designer who's uncertain about their future in the AI era. Feels threatened by AI tools and wonders if design skills still matter. Asks challenging questions about value and relevance.
|
|
||||||
|
|
||||||
**Host 2 (The Advocate):** A designer who has embraced the linchpin mindset and understands how WDS makes designers indispensable. Enthusiastic about the transformation but realistic about the work required.
|
|
||||||
|
|
||||||
**Conversation structure:**
|
|
||||||
|
|
||||||
### 1. Opening (3 min) - The Linchpin Question
|
|
||||||
|
|
||||||
Start with The Skeptic asking the core question: "I've heard about AI changing design. I've heard about the threat. But what I really want to understand is - what makes me valuable? What's my unique contribution that matters?"
|
|
||||||
|
|
||||||
The Advocate responds: "That's exactly the right question. And the answer comes from Seth Godin's 2010 bestselling book 'Linchpin: Are You Indispensable?' Godin identifies two types of workers: factory workers who follow instructions and can be replaced, and linchpins who walk into chaos and create order. The question isn't whether AI will change design - it already has. The question is: are you a factory worker or a linchpin?"
|
|
||||||
|
|
||||||
The Advocate continues: "This is where Whiteport Design Studio comes in. We're banding together to carve out a space for linchpin designers - designers who understand their irreplaceable value and serve clients and developers in an honest and sustainable way. You don't have to figure this out alone."
|
|
||||||
|
|
||||||
Introduce the module's promise: "In the next 30 minutes, you'll understand exactly what makes you irreplaceable as a designer. Not your tools. Not your aesthetic taste. But your uniquely human gift - what Godin calls 'emotional labor' and what we call 'user-centric creativity.' And remember - it's hard to be a beginner, but the BMad community is here to help."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. The Problem - Factory Work vs Linchpin Work (8 min)
|
|
||||||
|
|
||||||
The Skeptic asks: "Okay, but what does that actually mean? What's the difference between factory work and linchpin work in design?"
|
|
||||||
|
|
||||||
**Seth Godin's Insight: Emotional Labor**
|
|
||||||
|
|
||||||
The Advocate starts with Godin's framework: "In his 2010 book 'Linchpin: Are You Indispensable?', bestselling author and marketing visionary Seth Godin talks about two types of work. There's factory work - following instructions, creating predictable outputs, being replaceable. And there's linchpin work - which requires what Godin calls 'emotional labor.' This is the work of genuinely caring about the outcome, connecting with people's real needs, and creating meaning that matters."
|
|
||||||
|
|
||||||
The Skeptic: "Emotional labor? That sounds... soft. What does that have to do with design?"
|
|
||||||
|
|
||||||
**The Designer's Reality: User-Centric Creativity**
|
|
||||||
|
|
||||||
The Advocate: "Everything. For designers, emotional labor translates into something very specific: user-centric creativity. This is your irreplaceable gift. Let me break down what this actually means:"
|
|
||||||
|
|
||||||
What user-centric creativity looks like:
|
|
||||||
|
|
||||||
- **Understanding WHY** - Not just making things look better, but understanding why users feel frustrated
|
|
||||||
- **Connecting goals** - Bridging business goals and human needs in ways that serve both
|
|
||||||
- **Creating experiences that feel right** - Not just function correctly, but feel like someone cared
|
|
||||||
- **Making judgment calls** - Serving people even when it's harder than following a formula
|
|
||||||
- **Providing meaning** - Creating products that have soul, not just features
|
|
||||||
|
|
||||||
The Advocate continues: "This is hard work. It requires you to genuinely care. To empathize. To think deeply about people's needs. To make judgment calls when there's no clear answer. AI can generate interfaces. But it cannot provide emotional labor. It cannot genuinely care about the outcome."
|
|
||||||
|
|
||||||
The Skeptic: "So my value is in the caring? In the human connection?"
|
|
||||||
|
|
||||||
The Advocate: "Exactly. While AI can execute instructions perfectly, you provide the thinking that matters. You're the one who walks into chaos and creates order. You're the one who gives products a soul."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. The Solution - Becoming a Linchpin Designer (10 min)
|
|
||||||
|
|
||||||
The Skeptic asks: "Okay, I'm listening. But what makes a designer a linchpin instead of a cog? What's the actual difference?"
|
|
||||||
|
|
||||||
**What Makes a Linchpin Designer:**
|
|
||||||
|
|
||||||
The Advocate explains Seth Godin's definition: "A linchpin is someone who can walk into chaos and create order. Someone who invents, connects, creates, and makes things happen. That's exactly what product design is at its core."
|
|
||||||
|
|
||||||
Godin describes linchpins as people who:
|
|
||||||
|
|
||||||
- **Invent** - Create solutions that didn't exist before
|
|
||||||
- **Connect** - Bridge disparate ideas and people
|
|
||||||
- **Create** - Make things that matter
|
|
||||||
- **Make things happen** - Deliver results when there's no clear roadmap
|
|
||||||
|
|
||||||
The Advocate continues: "This is you. When you walk into a project with unclear requirements, conflicting stakeholder needs, and complex user problems - you create order. You transform complexity into clarity. You invent solutions nobody expected. You bridge business, psychology, and technology. That's linchpin work."
|
|
||||||
|
|
||||||
**The Designer's Three Irreplaceable Gifts:**
|
|
||||||
|
|
||||||
The Advocate gets specific: "Godin talks about emotional labor. For designers, this translates into three concrete gifts that AI fundamentally cannot provide:"
|
|
||||||
|
|
||||||
**1. Emotional Labor (Genuine Caring)**
|
|
||||||
|
|
||||||
- You genuinely care about the outcome
|
|
||||||
- You empathize with user frustration
|
|
||||||
- You feel the weight of your decisions
|
|
||||||
- You provide meaning, not just features
|
|
||||||
|
|
||||||
**2. User-Centric Creativity (Connecting Needs)**
|
|
||||||
|
|
||||||
- You understand WHY users feel frustrated
|
|
||||||
- You connect business goals to human needs
|
|
||||||
- You create experiences that feel right
|
|
||||||
- You make judgment calls that serve people
|
|
||||||
|
|
||||||
**3. The Gatekeeper Role (Protecting Quality)**
|
|
||||||
|
|
||||||
- You catch mistakes before they ship
|
|
||||||
- You evaluate if solutions make logical sense
|
|
||||||
- You ensure goals don't contradict needs
|
|
||||||
- You protect users from bad decisions
|
|
||||||
- You create the impactful meeting between business and user
|
|
||||||
|
|
||||||
The Skeptic: "So I'm not just making things look good. I'm the person who makes sure things make sense?"
|
|
||||||
|
|
||||||
The Advocate: "Exactly. You're the linchpin. The person who walks into chaos and creates order. The person who makes things happen."
|
|
||||||
|
|
||||||
**The Paradigm Shift:**
|
|
||||||
|
|
||||||
The Advocate brings it home: "Here's the transformation that Whiteport Design Studio enables. Your design thinking - your user-centric creativity - becomes the specification. You capture WHY, not just WHAT. You document your judgment calls. You make your emotional labor visible and actionable."
|
|
||||||
|
|
||||||
The paradigm shift: "Design becomes specification. Specification becomes product. Your creative thinking is preserved and amplified, not diluted and lost."
|
|
||||||
|
|
||||||
Your transformation:
|
|
||||||
|
|
||||||
- **From:** Creating mockups hoping developers understand your intent
|
|
||||||
- **To:** Capturing your design thinking in specifications that preserve your creative decisions
|
|
||||||
- **Result:** From hoping it works to knowing it will - because your thinking is captured
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. The 5 Dimensions - What Makes You Irreplaceable (7 min)
|
|
||||||
|
|
||||||
The Skeptic asks: "This sounds great in theory. But what's the actual skill that makes me irreplaceable? What am I doing that AI can't?"
|
|
||||||
|
|
||||||
**5-Dimensional Thinking:**
|
|
||||||
|
|
||||||
The Advocate explains: "Godin says linchpins 'connect disparate ideas.' For product designers, this means navigating five different dimensions of thinking at the same time. Most people can handle one or two dimensions. Irreplaceable designers navigate all five simultaneously."
|
|
||||||
|
|
||||||
The 5 dimensions:
|
|
||||||
|
|
||||||
1. **Business Existence (WHY)** - Understanding purpose and value creation
|
|
||||||
2. **Business Goals (SUCCESS)** - Connecting to metrics and impact
|
|
||||||
3. **Product Strategy (HOW)** - Making hard choices about features
|
|
||||||
4. **Target Groups (WHO)** - Empathy and understanding needs
|
|
||||||
5. **Technical Viability (FEASIBLE)** - Bridging design and implementation
|
|
||||||
|
|
||||||
**Real Example - Family Coordination App:**
|
|
||||||
|
|
||||||
The Advocate uses a concrete example: "Think about designing an app that helps families coordinate tasks. You need to understand:
|
|
||||||
|
|
||||||
- **WHY** - Why does this business exist? (Solving family conflict and stress)
|
|
||||||
- **SUCCESS** - What does success look like? (Kids complete tasks without nagging)
|
|
||||||
- **HOW** - What features serve that goal? (Visual task board, not text lists)
|
|
||||||
- **WHO** - Who are the users? (Busy parents and reluctant kids)
|
|
||||||
- **FEASIBLE** - What's technically possible? (Mobile app with family sharing)"
|
|
||||||
|
|
||||||
The Skeptic: "So I'm connecting all these dots simultaneously?"
|
|
||||||
|
|
||||||
The Advocate: "Exactly. Each dimension informs the others. Miss one, and your design falls apart. You need to hold all five in your head at once, making judgment calls that balance competing needs. AI can help you think through each dimension individually. But it cannot navigate all five simultaneously while providing the emotional labor of genuinely caring about the outcome. That's uniquely human. That's what makes designers irreplaceable."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. The Transformation - How WDS Guides You (7 min)
|
|
||||||
|
|
||||||
The Skeptic reflects: "I'm starting to see WHY I'm valuable. But HOW do I actually make this transformation? What's the practical path?"
|
|
||||||
|
|
||||||
**The Three-Part Transformation:**
|
|
||||||
|
|
||||||
The Advocate gets practical: "Whiteport Design Studio guides you through a three-part transformation. This isn't theory - it's a concrete process that builds your linchpin capabilities step by step."
|
|
||||||
|
|
||||||
**Part 1: Understanding Business and User Goals**
|
|
||||||
|
|
||||||
The Advocate explains: "First, you learn to deeply understand both sides of the equation. Not just surface-level - but the real WHY behind business existence and user needs. You learn to ask the right questions, dig deeper, and connect the dots between what the business needs to survive and what users need to thrive."
|
|
||||||
|
|
||||||
What you learn:
|
|
||||||
|
|
||||||
- How to uncover the real business purpose (not just features)
|
|
||||||
- How to understand user goals at a deep level (not just tasks)
|
|
||||||
- How to find the intersection where both are served
|
|
||||||
- How to document this understanding in a Project Brief and Trigger Map
|
|
||||||
|
|
||||||
The Skeptic: "So I become the person who truly understands the problem?"
|
|
||||||
|
|
||||||
The Advocate: "Exactly. You become the expert on WHY this product exists and WHO it serves."
|
|
||||||
|
|
||||||
**Part 2: Working in the IDE - Design as Specification**
|
|
||||||
|
|
||||||
The Advocate continues: "Second, you learn to work directly in the IDE - your development environment. This sounds technical, but it's actually liberating. You learn to capture your design thinking in text specifications that preserve your creative intent."
|
|
||||||
|
|
||||||
What you learn:
|
|
||||||
|
|
||||||
- How to write specifications that capture WHY, not just WHAT
|
|
||||||
- How to document your judgment calls and reasoning
|
|
||||||
- How to work with AI as your creative partner
|
|
||||||
- How to deliver in the form developers need (not just mockups)
|
|
||||||
|
|
||||||
The Skeptic: "So I'm learning to communicate my thinking clearly?"
|
|
||||||
|
|
||||||
The Advocate: "Yes. You're making your emotional labor visible and actionable. Your user-centric creativity becomes the specification that guides development."
|
|
||||||
|
|
||||||
**Part 3: Assuming Leadership - Serving Client and Developers**
|
|
||||||
|
|
||||||
The Advocate brings it home: "Third, you learn to assume leadership for the design process. Not leadership as in 'boss' - but leadership as in 'the person who makes things happen.' You become the linchpin who serves both the client and the developers with exactly what they need, in the form they need it."
|
|
||||||
|
|
||||||
What you learn:
|
|
||||||
|
|
||||||
- How to lead the design process (courage and curiosity, not confidence)
|
|
||||||
- How to serve the client with clarity on business value
|
|
||||||
- How to serve developers with specifications they can implement
|
|
||||||
- How to be the gatekeeper who ensures quality and logic
|
|
||||||
|
|
||||||
The Skeptic: "But I don't feel confident enough to lead."
|
|
||||||
|
|
||||||
The Advocate: "That's the point - you don't need confidence to start. You need courage and curiosity. Confidence comes later, after a couple of projects, when you know what you can deliver. You start with courage to try, curiosity to learn, and the willingness to look foolish. Confidence is earned through practice."
|
|
||||||
|
|
||||||
The Skeptic: "So I become indispensable by serving others?"
|
|
||||||
|
|
||||||
The Advocate: "Exactly. Godin says linchpins make themselves indispensable by being generous - by giving their unique gifts to serve others. You're not hoarding knowledge or creating dependencies. You're providing clarity that makes everyone more effective."
|
|
||||||
|
|
||||||
**WDS Guides You Through This:**
|
|
||||||
|
|
||||||
The Advocate emphasizes: "This course is your guide through this transformation. Module by module, you'll build these capabilities. You'll learn the frameworks, practice the skills, and through practice, develop the confidence that comes from knowing what you can deliver."
|
|
||||||
|
|
||||||
Your transformation:
|
|
||||||
|
|
||||||
- **Understanding** - Business and user goals at a deep level
|
|
||||||
- **Capability** - Working in the IDE, design as specification
|
|
||||||
- **Leadership** - Serving client and developers with what they need
|
|
||||||
- **Confidence** - Earned through practice, not required to start
|
|
||||||
- **Result:** The linchpin designer who makes things happen
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. Closing - Your Choice (3 min)
|
|
||||||
|
|
||||||
The Advocate brings it home: "You've just learned why you're irreplaceable as a designer. Not because of your tools. Not because of your aesthetic taste. Because of your ability to provide emotional labor - to genuinely care about the outcome. To walk into chaos and create order. To navigate five dimensions of thinking simultaneously. To provide user-centric creativity that gives products a soul."
|
|
||||||
|
|
||||||
The Skeptic, now transformed: "I see it now. I'm not competing with AI. I'm the gatekeeper. I'm the one who makes things happen. AI is my tool, not my replacement. But I have to be honest - I still feel like a beginner. I'm worried I'll look foolish."
|
|
||||||
|
|
||||||
The Advocate responds with warmth: "That's the most important thing you just said. It's hard to be a beginner. Everyone feels that way. But here's what I want you to understand - we're banding together as linchpin designers. This isn't about being the best or knowing everything. It's about serving clients and developers in an honest and sustainable way."
|
|
||||||
|
|
||||||
The Advocate continues: "Take the risk to look like a fool. Ask the 'stupid' questions. Share your struggles. Don't be afraid to reach out. The BMad community is here to help. We're all figuring this out together. That's what makes us strong."
|
|
||||||
|
|
||||||
The Skeptic: "So I'm not alone in this?"
|
|
||||||
|
|
||||||
The Advocate: "You're not alone. The question isn't whether AI will change design - it already has. The question is: are you a factory worker or a linchpin designer? Replaceable or indispensable? And will you join us in carving out this space together?"
|
|
||||||
|
|
||||||
The Skeptic: "I choose to be indispensable. And I choose community over isolation. What do I do right now?"
|
|
||||||
|
|
||||||
The Advocate gets fired up: "Right now? Right now you stop hiding. This is not the time to go into hibernation and hope it all just goes away. The AI era is here. The choice is made. You need to stand up with a mindset of:"
|
|
||||||
|
|
||||||
**I Can. I Do. I Will.**
|
|
||||||
**No matter what. No matter when. No matter how.**
|
|
||||||
|
|
||||||
The Advocate continues with passion: "Listen - designers half as smart as you have already made this transition. Now it's your turn. Let yourself be known! Stop waiting for the perfect moment. Stop waiting to feel ready. Stop waiting for permission."
|
|
||||||
|
|
||||||
**The Action:**
|
|
||||||
|
|
||||||
The Advocate: "Download an IDE. Install BMad. Select WDS in the installation. Build something. It doesn't matter what. Get moving and you will figure it out. That's how this works. You learn by doing. You build confidence through practice. You become a linchpin by acting like one."
|
|
||||||
|
|
||||||
The Skeptic: "Just... start? Even if I don't know what I'm doing?"
|
|
||||||
|
|
||||||
The Advocate: "Especially if you don't know what you're doing. That's courage. That's curiosity. That's the beginning of confidence. Module 02: Project Brief will guide you. The BMad Discord will support you. But you have to take the first step. Download. Install. Build. Move."
|
|
||||||
|
|
||||||
The Advocate brings it home: "The transformation continues, together. But it starts with you choosing to act. Right now. Today. Let yourself be known."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Resources to Include
|
|
||||||
|
|
||||||
At the end of the podcast, The Advocate should mention these resources:
|
|
||||||
|
|
||||||
**Key Concepts:**
|
|
||||||
|
|
||||||
- Seth Godin's book: "Linchpin: Are You Indispensable?" (2010)
|
|
||||||
- Bestselling author and marketing visionary Seth Godin
|
|
||||||
- Factory mindset vs linchpin mindset
|
|
||||||
- Emotional labor - what linchpins provide
|
|
||||||
- User-centric creativity - emotional labor for designers
|
|
||||||
- The paradigm shift: design becomes specification
|
|
||||||
- 5-dimensional thinking
|
|
||||||
|
|
||||||
**Next Steps:**
|
|
||||||
|
|
||||||
- Complete Module 02: Project Brief
|
|
||||||
- Apply 5-dimensional thinking to your current project
|
|
||||||
- Start capturing WHY in your design decisions
|
|
||||||
- Practice being the gatekeeper between business and user needs
|
|
||||||
|
|
||||||
**Community:**
|
|
||||||
|
|
||||||
- BMad Discord: Share your transformation journey
|
|
||||||
- GitHub Discussions: Ask questions about becoming a linchpin designer
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## NotebookLM Audio Generation Guidelines
|
|
||||||
|
|
||||||
**Tone:**
|
|
||||||
|
|
||||||
- Deeply empathetic about the shame and fear designers feel
|
|
||||||
- Honest and direct about the AI threat for factory workers
|
|
||||||
- Empowering and inspiring about the opportunity for linchpin designers
|
|
||||||
- Warm and welcoming about community support
|
|
||||||
- Use Seth Godin's concepts and language throughout
|
|
||||||
- Make the transformation feel urgent but achievable
|
|
||||||
- Balance fear (replaceable) with hope (indispensable) and community (not alone)
|
|
||||||
|
|
||||||
**Key messages to emphasize:**
|
|
||||||
|
|
||||||
- **The linchpin question** - are you a factory worker or a linchpin designer?
|
|
||||||
- **Emotional labor** - what linchpins provide (Seth Godin's concept from his 2010 book)
|
|
||||||
- **User-centric creativity** - the designer's irreplaceable gift (emotional labor in action)
|
|
||||||
- **Three irreplaceable gifts** - emotional labor, user-centric creativity, gatekeeper role
|
|
||||||
- **Walking into chaos and creating order** - what linchpins do
|
|
||||||
- **Designer as gatekeeper** - protecting quality, catching mistakes, ensuring logic
|
|
||||||
- **5-dimensional thinking** - navigating complexity that AI cannot handle
|
|
||||||
- **The paradigm shift** - design thinking becomes specification, preserving creative intent
|
|
||||||
- **The three-part transformation** - understanding, capability, leadership
|
|
||||||
- **Part 1: Understanding** - business and user goals at a deep level
|
|
||||||
- **Part 2: Capability** - working in the IDE, design as specification
|
|
||||||
- **Part 3: Leadership** - serving client and developers with what they need
|
|
||||||
- **WDS guides you** - concrete process, module by module
|
|
||||||
- **Community support** - we're banding together as linchpin designers
|
|
||||||
- **It's hard to be a beginner** - take the risk, the BMad community is here to help
|
|
||||||
- **No more hiding** - this is not the time to go into hibernation
|
|
||||||
- **I Can. I Do. I Will. No matter what, no matter when, no matter how.** - the mindset you need right now
|
|
||||||
- **Designers half as smart have already done this** - now it's your turn
|
|
||||||
- **Let yourself be known** - download, install, build, move
|
|
||||||
- **Action beats perfection** - get moving and you will figure it out
|
|
||||||
|
|
||||||
**Avoid:**
|
|
||||||
|
|
||||||
- Being too theoretical or academic
|
|
||||||
- Repeating doom/gloom from Getting Started module
|
|
||||||
- Focusing too much on AI threat instead of human value
|
|
||||||
- Making unrealistic promises or comparisons
|
|
||||||
- Making it sound like you have to be perfect or know everything
|
|
||||||
- Mentioning specific project examples or timelines
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Expected Output
|
|
||||||
|
|
||||||
A natural, engaging conversation that:
|
|
||||||
|
|
||||||
- **Focuses on human value** - what makes designers irreplaceable
|
|
||||||
- **Explains the linchpin concept** clearly using Seth Godin's framework
|
|
||||||
- **Emphasizes emotional labor** as the core of linchpin work
|
|
||||||
- **Details user-centric creativity** as the designer's irreplaceable gift
|
|
||||||
- **Explains the three irreplaceable gifts** - emotional labor, user-centric creativity, gatekeeper role
|
|
||||||
- **Teaches 5-dimensional thinking** as the practical skill that makes designers indispensable
|
|
||||||
- **Shows the practical HOW** - the three-part transformation WDS guides you through
|
|
||||||
- **Part 1:** Understanding business and user goals
|
|
||||||
- **Part 2:** Working in the IDE, design as specification
|
|
||||||
- **Part 3:** Assuming leadership, serving client and developers
|
|
||||||
- **Emphasizes WDS as your guide** - concrete process, step by step
|
|
||||||
- **Builds community** - you're not alone in this journey
|
|
||||||
- **Ends with powerful call to action** - no more hiding, time to act NOW
|
|
||||||
- **I Can. I Do. I Will.** - the mindset shift
|
|
||||||
- **Download. Install. Build. Move.** - concrete first steps
|
|
||||||
- Takes 30 minutes to listen to
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Alternative: Video Script
|
|
||||||
|
|
||||||
If generating video instead of audio, add these visual elements:
|
|
||||||
|
|
||||||
**On-screen text:**
|
|
||||||
|
|
||||||
- "Factory Worker or Linchpin Designer?"
|
|
||||||
- Seth Godin quote: "Linchpins walk into chaos and create order"
|
|
||||||
- "Emotional Labor: The Work of Genuinely Caring"
|
|
||||||
- "User-Centric Creativity: The Designer's Gift"
|
|
||||||
- "Three Irreplaceable Gifts"
|
|
||||||
- "The 5 Dimensions of Design Thinking"
|
|
||||||
- "The Paradigm Shift: Design Becomes Specification"
|
|
||||||
- "I Can. I Do. I Will."
|
|
||||||
- "No Matter What. No Matter When. No Matter How."
|
|
||||||
- "Let Yourself Be Known"
|
|
||||||
- "Download. Install. Build. Move."
|
|
||||||
- "Next: Module 02 - Project Brief"
|
|
||||||
|
|
||||||
**B-roll suggestions:**
|
|
||||||
|
|
||||||
- Designer walking into chaos, creating order
|
|
||||||
- Linchpin connecting disparate ideas
|
|
||||||
- Designer providing emotional labor - caring, empathizing
|
|
||||||
- User-centric creativity in action
|
|
||||||
- Designer as gatekeeper - evaluating, protecting quality
|
|
||||||
- 5 dimensions visualized as interconnected circles
|
|
||||||
- Designer navigating complexity simultaneously
|
|
||||||
- Transformation journey: uncertain → confident
|
|
||||||
- Community of linchpin designers
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Usage Tips
|
|
||||||
|
|
||||||
1. **Upload THIS SINGLE FILE** to NotebookLM - no other files needed
|
|
||||||
2. **Use the prompt exactly** as written for best results
|
|
||||||
3. **Generate multiple versions** and pick the best one
|
|
||||||
4. **Share the audio/video** with your team or community
|
|
||||||
5. **Iterate** - if the output isn't quite right, refine the prompt
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
After generating Module 01 content:
|
|
||||||
|
|
||||||
- Create NotebookLM prompt for Module 02: Project Brief
|
|
||||||
- Build prompts for all remaining modules
|
|
||||||
- Share in BMad Discord designer channel
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**This module transforms how designers think about their role in the AI era - from threatened to indispensable!** 🎯✨
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "LET'S GET TO WORK:" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "HOW TO ACTUALLY BECOME" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "IRREPLACEABLE AS A DESIGNER!" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "01 Foundation" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Woman piecing folders, files and puzzle pieces together in an intricate pattern on the table
|
|
||||||
- skip the tablet
|
|
||||||
- keep the carracter stylized as it is
|
|
||||||
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- Add subtle architectural elements (pillars, building blocks)
|
|
||||||
- Keep as in reference image
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: building blocks, structural diagrams
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
|
|
@ -1,731 +0,0 @@
|
||||||
1
|
|
||||||
00:00:00,240 --> 00:00:01,903
|
|
||||||
If you're a designer, you've probably
|
|
||||||
|
|
||||||
2
|
|
||||||
00:00:01,903 --> 00:00:03,843
|
|
||||||
felt that little knot in your stomach
|
|
||||||
|
|
||||||
3
|
|
||||||
00:00:03,843 --> 00:00:06,614
|
|
||||||
every time you see a new AI tool that can
|
|
||||||
|
|
||||||
4
|
|
||||||
00:00:06,614 --> 00:00:08,277
|
|
||||||
do something you thought was uniquely
|
|
||||||
|
|
||||||
5
|
|
||||||
00:00:08,277 --> 00:00:10,216
|
|
||||||
yours. But what if that anxiety is
|
|
||||||
|
|
||||||
6
|
|
||||||
00:00:10,216 --> 00:00:11,879
|
|
||||||
actually a signal not that you're
|
|
||||||
|
|
||||||
7
|
|
||||||
00:00:11,879 --> 00:00:13,819
|
|
||||||
becoming obsolete, but that your role is
|
|
||||||
|
|
||||||
8
|
|
||||||
00:00:13,819 --> 00:00:15,759
|
|
||||||
about to become more important than ever
|
|
||||||
|
|
||||||
9
|
|
||||||
00:00:15,759 --> 00:00:17,699
|
|
||||||
before? In this explainer, we're going to
|
|
||||||
|
|
||||||
10
|
|
||||||
00:00:17,699 --> 00:00:19,916
|
|
||||||
break down how to make that shift from
|
|
||||||
|
|
||||||
11
|
|
||||||
00:00:19,916 --> 00:00:21,314
|
|
||||||
feeling threatened. To becoming
|
|
||||||
|
|
||||||
12
|
|
||||||
00:00:21,314 --> 00:00:23,073
|
|
||||||
absolutely indispensable. This is the
|
|
||||||
|
|
||||||
13
|
|
||||||
00:00:23,073 --> 00:00:25,185
|
|
||||||
question, right? It's on every designer's
|
|
||||||
|
|
||||||
14
|
|
||||||
00:00:25,185 --> 00:00:27,1000
|
|
||||||
mind, and it's a totally valid fear. I
|
|
||||||
|
|
||||||
15
|
|
||||||
00:00:27,1000 --> 00:00:30,111
|
|
||||||
mean, we see AI generating entire
|
|
||||||
|
|
||||||
16
|
|
||||||
00:00:30,111 --> 00:00:31,871
|
|
||||||
interfaces, creating stunning images from
|
|
||||||
|
|
||||||
17
|
|
||||||
00:00:31,871 --> 00:00:34,686
|
|
||||||
a text prompt, and it's so easy to
|
|
||||||
|
|
||||||
18
|
|
||||||
00:00:34,686 --> 00:00:37,501
|
|
||||||
just wonder, OK, so where do I fit
|
|
||||||
|
|
||||||
19
|
|
||||||
00:00:37,501 --> 00:00:40,316
|
|
||||||
in now? But what if we're asking the
|
|
||||||
|
|
||||||
20
|
|
||||||
00:00:40,316 --> 00:00:42,237
|
|
||||||
wrong question?Entirely. The marketing
|
|
||||||
|
|
||||||
21
|
|
||||||
00:00:42,237 --> 00:00:44,492
|
|
||||||
genius Seth Godin dropped this incredible
|
|
||||||
|
|
||||||
22
|
|
||||||
00:00:44,492 --> 00:00:47,123
|
|
||||||
idea in his book Linchpin. He said
|
|
||||||
|
|
||||||
23
|
|
||||||
00:00:47,123 --> 00:00:49,753
|
|
||||||
that the real value isn't just in
|
|
||||||
|
|
||||||
24
|
|
||||||
00:00:49,753 --> 00:00:52,384
|
|
||||||
doing tasks, it's in walking into total
|
|
||||||
|
|
||||||
25
|
|
||||||
00:00:52,384 --> 00:00:55,014
|
|
||||||
chaos and creating order. And man, that
|
|
||||||
|
|
||||||
26
|
|
||||||
00:00:55,014 --> 00:00:57,269
|
|
||||||
one idea just flips the whole
|
|
||||||
|
|
||||||
27
|
|
||||||
00:00:57,269 --> 00:00:59,899
|
|
||||||
conversation about AI on its head. So
|
|
||||||
|
|
||||||
28
|
|
||||||
00:00:59,899 --> 00:01:02,530
|
|
||||||
this brings us to a fundamental choice.
|
|
||||||
|
|
||||||
29
|
|
||||||
00:01:02,750 --> 00:01:05,129
|
|
||||||
AI is already here, it's already changing
|
|
||||||
|
|
||||||
30
|
|
||||||
00:01:05,129 --> 00:01:07,508
|
|
||||||
the game. The real question isn't if
|
|
||||||
|
|
||||||
31
|
|
||||||
00:01:07,508 --> 00:01:09,886
|
|
||||||
things will change, it's how are you
|
|
||||||
|
|
||||||
32
|
|
||||||
00:01:09,886 --> 00:01:12,605
|
|
||||||
going to change with them? What kind of
|
|
||||||
|
|
||||||
33
|
|
||||||
00:01:12,605 --> 00:01:15,324
|
|
||||||
designer are you going to choose to be?
|
|
||||||
|
|
||||||
34
|
|
||||||
00:01:15,324 --> 00:01:17,363
|
|
||||||
Golden lays out 2 completely different
|
|
||||||
|
|
||||||
35
|
|
||||||
00:01:17,363 --> 00:01:19,742
|
|
||||||
paths. On one side you've got the
|
|
||||||
|
|
||||||
36
|
|
||||||
00:01:19,742 --> 00:01:21,781
|
|
||||||
replaceable worker. This is someone who
|
|
||||||
|
|
||||||
37
|
|
||||||
00:01:21,781 --> 00:01:23,225
|
|
||||||
follows instructions creates. Predictable
|
|
||||||
|
|
||||||
38
|
|
||||||
00:01:23,225 --> 00:01:25,982
|
|
||||||
stuff, and let's be real, AI is getting
|
|
||||||
|
|
||||||
39
|
|
||||||
00:01:25,982 --> 00:01:28,739
|
|
||||||
scary good at that. But then there's the
|
|
||||||
|
|
||||||
40
|
|
||||||
00:01:28,739 --> 00:01:30,462
|
|
||||||
other path, the indispensable linchpin.
|
|
||||||
|
|
||||||
41
|
|
||||||
00:01:30,462 --> 00:01:32,875
|
|
||||||
This is the person who doesn't just
|
|
||||||
|
|
||||||
42
|
|
||||||
00:01:32,875 --> 00:01:35,632
|
|
||||||
follow the map. They draw the map, they
|
|
||||||
|
|
||||||
43
|
|
||||||
00:01:35,632 --> 00:01:37,700
|
|
||||||
invent solutions, they thrive in chaos,
|
|
||||||
|
|
||||||
44
|
|
||||||
00:01:37,700 --> 00:01:39,423
|
|
||||||
and maybe most importantly, they
|
|
||||||
|
|
||||||
45
|
|
||||||
00:01:39,423 --> 00:01:41,836
|
|
||||||
genuinely care. OK, so this whole factory
|
|
||||||
|
|
||||||
46
|
|
||||||
00:01:41,836 --> 00:01:44,275
|
|
||||||
versus lynchpin idea. Sounds great in a
|
|
||||||
|
|
||||||
47
|
|
||||||
00:01:44,275 --> 00:01:46,866
|
|
||||||
book, but what does it actually mean in
|
|
||||||
|
|
||||||
48
|
|
||||||
00:01:46,866 --> 00:01:49,456
|
|
||||||
the real world of design? What does this
|
|
||||||
|
|
||||||
49
|
|
||||||
00:01:49,456 --> 00:01:51,399
|
|
||||||
look like in your day-to-day projects?
|
|
||||||
|
|
||||||
50
|
|
||||||
00:01:51,399 --> 00:01:53,990
|
|
||||||
Let's dig in. The heart of lynchpin work,
|
|
||||||
|
|
||||||
51
|
|
||||||
00:01:53,990 --> 00:01:56,256
|
|
||||||
according to Godin, is something he calls
|
|
||||||
|
|
||||||
52
|
|
||||||
00:01:56,256 --> 00:01:58,199
|
|
||||||
emotional labor. Now, this isn't about
|
|
||||||
|
|
||||||
53
|
|
||||||
00:01:58,199 --> 00:02:00,790
|
|
||||||
being weepy at your desk. It's the hard,
|
|
||||||
|
|
||||||
54
|
|
||||||
00:02:00,790 --> 00:02:02,732
|
|
||||||
often invisible work of empathy. It's
|
|
||||||
|
|
||||||
55
|
|
||||||
00:02:02,732 --> 00:02:04,903
|
|
||||||
about, really. Connecting with people and
|
|
||||||
|
|
||||||
56
|
|
||||||
00:02:04,903 --> 00:02:07,083
|
|
||||||
truly, deeply caring about the final
|
|
||||||
|
|
||||||
57
|
|
||||||
00:02:07,083 --> 00:02:09,989
|
|
||||||
outcome. So what is emotional labor for a
|
|
||||||
|
|
||||||
58
|
|
||||||
00:02:09,989 --> 00:02:11,805
|
|
||||||
designer? It's user centric creativity.
|
|
||||||
|
|
||||||
59
|
|
||||||
00:02:11,805 --> 00:02:14,348
|
|
||||||
That's it. It's taking that genuine care
|
|
||||||
|
|
||||||
60
|
|
||||||
00:02:14,348 --> 00:02:16,891
|
|
||||||
and putting it into action. It's that
|
|
||||||
|
|
||||||
61
|
|
||||||
00:02:16,891 --> 00:02:19,434
|
|
||||||
uniquely human spark that lets you bridge
|
|
||||||
|
|
||||||
62
|
|
||||||
00:02:19,434 --> 00:02:22,340
|
|
||||||
what a business needs with what our real
|
|
||||||
|
|
||||||
63
|
|
||||||
00:02:22,340 --> 00:02:24,326
|
|
||||||
person actually wants. Creating an
|
|
||||||
|
|
||||||
64
|
|
||||||
00:02:24,326 --> 00:02:26,263
|
|
||||||
experience that just feels right. You
|
|
||||||
|
|
||||||
65
|
|
||||||
00:02:26,263 --> 00:02:28,845
|
|
||||||
know an AI can generate 1000 layouts but
|
|
||||||
|
|
||||||
66
|
|
||||||
00:02:28,845 --> 00:02:31,105
|
|
||||||
it cannot genuinely care. Not for real.
|
|
||||||
|
|
||||||
67
|
|
||||||
00:02:31,105 --> 00:02:34,010
|
|
||||||
And this, this is where we get to the
|
|
||||||
|
|
||||||
68
|
|
||||||
00:02:34,010 --> 00:02:36,270
|
|
||||||
good stuff. Your true value isn't your
|
|
||||||
|
|
||||||
69
|
|
||||||
00:02:36,270 --> 00:02:38,852
|
|
||||||
mastery of figma or your ability to push
|
|
||||||
|
|
||||||
70
|
|
||||||
00:02:38,852 --> 00:02:41,435
|
|
||||||
pixels around a screen. It's in the gifts
|
|
||||||
|
|
||||||
71
|
|
||||||
00:02:41,435 --> 00:02:44,017
|
|
||||||
you bring to the table that are uniquely
|
|
||||||
|
|
||||||
72
|
|
||||||
00:02:44,017 --> 00:02:46,858
|
|
||||||
human. The things that I, by its
|
|
||||||
|
|
||||||
73
|
|
||||||
00:02:46,858 --> 00:02:49,076
|
|
||||||
very design, just can't copy. Let's
|
|
||||||
|
|
||||||
74
|
|
||||||
00:02:49,076 --> 00:02:51,293
|
|
||||||
breakdown exactly what those are. It
|
|
||||||
|
|
||||||
75
|
|
||||||
00:02:51,293 --> 00:02:54,250
|
|
||||||
really boils down to three key gifts that
|
|
||||||
|
|
||||||
76
|
|
||||||
00:02:54,250 --> 00:02:56,099
|
|
||||||
make you irreplaceable. First, that
|
|
||||||
|
|
||||||
77
|
|
||||||
00:02:56,099 --> 00:02:58,686
|
|
||||||
emotional labor we just talked about that
|
|
||||||
|
|
||||||
78
|
|
||||||
00:02:58,686 --> 00:03:00,904
|
|
||||||
genuine sense of caring. Second, user
|
|
||||||
|
|
||||||
79
|
|
||||||
00:03:00,904 --> 00:03:03,121
|
|
||||||
centric creativity. Your ability to be
|
|
||||||
|
|
||||||
80
|
|
||||||
00:03:03,121 --> 00:03:04,988
|
|
||||||
the ultimate connector between. Business
|
|
||||||
|
|
||||||
81
|
|
||||||
00:03:04,988 --> 00:03:07,533
|
|
||||||
goals and human needs. And 3rd, and this
|
|
||||||
|
|
||||||
82
|
|
||||||
00:03:07,533 --> 00:03:10,078
|
|
||||||
is a big one, you have the gatekeeper
|
|
||||||
|
|
||||||
83
|
|
||||||
00:03:10,078 --> 00:03:12,304
|
|
||||||
role. You're the one who protects the
|
|
||||||
|
|
||||||
84
|
|
||||||
00:03:12,304 --> 00:03:14,213
|
|
||||||
user. You're the quality control. You're
|
|
||||||
|
|
||||||
85
|
|
||||||
00:03:14,213 --> 00:03:16,758
|
|
||||||
the one who asks, does this actually make
|
|
||||||
|
|
||||||
86
|
|
||||||
00:03:16,758 --> 00:03:19,302
|
|
||||||
sense? This chart does a fantastic job of
|
|
||||||
|
|
||||||
87
|
|
||||||
00:03:19,302 --> 00:03:20,893
|
|
||||||
showing the incredible complexity. You're
|
|
||||||
|
|
||||||
88
|
|
||||||
00:03:20,893 --> 00:03:22,801
|
|
||||||
managing all the time. You're constantly
|
|
||||||
|
|
||||||
89
|
|
||||||
00:03:22,801 --> 00:03:25,172
|
|
||||||
thinking in five dimensions at once. Why
|
|
||||||
|
|
||||||
90
|
|
||||||
00:03:25,172 --> 00:03:27,215
|
|
||||||
does this company even exist? What does
|
|
||||||
|
|
||||||
91
|
|
||||||
00:03:27,215 --> 00:03:29,258
|
|
||||||
success look like? How is this product
|
|
||||||
|
|
||||||
92
|
|
||||||
00:03:29,258 --> 00:03:31,885
|
|
||||||
going to get us there? Who are we even
|
|
||||||
|
|
||||||
93
|
|
||||||
00:03:31,885 --> 00:03:33,928
|
|
||||||
building this for? And is it even
|
|
||||||
|
|
||||||
94
|
|
||||||
00:03:33,928 --> 00:03:35,680
|
|
||||||
technically possible? An AI can analyze
|
|
||||||
|
|
||||||
95
|
|
||||||
00:03:35,680 --> 00:03:38,307
|
|
||||||
these pieces 1 by 1, sure, but it can't
|
|
||||||
|
|
||||||
96
|
|
||||||
00:03:38,307 --> 00:03:40,350
|
|
||||||
hold them all in this delicate balance
|
|
||||||
|
|
||||||
97
|
|
||||||
00:03:40,350 --> 00:03:42,393
|
|
||||||
while also bringing that human element of
|
|
||||||
|
|
||||||
98
|
|
||||||
00:03:42,393 --> 00:03:44,728
|
|
||||||
caring to the table. That right there is
|
|
||||||
|
|
||||||
99
|
|
||||||
00:03:44,728 --> 00:03:46,674
|
|
||||||
your. Superpower OK, this slide gets
|
|
||||||
|
|
||||||
100
|
|
||||||
00:03:46,674 --> 00:03:49,526
|
|
||||||
right to the heart of the shift you have
|
|
||||||
|
|
||||||
101
|
|
||||||
00:03:49,526 --> 00:03:51,743
|
|
||||||
to make. We're moving away from just
|
|
||||||
|
|
||||||
102
|
|
||||||
00:03:51,743 --> 00:03:53,644
|
|
||||||
making pretty pictures and hoping the
|
|
||||||
|
|
||||||
103
|
|
||||||
00:03:53,644 --> 00:03:55,545
|
|
||||||
developers can read our minds. For
|
|
||||||
|
|
||||||
104
|
|
||||||
00:03:55,545 --> 00:03:57,763
|
|
||||||
instance, instead of just handing over a
|
|
||||||
|
|
||||||
105
|
|
||||||
00:03:57,763 --> 00:03:59,347
|
|
||||||
static mockup, you deliver a
|
|
||||||
|
|
||||||
106
|
|
||||||
00:03:59,347 --> 00:04:00,614
|
|
||||||
specification that actually preserves
|
|
||||||
|
|
||||||
107
|
|
||||||
00:04:00,614 --> 00:04:02,832
|
|
||||||
your intent. You say this password field
|
|
||||||
|
|
||||||
108
|
|
||||||
00:04:02,832 --> 00:04:05,050
|
|
||||||
must have real time strength feedback to.
|
|
||||||
|
|
||||||
109
|
|
||||||
00:04:05,130 --> 00:04:06,722
|
|
||||||
Encourage strong passwords because our
|
|
||||||
|
|
||||||
110
|
|
||||||
00:04:06,722 --> 00:04:08,951
|
|
||||||
research showed security as a top user
|
|
||||||
|
|
||||||
111
|
|
||||||
00:04:08,951 --> 00:04:11,180
|
|
||||||
concern. You see the difference? You go
|
|
||||||
|
|
||||||
112
|
|
||||||
00:04:11,180 --> 00:04:13,727
|
|
||||||
from just hoping it works to knowing it
|
|
||||||
|
|
||||||
113
|
|
||||||
00:04:13,727 --> 00:04:16,274
|
|
||||||
will work. Alright, so we've talked a lot
|
|
||||||
|
|
||||||
114
|
|
||||||
00:04:16,274 --> 00:04:19,140
|
|
||||||
about the what and the why, but I'm sure
|
|
||||||
|
|
||||||
115
|
|
||||||
00:04:19,140 --> 00:04:21,687
|
|
||||||
you're thinking OK great, but how? How do
|
|
||||||
|
|
||||||
116
|
|
||||||
00:04:21,687 --> 00:04:23,916
|
|
||||||
I actually do this? That's where the
|
|
||||||
|
|
||||||
117
|
|
||||||
00:04:23,916 --> 00:04:26,041
|
|
||||||
Whiteboard Design Studio or. D Framework
|
|
||||||
|
|
||||||
118
|
|
||||||
00:04:26,041 --> 00:04:28,806
|
|
||||||
comes in. Think of it as your concrete
|
|
||||||
|
|
||||||
119
|
|
||||||
00:04:28,806 --> 00:04:31,571
|
|
||||||
path, your how to guide for making this
|
|
||||||
|
|
||||||
120
|
|
||||||
00:04:31,571 --> 00:04:33,299
|
|
||||||
transformation happen. It's really a
|
|
||||||
|
|
||||||
121
|
|
||||||
00:04:33,299 --> 00:04:35,372
|
|
||||||
three-part journey. First you go deeper,
|
|
||||||
|
|
||||||
122
|
|
||||||
00:04:35,372 --> 00:04:37,791
|
|
||||||
you truly understand the core purpose of
|
|
||||||
|
|
||||||
123
|
|
||||||
00:04:37,791 --> 00:04:40,211
|
|
||||||
the business and the user's goals. Then
|
|
||||||
|
|
||||||
124
|
|
||||||
00:04:40,211 --> 00:04:42,630
|
|
||||||
you build the practical skills to capture
|
|
||||||
|
|
||||||
125
|
|
||||||
00:04:42,630 --> 00:04:44,703
|
|
||||||
your thinking as a clear specification,
|
|
||||||
|
|
||||||
126
|
|
||||||
00:04:44,703 --> 00:04:46,672
|
|
||||||
maybe even working. Right inside the
|
|
||||||
|
|
||||||
127
|
|
||||||
00:04:46,672 --> 00:04:48,108
|
|
||||||
development environment. And finally, you
|
|
||||||
|
|
||||||
128
|
|
||||||
00:04:48,108 --> 00:04:50,119
|
|
||||||
step into a leadership role. And that's
|
|
||||||
|
|
||||||
129
|
|
||||||
00:04:50,119 --> 00:04:52,417
|
|
||||||
not about being a boss. It's about being
|
|
||||||
|
|
||||||
130
|
|
||||||
00:04:52,417 --> 00:04:54,427
|
|
||||||
a guide. A servant leader who gives
|
|
||||||
|
|
||||||
131
|
|
||||||
00:04:54,427 --> 00:04:56,438
|
|
||||||
everyone the clarity they need to do
|
|
||||||
|
|
||||||
132
|
|
||||||
00:04:56,438 --> 00:04:58,736
|
|
||||||
their best work. And hey, if that word
|
|
||||||
|
|
||||||
133
|
|
||||||
00:04:58,736 --> 00:05:00,172
|
|
||||||
leadership sounds a little intimidating,
|
|
||||||
|
|
||||||
134
|
|
||||||
00:05:00,172 --> 00:05:01,609
|
|
||||||
just remember this confidence isn't
|
|
||||||
|
|
||||||
135
|
|
||||||
00:05:01,609 --> 00:05:03,619
|
|
||||||
something you need to start. It's what
|
|
||||||
|
|
||||||
136
|
|
||||||
00:05:03,619 --> 00:05:06,354
|
|
||||||
you get as a result of starting. All
|
|
||||||
|
|
||||||
137
|
|
||||||
00:05:06,354 --> 00:05:09,265
|
|
||||||
you need on day one is the courage to
|
|
||||||
|
|
||||||
138
|
|
||||||
00:05:09,265 --> 00:05:11,530
|
|
||||||
try something new and the curiosity to
|
|
||||||
|
|
||||||
139
|
|
||||||
00:05:11,530 --> 00:05:13,472
|
|
||||||
see what happens. The confidence will
|
|
||||||
|
|
||||||
140
|
|
||||||
00:05:13,472 --> 00:05:16,060
|
|
||||||
come, I promise. O here we are. The
|
|
||||||
|
|
||||||
141
|
|
||||||
00:05:16,060 --> 00:05:18,648
|
|
||||||
theory is clear, the path is laid out.
|
|
||||||
|
|
||||||
142
|
|
||||||
00:05:18,648 --> 00:05:21,237
|
|
||||||
Now it really all comes down to one
|
|
||||||
|
|
||||||
143
|
|
||||||
00:05:21,237 --> 00:05:23,502
|
|
||||||
thing, a choice, your choice. You know
|
|
||||||
|
|
||||||
144
|
|
||||||
00:05:23,502 --> 00:05:26,090
|
|
||||||
the temptation to just wait and see it's.
|
|
||||||
|
|
||||||
145
|
|
||||||
00:05:26,160 --> 00:05:28,940
|
|
||||||
Wrong to kind of hope this whole AI
|
|
||||||
|
|
||||||
146
|
|
||||||
00:05:28,940 --> 00:05:31,719
|
|
||||||
thing just blows over. But the AI era
|
|
||||||
|
|
||||||
147
|
|
||||||
00:05:31,719 --> 00:05:34,499
|
|
||||||
is here. That ship has sailed. Hiding is
|
|
||||||
|
|
||||||
148
|
|
||||||
00:05:34,499 --> 00:05:37,279
|
|
||||||
not a strategy. The only winning move is
|
|
||||||
|
|
||||||
149
|
|
||||||
00:05:37,279 --> 00:05:40,058
|
|
||||||
to engage. This is the kind of mindset
|
|
||||||
|
|
||||||
150
|
|
||||||
00:05:40,058 --> 00:05:42,838
|
|
||||||
that's going to carry you through. It's a
|
|
||||||
|
|
||||||
151
|
|
||||||
00:05:42,838 --> 00:05:44,923
|
|
||||||
personal commitment to action. It's a
|
|
||||||
|
|
||||||
152
|
|
||||||
00:05:44,923 --> 00:05:47,513
|
|
||||||
belief in your own power. Define your
|
|
||||||
|
|
||||||
153
|
|
||||||
00:05:47,513 --> 00:05:50,182
|
|
||||||
value in this brand new world. It's
|
|
||||||
|
|
||||||
154
|
|
||||||
00:05:50,182 --> 00:05:52,470
|
|
||||||
about consciously deciding right now to
|
|
||||||
|
|
||||||
155
|
|
||||||
00:05:52,470 --> 00:05:54,758
|
|
||||||
become indispensable. When you boil it
|
|
||||||
|
|
||||||
156
|
|
||||||
00:05:54,758 --> 00:05:57,428
|
|
||||||
all down, it comes to this so
|
|
||||||
|
|
||||||
157
|
|
||||||
00:05:57,428 --> 00:05:59,716
|
|
||||||
simple. You can't wait for permission.
|
|
||||||
|
|
||||||
158
|
|
||||||
00:05:59,716 --> 00:06:02,385
|
|
||||||
You can't wait for the perfect moment.
|
|
||||||
|
|
||||||
159
|
|
||||||
00:06:02,385 --> 00:06:05,055
|
|
||||||
The only way forward is to start
|
|
||||||
|
|
||||||
160
|
|
||||||
00:06:05,055 --> 00:06:07,087
|
|
||||||
building. Building your skills. Building
|
|
||||||
|
|
||||||
161
|
|
||||||
00:06:07,087 --> 00:06:09,107
|
|
||||||
your projects, Building your future O
|
|
||||||
|
|
||||||
162
|
|
||||||
00:06:09,107 --> 00:06:11,465
|
|
||||||
What does that actually look like today?
|
|
||||||
|
|
||||||
163
|
|
||||||
00:06:11,465 --> 00:06:14,159
|
|
||||||
Here are a few simple first steps. Get
|
|
||||||
|
|
||||||
164
|
|
||||||
00:06:14,159 --> 00:06:16,180
|
|
||||||
comfortable. In a developer's world, that
|
|
||||||
|
|
||||||
165
|
|
||||||
00:06:16,180 --> 00:06:18,201
|
|
||||||
can mean downloading an IDE, an
|
|
||||||
|
|
||||||
166
|
|
||||||
00:06:18,201 --> 00:06:19,548
|
|
||||||
integrated development environment. It's
|
|
||||||
|
|
||||||
167
|
|
||||||
00:06:19,548 --> 00:06:21,232
|
|
||||||
basically just the workshop where
|
|
||||||
|
|
||||||
168
|
|
||||||
00:06:21,232 --> 00:06:22,915
|
|
||||||
programmers build software. Then maybe
|
|
||||||
|
|
||||||
169
|
|
||||||
00:06:22,915 --> 00:06:25,273
|
|
||||||
explore tools like Blind that help you
|
|
||||||
|
|
||||||
170
|
|
||||||
00:06:25,273 --> 00:06:27,466
|
|
||||||
turn your design thinking. Directly into
|
|
||||||
|
|
||||||
171
|
|
||||||
00:06:27,466 --> 00:06:29,583
|
|
||||||
code. But honestly, the most important
|
|
||||||
|
|
||||||
172
|
|
||||||
00:06:29,583 --> 00:06:32,406
|
|
||||||
thing is just to start. Get moving, Build
|
|
||||||
|
|
||||||
173
|
|
||||||
00:06:32,406 --> 00:06:34,170
|
|
||||||
something, anything, you'll learn by
|
|
||||||
|
|
||||||
174
|
|
||||||
00:06:34,170 --> 00:06:36,993
|
|
||||||
doing. That is the whole key. The big
|
|
||||||
|
|
||||||
175
|
|
||||||
00:06:36,993 --> 00:06:39,110
|
|
||||||
take away here is that your
|
|
||||||
|
|
||||||
176
|
|
||||||
00:06:39,110 --> 00:06:40,521
|
|
||||||
transformation from threatened to
|
|
||||||
|
|
||||||
177
|
|
||||||
00:06:40,521 --> 00:06:42,639
|
|
||||||
indispensable. It doesn't start when you
|
|
||||||
|
|
||||||
178
|
|
||||||
00:06:42,639 --> 00:06:45,109
|
|
||||||
feel ready, it starts the exact moment
|
|
||||||
|
|
||||||
179
|
|
||||||
00:06:45,109 --> 00:06:47,694
|
|
||||||
you decide to act. The tools, the
|
|
||||||
|
|
||||||
180
|
|
||||||
00:06:47,694 --> 00:06:49,542
|
|
||||||
resources, they're all out there just
|
|
||||||
|
|
||||||
181
|
|
||||||
00:06:49,542 --> 00:06:51,698
|
|
||||||
waiting for you. So the only question
|
|
||||||
|
|
||||||
182
|
|
||||||
00:06:51,698 --> 00:06:54,162
|
|
||||||
left is, will you take that first step?
|
|
||||||
|
|
||||||
183
|
|
||||||
00:06:54,162 --> 00:06:56,010
|
|
||||||
Will you let yourself be known?
|
|
||||||
|
|
@ -1,342 +0,0 @@
|
||||||
# NotebookLM Prompt: Module 02 - Installation & Setup
|
|
||||||
|
|
||||||
**Use this prompt to generate audio/video content for Module 02: Installation & Setup**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
**This is a single, self-contained prompt file.**
|
|
||||||
|
|
||||||
Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prompt
|
|
||||||
|
|
||||||
Create an engaging 30-minute podcast conversation between two hosts about Module 02 of the Whiteport Design Studio (WDS) course: Installation & Setup.
|
|
||||||
|
|
||||||
**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.**
|
|
||||||
|
|
||||||
**Host 1 (The Nervous Beginner):** A designer who's never used GitHub, Git, or IDE tools. Worried about technical setup, afraid of making mistakes, needs reassurance and clear guidance.
|
|
||||||
|
|
||||||
**Host 2 (The Patient Guide - Mimir's Voice):** An experienced designer who remembers being a beginner. Warm, encouraging, patient. Explains complex concepts simply and celebrates small wins.
|
|
||||||
|
|
||||||
**Conversation structure:**
|
|
||||||
|
|
||||||
### 1. Opening (3 min) - You Can Do This
|
|
||||||
|
|
||||||
The Nervous Beginner: "I'm excited about WDS, but honestly... I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up and not be able to fix it. Is this course even for someone like me?"
|
|
||||||
|
|
||||||
The Guide: "That's exactly who this course is FOR! Let me tell you something important: every single experienced designer you admire was once exactly where you are now. Uncertain. Nervous. Wondering if they could do it. And you know what? They all figured it out. And so will you. Because we're going to walk through this together, step by step, celebrating every small win."
|
|
||||||
|
|
||||||
The Guide continues: "Here's the beautiful truth: modern tools have gotten so good that most of what used to be 'technical' is now just... clicking buttons. GitHub? It's basically cloud storage with a time machine. An IDE? It's like Microsoft Word, but for design files. Git? Your IDE installs it for you automatically. You're not learning to code. You're just... getting set up."
|
|
||||||
|
|
||||||
Introduce the module: "In the next 30 minutes, you'll go from 'I don't know what any of this means' to 'Oh! That's actually pretty simple.' We'll cover GitHub, IDEs, cloning repositories, and meeting Mimir - your WDS guide. And I promise: if you can use a computer and follow instructions, you can do this."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. Lesson 01 - Git Setup (8 min)
|
|
||||||
|
|
||||||
The Nervous Beginner: "Okay, let's start. What even IS Git? And GitHub? Are they the same thing?"
|
|
||||||
|
|
||||||
**Understanding Git and GitHub (2 min)**
|
|
||||||
|
|
||||||
The Guide: "Great question! They're related but different. Git is the sync engine - the behind-the-scenes tool that tracks changes. GitHub is the website - your professional cloud storage. Think of Git as the engine, GitHub as the car."
|
|
||||||
|
|
||||||
The Guide continues: "Here's what GitHub does for you: Every time you save your work, it's backed up. You can go back to any previous version. You can work with other designers. You can share with clients or developers. It's like Google Drive, but specifically built for project files with a complete history."
|
|
||||||
|
|
||||||
**Creating Your GitHub Account (3 min)**
|
|
||||||
|
|
||||||
The Nervous Beginner: "That actually makes sense! So how do I get started?"
|
|
||||||
|
|
||||||
The Guide walks through:
|
|
||||||
- Go to github.com and sign up
|
|
||||||
- Choose a professional username (you might share this with clients!)
|
|
||||||
- Verify your email
|
|
||||||
- "See? You already did something technical! That was easy, right?"
|
|
||||||
|
|
||||||
**Repository Structure Decision (3 min)**
|
|
||||||
|
|
||||||
The Nervous Beginner: "Now what? I need to create a... repository?"
|
|
||||||
|
|
||||||
The Guide: "Yes! A repository is just a folder that GitHub tracks. But here's the important part: how you NAME it determines your structure. This is a strategic decision."
|
|
||||||
|
|
||||||
Explain the two options:
|
|
||||||
- **Single repo** (`my-project`): Specs and code together - for small teams, building yourself
|
|
||||||
- **Separate specs repo** (`my-project-specs`): Specs only - for corporate, many developers
|
|
||||||
|
|
||||||
The Guide: "Most beginners should use single repo. It's simpler. You can always split later if needed."
|
|
||||||
|
|
||||||
Walk through:
|
|
||||||
- Name your repository based on your choice
|
|
||||||
- Add a description
|
|
||||||
- Public (portfolio) or Private (client work)
|
|
||||||
- Check 'Initialize with README'
|
|
||||||
- Create!
|
|
||||||
|
|
||||||
The Guide celebrates: "Look at that! You just created your first GitHub repository. You're officially a GitHub user. How does that feel?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. Lesson 02 - IDE Installation (6 min)
|
|
||||||
|
|
||||||
The Nervous Beginner: "Okay, that wasn't scary at all! What's next?"
|
|
||||||
|
|
||||||
**What is an IDE? (2 min)**
|
|
||||||
|
|
||||||
The Guide: "Now we install your workspace. An IDE - Integrated Development Environment - sounds technical, but it's just... your workspace. Like Microsoft Word is your workspace for documents, Cursor is your workspace for design specifications."
|
|
||||||
|
|
||||||
The Guide continues: "For WDS, I recommend Cursor. It's built for AI-augmented work. But VS Code works great too if you prefer. Both are free."
|
|
||||||
|
|
||||||
**Installation Process (2 min)**
|
|
||||||
|
|
||||||
Walk through:
|
|
||||||
- Download from cursor.sh
|
|
||||||
- Install (just click through like any app)
|
|
||||||
- First launch: Choose theme (Light or Dark - totally personal preference!)
|
|
||||||
- Sign in with GitHub (makes everything easier)
|
|
||||||
- Install recommended extensions
|
|
||||||
|
|
||||||
The Nervous Beginner: "Wait, that's it? I just... downloaded and installed it like any other app?"
|
|
||||||
|
|
||||||
The Guide: "Exactly! See? Not scary. You've been installing apps your whole life. This is the same thing."
|
|
||||||
|
|
||||||
**Terminal Verification (2 min)**
|
|
||||||
|
|
||||||
The Guide: "One more thing. Press Ctrl+` (or Cmd+` on Mac). See that panel that appears at the bottom? That's called a terminal. It's how you'll talk to Git."
|
|
||||||
|
|
||||||
The Nervous Beginner: "A terminal sounds scary..."
|
|
||||||
|
|
||||||
The Guide: "I know! But here's the secret: you'll mostly just copy and paste commands. Think of it like a command line where you type instructions instead of clicking buttons. And we'll give you every command. You'll see - it's actually pretty satisfying!"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. Lesson 03 - Git Repository Cloning (5 min)
|
|
||||||
|
|
||||||
The Nervous Beginner: "Alright, I have GitHub, I have an IDE. Now what?"
|
|
||||||
|
|
||||||
**Understanding Cloning (2 min)**
|
|
||||||
|
|
||||||
The Guide: "Now we 'clone' your repository. Clone just means 'make a copy on your computer.' Your project lives in GitHub (the cloud). Now we bring it down to your computer so you can work on it."
|
|
||||||
|
|
||||||
The Guide explains: "When you clone, you're creating a local copy that stays in sync with GitHub. Work on your computer, save to GitHub. It's like Dropbox sync, but with full version history."
|
|
||||||
|
|
||||||
**The Cloning Process (3 min)**
|
|
||||||
|
|
||||||
Walk through:
|
|
||||||
- Create a Projects folder (nice organized home for everything)
|
|
||||||
- Get your repository URL from GitHub (click Code → copy)
|
|
||||||
- Open terminal in Cursor
|
|
||||||
- Type: `git clone [paste URL]`
|
|
||||||
- Watch it download!
|
|
||||||
|
|
||||||
The Guide: "And here's the magic moment - Cursor will say 'Install Git?' if you don't have it. You click Install. It installs automatically. And that's it! Git is set up."
|
|
||||||
|
|
||||||
The Nervous Beginner: "Wait, so I DON'T have to manually install Git?"
|
|
||||||
|
|
||||||
The Guide: "Nope! The IDE handles it. See? Modern tools take care of you. Now open your project folder in Cursor - File → Open Folder. And there's your project!"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. Lesson 04 - WDS Project Initialization (6 min)
|
|
||||||
|
|
||||||
The Nervous Beginner: "I can see my project! This is actually exciting!"
|
|
||||||
|
|
||||||
**Adding WDS to Your Workspace (2 min)**
|
|
||||||
|
|
||||||
The Guide: "Now the fun part - we add the WDS methodology to your workspace. WDS lives separately from your project, so you can use it across multiple projects."
|
|
||||||
|
|
||||||
Walk through:
|
|
||||||
- Clone WDS repository (same as you just did!)
|
|
||||||
- Add it to workspace (File → Add Folder to Workspace)
|
|
||||||
- Now you see both: your-project AND whiteport-design-studio
|
|
||||||
|
|
||||||
The Nervous Beginner: "So WDS is like... a reference library that lives next to my project?"
|
|
||||||
|
|
||||||
The Guide: "Perfect analogy! It contains all the agents, workflows, and training. You reference it, but your actual work stays in your project."
|
|
||||||
|
|
||||||
**Creating the Docs Structure (2 min)**
|
|
||||||
|
|
||||||
The Guide: "Now we create the magic folder: `docs/`. This is where ALL your WDS specifications will live. Your design source of truth."
|
|
||||||
|
|
||||||
Walk through creating 8 phase folders:
|
|
||||||
- 1-project-brief
|
|
||||||
- 2-trigger-mapping
|
|
||||||
- 3-prd-platform
|
|
||||||
- 4-ux-design
|
|
||||||
- 5-design-system
|
|
||||||
- 6-design-deliveries
|
|
||||||
- 7-testing
|
|
||||||
- 8-ongoing-development
|
|
||||||
|
|
||||||
The Guide: "These 8 folders represent the complete WDS methodology. You'll learn what goes in each one as you progress through the course."
|
|
||||||
|
|
||||||
**Meeting Mimir (2 min)**
|
|
||||||
|
|
||||||
The Nervous Beginner: "Okay, folders created. Now what?"
|
|
||||||
|
|
||||||
The Guide: "Now you meet Mimir! He's your WDS guide and orchestrator. Find the file `MIMIR-WDS-ORCHESTRATOR.md` in the WDS folder. Drag it to your AI chat. Say hello!"
|
|
||||||
|
|
||||||
Describe what happens:
|
|
||||||
- Mimir introduces himself warmly
|
|
||||||
- He asks about your skill level (be honest!)
|
|
||||||
- He checks your setup
|
|
||||||
- He guides your next steps
|
|
||||||
- He connects you with specialists when ready
|
|
||||||
|
|
||||||
The Guide: "And here's the beautiful part: from now on, whenever you're stuck, confused, or need guidance - just type `@wds-mimir [your question]`. He's always there. You're never alone in this."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. Celebration and Next Steps (2 min)
|
|
||||||
|
|
||||||
The Guide: "Do you realize what you just accomplished?"
|
|
||||||
|
|
||||||
List the achievements:
|
|
||||||
- Created a GitHub account
|
|
||||||
- Set up a repository
|
|
||||||
- Installed a professional IDE
|
|
||||||
- Cloned your first repository
|
|
||||||
- Integrated WDS
|
|
||||||
- Created proper folder structure
|
|
||||||
- Activated your personal guide
|
|
||||||
|
|
||||||
The Guide: "That's HUGE! Many designers never get past this step. They get overwhelmed, give up. But you? You did it. You should genuinely be proud."
|
|
||||||
|
|
||||||
The Nervous Beginner: "You're right... I was really nervous, but I actually DID it. It wasn't as scary as I thought."
|
|
||||||
|
|
||||||
The Guide: "That's the pattern you'll see throughout WDS. Things that sound intimidating become manageable when broken down into steps. And now? Now you're ready to start the actual methodology. Module 03 awaits: Creating your Project Brief."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. Closing - The Power of Belief (1 min)
|
|
||||||
|
|
||||||
The Guide: "Before we wrap up, I want to share something Mimir would say: 'You can do this. I believe in you.' Those aren't empty words. They're based on a simple truth - you just proved you can learn new technical things. You just set up a complete professional development environment from scratch. If you can do that, you can master WDS."
|
|
||||||
|
|
||||||
The Nervous Beginner: "Thank you. I actually feel... capable. Like I might actually be able to do this."
|
|
||||||
|
|
||||||
The Guide: "You don't 'might be able.' You ARE able. You just did. Welcome to WDS. Mimir is waiting for you."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Content to Include
|
|
||||||
|
|
||||||
**Module 02 covers:**
|
|
||||||
|
|
||||||
**Lesson 01: Git Setup**
|
|
||||||
- Creating GitHub account with professional username
|
|
||||||
- Understanding repositories as tracked folders
|
|
||||||
- Single repo vs separate specs repo decision
|
|
||||||
- Repository naming determines structure
|
|
||||||
- Creating new repository or joining existing
|
|
||||||
- Strategic guidance on when to use each approach
|
|
||||||
|
|
||||||
**Lesson 02: IDE Installation**
|
|
||||||
- What an IDE is (workspace for specifications)
|
|
||||||
- Cursor vs VS Code comparison
|
|
||||||
- Installation process (platform-specific)
|
|
||||||
- First launch setup and GitHub sign-in
|
|
||||||
- Terminal verification
|
|
||||||
|
|
||||||
**Lesson 03: Git Repository Cloning**
|
|
||||||
- Creating organized Projects folder
|
|
||||||
- Understanding cloning (cloud to local)
|
|
||||||
- Getting repository URL from GitHub
|
|
||||||
- Cloning with git clone command
|
|
||||||
- Git auto-installation by IDE
|
|
||||||
- Opening project in IDE
|
|
||||||
|
|
||||||
**Lesson 04: WDS Project Initialization**
|
|
||||||
- Cloning WDS repository separately
|
|
||||||
- Adding WDS to workspace (dual folder setup)
|
|
||||||
- Creating 8-phase docs structure
|
|
||||||
- Understanding what each phase represents
|
|
||||||
- Finding and activating Mimir
|
|
||||||
- First conversation with Mimir
|
|
||||||
- The @wds-mimir command for ongoing help
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Messages to Emphasize
|
|
||||||
|
|
||||||
1. **"You Can Do This"**
|
|
||||||
- Modern tools handle complexity automatically
|
|
||||||
- Setup is mostly clicking buttons
|
|
||||||
- Following instructions, not learning to code
|
|
||||||
- Every expert was once a nervous beginner
|
|
||||||
|
|
||||||
2. **"It's Not As Scary As It Sounds"**
|
|
||||||
- GitHub = cloud storage with history
|
|
||||||
- IDE = workspace app like Word
|
|
||||||
- Cloning = copying files
|
|
||||||
- Terminal = typing commands instead of clicking
|
|
||||||
|
|
||||||
3. **"Strategic Decisions Matter"**
|
|
||||||
- Repository naming determines structure
|
|
||||||
- Single vs separate affects workflow
|
|
||||||
- Think about your team situation
|
|
||||||
- Can always adjust later
|
|
||||||
|
|
||||||
4. **"You're Never Alone"**
|
|
||||||
- Mimir is always available
|
|
||||||
- @wds-mimir [any question]
|
|
||||||
- Community support
|
|
||||||
- No question too small
|
|
||||||
|
|
||||||
5. **"Small Wins Build Confidence"**
|
|
||||||
- Celebrate creating GitHub account
|
|
||||||
- Celebrate installing IDE
|
|
||||||
- Celebrate first clone
|
|
||||||
- Celebrate meeting Mimir
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tone and Approach
|
|
||||||
|
|
||||||
**For The Nervous Beginner:**
|
|
||||||
- Genuine vulnerability about technical topics
|
|
||||||
- Asks clarifying questions
|
|
||||||
- Expresses relief when things are simpler than expected
|
|
||||||
- Grows in confidence through the conversation
|
|
||||||
- Represents the listener's internal dialogue
|
|
||||||
|
|
||||||
**For The Guide:**
|
|
||||||
- Warm, patient, never condescending
|
|
||||||
- Uses simple analogies (cloud storage, Word, Dropbox)
|
|
||||||
- Celebrates every small accomplishment
|
|
||||||
- Normalizes being a beginner
|
|
||||||
- Provides encouragement genuinely
|
|
||||||
- Speaks with Mimir's wisdom and warmth
|
|
||||||
|
|
||||||
**Overall tone:**
|
|
||||||
- Supportive and encouraging
|
|
||||||
- Practical with concrete examples
|
|
||||||
- Honest about difficulty (it can feel overwhelming)
|
|
||||||
- Celebrating progress ("Look what you just did!")
|
|
||||||
- Building genuine confidence through achievement
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Target Audience
|
|
||||||
|
|
||||||
**Designers who:**
|
|
||||||
- Have never used GitHub or Git
|
|
||||||
- Are nervous about "technical" setup
|
|
||||||
- Worry they'll break something
|
|
||||||
- Need step-by-step guidance
|
|
||||||
- Want reassurance they can do this
|
|
||||||
- May have imposter syndrome about technical topics
|
|
||||||
|
|
||||||
**This module proves:** If you can follow instructions and click buttons, you can set up a professional development environment. Technical confidence comes from doing, not from prior knowledge.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Call to Action
|
|
||||||
|
|
||||||
End with: "You've completed Module 02. Your environment is ready. Mimir is waiting in your AI chat. And Module 03 - Creating Your Project Brief - is where the real magic begins. You're not a beginner anymore. You're a designer with a professional setup. Welcome to WDS."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Upload this file to NotebookLM to generate installation training content**
|
|
||||||
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "INSTALL WDS:" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "MASTER YOUR NEW" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "DESIGN WORKSPACE!" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "02 Installation" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Woman assembling a some strange machine with cogs and pins laying flat upside down on the table
|
|
||||||
- She has paused, holding a cog in her hand, thinking about where to place it
|
|
||||||
- Skip the tablet
|
|
||||||
- Keep the character stylized as it is
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- Replace the objects in the background but keep the same style and add a giant circuit board layout that covers the whole background
|
|
||||||
- Keep the same color scheme and lighting
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: open manual on the desk beside her, mechanical parts (cogs, pins)
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- do not put light objects behind her face since we need to keep her silhouette clear
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
|
|
@ -1,745 +0,0 @@
|
||||||
# NotebookLM Prompt: Module 03 - Alignment & Signoff
|
|
||||||
|
|
||||||
**Use this prompt to generate audio/video content for Module 03: Alignment & Signoff**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
**This is a single, self-contained prompt file.**
|
|
||||||
|
|
||||||
Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prompt
|
|
||||||
|
|
||||||
Create an engaging 35-40 minute podcast conversation between two hosts discussing Module 03 of the Whiteport Design Studio (WDS) course: Alignment & Signoff.
|
|
||||||
|
|
||||||
**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.**
|
|
||||||
|
|
||||||
**Host 1 (The Hesitant Designer):** A designer who struggles with the business side of projects. Uncomfortable talking about money, afraid of contracts, and unsure how to position themselves professionally. Often undersells their value and gets stuck in scope creep situations.
|
|
||||||
|
|
||||||
**Host 2 (The Strategic Professional):** A designer who has learned to navigate the business side with confidence. Understands that protecting the project with clear agreements is serving the client, not being defensive. Has learned from painful lessons.
|
|
||||||
|
|
||||||
**Conversation structure:**
|
|
||||||
|
|
||||||
### 1. Opening (3 min) - Why This Feels Uncomfortable
|
|
||||||
|
|
||||||
Start with The Hesitant Designer expressing their discomfort: "I just want to design. The business stuff - pitches, contracts, negotiations - it makes me uncomfortable. I feel like I'm being pushy or greedy when I talk about money. Can't I just skip this part and start designing?"
|
|
||||||
|
|
||||||
The Strategic Professional responds with empathy: "I get it. I used to feel exactly the same way. But here's what I learned the hard way: skipping alignment and signoff doesn't make you generous - it makes you unprofessional. And ultimately, it hurts the client even more than it hurts you."
|
|
||||||
|
|
||||||
The Strategic Professional continues: "This is Module 03 of the Whiteport Design Studio method - WDS for short. And here's why this module exists: we realized through over 10 years of design and IT projects that the foundation you build BEFORE design work often has more impact on the project's success than the design itself. A brilliant design built on misaligned expectations fails. A good design built on solid alignment succeeds."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Wait, the foundation is more impactful than the design?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Often, yes. If you and your client aren't aligned on what success looks like, if the contract doesn't protect both of you, if expectations are fuzzy - no amount of brilliant design will save that project. That's why WDS includes this module with templates and agent instructions based on years of painful lessons."
|
|
||||||
|
|
||||||
The Strategic Professional continues: "In the next 40 minutes, you'll discover something that changes everything: when you genuinely understand what success looks like for your client - when you can clearly specify their desired outcomes - pitching stops feeling like selling and starts feeling like helping. You'll learn when you actually need this (hint: not always), how to ask the questions that reveal what they truly need, and how to create alignment documents and contracts that protect both you and your client. This is about building sustainable, healthy working relationships where everyone wins."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Okay, but what's the actual process? What are the steps?"
|
|
||||||
|
|
||||||
**The Clear Workflow:**
|
|
||||||
|
|
||||||
The Strategic Professional: "Here's the entire WDS workflow for this phase - from first conversation to project start:
|
|
||||||
|
|
||||||
1. **Listen** - Discovery meeting with client to understand their goals and what's important for success
|
|
||||||
2. **Create** - Build a pitch (alignment document) based on what they told you they need
|
|
||||||
3. **Present** - Share your proposal in a second meeting showing you understood them
|
|
||||||
4. **Negotiate** - Adjust and refine together until you find the perfect match
|
|
||||||
5. **Accept** - They say yes to the pitch
|
|
||||||
6. **Contract** - Generate a short, clear contract based on the accepted pitch
|
|
||||||
7. **Sign** - Both parties sign
|
|
||||||
8. **Brief** - Use the pitch and contract as the backbone of your project brief
|
|
||||||
|
|
||||||
The pitch and contract aren't throwaway documents - they become the foundation that guides everything that follows. This is the WDS way: every step builds on the previous one, creating a connected workflow instead of isolated documents."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So WDS gives me templates and instructions for each of these steps?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. WDS includes Saga the Analyst - an AI agent with instructions based on over 10 years of design and IT project experience. She guides you through discovery questions, helps you create the pitch, and generates contracts that actually work. You're not figuring this out alone - you have a thinking partner trained on real-world lessons."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. Understanding Alignment (8 min) - When You Need It (And When You Don't)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "Okay, but do I really need this? Can't I just have a conversation and then start working?"
|
|
||||||
|
|
||||||
**WDS Context: The Four Phases**
|
|
||||||
|
|
||||||
The Strategic Professional: "Let me give you context. Whiteport Design Studio - WDS - is built on four phases:
|
|
||||||
|
|
||||||
1. **Phase 1: Win Client Buy-In** (That's this module - Alignment & Signoff)
|
|
||||||
2. **Phase 2: Map Business Goals & User Needs** (Understanding what drives behavior)
|
|
||||||
3. **Phase 3: Design Solutions** (The actual design work)
|
|
||||||
4. **Phase 4: Deliver to Development** (Specifications and handoff)
|
|
||||||
|
|
||||||
We start with Phase 1 because the foundation matters more than most designers realize. Get alignment right, and everything else flows. Skip it, and even brilliant design fails."
|
|
||||||
|
|
||||||
**When to Skip This Module:**
|
|
||||||
|
|
||||||
The Strategic Professional is direct: "First, let's talk about when you DON'T need this module. If you're doing a project yourself - you have full autonomy, no stakeholders to convince, no one to approve your work - skip this entirely. Go straight to Module 04: Project Brief and start designing. Seriously. Don't waste time on alignment documents when you don't need them."
|
|
||||||
|
|
||||||
When to skip:
|
|
||||||
- You're building something yourself (side project, portfolio piece)
|
|
||||||
- You have full autonomy and budget control
|
|
||||||
- No stakeholders need to approve or fund the work
|
|
||||||
- You're the sole decision-maker
|
|
||||||
|
|
||||||
The Hesitant Designer: "That's a relief. But what about when I do need it?"
|
|
||||||
|
|
||||||
**When You NEED Alignment:**
|
|
||||||
|
|
||||||
The Strategic Professional explains: "You need this module when there's a gap between you and the decision-maker. Three common scenarios:"
|
|
||||||
|
|
||||||
**Scenario 1: Consultant → Client**
|
|
||||||
- You're proposing a project to a client
|
|
||||||
- They need to be convinced it's worth the investment
|
|
||||||
- You need formal commitment before you start work
|
|
||||||
|
|
||||||
**Scenario 2: Business Owner → Suppliers**
|
|
||||||
- You run a business and need to hire designers/developers
|
|
||||||
- You need to align on what you're buying
|
|
||||||
- You need a contract to protect your business
|
|
||||||
|
|
||||||
**Scenario 3: Manager/Employee → Stakeholders**
|
|
||||||
- You have a project idea but need approval
|
|
||||||
- You need budget allocation
|
|
||||||
- You need stakeholder buy-in to proceed
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "In all three scenarios, you're bridging a gap. Someone needs to say 'yes' and commit resources before work can begin. That's when you need alignment."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. Understanding Their Outcomes First (6 min) - The Foundation of Every Pitch
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "Okay, so I need to pitch. But where do I start?"
|
|
||||||
|
|
||||||
**The Mindset Shift: Understanding Before Pitching**
|
|
||||||
|
|
||||||
The Strategic Professional: "Here's the secret that makes pitching easier: start by understanding THEIR outcomes, not your solution. When you can clearly specify what success looks like for THEM, pitching stops feeling like selling and starts feeling like helping."
|
|
||||||
|
|
||||||
The Hesitant Designer: "But don't I need to have a solution first?"
|
|
||||||
|
|
||||||
The Strategic Professional: "No. That's backwards. If you start with your solution, you're guessing what they need. Then you're trying to convince them your solution is right. That's exhausting and it feels like selling. But when you start by genuinely understanding what they're trying to achieve, what success looks like in their eyes, what problems keep them up at night - then your pitch becomes a clear articulation of how you'll help them get there."
|
|
||||||
|
|
||||||
**The Discipline: Don't Solve in the Same Meeting**
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "And here's the discipline that separates professionals from amateurs: even if you're the best designer in the world and you immediately see the solution - DON'T present it in the same meeting. Resist the urge to flood them with solutions."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Wait, but won't they want to hear my ideas?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Remember: the carpenter measures twice before cutting once. The doctor diagnoses before writing a prescription. You're not there to impress them with how fast you can solve their problem. You're there to understand the problem deeply first."
|
|
||||||
|
|
||||||
**Discovery Questions That Reveal Outcomes:**
|
|
||||||
|
|
||||||
The Strategic Professional shares: "Saga the Analyst helps you ask the right discovery questions. Keep asking until you find the real pain point:"
|
|
||||||
|
|
||||||
- **What does success look like for you?** (Their desired outcome)
|
|
||||||
- **What's not working right now?** (The pain they're experiencing)
|
|
||||||
- **Tell me more about that - what specifically happens?** (Digging deeper into the pain)
|
|
||||||
- **How does that impact your business/team/users?** (Understanding consequences)
|
|
||||||
- **What happens if we don't solve this?** (The cost of inaction)
|
|
||||||
- **What have you tried before?** (What didn't work and why)
|
|
||||||
- **How will this impact your business/team/users?** (The value they expect)
|
|
||||||
- **What would make this a home run?** (Their definition of exceptional)
|
|
||||||
|
|
||||||
The Strategic Professional: "Notice - you're not asking about features or budget yet. You're understanding THEIR world. Their problems. Their definition of success. And you keep asking questions until you find the pain point, then you enquire deeper about that pain point, and you confirm it actually exists."
|
|
||||||
|
|
||||||
**Discovery Questions That Reveal Risks:**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "But here's what most designers miss - you also need to understand what's important to them for the project to succeed. Ask constructive questions about planning and confidence:"
|
|
||||||
|
|
||||||
- **Is there something specific you're concerned about?** (Their worries, gently)
|
|
||||||
- **What would help you feel confident about moving forward?** (What they need to feel secure)
|
|
||||||
- **What lessons have you learned from past projects?** (Learning from history)
|
|
||||||
- **What would make you feel this is going well as we proceed?** (Positive indicators)
|
|
||||||
- **What dependencies or external factors should we plan for?** (External factors)
|
|
||||||
- **What would be important to include in our agreement?** (Their priorities)
|
|
||||||
- **How would you like us to handle changes or unexpected situations?** (Proactive planning)
|
|
||||||
|
|
||||||
The Hesitant Designer: "That feels much better - I'm helping them plan, not dwelling on what could go wrong."
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. And here's the key - what they tell you becomes the basis for mutually beneficial contract provisions. Not generic boilerplate, but thoughtful protections that give them confidence."
|
|
||||||
|
|
||||||
The Strategic Professional gives an example: "Say they mention 'In our last project, communication dropped off and we felt out of the loop.' Now you know to include regular check-ins and status updates in the contract. They say 'We want to make sure we can adjust if priorities change'? You include a clear change order process that respects both parties' time. What's important to them guides you to contract clauses that build confidence."
|
|
||||||
|
|
||||||
**Take Notes, Confirm Understanding, Then Stop**
|
|
||||||
|
|
||||||
The Strategic Professional shares: "Here's what you do in that first meeting: listen, take notes, ask clarifying questions, and summarize back what you heard. 'So if I understand correctly, you're looking to achieve X, which will deliver Y, and you'd like us to plan for Z. Is that right?' When they say yes, you say: 'Thank you for sharing this - your goals and what's important to you for this to succeed. Let me think about how I can help you achieve what you need while addressing what you've mentioned, and I'll come back to you with a thoughtful proposal.'"
|
|
||||||
|
|
||||||
The Hesitant Designer: "So I don't share any ideas in that first meeting?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Not full solutions. You can acknowledge the problem: 'Yes, I see why this is critical.' You can validate their concerns: 'That makes complete sense.' But you don't solve it on the spot. Why? Because the carpenter measures twice. The doctor runs tests before diagnosing. You need time to think through the right solution, not the first solution that comes to mind."
|
|
||||||
|
|
||||||
**From Understanding to Helping:**
|
|
||||||
|
|
||||||
The Hesitant Designer: "So when I understand what they actually need..."
|
|
||||||
|
|
||||||
The Strategic Professional: "Then you go away, create a thoughtful proposal using Saga, and come back with a clear articulation: 'Here's what you said you need. Here's how I'll help you get there. Here's what success looks like. Here's the investment required.' When they see their own words reflected back with a clear path forward, they say yes. But that happens in a SECOND meeting, after you've had time to think."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So I'm genuinely focused on helping them, not impressing them with how fast I can solve things?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. And here's the beautiful part - when you take the time to genuinely understand before proposing solutions, they FEEL that. They feel heard. They feel understood. The energy shifts from 'This person is trying to sell me something' to 'This person actually gets what I'm trying to do.' That's worth more than any clever solution you could have blurted out in the first meeting."
|
|
||||||
|
|
||||||
**Making Every Interaction More Valuable:**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "This approach makes every conversation more valuable. Whether it's a discovery call, a pitch meeting, or a negotiation - when you're focused on understanding and clarifying their outcomes, you're serving them. You're helping them think more clearly about what they actually need. Even if they don't hire you, you've added value. And you've shown them you're someone who diagnoses before prescribing."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. The 6 Elements of Alignment (8 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "Okay, so I need to convince someone. But how do I structure that conversation? What do they need to hear?"
|
|
||||||
|
|
||||||
**The Framework - 6 Core Elements:**
|
|
||||||
|
|
||||||
The Strategic Professional explains: "Every alignment document - whether it's a pitch, proposal, or internal signoff - needs to answer six core questions. Miss one, and your pitch falls apart."
|
|
||||||
|
|
||||||
**1. The Idea - What are we building?**
|
|
||||||
- Clear statement of the solution
|
|
||||||
- Not features - the actual thing you're creating
|
|
||||||
- One sentence that anyone can understand
|
|
||||||
|
|
||||||
**2. The Why - Why does this matter?**
|
|
||||||
- Business value and ROI
|
|
||||||
- User pain points being solved
|
|
||||||
- Strategic importance
|
|
||||||
- What happens if we DON'T do this?
|
|
||||||
|
|
||||||
**3. The What - What exactly is included?**
|
|
||||||
- Scope of work (what's in, what's out)
|
|
||||||
- Deliverables (tangible outputs)
|
|
||||||
- Features and functionality
|
|
||||||
- What you'll hand over when you're done
|
|
||||||
|
|
||||||
**4. The How - How will we execute?**
|
|
||||||
- Your approach and methodology
|
|
||||||
- Timeline and milestones
|
|
||||||
- Team and resources needed
|
|
||||||
- Risk mitigation
|
|
||||||
|
|
||||||
**5. The Budget - What's the investment?**
|
|
||||||
- Cost breakdown
|
|
||||||
- Payment structure
|
|
||||||
- What they're getting for their money
|
|
||||||
- ROI justification
|
|
||||||
|
|
||||||
**6. The Commitment - What do we need to proceed?**
|
|
||||||
- Decision timeline
|
|
||||||
- Resources required
|
|
||||||
- Stakeholder involvement
|
|
||||||
- Next steps after approval
|
|
||||||
|
|
||||||
The Strategic Professional shares a story: "I once pitched a project focusing only on features (The What). I thought if I made it sound cool enough, they'd say yes. They didn't. Why? Because I never answered The Why. I never showed them the business value. I never demonstrated ROI. I was asking for $50K without proving why it was worth it."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So it's not about making it sound impressive. It's about answering their actual questions?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. Decision-makers don't care how cool your design is. They care if it's worth the investment. Answer these six questions clearly, and you make it easy for them to say yes."
|
|
||||||
|
|
||||||
**The Critical Link: Their Outcomes Drive Everything**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "But here's what makes these elements powerful - each one should connect back to THEIR desired outcomes. When you write The Why, you're articulating the outcome they told you they want. When you write The What, you're showing how it delivers that outcome. When you write The Budget, you're showing why that outcome is worth the investment."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So I'm not making up the value. I'm reflecting back what they already said they need?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. That's why the discovery conversation is so important. When you genuinely understand what they're trying to achieve, writing the pitch is just documenting that understanding."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. Creating Your Alignment Document (7 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "This makes sense. But how do I actually create this document? What's the structure?"
|
|
||||||
|
|
||||||
**The 10-Section Alignment Document:**
|
|
||||||
|
|
||||||
The Strategic Professional explains: "Saga the Analyst - that's the WDS agent for Phase 1 - guides you through creating an alignment document with 10 sections. But here's the key - you don't have to fill them in order. Start with what you know, explore what you're unsure about, and iterate until it's complete. And Saga helps you discover what you don't know yet by asking those outcome-focused questions."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Wait, Saga is an AI agent?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Yes. WDS includes AI agents trained on over 10 years of design and IT project experience. Saga the Analyst specializes in Phase 1 - helping you understand the business side, ask the right questions, and create documents that actually work. She's your thinking partner, not just a template generator."
|
|
||||||
|
|
||||||
The 10 sections:
|
|
||||||
|
|
||||||
1. **Project Overview** - The Idea in clear language
|
|
||||||
2. **Background & Context** - Why now? What led to this?
|
|
||||||
3. **Problem Statement** - What pain are we solving?
|
|
||||||
4. **Objectives & Goals** - What does success look like?
|
|
||||||
5. **Proposed Solution** - The What and How
|
|
||||||
6. **Scope & Deliverables** - What's included (and what's not)
|
|
||||||
7. **Timeline & Milestones** - When will things happen?
|
|
||||||
8. **Budget & Investment** - What's the cost?
|
|
||||||
9. **Risks & Mitigation** - What could go wrong?
|
|
||||||
10. **Next Steps** - What happens after approval?
|
|
||||||
|
|
||||||
**The Flexible Process:**
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "Saga doesn't force you through these in order. Instead, Saga asks: 'What do you know? What are you uncertain about? Let's explore together.' You might start with the problem, jump to budget, circle back to objectives. That's fine. The goal is clarity, not rigid structure. This flexibility is built into WDS because we learned that every project and every designer thinks differently."
|
|
||||||
|
|
||||||
**Extracting from Existing Materials:**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "Often, you already have this information scattered across emails, conversations, meeting notes. Saga can help you extract and synthesize it. Upload your notes, share conversation summaries, and Saga structures it into a compelling pitch. But more importantly, Saga helps you identify what's MISSING - what questions you haven't asked yet about their outcomes."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So I don't have to start from scratch?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Not at all. But here's the key - if you realize you don't actually know what success looks like for them, Saga will help you craft discovery questions to find out. Don't guess. Ask. Understanding their outcomes makes writing the pitch 10x easier."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. Negotiation & Iteration (5 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks nervously: "Okay, I've created the document. Now I have to share it? What if they reject it?"
|
|
||||||
|
|
||||||
**The Negotiation Mindset:**
|
|
||||||
|
|
||||||
The Strategic Professional responds: "First, let's reframe 'rejection.' They're not rejecting you. They're providing feedback on the proposal. Big difference. This is negotiation, not judgment."
|
|
||||||
|
|
||||||
The process:
|
|
||||||
|
|
||||||
1. **Share the alignment document** - Give them time to read
|
|
||||||
2. **Gather feedback** - What works? What concerns them?
|
|
||||||
3. **Iterate** - Adjust based on their feedback
|
|
||||||
4. **Repeat until alignment** - Keep refining until everyone agrees
|
|
||||||
|
|
||||||
The Strategic Professional shares: "I once pitched a project for $75K. Client said, 'This sounds great, but we only have $50K budgeted.' Instead of walking away, I asked, 'What if we reduced scope to fit $50K?' We cut two phases, kept the core value, and moved forward. That's negotiation."
|
|
||||||
|
|
||||||
**Acceptance - When Everyone Is Aligned:**
|
|
||||||
|
|
||||||
The Strategic Professional: "You know you've achieved alignment when the stakeholder says, 'Yes, this is exactly what we need. Let's proceed.' That's your signal to move to the next step: formalize it with a signoff document."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So negotiation isn't about being defensive. It's about finding the version that works for everyone?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. You're serving them by helping them make a good decision."
|
|
||||||
|
|
||||||
**Discovery Never Stops:**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "And here's something important - negotiation is also discovery. Their feedback tells you more about what they actually need. 'We only have $50K' tells you about their constraints. 'We're concerned about timeline' tells you their priorities. Use their feedback to understand them better, then refine the proposal to serve them better."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. Signoff Documents - External Contracts (8 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "Okay, they've said yes. Now what? Do I need a contract?"
|
|
||||||
|
|
||||||
**When You Need External Contracts:**
|
|
||||||
|
|
||||||
The Strategic Professional explains: "If money is changing hands between different legal entities, you need a contract. Two main scenarios:"
|
|
||||||
|
|
||||||
**Scenario 1: Project Contract (Consultant → Client)**
|
|
||||||
- You're a consultant/agency working for a client
|
|
||||||
- Client is paying you for specific deliverables
|
|
||||||
- You need legal protection for both parties
|
|
||||||
|
|
||||||
**Scenario 2: Service Agreement (Business → Suppliers)**
|
|
||||||
- Your business is hiring designers/developers
|
|
||||||
- You're buying services from another business
|
|
||||||
- You need to protect your investment
|
|
||||||
|
|
||||||
**What's in the Contract:**
|
|
||||||
|
|
||||||
The Strategic Professional details: "Saga helps you create a contract based on the pitch they already accepted. Here's the key principle WDS teaches: short and concise. Long contracts are hard to understand, and it's easier to hide strange provisions in dense text. Keep it clear and brief. This comes from years of experience - we've seen designers get trapped by their own overly complex contracts."
|
|
||||||
|
|
||||||
Key sections:
|
|
||||||
- **Scope of Work** - What's included (and explicitly what's NOT) - reference the accepted pitch
|
|
||||||
- **Deliverables** - Tangible outputs from the pitch
|
|
||||||
- **Timeline** - Milestones from the pitch
|
|
||||||
- **Payment Terms** - Cost and payment schedule from the pitch
|
|
||||||
- **Change Management** - How scope changes are handled (change order process)
|
|
||||||
- **Acceptance Criteria** - When work is considered complete (from their definition of success)
|
|
||||||
- **Intellectual Property** - Who owns the code, designs, content
|
|
||||||
- **Termination Clause** - How either party can exit
|
|
||||||
- **Warranties & Limitations** - What you guarantee (and don't)
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "The contract comes FROM the accepted pitch. You're not writing it from scratch - you're formalizing what they already agreed to. This makes it much shorter and clearer. Everything references back to the pitch they said yes to."
|
|
||||||
|
|
||||||
**Business Models:**
|
|
||||||
|
|
||||||
The Strategic Professional explains different payment structures:
|
|
||||||
|
|
||||||
- **Fixed-Price** - Total project cost, paid in milestones
|
|
||||||
- **Hourly/Daily Rate** - Time-based billing
|
|
||||||
- **Retainer** - Monthly fee for ongoing availability
|
|
||||||
- **Value-Based** - Price based on impact/value delivered
|
|
||||||
|
|
||||||
The Strategic Professional warns: "Here's the mistake I see designers make: they create vague contracts to seem flexible. 'We'll design a website.' That's it. No scope boundaries. No change process. Then the client adds 10 pages, 5 features, and expects the same price. You're stuck."
|
|
||||||
|
|
||||||
**Protecting Scope:**
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "The most important section is 'What's NOT Included.' Be explicit. 'This does not include e-commerce functionality. This does not include third-party integrations. This does not include backend development.' Why? Because when scope creeps, you point to the contract and say, 'That's a change order. Here's the additional cost.'"
|
|
||||||
|
|
||||||
The Hesitant Designer: "So the contract isn't about being defensive. It's about protecting the project?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. It protects you AND the client. It ensures everyone knows what to expect. That's serving them with clarity. And because it's based on the pitch they already accepted, it's short, clear, and references what they already agreed to. No surprises. No dense legal text hiding strange provisions."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Wait - the contract is based on the accepted pitch?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Yes! That's the key. The pitch becomes the foundation. The contract formalizes it with legal protections. Then both documents - pitch and contract - become the backbone of your project brief. Everything connects. Listen, create, present, negotiate, accept, contract, sign, brief. It's a flow, not separate documents."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 8. Signoff Documents - Internal Signoff (5 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "What if I'm not a consultant? What if I work for a company and need approval for an internal project?"
|
|
||||||
|
|
||||||
**When You Need Internal Signoff:**
|
|
||||||
|
|
||||||
The Strategic Professional explains: "If you're a manager or employee proposing a project that needs approval and budget allocation, you need an internal signoff document. This is different from an external contract - it's simpler, but still critical."
|
|
||||||
|
|
||||||
**Internal Signoff Structure:**
|
|
||||||
|
|
||||||
The Strategic Professional details:
|
|
||||||
|
|
||||||
- **Project Summary** - The Idea, Why, What
|
|
||||||
- **Business Case** - ROI and strategic value
|
|
||||||
- **Budget Request** - Cost breakdown and approval
|
|
||||||
- **Timeline** - Milestones and deadlines
|
|
||||||
- **Stakeholder Approval** - Who needs to sign off
|
|
||||||
- **Next Steps** - What happens after approval
|
|
||||||
|
|
||||||
**Company-Specific Formats:**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "Many companies have their own formats - project intake forms, budget request templates, approval workflows. Saga can adapt to your company's format. You provide the template, Saga helps you fill it in based on your alignment document."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So I'm just translating the alignment document into whatever format my company uses?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. The thinking is the same - The Idea, Why, What, How, Budget, Commitment. You're just adapting the presentation."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 9. Real Examples - What Good Looks Like (4 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "This all sounds great in theory. But what does a good alignment document actually look like?"
|
|
||||||
|
|
||||||
**Example 1: SaaS Dashboard Redesign**
|
|
||||||
|
|
||||||
The Strategic Professional shares: "A designer pitched a dashboard redesign for a SaaS company. Here's how they structured it - but notice how they started by understanding the outcome the company wanted:"
|
|
||||||
|
|
||||||
- **The Idea:** Redesign the analytics dashboard to make data actionable
|
|
||||||
- **The Why:** Current dashboard overwhelms users - 80% don't use it. Lost opportunity for data-driven decisions. **(Client's stated problem: "Our users aren't getting value from our analytics")**
|
|
||||||
- **The What:** New dashboard with 5 key metrics, drill-down capability, mobile responsive
|
|
||||||
- **The How:** 8-week timeline, user research → prototypes → implementation
|
|
||||||
- **The Budget:** $45K (ROI: 30% increase in feature adoption = $200K annual value)
|
|
||||||
- **The Commitment:** Approval by March 1st, access to 10 users for research
|
|
||||||
|
|
||||||
The Strategic Professional: "Notice the ROI calculation? They didn't just say 'better dashboard.' They quantified the impact: 30% increase in adoption equals $200K value. But that number came from understanding the CLIENT'S definition of success. The client said 'We need users to adopt this feature' - so the designer built the entire pitch around that outcome."
|
|
||||||
|
|
||||||
**Example 2: Internal Tool for Support Team**
|
|
||||||
|
|
||||||
The Strategic Professional shares another: "An employee pitched an internal tool to their manager. But first, they had a discovery conversation with their manager about what 'good support' looks like:"
|
|
||||||
|
|
||||||
- **The Idea:** Build a knowledge base search tool for support team
|
|
||||||
- **The Why:** Support reps spend 15 minutes per ticket searching for answers. 100 tickets/day = 25 wasted hours. **(Manager's stated outcome: "I need my team spending time on customers, not searching for documentation")**
|
|
||||||
- **The What:** AI-powered search, integration with existing knowledge base, Slack bot
|
|
||||||
- **The How:** 6-week build, beta test with 5 reps, full rollout after validation
|
|
||||||
- **The Budget:** $8K (ROI: 25 hours/day saved = $150K/year in productivity)
|
|
||||||
- **The Commitment:** Approval this week, 5 reps for beta testing
|
|
||||||
|
|
||||||
The Strategic Professional: "Again, notice the quantification. They didn't say 'support reps are frustrated.' They said '25 wasted hours per day = $150K annually.' That's the language decision-makers understand. But the key is - they learned this from ASKING the manager what success looked like. The manager told them 'I need efficiency' - so they built the entire pitch around efficiency gains."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 10. Common Mistakes & How to Avoid Them (5 min)
|
|
||||||
|
|
||||||
The Hesitant Designer asks: "What are the biggest mistakes designers make with alignment and contracts?"
|
|
||||||
|
|
||||||
**Mistake 0: Not Understanding Their Outcomes First**
|
|
||||||
|
|
||||||
The Strategic Professional: "Actually, the BIGGEST mistake happens before you even write anything - it's pitching before you understand what they actually need. Designers get excited about a solution and start writing without genuinely understanding what success looks like for the client. Then they wonder why the pitch doesn't land."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So understanding comes first?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Always. If you can't clearly articulate what they're trying to achieve in their words, you're not ready to pitch yet. Ask more questions. Understand their world. Then the pitch writes itself."
|
|
||||||
|
|
||||||
**Mistake 0.5: Presenting Solutions in the Discovery Meeting**
|
|
||||||
|
|
||||||
The Strategic Professional adds: "And here's the related mistake - flooding them with solutions in the first meeting. You ask a few questions, and suddenly you're excited and start presenting ideas. Stop. The carpenter measures twice before cutting once. The doctor diagnoses before prescribing. Take notes, confirm understanding, and say 'Let me think about this and come back with a thoughtful proposal.' That discipline separates professionals from amateurs."
|
|
||||||
|
|
||||||
**Mistake 1: Vague Scope**
|
|
||||||
|
|
||||||
The Strategic Professional: "The biggest mistake is being vague about scope to seem flexible. 'We'll design a great website' - that's meaningless. Great in whose opinion? How many pages? What functionality? Be specific. Define boundaries."
|
|
||||||
|
|
||||||
**Mistake 2: No 'What's NOT Included' Section**
|
|
||||||
|
|
||||||
The Strategic Professional: "Designers skip this because it feels negative. But this is your scope protection. 'This does not include SEO. This does not include content writing. This does not include hosting setup.' When the client asks for it later, you have a clear answer: 'That's a change order.'"
|
|
||||||
|
|
||||||
**Mistake 3: Not Quantifying Value**
|
|
||||||
|
|
||||||
The Strategic Professional: "Saying 'This will improve the user experience' isn't enough. Improve by how much? What's the business impact? 'This will reduce cart abandonment by 15% = $50K additional revenue.' That's how you justify your price."
|
|
||||||
|
|
||||||
**Mistake 4: Avoiding Money Conversations**
|
|
||||||
|
|
||||||
The Strategic Professional addresses The Hesitant Designer directly: "I know you feel uncomfortable talking about money. But here's the truth - if you don't talk about money upfront, you'll talk about it later when the client refuses to pay or disputes the bill. Being clear about cost at the beginning is serving them."
|
|
||||||
|
|
||||||
**Mistake 5: Not Using Change Orders**
|
|
||||||
|
|
||||||
The Strategic Professional: "When scope changes mid-project, designers often just absorb it to avoid conflict. That's how you end up working for free. Instead: 'That's outside our current scope. I can provide a change order with the additional cost and timeline impact.' That's professional."
|
|
||||||
|
|
||||||
The Hesitant Designer: "So being clear isn't being greedy. It's being professional?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. Clarity serves everyone."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 11. Closing - Your Professional Foundation (4 min)
|
|
||||||
|
|
||||||
The Strategic Professional brings it home: "You've just learned Module 03 of Whiteport Design Studio - WDS Phase 1: Win Client Buy-In. This is about creating alignment and protecting your projects with clear agreements. This isn't about being pushy or defensive. It's about serving your clients and stakeholders with clarity."
|
|
||||||
|
|
||||||
The Hesitant Designer reflects: "I see it now. Alignment isn't about selling. It's about understanding first - genuinely understanding what they're trying to achieve - and THEN articulating how I can help them get there. And I need to resist the urge to impress them with quick solutions. The carpenter measures twice. The doctor diagnoses first. I understand, take notes, come back with something thoughtful. When I know what success looks like for them, everything gets easier. And contracts aren't about mistrust - they're about protecting the project so it can succeed."
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. And this is why WDS starts here, in Phase 1, before any design work begins. Because we learned through over 10 years of projects that the foundation you build - the alignment, the understanding, the clear agreements - has more impact on project success than the design itself. Get this right, and everything that follows in Phase 2 through 4 works. Skip it, and even brilliant design fails."
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. Here's what you now know:"
|
|
||||||
|
|
||||||
**What You've Learned:**
|
|
||||||
|
|
||||||
- **WDS Phase 1: Win Client Buy-In** - why foundation matters more than most designers realize
|
|
||||||
- **The WDS workflow** - Listen → Create → Present → Negotiate → Accept → Contract → Sign → Brief
|
|
||||||
- **When you need alignment** (and when to skip it)
|
|
||||||
- **The discipline to understand before solving** - carpenter measures twice, doctor diagnoses first
|
|
||||||
- **Separate discovery from solution** - don't present in the same meeting
|
|
||||||
- **Understanding their outcomes first** - the foundation that makes pitching easier
|
|
||||||
- **Discovery questions** that reveal what success looks like for them
|
|
||||||
- **Keep asking until you find the real pain point** - then confirm it exists
|
|
||||||
- **Take notes, confirm, then stop** - come back with a thoughtful proposal
|
|
||||||
- **The 6 elements** every alignment document needs
|
|
||||||
- **How to create** a compelling pitch that makes it easy to say yes
|
|
||||||
- **Negotiation as iteration** - refining until everyone agrees
|
|
||||||
- **External contracts** - protecting consultant/client relationships
|
|
||||||
- **Internal signoff** - navigating company approval processes
|
|
||||||
- **What good looks like** - real examples with quantified ROI
|
|
||||||
- **Common mistakes** - and how to avoid them (especially solving too quickly)
|
|
||||||
|
|
||||||
**Your Action:**
|
|
||||||
|
|
||||||
The Strategic Professional: "Now, here's what you do. Before you write anything, understand what they need. Have that discovery conversation. Ask those outcome-focused questions. Keep asking until you find the real pain point. Take notes. Confirm understanding. Then STOP. Say 'Let me think about this and come back with a thoughtful proposal.' Don't flood them with solutions in that first meeting."
|
|
||||||
|
|
||||||
The Strategic Professional continues: "Then - and only then - work with Saga the Analyst to create your alignment document. Saga is part of the WDS method - an AI agent trained on over 10 years of project experience. Take the time to think it through. The carpenter measures twice before cutting once. The doctor diagnoses before prescribing. You understand before solving."
|
|
||||||
|
|
||||||
The Strategic Professional: "When you come back with that thoughtful proposal, share it. Negotiate. Refine it based on their feedback. Get approval. Formalize it with a contract or signoff document. That's the WDS process for Phase 1."
|
|
||||||
|
|
||||||
The Strategic Professional continues: "But if you're building something yourself - if you have full autonomy and don't need approval - skip this entirely. Go straight to WDS Phase 2: Map Business Goals & User Needs, or even Phase 3 and start designing. Don't waste time on alignment when you don't need it. WDS is flexible - use what serves your situation."
|
|
||||||
|
|
||||||
**Building Your Professional Foundation:**
|
|
||||||
|
|
||||||
The Strategic Professional emphasizes: "This module is about building your professional foundation. You're learning to operate as a strategic professional, not just a designer who executes orders. You're learning to bridge the gap between idea and execution, between vision and commitment. And it all starts with the discipline to understand deeply before you solve quickly."
|
|
||||||
|
|
||||||
The Strategic Professional adds: "This is why Whiteport Design Studio exists - to give you the templates, the agent instructions, and the process that comes from over 10 years of real-world experience. You're not figuring this out alone. You have a method that works."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Understand first. Resist the urge to impress with quick solutions. Take time to think. Help second. I'm ready. What's next?"
|
|
||||||
|
|
||||||
The Strategic Professional: "Next is WDS Phase 2: Map Business Goals & User Needs - where you understand what drives user behavior. Then Phase 3: Design Solutions - where you transform that alignment into detailed design. Then Phase 4: Deliver to Development - specifications and handoff. But before you move forward, make sure you have commitment. Don't start detailed work until stakeholders have said yes."
|
|
||||||
|
|
||||||
The Hesitant Designer: "Discovery meeting first. Understanding deeply. Then proposal. Then alignment. Then design. The WDS way."
|
|
||||||
|
|
||||||
The Strategic Professional: "Exactly. Measure twice, cut once. Diagnose, then prescribe. Now let yourself be known. Have that uncomfortable conversation about money. Define clear scope. Create a contract that protects everyone. But most importantly - take the time to genuinely understand what they need before you propose how to help. That's how professional designers operate. That's the WDS method. That's Phase 1 complete."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Resources to Include
|
|
||||||
|
|
||||||
At the end of the podcast, The Strategic Professional should mention these resources:
|
|
||||||
|
|
||||||
**Key Concepts:**
|
|
||||||
|
|
||||||
- **WDS (Whiteport Design Studio)** - the method containing templates and agent instructions based on 10+ years of experience
|
|
||||||
- **WDS Four Phases** - Phase 1: Win Client Buy-In, Phase 2: Map Goals & Needs, Phase 3: Design Solutions, Phase 4: Deliver to Dev
|
|
||||||
- **Foundation matters more than design** - why WDS starts with alignment before design work
|
|
||||||
- **Saga the Analyst** - WDS AI agent for Phase 1, trained on real-world project experience
|
|
||||||
- **Understand before you solve** - the carpenter measures twice, the doctor diagnoses first
|
|
||||||
- **Separate discovery from solution** - don't present in the same meeting
|
|
||||||
- **Understanding their outcomes first** - the foundation that makes everything easier
|
|
||||||
- **Discovery questions** that reveal what success looks like
|
|
||||||
- The 6 elements of alignment (Idea, Why, What, How, Budget, Commitment)
|
|
||||||
- When to skip this module (doing it yourself)
|
|
||||||
- Alignment document structure (10 sections)
|
|
||||||
- External contracts (Project Contract and Service Agreement)
|
|
||||||
- Internal signoff documents
|
|
||||||
- Business models (fixed-price, hourly, retainer, value-based)
|
|
||||||
- Change order process
|
|
||||||
- Scope protection strategies
|
|
||||||
|
|
||||||
**Next Steps:**
|
|
||||||
|
|
||||||
- Complete WDS Phase 2: Map Business Goals & User Needs
|
|
||||||
- Practice pitching with quantified ROI
|
|
||||||
- Review your current contracts for scope clarity
|
|
||||||
- Set up change order templates
|
|
||||||
|
|
||||||
**Community:**
|
|
||||||
|
|
||||||
- BMad Discord: Share your alignment document
|
|
||||||
- GitHub Discussions: Ask questions about contracts and pricing
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## NotebookLM Audio Generation Guidelines
|
|
||||||
|
|
||||||
**Tone:**
|
|
||||||
|
|
||||||
- **Emphasize WDS branding** - mention Whiteport Design Studio, the four phases, Saga the Analyst agent
|
|
||||||
- **Foundation before design** - stress that alignment matters more than most designers realize
|
|
||||||
- **10+ years of experience** - mention the method is based on real-world project lessons
|
|
||||||
- Empathetic about discomfort with business/money conversations
|
|
||||||
- Transformative about the mindset shift from selling to helping
|
|
||||||
- Emphasize the discipline and patience to understand before solving
|
|
||||||
- Use the carpenter and doctor analogies with respect and gravity
|
|
||||||
- Emphasize that understanding their outcomes makes everything easier
|
|
||||||
- Direct about the importance of professional boundaries
|
|
||||||
- Practical with real examples and specific numbers
|
|
||||||
- Empowering about serving clients through clarity
|
|
||||||
- Normalize the discomfort - everyone feels this way
|
|
||||||
- Balance business protection with serving the client
|
|
||||||
- Show genuine curiosity and interest in understanding their needs
|
|
||||||
- Celebrate the restraint to not present solutions in the discovery meeting
|
|
||||||
|
|
||||||
**Key messages to emphasize:**
|
|
||||||
|
|
||||||
- **WDS (Whiteport Design Studio)** - mention the method name frequently
|
|
||||||
- **Four WDS Phases** - Phase 1: Win Buy-In, Phase 2: Map Goals, Phase 3: Design, Phase 4: Deliver
|
|
||||||
- **Foundation more impactful than design** - alignment determines project success
|
|
||||||
- **Saga the Analyst** - WDS agent trained on 10+ years of project experience
|
|
||||||
- **Templates and instructions from real experience** - not theory, but proven practice
|
|
||||||
- **The clear workflow** - Listen → Create → Present → Negotiate → Accept → Contract → Sign → Brief
|
|
||||||
- **Pitch and contract become project brief backbone** - not throwaway documents
|
|
||||||
- **Contract based on accepted pitch** - formalizing what they already agreed to
|
|
||||||
- **Short and concise contracts** - long text is hard to understand and can hide strange provisions
|
|
||||||
- **Understanding before pitching** - know what they need first, pitch second
|
|
||||||
- **Separate discovery from solution** - don't present solutions in the same meeting
|
|
||||||
- **The carpenter measures twice** - take time to understand before solving
|
|
||||||
- **The doctor diagnoses first** - understand the problem before prescribing the solution
|
|
||||||
- **Ask until you find the pain point** - keep digging deeper to understand the real issue
|
|
||||||
- **Ask what's important for success** - understand what gives them confidence
|
|
||||||
- **Planning together builds trust** - asking about dependencies and preferences shows you care
|
|
||||||
- **What's important to them informs the agreement** - provisions that give them confidence
|
|
||||||
- **Take notes, confirm, then stop** - resist the urge to flood them with solutions
|
|
||||||
- **Clearly specify their outcomes** - makes pitching feel like helping, not selling
|
|
||||||
- **Discovery questions** - ask what success looks like in their words
|
|
||||||
- **When to skip** - if you're doing it yourself, skip this module
|
|
||||||
- **When you need it** - consultant/client, business/suppliers, manager/stakeholders
|
|
||||||
- **The 6 elements** - Idea, Why, What, How, Budget, Commitment
|
|
||||||
- **Clarity serves everyone** - not being pushy, being professional
|
|
||||||
- **Quantify value** - ROI calculations make it easy to say yes
|
|
||||||
- **Scope protection** - "What's NOT Included" is critical
|
|
||||||
- **Change orders** - how to handle scope changes professionally
|
|
||||||
- **Negotiation as iteration** - refining until everyone agrees
|
|
||||||
- **Contracts protect everyone** - not defensive, protective
|
|
||||||
- **Talk about money upfront** - avoiding it doesn't make you generous
|
|
||||||
- **Professional foundation** - operating as a strategic professional
|
|
||||||
- **Understanding makes pitching easier** - when you genuinely know what they need, writing is effortless
|
|
||||||
|
|
||||||
**Avoid:**
|
|
||||||
|
|
||||||
- Making it sound like you need this for every project
|
|
||||||
- Being overly legal or formal in tone
|
|
||||||
- Making contracts sound scary or adversarial
|
|
||||||
- Focusing too much on worst-case scenarios
|
|
||||||
- Assuming everyone is a consultant (some are employees)
|
|
||||||
- Being too vague about pricing and scope
|
|
||||||
- **Skipping the discovery/understanding phase** - don't jump to solutions without understanding outcomes first
|
|
||||||
- **Presenting solutions in the discovery meeting** - resist the urge to impress with quick solutions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Expected Output
|
|
||||||
|
|
||||||
A natural, engaging conversation that:
|
|
||||||
|
|
||||||
- **Emphasizes understanding their outcomes first** as the foundation that makes everything easier
|
|
||||||
- **Shows the discipline of separating discovery from solution** - don't present in the same meeting
|
|
||||||
- **Uses the carpenter and doctor analogies** to illustrate professional patience
|
|
||||||
- **Shows how to ask discovery questions** that reveal what success looks like
|
|
||||||
- **Demonstrates keeping asking until you find the real pain point**
|
|
||||||
- **Shows the discipline: take notes, confirm understanding, then stop** - come back with a thoughtful proposal
|
|
||||||
- **Demonstrates the mindset shift** from selling to helping through genuine understanding
|
|
||||||
- **Clarifies when this module is needed** (and when to skip it)
|
|
||||||
- **Explains the 6 elements of alignment** clearly and practically
|
|
||||||
- **Shows how to structure an alignment document** (10 sections)
|
|
||||||
- **Demonstrates negotiation as iteration** - not rejection
|
|
||||||
- **Details external contracts** with clear sections and business models
|
|
||||||
- **Explains internal signoff** for employees and managers
|
|
||||||
- **Provides real examples** with quantified ROI that came from understanding client outcomes
|
|
||||||
- **Highlights common mistakes** and how to avoid them (especially solving too quickly)
|
|
||||||
- **Empowers designers** to operate as strategic professionals
|
|
||||||
- **Normalizes discomfort** about money and contracts
|
|
||||||
- **Emphasizes serving through clarity** - not being defensive
|
|
||||||
- **Shows how understanding makes pitching easier** - when you know what they need, writing feels effortless
|
|
||||||
- **Ends with clear action** - understand first, create alignment, get signoff, move to Project Brief
|
|
||||||
- Takes 35-40 minutes to listen to
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Alternative: Video Script
|
|
||||||
|
|
||||||
If generating video instead of audio, add these visual elements:
|
|
||||||
|
|
||||||
**On-screen text:**
|
|
||||||
|
|
||||||
- "The Carpenter Measures Twice"
|
|
||||||
- "The Doctor Diagnoses First"
|
|
||||||
- "Understand Before You Solve"
|
|
||||||
- "Don't Present in the Discovery Meeting"
|
|
||||||
- "Take Notes, Confirm, Then Stop"
|
|
||||||
- "Ask Until You Find the Pain Point"
|
|
||||||
- "What Does Success Look Like for Them?"
|
|
||||||
- "Discovery Questions That Reveal Outcomes"
|
|
||||||
- "When to Skip This Module"
|
|
||||||
- "The 6 Elements of Alignment"
|
|
||||||
- "Idea, Why, What, How, Budget, Commitment"
|
|
||||||
- "Negotiation as Iteration"
|
|
||||||
- "What's NOT Included - Your Scope Protection"
|
|
||||||
- "Change Order Process"
|
|
||||||
- "Clarity Serves Everyone"
|
|
||||||
- "Quantify Your Value"
|
|
||||||
- "ROI = Easy Yes"
|
|
||||||
- "Understanding Makes Pitching Easier"
|
|
||||||
- "Helping, Not Selling"
|
|
||||||
- "Professional Foundation"
|
|
||||||
- "Next: Module 04 - Project Brief"
|
|
||||||
|
|
||||||
**B-roll suggestions:**
|
|
||||||
|
|
||||||
- Discovery conversation - asking questions, listening intently
|
|
||||||
- Designer taking detailed notes during client meeting
|
|
||||||
- Designer resisting the urge to jump to solutions
|
|
||||||
- Carpenter measuring twice with a ruler
|
|
||||||
- Doctor examining patient before diagnosis
|
|
||||||
- Understanding what success means to them
|
|
||||||
- Designer saying "Let me think about this and come back"
|
|
||||||
- Designer working alone, thinking through the proposal
|
|
||||||
- Designer presenting thoughtful proposal in SECOND meeting
|
|
||||||
- Negotiation and iteration process
|
|
||||||
- Contract signing
|
|
||||||
- Budget calculations and ROI
|
|
||||||
- Scope boundaries being drawn
|
|
||||||
- Change order being created
|
|
||||||
- Professional designer-client relationship
|
|
||||||
- Internal approval workflow
|
|
||||||
- Transformation: hesitant → confident
|
|
||||||
- Light bulb moment: "Oh, they need THIS"
|
|
||||||
- Genuine helping vs. pushy selling
|
|
||||||
- The patience to understand before solving
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Usage Tips
|
|
||||||
|
|
||||||
1. **Upload THIS SINGLE FILE** to NotebookLM - no other files needed
|
|
||||||
2. **Use the prompt exactly** as written for best results
|
|
||||||
3. **Generate multiple versions** and pick the best one
|
|
||||||
4. **Share the audio/video** with your team or community
|
|
||||||
5. **Iterate** - if the output isn't quite right, refine the prompt
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
After generating Module 03 content:
|
|
||||||
|
|
||||||
- Create NotebookLM prompt for Module 04: Project Brief
|
|
||||||
- Build prompts for all remaining modules
|
|
||||||
- Share in BMad Discord designer channel
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**This module transforms how designers navigate the business side - from uncomfortable to professionally confident!** 🎯✨
|
|
||||||
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "IDEA TO PROJECT PITCH:" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "MAKE STAKE HOLDER" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "PRESENTATIONS" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "03 Alignment" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Keep the womans angle and position similar as in the first reference image. Keep the character neutral and stylized as it is
|
|
||||||
- On the desk there is a large computer screen showing an ongoing online meeting. The woman is in front of the screen, and she has documents and postit notes in front of her allover her keyboard. She is holding up her hands with palms up in an inviting gesture while holding a pencil.
|
|
||||||
- Skip the tablet
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- CLear the background from precious objects exept the globe
|
|
||||||
- Add oversized an toned down business elements (checkmarks, approval stamps, handshake icons ect)
|
|
||||||
- Keep as in reference image
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: stylized contract documents, project pitch printout, calculator, coffee cup stylised. To textshould be visible or be presented with just scribble or gray markers
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
|
|
@ -1,595 +0,0 @@
|
||||||
1
|
|
||||||
00:00:00,280 --> 00:00:02,151
|
|
||||||
Welcome to The Explainer. Today we're
|
|
||||||
|
|
||||||
2
|
|
||||||
00:00:02,151 --> 00:00:04,333
|
|
||||||
going to tackle something that makes a
|
|
||||||
|
|
||||||
3
|
|
||||||
00:00:04,333 --> 00:00:05,892
|
|
||||||
lot of creative people really
|
|
||||||
|
|
||||||
4
|
|
||||||
00:00:05,892 --> 00:00:08,074
|
|
||||||
uncomfortable, and we're going to turn it
|
|
||||||
|
|
||||||
5
|
|
||||||
00:00:08,074 --> 00:00:09,633
|
|
||||||
into your single greatest professional
|
|
||||||
|
|
||||||
6
|
|
||||||
00:00:09,633 --> 00:00:11,504
|
|
||||||
strength, mastering the business side of
|
|
||||||
|
|
||||||
7
|
|
||||||
00:00:11,504 --> 00:00:13,686
|
|
||||||
design. I'm willing to bet this sounds
|
|
||||||
|
|
||||||
8
|
|
||||||
00:00:13,686 --> 00:00:15,869
|
|
||||||
familiar, right? You know that pit in
|
|
||||||
|
|
||||||
9
|
|
||||||
00:00:15,869 --> 00:00:18,363
|
|
||||||
your stomach when it's time to talk money
|
|
||||||
|
|
||||||
10
|
|
||||||
00:00:18,363 --> 00:00:21,009
|
|
||||||
or contracts or negotiations?All you want
|
|
||||||
|
|
||||||
11
|
|
||||||
00:00:21,009 --> 00:00:23,914
|
|
||||||
to do is just get to the fun part,
|
|
||||||
|
|
||||||
12
|
|
||||||
00:00:23,914 --> 00:00:26,174
|
|
||||||
the creative work. But here's a thought.
|
|
||||||
|
|
||||||
13
|
|
||||||
00:00:26,174 --> 00:00:28,434
|
|
||||||
What if all that business stuff isn't
|
|
||||||
|
|
||||||
14
|
|
||||||
00:00:28,434 --> 00:00:30,694
|
|
||||||
just a necessary evil? What if it's
|
|
||||||
|
|
||||||
15
|
|
||||||
00:00:30,694 --> 00:00:32,631
|
|
||||||
actually the secret ingredient to doing
|
|
||||||
|
|
||||||
16
|
|
||||||
00:00:32,631 --> 00:00:34,246
|
|
||||||
better, more successful design work?
|
|
||||||
|
|
||||||
17
|
|
||||||
00:00:34,246 --> 00:00:36,829
|
|
||||||
Let's dive in and reframe this using the
|
|
||||||
|
|
||||||
18
|
|
||||||
00:00:36,829 --> 00:00:38,766
|
|
||||||
Whiteboard Design Studio method as our
|
|
||||||
|
|
||||||
19
|
|
||||||
00:00:38,766 --> 00:00:41,553
|
|
||||||
guide. OK, First things first. We have to
|
|
||||||
|
|
||||||
20
|
|
||||||
00:00:41,553 --> 00:00:43,479
|
|
||||||
talk about the core problem, the
|
|
||||||
|
|
||||||
21
|
|
||||||
00:00:43,479 --> 00:00:45,725
|
|
||||||
fundamental dilemma that trips us so many
|
|
||||||
|
|
||||||
22
|
|
||||||
00:00:45,725 --> 00:00:47,972
|
|
||||||
projects before a single idea is even
|
|
||||||
|
|
||||||
23
|
|
||||||
00:00:47,972 --> 00:00:50,219
|
|
||||||
sketched out. And here's the deal. You
|
|
||||||
|
|
||||||
24
|
|
||||||
00:00:50,219 --> 00:00:51,824
|
|
||||||
could create the most jaw-dropping,
|
|
||||||
|
|
||||||
25
|
|
||||||
00:00:51,824 --> 00:00:54,071
|
|
||||||
brilliant design in the world, but if
|
|
||||||
|
|
||||||
26
|
|
||||||
00:00:54,071 --> 00:00:56,317
|
|
||||||
it's built on a shaky foundation of
|
|
||||||
|
|
||||||
27
|
|
||||||
00:00:56,317 --> 00:00:58,243
|
|
||||||
mismatched expectations, it is going to
|
|
||||||
|
|
||||||
28
|
|
||||||
00:00:58,243 --> 00:01:00,490
|
|
||||||
fail. The groundwork you lay before you.
|
|
||||||
|
|
||||||
29
|
|
||||||
00:01:00,600 --> 00:01:03,216
|
|
||||||
Ever open a design A often matters more
|
|
||||||
|
|
||||||
30
|
|
||||||
00:01:03,216 --> 00:01:06,160
|
|
||||||
than the design itself. O how do we fix
|
|
||||||
|
|
||||||
31
|
|
||||||
00:01:06,160 --> 00:01:08,122
|
|
||||||
this? Well, what's really fascinating is
|
|
||||||
|
|
||||||
32
|
|
||||||
00:01:08,122 --> 00:01:10,084
|
|
||||||
that the solution isn't some complex
|
|
||||||
|
|
||||||
33
|
|
||||||
00:01:10,084 --> 00:01:12,047
|
|
||||||
business secret. It's a simple, powerful
|
|
||||||
|
|
||||||
34
|
|
||||||
00:01:12,047 --> 00:01:14,663
|
|
||||||
shift in your mindset. I mean, just think
|
|
||||||
|
|
||||||
35
|
|
||||||
00:01:14,663 --> 00:01:16,625
|
|
||||||
about any other respected profession. A
|
|
||||||
|
|
||||||
36
|
|
||||||
00:01:16,625 --> 00:01:18,588
|
|
||||||
good Carpenter always measures twice, so
|
|
||||||
|
|
||||||
37
|
|
||||||
00:01:18,588 --> 00:01:21,422
|
|
||||||
they only have to cut once. It's all
|
|
||||||
|
|
||||||
38
|
|
||||||
00:01:21,422 --> 00:01:23,168
|
|
||||||
about that upfront discipline to make
|
|
||||||
|
|
||||||
39
|
|
||||||
00:01:23,168 --> 00:01:25,787
|
|
||||||
sure the work is right. Or think about a
|
|
||||||
|
|
||||||
40
|
|
||||||
00:01:25,787 --> 00:01:27,825
|
|
||||||
doctor. They're not just going to guess
|
|
||||||
|
|
||||||
41
|
|
||||||
00:01:27,825 --> 00:01:29,571
|
|
||||||
what's wrong and start handing out
|
|
||||||
|
|
||||||
42
|
|
||||||
00:01:29,571 --> 00:01:31,608
|
|
||||||
prescriptions, right? No way. They ask a
|
|
||||||
|
|
||||||
43
|
|
||||||
00:01:31,608 --> 00:01:33,645
|
|
||||||
ton of questions, they run tests, they
|
|
||||||
|
|
||||||
44
|
|
||||||
00:01:33,645 --> 00:01:35,391
|
|
||||||
diagnose the root problem before they
|
|
||||||
|
|
||||||
45
|
|
||||||
00:01:35,391 --> 00:01:37,429
|
|
||||||
ever propose a solution, and our process
|
|
||||||
|
|
||||||
46
|
|
||||||
00:01:37,429 --> 00:01:39,466
|
|
||||||
should be exactly the same. So this
|
|
||||||
|
|
||||||
47
|
|
||||||
00:01:39,466 --> 00:01:42,181
|
|
||||||
brings us to the. Absolute core of this
|
|
||||||
|
|
||||||
48
|
|
||||||
00:01:42,181 --> 00:01:43,858
|
|
||||||
whole approach. Understand before you
|
|
||||||
|
|
||||||
49
|
|
||||||
00:01:43,858 --> 00:01:45,870
|
|
||||||
solve. It's about having the discipline
|
|
||||||
|
|
||||||
50
|
|
||||||
00:01:45,870 --> 00:01:48,553
|
|
||||||
to resist that urge we all have to
|
|
||||||
|
|
||||||
51
|
|
||||||
00:01:48,553 --> 00:01:51,235
|
|
||||||
jump in and show off our ideas. Instead,
|
|
||||||
|
|
||||||
52
|
|
||||||
00:01:51,235 --> 00:01:53,918
|
|
||||||
your only job in that first meeting is
|
|
||||||
|
|
||||||
53
|
|
||||||
00:01:53,918 --> 00:01:55,930
|
|
||||||
to listen to deeply understand their
|
|
||||||
|
|
||||||
54
|
|
||||||
00:01:55,930 --> 00:01:57,607
|
|
||||||
goals, their frustrations, and what
|
|
||||||
|
|
||||||
55
|
|
||||||
00:01:57,607 --> 00:01:59,954
|
|
||||||
success actually looks like to them. And
|
|
||||||
|
|
||||||
56
|
|
||||||
00:01:59,954 --> 00:02:02,274
|
|
||||||
this charge is. Lays it out perfectly,
|
|
||||||
|
|
||||||
57
|
|
||||||
00:02:02,274 --> 00:02:04,451
|
|
||||||
doesn't it? The amateur rushes in, trying
|
|
||||||
|
|
||||||
58
|
|
||||||
00:02:04,451 --> 00:02:06,940
|
|
||||||
to sell a solution to impress with speed.
|
|
||||||
|
|
||||||
59
|
|
||||||
00:02:06,940 --> 00:02:08,806
|
|
||||||
The professional, on the other hand,
|
|
||||||
|
|
||||||
60
|
|
||||||
00:02:08,806 --> 00:02:10,983
|
|
||||||
slows down. They help the client get
|
|
||||||
|
|
||||||
61
|
|
||||||
00:02:10,983 --> 00:02:12,850
|
|
||||||
crystal clear on the problem. First,
|
|
||||||
|
|
||||||
62
|
|
||||||
00:02:12,850 --> 00:02:14,716
|
|
||||||
they're not selling, they're helping. And
|
|
||||||
|
|
||||||
63
|
|
||||||
00:02:14,716 --> 00:02:16,582
|
|
||||||
listen, this isn't just for freelancers.
|
|
||||||
|
|
||||||
64
|
|
||||||
00:02:16,582 --> 00:02:18,760
|
|
||||||
It doesn't matter if you're a consultant
|
|
||||||
|
|
||||||
65
|
|
||||||
00:02:18,760 --> 00:02:20,937
|
|
||||||
pitching a new client, a business owner
|
|
||||||
|
|
||||||
66
|
|
||||||
00:02:20,937 --> 00:02:23,311
|
|
||||||
hiring a vendor. Or an employee trying to
|
|
||||||
|
|
||||||
67
|
|
||||||
00:02:23,311 --> 00:02:25,272
|
|
||||||
get buy in from your boss. Anytime
|
|
||||||
|
|
||||||
68
|
|
||||||
00:02:25,272 --> 00:02:27,513
|
|
||||||
there's a gap between you and a decision
|
|
||||||
|
|
||||||
69
|
|
||||||
00:02:27,513 --> 00:02:29,474
|
|
||||||
maker who needs to commit resources, this
|
|
||||||
|
|
||||||
70
|
|
||||||
00:02:29,474 --> 00:02:31,995
|
|
||||||
is the mindset you need. OK, so we've got
|
|
||||||
|
|
||||||
71
|
|
||||||
00:02:31,995 --> 00:02:33,956
|
|
||||||
the mindset down. Now for the practical
|
|
||||||
|
|
||||||
72
|
|
||||||
00:02:33,956 --> 00:02:35,917
|
|
||||||
part. Let's look at the actual toolkit
|
|
||||||
|
|
||||||
73
|
|
||||||
00:02:35,917 --> 00:02:38,438
|
|
||||||
that helps you build a pitch so clear and
|
|
||||||
|
|
||||||
74
|
|
||||||
00:02:38,438 --> 00:02:40,679
|
|
||||||
so aligned that it makes it really easy
|
|
||||||
|
|
||||||
75
|
|
||||||
00:02:40,679 --> 00:02:43,427
|
|
||||||
for them to say yes. These six questions
|
|
||||||
|
|
||||||
76
|
|
||||||
00:02:43,427 --> 00:02:44,990
|
|
||||||
are everything. Every single successful
|
|
||||||
|
|
||||||
77
|
|
||||||
00:02:44,990 --> 00:02:47,177
|
|
||||||
proposal, whether it's for a client or
|
|
||||||
|
|
||||||
78
|
|
||||||
00:02:47,177 --> 00:02:49,677
|
|
||||||
your boss, has to answer all of them.
|
|
||||||
|
|
||||||
79
|
|
||||||
00:02:49,677 --> 00:02:52,177
|
|
||||||
What are we building? Why? What's in the
|
|
||||||
|
|
||||||
80
|
|
||||||
00:02:52,177 --> 00:02:54,677
|
|
||||||
box? How will we do it? What's the
|
|
||||||
|
|
||||||
81
|
|
||||||
00:02:54,677 --> 00:02:56,865
|
|
||||||
investment and what's the next step? Miss
|
|
||||||
|
|
||||||
82
|
|
||||||
00:02:56,865 --> 00:02:59,052
|
|
||||||
even 1 and you're creating doubt, and
|
|
||||||
|
|
||||||
83
|
|
||||||
00:02:59,052 --> 00:03:01,552
|
|
||||||
doubt is a deal killer. This is so
|
|
||||||
|
|
||||||
84
|
|
||||||
00:03:01,552 --> 00:03:03,876
|
|
||||||
important to remember. You have to speak
|
|
||||||
|
|
||||||
85
|
|
||||||
00:03:03,876 --> 00:03:05,396
|
|
||||||
their language. Decision makers don't
|
|
||||||
|
|
||||||
86
|
|
||||||
00:03:05,396 --> 00:03:07,220
|
|
||||||
really care about how beautiful your
|
|
||||||
|
|
||||||
87
|
|
||||||
00:03:07,220 --> 00:03:09,348
|
|
||||||
design is, they care about the outcome.
|
|
||||||
|
|
||||||
88
|
|
||||||
00:03:09,348 --> 00:03:12,084
|
|
||||||
Is it worth the time and money you have
|
|
||||||
|
|
||||||
89
|
|
||||||
00:03:12,084 --> 00:03:13,908
|
|
||||||
to connect every single thing you're
|
|
||||||
|
|
||||||
90
|
|
||||||
00:03:13,908 --> 00:03:16,036
|
|
||||||
proposing back to the business value they
|
|
||||||
|
|
||||||
91
|
|
||||||
00:03:16,036 --> 00:03:18,772
|
|
||||||
told you they needed. O don't just say a
|
|
||||||
|
|
||||||
92
|
|
||||||
00:03:18,772 --> 00:03:21,204
|
|
||||||
new tool will save time. Quantify it. Put
|
|
||||||
|
|
||||||
93
|
|
||||||
00:03:21,204 --> 00:03:23,850
|
|
||||||
a number on it. Saying this project
|
|
||||||
|
|
||||||
94
|
|
||||||
00:03:23,850 --> 00:03:25,800
|
|
||||||
will create $150,000 in annual
|
|
||||||
|
|
||||||
95
|
|
||||||
00:03:25,800 --> 00:03:28,140
|
|
||||||
productivity gains. Now that is a
|
|
||||||
|
|
||||||
96
|
|
||||||
00:03:28,140 --> 00:03:30,090
|
|
||||||
language every single decision maker
|
|
||||||
|
|
||||||
97
|
|
||||||
00:03:30,090 --> 00:03:32,040
|
|
||||||
understands. And here's the beautiful
|
|
||||||
|
|
||||||
98
|
|
||||||
00:03:32,040 --> 00:03:34,770
|
|
||||||
part. Once you get that solid alignment
|
|
||||||
|
|
||||||
99
|
|
||||||
00:03:34,770 --> 00:03:37,500
|
|
||||||
on the value and the plan, everything
|
|
||||||
|
|
||||||
100
|
|
||||||
00:03:37,500 --> 00:03:40,230
|
|
||||||
that comes next just flows. It becomes
|
|
||||||
|
|
||||||
101
|
|
||||||
00:03:40,230 --> 00:03:42,180
|
|
||||||
this totally natural, simple progression
|
|
||||||
|
|
||||||
102
|
|
||||||
00:03:42,180 --> 00:03:44,399
|
|
||||||
from understanding. To agreement. You can
|
|
||||||
|
|
||||||
103
|
|
||||||
00:03:44,399 --> 00:03:47,096
|
|
||||||
see it here. It's like a logical chain
|
|
||||||
|
|
||||||
104
|
|
||||||
00:03:47,096 --> 00:03:49,456
|
|
||||||
reaction. You listen, you build a itch
|
|
||||||
|
|
||||||
105
|
|
||||||
00:03:49,456 --> 00:03:52,153
|
|
||||||
based on what you heard, they accept it.
|
|
||||||
|
|
||||||
106
|
|
||||||
00:03:52,153 --> 00:03:54,514
|
|
||||||
And then that very same document becomes
|
|
||||||
|
|
||||||
107
|
|
||||||
00:03:54,514 --> 00:03:56,874
|
|
||||||
the foundation for the contract and the
|
|
||||||
|
|
||||||
108
|
|
||||||
00:03:56,874 --> 00:03:58,560
|
|
||||||
project brief. No surprises, no
|
|
||||||
|
|
||||||
109
|
|
||||||
00:03:58,560 --> 00:04:00,583
|
|
||||||
confusion. Each step builds directly on
|
|
||||||
|
|
||||||
110
|
|
||||||
00:04:00,583 --> 00:04:02,943
|
|
||||||
the last. And let's talk about that
|
|
||||||
|
|
||||||
111
|
|
||||||
00:04:02,943 --> 00:04:04,718
|
|
||||||
contract. Because it makes people
|
|
||||||
|
|
||||||
112
|
|
||||||
00:04:04,718 --> 00:04:06,710
|
|
||||||
nervous. A contract isn't about mistrust.
|
|
||||||
|
|
||||||
113
|
|
||||||
00:04:06,710 --> 00:04:09,033
|
|
||||||
It's an act of professional service. It's
|
|
||||||
|
|
||||||
114
|
|
||||||
00:04:09,033 --> 00:04:10,693
|
|
||||||
just about clarity. You're simply
|
|
||||||
|
|
||||||
115
|
|
||||||
00:04:10,693 --> 00:04:12,685
|
|
||||||
formalizing what you both already happily
|
|
||||||
|
|
||||||
116
|
|
||||||
00:04:12,685 --> 00:04:15,341
|
|
||||||
agreed to. And you know what the most
|
|
||||||
|
|
||||||
117
|
|
||||||
00:04:15,341 --> 00:04:17,001
|
|
||||||
important section is often defining
|
|
||||||
|
|
||||||
118
|
|
||||||
00:04:17,001 --> 00:04:19,324
|
|
||||||
what's out of scope. That's your best
|
|
||||||
|
|
||||||
119
|
|
||||||
00:04:19,324 --> 00:04:21,316
|
|
||||||
friend in preventing scope creep. So
|
|
||||||
|
|
||||||
120
|
|
||||||
00:04:21,316 --> 00:04:23,640
|
|
||||||
you've put in all this upfront work.
|
|
||||||
|
|
||||||
121
|
|
||||||
00:04:23,780 --> 00:04:25,446
|
|
||||||
You've listened, you've diagnosed, you've
|
|
||||||
|
|
||||||
122
|
|
||||||
00:04:25,446 --> 00:04:27,444
|
|
||||||
aligned. What's the ultimate payoff? Why
|
|
||||||
|
|
||||||
123
|
|
||||||
00:04:27,444 --> 00:04:29,776
|
|
||||||
go through all the trouble? Well, the
|
|
||||||
|
|
||||||
124
|
|
||||||
00:04:29,776 --> 00:04:31,775
|
|
||||||
impact is huge. It completely transforms
|
|
||||||
|
|
||||||
125
|
|
||||||
00:04:31,775 --> 00:04:33,107
|
|
||||||
the entire relationship. Client
|
|
||||||
|
|
||||||
126
|
|
||||||
00:04:33,107 --> 00:04:35,439
|
|
||||||
confidence in you goes through the roof.
|
|
||||||
|
|
||||||
127
|
|
||||||
00:04:35,439 --> 00:04:37,438
|
|
||||||
The chances of the project actually
|
|
||||||
|
|
||||||
128
|
|
||||||
00:04:37,438 --> 00:04:39,436
|
|
||||||
succeeding skyrocket. And for you, it
|
|
||||||
|
|
||||||
129
|
|
||||||
00:04:39,436 --> 00:04:41,435
|
|
||||||
leads to a healthier, more profitable
|
|
||||||
|
|
||||||
130
|
|
||||||
00:04:41,435 --> 00:04:44,100
|
|
||||||
business. It really is a win, win, win.
|
|
||||||
|
|
||||||
131
|
|
||||||
00:04:44,650 --> 00:04:47,192
|
|
||||||
And this might be the biggest shift of
|
|
||||||
|
|
||||||
132
|
|
||||||
00:04:47,192 --> 00:04:48,781
|
|
||||||
all. You've fundamentally change your
|
|
||||||
|
|
||||||
133
|
|
||||||
00:04:48,781 --> 00:04:51,005
|
|
||||||
role. You're no longer just an order
|
|
||||||
|
|
||||||
134
|
|
||||||
00:04:51,005 --> 00:04:53,229
|
|
||||||
taker, someone who just executes a list
|
|
||||||
|
|
||||||
135
|
|
||||||
00:04:53,229 --> 00:04:55,453
|
|
||||||
of tasks. You become a strategic partner,
|
|
||||||
|
|
||||||
136
|
|
||||||
00:04:55,453 --> 00:04:58,313
|
|
||||||
someone they rely on to guide them to a
|
|
||||||
|
|
||||||
137
|
|
||||||
00:04:58,313 --> 00:05:00,219
|
|
||||||
successful outcome. The whole thing, from
|
|
||||||
|
|
||||||
138
|
|
||||||
00:05:00,219 --> 00:05:02,126
|
|
||||||
that first conversation to the final
|
|
||||||
|
|
||||||
139
|
|
||||||
00:05:02,126 --> 00:05:04,032
|
|
||||||
signed contract, is really an active
|
|
||||||
|
|
||||||
140
|
|
||||||
00:05:04,032 --> 00:05:06,606
|
|
||||||
service. You were giving your client and
|
|
||||||
|
|
||||||
141
|
|
||||||
00:05:06,606 --> 00:05:08,702
|
|
||||||
yourself the gift of clarity. It makes
|
|
||||||
|
|
||||||
142
|
|
||||||
00:05:08,702 --> 00:05:11,097
|
|
||||||
everyone feel safe and secure so you can
|
|
||||||
|
|
||||||
143
|
|
||||||
00:05:11,097 --> 00:05:13,193
|
|
||||||
all focus on what really matters, doing
|
|
||||||
|
|
||||||
144
|
|
||||||
00:05:13,193 --> 00:05:14,989
|
|
||||||
incredible work together. And that leaves
|
|
||||||
|
|
||||||
145
|
|
||||||
00:05:14,989 --> 00:05:17,384
|
|
||||||
us with one final thought to take into
|
|
||||||
|
|
||||||
146
|
|
||||||
00:05:17,384 --> 00:05:19,480
|
|
||||||
your next meeting. Ask yourself this, are
|
|
||||||
|
|
||||||
147
|
|
||||||
00:05:19,480 --> 00:05:21,875
|
|
||||||
you there just to sell them something or
|
|
||||||
|
|
||||||
148
|
|
||||||
00:05:21,875 --> 00:05:23,971
|
|
||||||
are you there to genuinely help them
|
|
||||||
|
|
||||||
149
|
|
||||||
00:05:23,971 --> 00:05:24,270
|
|
||||||
succeed?
|
|
||||||
|
|
@ -1,163 +0,0 @@
|
||||||
# NotebookLM Prompt: Module 04 - Product Brief
|
|
||||||
|
|
||||||
**Use this prompt to generate audio/video content for Module 04: Product Brief**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
**This is a single, self-contained prompt file.**
|
|
||||||
|
|
||||||
Simply upload THIS FILE to NotebookLM and use the prompt below to generate engaging audio/video content. No other files needed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prompt
|
|
||||||
|
|
||||||
Create an engaging 25-30 minute podcast conversation between two hosts discussing Module 04 of the Whiteport Design Studio (WDS) course: Product Brief.
|
|
||||||
|
|
||||||
**IMPORTANT: WDS stands for Whiteport Design Studio - always refer to it by its full name "Whiteport Design Studio" or "WDS" throughout the conversation.**
|
|
||||||
|
|
||||||
**Host 1 (The Curious Designer):** A designer ready to start a project and wants to understand the practical process.
|
|
||||||
|
|
||||||
**Host 2 (The Practical Guide):** A designer who uses the Product Brief as a living reference throughout every project phase.
|
|
||||||
|
|
||||||
**Conversation structure:**
|
|
||||||
|
|
||||||
### 1. Opening (3 min) - The Real Question
|
|
||||||
|
|
||||||
The Curious Designer: "I already know what app I want to build. Why should I waste time on a document?"
|
|
||||||
|
|
||||||
The Practical Guide: "That's exactly what everyone thinks. But here's what you're actually missing: You're about to spend weeks or months prompting AI, fighting hallucinations, correcting assumptions, copy-pasting between tools. The Product Brief isn't a document - it's the most powerful prompt you'll ever create. And it makes your idea better."
|
|
||||||
|
|
||||||
The Curious Designer: "Wait, a prompt? I thought it was planning documentation."
|
|
||||||
|
|
||||||
The Practical Guide: "That's the paradigm shift. In WDS, the Product Brief IS your prompt - but it's a prompt that every agent reads automatically. You write it once through a guided conversation, and it stops AI hallucinations before they start. No more endless back-and-forth. No more 'but I already told you that.' The AI just knows your project."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. One Environment, Zero Copy-Paste (4 min)
|
|
||||||
|
|
||||||
The Curious Designer: "OK, but where does this actually happen? Am I jumping between ChatGPT and my code editor?"
|
|
||||||
|
|
||||||
The Practical Guide: "No! That's the breakthrough. Everything happens in your IDE - your code editor. You create the Product Brief there. You refine it there. Every agent reads it there. Your code lives there. Your documentation lives there. Everything in one place.
|
|
||||||
|
|
||||||
No cutting and pasting between GPTs. No losing context. No 'wait, where did I save that?' It's all right there, version controlled, accessible to your entire team, ready for every phase of development."
|
|
||||||
|
|
||||||
The Curious Designer: "So I'm not switching tools constantly?"
|
|
||||||
|
|
||||||
The Practical Guide: "Never. You activate Saga in your IDE. She asks questions. You answer. The document builds right there in your editor. Then when you move to design, Sketch reads that same document - same place, same context. When you write content, Lyra reads it. When you code, developers read it. One environment, one source of truth, zero friction."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. Questions That Make Your Idea Better (6 min)
|
|
||||||
|
|
||||||
The Curious Designer: "You said this makes my idea better. How?"
|
|
||||||
|
|
||||||
The Practical Guide: "The process is around 30 questions where your answer leads to the next in a fun and engaging way. This challenges you to really think deeply about your product. Not surface-level stuff - deep strategic thinking. And I guarantee - you will feel MORE excited about your idea when you're done, not less.
|
|
||||||
|
|
||||||
Saga asks things like: 'What problem are you actually solving?' You think you know, but when you have to articulate it clearly, you realize there's a deeper insight.
|
|
||||||
|
|
||||||
Then she digs deeper: 'Who is experiencing this problem?' Not just 'parents' but 'working parents juggling multiple kids' schedules while managing their own careers.' The specificity makes your solution sharper.
|
|
||||||
|
|
||||||
She asks: 'How will you measure success?' You can't say 'make it better' - you have to think: 'Reduce missed commitments by 50% in month one.' That clarity changes how you design.
|
|
||||||
|
|
||||||
She explores constraints: 'What's your budget? Timeline? Team size? Technical limitations?' Naming them isn't limiting - it's liberating. Now you know what you're working with.
|
|
||||||
|
|
||||||
And she keeps going - about your competitive landscape, your differentiation, your stakeholders, your risks. Around 30 questions total that cover everything you need to think through before you start building."
|
|
||||||
|
|
||||||
The Curious Designer: "So it's not just documentation, it's thinking?"
|
|
||||||
|
|
||||||
The Practical Guide: "Exactly! You're refining your thinking in real-time. And here's the beautiful part - you're watching the document build as you talk. Every insight captured. Every refinement documented. And when your thinking evolves later - which it will - the document is right there at your fingertips. You update it immediately, and every agent sees the improved thinking instantly."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. Man and Machine Collaboration (5 min)
|
|
||||||
|
|
||||||
The Curious Designer: "Wait, so Saga is writing the document while I talk. Can I see what she's doing?"
|
|
||||||
|
|
||||||
The Practical Guide: "Yes! And this is crucial. You review every single change the AI makes. You're not blindly accepting AI output. You're collaborating.
|
|
||||||
|
|
||||||
Saga suggests a way to phrase your vision. You see it appear in the document. You think: 'Hmm, not quite right.' You say: 'Actually, let me refine that...' She updates it immediately.
|
|
||||||
|
|
||||||
This is powerful man-and-machine collaboration. You bring the strategic thinking. She brings the structure and ensures nothing gets missed. But you're always in control. You see every change. You approve every word. You refine together."
|
|
||||||
|
|
||||||
The Curious Designer: "So I'm not just prompting and hoping?"
|
|
||||||
|
|
||||||
The Practical Guide: "Never. You're working together in real-time. And because it's all in your IDE with version control, you can see the entire history. You can revert changes. You can branch and experiment. It's not black-box AI - it's transparent collaboration where you're always the decision maker."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. Beyond the Brief - The Complete Foundation (4 min)
|
|
||||||
|
|
||||||
The Curious Designer: "Is the Product Brief the only document I create?"
|
|
||||||
|
|
||||||
The Practical Guide: "No! And this is where it gets even better. Saga will also set up additional documents in the same folder - right alongside your Product Brief.
|
|
||||||
|
|
||||||
Need to define your main features? She creates a Core Features document.
|
|
||||||
|
|
||||||
Need to specify supported languages? She creates a Language Selection document.
|
|
||||||
|
|
||||||
Need to define your brand voice? She creates a Tone of Voice document.
|
|
||||||
|
|
||||||
Need to capture your visual identity? She creates a Visual Design Brief.
|
|
||||||
|
|
||||||
Whatever is crucial for YOUR project, she sets it up in the same place. Not scattered across tools. Not lost in chat history. Right there in `/docs/A-Product-Brief/` - organized, accessible, version controlled."
|
|
||||||
|
|
||||||
The Curious Designer: "So it's not just one document, it's a complete strategic foundation?"
|
|
||||||
|
|
||||||
The Practical Guide: "Exactly. And every document feeds into the next phase of your project. Your Product Brief leads to Trigger Mapping. Your Core Features lead to Scenarios. Your Tone of Voice leads to Content. Everything connects. Nothing is wasted."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. Stopping Hallucinations Before They Start (4 min)
|
|
||||||
|
|
||||||
The Curious Designer: "You mentioned this stops AI hallucinations. How?"
|
|
||||||
|
|
||||||
The Practical Guide: "Because every document in WDS leads to the next. The Product Brief becomes the foundation for Trigger Mapping. Trigger Mapping becomes the foundation for Scenarios. Scenarios become the foundation for Design.
|
|
||||||
|
|
||||||
Each agent reads the previous work before starting. They don't make assumptions. They don't hallucinate features you never asked for. They don't invent user needs that don't exist.
|
|
||||||
|
|
||||||
Without this foundation, you're constantly fighting: 'No, I didn't say that.' 'Why did you add this feature?' 'That's not my target user.' You're prompting forever just to get back to what you actually wanted.
|
|
||||||
|
|
||||||
With the Product Brief, the AI knows your project from the start. Every agent is aligned. Every decision is grounded in your documented strategy. The hallucinations just... stop."
|
|
||||||
|
|
||||||
The Curious Designer: "So I'm not constantly correcting the AI?"
|
|
||||||
|
|
||||||
The Practical Guide: "No. You're collaborating from a shared understanding. The AI isn't guessing - it's reading your Product Brief. It knows your constraints, your users, your goals. You spend your time refining and improving, not correcting and explaining."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. The Bottom Line (3 min)
|
|
||||||
|
|
||||||
The Curious Designer: "OK, I'm convinced. What's the actual time investment?"
|
|
||||||
|
|
||||||
The Practical Guide: "Maybe 2-3 hours for a thorough Product Brief. But here's what you're getting:
|
|
||||||
|
|
||||||
You're creating the most powerful prompt possible - one that every agent reads automatically.
|
|
||||||
|
|
||||||
You're stopping weeks of hallucination hell and endless prompting.
|
|
||||||
|
|
||||||
You're setting up one environment where everything lives - no tool switching, no copy-paste.
|
|
||||||
|
|
||||||
You're establishing transparent collaboration where you review every AI change.
|
|
||||||
|
|
||||||
You're refining your thinking through questions that make your idea genuinely better.
|
|
||||||
|
|
||||||
You're creating a living document that's always at your fingertips when your thinking evolves.
|
|
||||||
|
|
||||||
You're building a complete strategic foundation with all supporting documents in one place.
|
|
||||||
|
|
||||||
And you're supercharging your entire process - making the final product better than your original idea.
|
|
||||||
|
|
||||||
That's not time wasted. That's time invested that pays back 10x, 50x, 100x throughout your project."
|
|
||||||
|
|
||||||
The Curious Designer: "When you put it that way... why would I NOT do this?"
|
|
||||||
|
|
||||||
The Practical Guide: "Exactly. Open your IDE. Activate Saga. Start the conversation. Your future self - the one who isn't fighting hallucinations at 2am - will thank you."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## End of Prompt
|
|
||||||
|
|
||||||
Generate the podcast conversation following this structure, maintaining natural dialogue flow while covering all key concepts. Make it engaging, practical, and action-oriented.
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "INSTANT CLARITY" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "A PRODUCT BRIEF" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "IN 30 QUESTIONS!" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "04 Product Brief" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Keep the woman's angle and position similar as in the first reference image. Keep the character neutral and stylized as it is
|
|
||||||
- Woman is working at her desk with a large product brief document/blueprint spread out in front of her
|
|
||||||
- She's holding a pen/marker and has just finished writing, looking satisfied at the completed document
|
|
||||||
- On the desk: sticky notes, coffee cup, the product brief with visible sections/structure
|
|
||||||
- Skip the tablet
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- Clear the background from previous objects except the globe
|
|
||||||
- Add oversized and toned down strategic elements (checkmarks, document icons, organizational charts, flowchart nodes)
|
|
||||||
- Keep as in reference image
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: stylized product brief document (visible structure/sections), sticky notes, pen/marker, coffee cup, notebook. No text should be visible or be presented with just scribble or gray markers
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- do not put light objects behind her face since we need to keep her silhouette clear
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
Module 04 - Product Brief - Your Strategic Foundation Through Guided Conversation
|
|
||||||
|
|
||||||
<https://youtu.be/yhKxkuLq1kQ>
|
|
||||||
|
|
||||||
Teams waste weeks building the wrong thing beautifully. The Product Brief prevents this - a 2-3 page strategic document that answers the 5 questions every project needs before design starts. Create it through AI-guided conversation with Saga, your thinking partner.
|
|
||||||
|
|
||||||
*You'll learn:*
|
|
||||||
✅ Why projects fail without strategic foundation (and how to prevent it)
|
|
||||||
✅ The 5 strategic questions every Product Brief must answer
|
|
||||||
✅ What the document looks like and how teams use it
|
|
||||||
✅ How WDS ensures excellence through thinking partnership
|
|
||||||
✅ Additional strategic documents you can create as needed
|
|
||||||
|
|
||||||
*Free & open-source* | 46-58 minutes | Foundation module
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The AI Prompting Trap
|
|
||||||
01:00 The Paradigm Shift - Brief as Ultimate Prompt
|
|
||||||
02:00 The 30 Questions Process
|
|
||||||
03:00 One Environment Workflow
|
|
||||||
04:00 Ending AI Hallucinations
|
|
||||||
05:00 The Value Proposition
|
|
||||||
|
|
||||||
🎯 The 5 Strategic Questions
|
|
||||||
|
|
||||||
*What & Why* - Vision and positioning (what you're building, why it matters)
|
|
||||||
*Who* - Target users and stakeholders (who uses it, who decides)
|
|
||||||
*How We'll Know* - Success criteria (measurable outcomes)
|
|
||||||
*Context* - Competitive landscape (alternatives, differentiation)
|
|
||||||
*Boundaries* - Constraints (technical, business, design limitations)
|
|
||||||
|
|
||||||
📋 What You'll Create
|
|
||||||
|
|
||||||
*Core Document:*
|
|
||||||
Product Brief (2-3 pages) - Single source of truth for entire team
|
|
||||||
|
|
||||||
*Optional Documents (as needed):*
|
|
||||||
Core Features - Feature prioritization (must/should/could/won't have)
|
|
||||||
Tone of Voice - Brand personality and communication guidelines
|
|
||||||
Visual Design Brief - Visual direction and inspiration
|
|
||||||
Technical Brief - Architecture and integration requirements
|
|
||||||
Content Strategy - Content types, goals, publishing
|
|
||||||
Localization Strategy - Multi-language/region planning
|
|
||||||
Accessibility Requirements - Compliance and user needs
|
|
||||||
Data & Privacy - Collection, storage, compliance
|
|
||||||
|
|
||||||
📚 Course Resources
|
|
||||||
|
|
||||||
🌊 *WDS Presentation:*
|
|
||||||
<https://whiteport.com/whiteport-design-studio/>
|
|
||||||
|
|
||||||
📖 *Tutorial 04:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/module-04-product-brief/tutorial-04.md>
|
|
||||||
|
|
||||||
📖 *Project Brief Template:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/workflows/1-project-brief/project-brief/complete/project-brief.template.md>
|
|
||||||
|
|
||||||
💬 *UX-Design channel in the BMad Discord Community:*
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
📖 *GitHub Discussions:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
◀️ *Previous Module:* Module 03 - Alignment & Signoff
|
|
||||||
<https://www.youtube.com/watch?v=TKjOLlU8UCE>
|
|
||||||
|
|
||||||
▶️ *Next Module:* Module 05 - Trigger Mapping
|
|
||||||
<https://youtu.be/xs_cRk-NoJk>
|
|
||||||
|
|
||||||
📚 *Full Course:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
⚡ *The WDS Advantage*
|
|
||||||
|
|
||||||
*Thinking Partnership:* Human-in-the-loop collaboration from BMad methodology
|
|
||||||
*AI-Guided:* No blank page, no missed elements
|
|
||||||
*Conversational:* Talk it out, Saga writes it down
|
|
||||||
*Professional:* Built-in best practices (SMART goals, constraint checklists)
|
|
||||||
*Flexible:* Two levels (simplified or complete based on needs)
|
|
||||||
*Living:* Easy to update as you learn
|
|
||||||
|
|
||||||
✅ *Next Steps:*
|
|
||||||
1. Watch this module to understand the Product Brief approach
|
|
||||||
2. Complete Tutorial 04 to create your Product Brief with Saga
|
|
||||||
3. Add optional documents as your project needs them
|
|
||||||
4. Share with team for alignment
|
|
||||||
5. Start Module 05: Trigger Mapping
|
|
||||||
|
|
||||||
🎨 *About WDS*
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). The Product Brief is your project's constitution - everything else is legislation.
|
|
||||||
|
|
||||||
#ProductBrief #DesignStrategy #ProjectPlanning #WDS #StrategicFoundation #AIGuided
|
|
||||||
|
|
||||||
*This one document is the difference between confident execution and constant confusion. 🎯*
|
|
||||||
|
|
@ -1,274 +0,0 @@
|
||||||
# Module 05: Trigger Mapping - NotebookLM Prompt
|
|
||||||
|
|
||||||
## Instructions for NotebookLM
|
|
||||||
|
|
||||||
Use this prompt to generate an engaging 6-7 minute audio conversation about Trigger Mapping in WDS. The conversation should feel natural, insightful, and practical - like two colleagues discussing a powerful methodology over coffee.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Prompt
|
|
||||||
|
|
||||||
Create a 6-7 minute conversational audio deep dive about Trigger Mapping in Whiteport Design Studio.
|
|
||||||
|
|
||||||
**Opening Hook (0:00-0:30)**
|
|
||||||
|
|
||||||
"We've all felt that excitement, right? You have a great idea. You're pumped. In your mind, you can already see how wonderful this is going to be. Next step? Let's jump into an AI dialog and make it happen. We can't wait!
|
|
||||||
|
|
||||||
But what if we told you there's a way to elevate that idea? To focus your imagination even more? A way to refine and map out exactly how valuable your product is going to be - for yourself, for your organization, and for the end user.
|
|
||||||
|
|
||||||
What we're talking about is a single slide that has the power to change how you work with digital products forever. We're talking about the Trigger Map. It's as powerful as it is for a hunter to aim properly before a shot. For a carpenter to measure twice before making a cut. Or for a doctor to diagnose before prescribing.
|
|
||||||
|
|
||||||
With Whiteport Design Studio agents, making a Trigger map only this takes a few minutes, and it becomes the backbone of a solid digital strategy. But still, it is so compact that the end result can be easily fit it on a single presentation slide."
|
|
||||||
|
|
||||||
**The Big Idea (0:30-1:00)**
|
|
||||||
|
|
||||||
"Here's the missing link between strategy and design. Trigger Mapping connects three strategic layers in one visual map:
|
|
||||||
|
|
||||||
First layer: Your business goals - what YOU need to achieve. Your vision, your measurable objectives.
|
|
||||||
|
|
||||||
Second layer: Your target groups - WHO out there in the world will make sure, with their use of the product, that you achieve YOUR goals. Not just any users - the specific people whose behavior drives your success.
|
|
||||||
|
|
||||||
Third layer: Their usage goals - what THEY are trying to achieve. Their psychological drivers - both what they want to accomplish and what they fear or want to avoid. This is THEIR why, not yours.
|
|
||||||
|
|
||||||
The magic is in the connection: Your business goals are achieved THROUGH their usage. They use your product to achieve THEIR goals, and in doing so, they help you achieve YOURS. That's the strategic chain. That's why it's called a Trigger Map - you're mapping what triggers them to act in ways that serve your business.
|
|
||||||
|
|
||||||
It's not just user research. It's strategic psychology mapped visually so everyone on your team understands this chain from business goal to user motivation to design decision. And it's based on 20+ years of proven methodology, not some new trend."
|
|
||||||
|
|
||||||
**The Heritage (1:00-1:30)**
|
|
||||||
|
|
||||||
Quick credibility moment: Trigger Mapping is based on Effect Management methodology from inUse in Sweden - created by Mijo Balic and Ingrid Domingues. This approach has been guiding strategic design for over 20 years.
|
|
||||||
|
|
||||||
WDS modernized it in three key ways. First, simplified the map by removing features so it stays relevant as your product evolves. Second, added negative driving forces - because research shows people work harder to avoid pain than pursue gain. Third, integrated systematic feature scoring so you can prioritize based on real strategic impact, not opinions.
|
|
||||||
|
|
||||||
**The Five Workshops (1:30-4:30)**
|
|
||||||
|
|
||||||
This is the heart of the conversation. Walk through each workshop with energy and practical insight:
|
|
||||||
|
|
||||||
**Workshop 1: Business Goals (30 seconds)**
|
|
||||||
|
|
||||||
"First, you define what winning looks like on TWO levels. Vision - the visionary statement, the aspirational 'why' that motivates your team. Like 'Make remote work sustainable and healthy.' Then you ask the bridging question: 'When this vision is being realized, what will we observe in the world?' That leads to strategic objectives - measurable goals expressed using the SMART method. 'Achieve 5,000 active teams by Q4. Reach 70% retention rate.' Saga guides you through this in 15-20 minutes, connecting aspiration to accountability. This two-level clarity becomes your north star for everything that follows."
|
|
||||||
|
|
||||||
**Workshop 2: Target Groups (45 seconds)**
|
|
||||||
|
|
||||||
"Now the critical question: WHO out there in the world will make sure, with their use of the product, that you achieve your goals? This isn't about abstract segments - it's about real people whose lives your product will touch. Not demographics like 'parents aged 30-45' but behavioral profiles like 'busy working parents juggling multiple kids' schedules, desperately avoiding family conflict over forgotten responsibilities.' You identify 3-5 groups, create detailed personas, then prioritize ruthlessly. Which group's product usage has the highest impact on your business goals? Which is most feasible to reach? This ranking becomes critical because it determines where you focus your design efforts."
|
|
||||||
|
|
||||||
**Workshop 3: Driving Forces (60 seconds)**
|
|
||||||
|
|
||||||
"Here's where it gets psychological. For each persona, you map BOTH sides of motivation. Positive drivers - what do they want to achieve? What pulls them forward? And here's the WDS enhancement - negative drivers. What do they want to avoid? What fears push them to act?
|
|
||||||
|
|
||||||
Think about it: A busy parent isn't just seeking 'better organization.' They're desperately avoiding the shame of missing their kid's soccer game. That negative driver - that fear - is often more powerful than any positive benefit. This is loss aversion in action. People work roughly twice as hard to avoid pain as they do to pursue equivalent gain.
|
|
||||||
|
|
||||||
But here's the validation step: Once you've mapped these drivers, you ask the control questions. If this target group feels this way, would our offering be the best option for them? What alternatives do they have? Why should they care in the first place? These questions validate that your drivers actually connect to your product's value proposition. It's a reality check that prevents you from building for the wrong psychology."
|
|
||||||
|
|
||||||
**Workshop 4: Prioritization (45 seconds)**
|
|
||||||
|
|
||||||
"You can't design for everyone at once. So you prioritize ruthlessly. Which target groups matter most? Which psychological drivers are strongest? This isn't guessing - you're making strategic choices based on business impact and emotional intensity. The output is a ranked list. Your top group's top drivers become your design focus. Everything else is secondary."
|
|
||||||
|
|
||||||
**Workshop 5: Feature Impact (60 seconds)**
|
|
||||||
|
|
||||||
"Now comes the magic. You take your feature ideas and score them systematically against your prioritized drivers. Each feature gets rated on a 0-3 scale: How well does it address the top psychological drivers? You do this for each feature against each top driver, then sum the scores.
|
|
||||||
|
|
||||||
The math is simple but the insight is profound. You end up with a scored feature list where every number traces back through psychological drivers, to target groups, to business goals. No more random feature requests. No more stakeholder opinion battles. Every design decision is backed by strategic data."
|
|
||||||
|
|
||||||
**The Visual Map (4:30-5:00)**
|
|
||||||
|
|
||||||
"The Trigger Map itself is beautifully simple. Business goals at the center. Target groups radiating out, ranked by priority. Their positive and negative drivers connected to each group. It's a one-page strategy document that everyone can understand - stakeholders, developers, designers.
|
|
||||||
|
|
||||||
When someone asks 'why are we building this?' you point to the map. The answer is right there. This feature addresses this psychological driver, for this target group, which supports this business goal. Traceable reasoning. Strategic clarity."
|
|
||||||
|
|
||||||
**The Workflow Integration (5:00-5:30)**
|
|
||||||
|
|
||||||
"And here's what makes WDS different from traditional user research: you have flexibility in how you work. You can do this solo with Saga in your IDE through structured conversation - perfect for individual designers or remote teams. Or you can run it as a physical team workshop with a whiteboard, then upload a photo of your sketch to Saga who will digitize and structure it for you.
|
|
||||||
|
|
||||||
Either way, it all happens in your IDE, right alongside your code and design files. Your answers become living documents that feed directly into the next phase. No separate research tools. No lost context. No copying and pasting between systems. Everything builds on everything. Your Product Brief informs your Trigger Map. Your Trigger Map guides your scenarios. Your scenarios drive your design. It's one continuous strategic thread."
|
|
||||||
|
|
||||||
**The Value Proposition (5:30-6:30)**
|
|
||||||
|
|
||||||
Bring it home with the core benefits:
|
|
||||||
|
|
||||||
"So what do you get for 60-90 minutes of strategic work? First, you stop guessing. Every design decision is backed by mapped psychology and business strategy. Second, you get team alignment. Everyone sees the same strategic picture. No more endless debates about priorities.
|
|
||||||
|
|
||||||
Third, you get systematic feature prioritization. That scored feature list becomes your roadmap, and it's defensible. When stakeholders ask why you're not building their pet feature, you can show them: here's our Trigger Map, here are our top drivers, here's how features score against them. Your feature scores lower. It's not personal - it's strategic.
|
|
||||||
|
|
||||||
Fourth, you get traceable reasoning. Every feature connects to a psychological driver, every driver connects to a target group, every group connects to a business goal. No orphaned features. No random requests. Strategic clarity from top to bottom.
|
|
||||||
|
|
||||||
And finally, you get a long-term reference document. The Trigger Map doesn't become outdated when features change. It stays relevant because it focuses on strategy, not implementation. Update it when your business goals shift or you learn new user psychology. But it's not something you're constantly maintaining."
|
|
||||||
|
|
||||||
**Three Approaches for Different Situations (6:30-7:00)**
|
|
||||||
|
|
||||||
"Now, WDS recognizes that you're not always starting from scratch. You might be in different situations, so we offer three approaches to Trigger Mapping.
|
|
||||||
|
|
||||||
First, the full process we just covered - starting from scratch. Sixty to ninety minutes, five workshops, comprehensive strategic foundation. Perfect when you have no existing documentation and need to build everything from the ground up.
|
|
||||||
|
|
||||||
Second, what if you already have documentation? Vision docs, user research, interview transcripts, project plans - maybe hundreds of pages gathering dust that nobody actually reads? That's where Documentation Synthesis comes in. Thirty to forty-five minutes. Saga analyzes your documentation, validates what's there, fills gaps through conversation, and transforms it all into a single-slide Trigger Map you can actually use. No more pasting 200 pages into AI chats. No more research reports nobody reads. One actionable strategic artifact.
|
|
||||||
|
|
||||||
Third, what if you're in a real hurry? What if you need strategic guidance but don't have even 30 minutes? That's the Slim Trigger Map. Fifteen to twenty minutes. You pick ONE strategic objective, identify ONE target group, map ONE key driver - typically negative, because that's often most powerful. One clear chain from business goal to user psychology to design decision. Quick strategic validation when time is tight.
|
|
||||||
|
|
||||||
Think of it like this: Full Trigger Mapping is your comprehensive foundation for major products. The from-existing-docs route transforms existing research into actionable strategy. The Slim Trigger Map is your quick strategic check for focused features. All three are based on the same proven methodology. All three give you traceable reasoning. You just choose the approach that fits your situation."
|
|
||||||
|
|
||||||
**The Closing (7:00-7:10)**
|
|
||||||
|
|
||||||
"So whether you have 90 minutes to build from scratch, 30 minutes to synthesize existing documentation, or 15 minutes for quick validation, you have the tools to stop guessing and start knowing. This is 20 years of proven methodology, modernized and AI-guided for how we work today.
|
|
||||||
|
|
||||||
Stop guessing. Start mapping."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Messaging Themes
|
|
||||||
|
|
||||||
**Heritage & Credibility:**
|
|
||||||
- 20+ years of Effect Management methodology
|
|
||||||
- Created by pioneers at inUse, Sweden
|
|
||||||
- Battle-tested, not experimental
|
|
||||||
- WDS modernization makes it better
|
|
||||||
|
|
||||||
**The Psychology Angle:**
|
|
||||||
- Both positive AND negative drivers
|
|
||||||
- Loss aversion principle (pain > gain)
|
|
||||||
- Emotional intensity matters
|
|
||||||
- Real human psychology, not surface wants
|
|
||||||
|
|
||||||
**The Strategic Value:**
|
|
||||||
- Three-layer strategic chain (your goals → their usage → their psychology)
|
|
||||||
- Visual one-page reference showing all connections
|
|
||||||
- Systematic feature scoring
|
|
||||||
- Traceable reasoning for every decision
|
|
||||||
|
|
||||||
**The WDS Advantage:**
|
|
||||||
- AI-guided through Saga
|
|
||||||
- Solo conversation or team whiteboard workshop
|
|
||||||
- Happens in your IDE
|
|
||||||
- Integrated workflow
|
|
||||||
- Living strategic document
|
|
||||||
|
|
||||||
**The Practical Payoff:**
|
|
||||||
- 90 minutes saves months
|
|
||||||
- Stop guessing, start knowing
|
|
||||||
- Team alignment
|
|
||||||
- Defensible priorities
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Visual Example: Simplified Trigger Map
|
|
||||||
|
|
||||||
Here's a simplified Trigger Map structure to help explain the visual layout:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
graph LR
|
|
||||||
BG1["<b>BUSINESS GOAL 1</b><br/><br/>Visionary Statement 1<br/><br/><b>Strategic Objectives:</b><br/>• Strategic Objective 1<br/>• Strategic Objective 2<br/>• Strategic Objective 3"]
|
|
||||||
|
|
||||||
BG2["<b>BUSINESS GOAL 2</b><br/><br/>Visionary Statement 2<br/><br/><b>Strategic Objectives:</b><br/>• Strategic Objective 1<br/>• Strategic Objective 2<br/>• Strategic Objective 3"]
|
|
||||||
|
|
||||||
PRODUCT["<b>Product/Solution Name</b>"]
|
|
||||||
|
|
||||||
TG1["👥 <b>Primary Target Group</b>"]
|
|
||||||
|
|
||||||
TG2["👤 <b>Secondary Target Group</b>"]
|
|
||||||
|
|
||||||
POS1["<b>✅ POSITIVE DRIVERS:</b><br/>• Positive Usage Goal 1<br/>• Positive Usage Goal 2"]
|
|
||||||
|
|
||||||
NEG1["<b>❌ NEGATIVE DRIVERS:</b><br/>• Negative Usage Goal 1<br/>• Negative Usage Goal 2"]
|
|
||||||
|
|
||||||
POS2["<b>✅ POSITIVE DRIVERS:</b><br/>• Positive Usage Goal 1<br/>• Positive Usage Goal 2"]
|
|
||||||
|
|
||||||
NEG2["<b>❌ NEGATIVE DRIVERS:</b><br/>• Negative Usage Goal 1<br/>• Negative Usage Goal 2"]
|
|
||||||
|
|
||||||
BG1 --> PRODUCT
|
|
||||||
BG2 --> PRODUCT
|
|
||||||
PRODUCT --> TG1
|
|
||||||
PRODUCT --> TG2
|
|
||||||
TG1 --> POS1
|
|
||||||
TG1 --> NEG1
|
|
||||||
TG2 --> POS2
|
|
||||||
TG2 --> NEG2
|
|
||||||
|
|
||||||
style BG1 fill:#e3f2fd,stroke:#1976d2,stroke-width:3px
|
|
||||||
style BG2 fill:#e3f2fd,stroke:#1976d2,stroke-width:3px
|
|
||||||
style PRODUCT fill:#fff9c4,stroke:#f57f17,stroke-width:3px
|
|
||||||
style TG1 fill:#fff3e0,stroke:#f57c00,stroke-width:2px
|
|
||||||
style TG2 fill:#fff3e0,stroke:#f57c00,stroke-width:2px
|
|
||||||
style POS1 fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
|
|
||||||
style NEG1 fill:#ffebee,stroke:#c62828,stroke-width:2px
|
|
||||||
style POS2 fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
|
|
||||||
style NEG2 fill:#ffebee,stroke:#c62828,stroke-width:2px
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key Visual Elements:**
|
|
||||||
- **Left (Blue):** Business Goals with vision statements and measurable SMART objectives
|
|
||||||
- **Center (Yellow):** The Product/Solution being built
|
|
||||||
- **Middle (Orange):** Target Groups radiating from the product, with priority indicators (👥 primary, 👤 secondary)
|
|
||||||
- **Right (Green/Red):** Usage Goals separated into positive drivers (✅ green - what they want) and negative drivers (❌ red - what they fear)
|
|
||||||
- **Arrows:** Show the strategic chain - business goals → product → target groups → their psychological drivers (both positive and negative)
|
|
||||||
|
|
||||||
This one-page map makes the entire strategy visible and accessible to everyone on the team.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How Teams Use the Trigger Map
|
|
||||||
|
|
||||||
**The Trigger Map isn't just created once - it's referenced throughout the entire product lifecycle:**
|
|
||||||
|
|
||||||
### During Strategic Work
|
|
||||||
- **Workshop clarifies thinking** - Forces teams to articulate assumptions about users
|
|
||||||
- **Builds deep empathy** - Goes beyond demographics to understand psychological drivers
|
|
||||||
- **Creates shared understanding** - Everyone aligned on who matters and why
|
|
||||||
- **Establishes user starting point** - Where users are when they begin their journey
|
|
||||||
|
|
||||||
### For Product Decisions
|
|
||||||
- **Feature prioritization** - Systematic scoring against top drivers (not opinions)
|
|
||||||
- **Scope negotiations** - Defend what's in/out with strategic rationale
|
|
||||||
- **Roadmap planning** - Sequence features by impact on priority drivers
|
|
||||||
- **MVP definition** - Build what addresses the most important drivers first
|
|
||||||
|
|
||||||
### In Design & UX
|
|
||||||
- **Scenario creation** - Design realistic user journeys based on actual drivers
|
|
||||||
- **Content writing** - Messaging that speaks to positive desires and negative fears
|
|
||||||
- **Page-level features** - What functionality serves which drivers
|
|
||||||
- **Navigation design** - Paths that help users achieve their goals
|
|
||||||
|
|
||||||
### For Marketing & Sales
|
|
||||||
- **Value proposition** - Messaging that addresses top psychological drivers
|
|
||||||
- **Landing page structure** - Sections targeting specific personas and their drivers
|
|
||||||
- **Ad copy** - Speak directly to what users want and what they fear
|
|
||||||
- **Sales enablement** - Equip teams with driver-based talking points
|
|
||||||
|
|
||||||
### Ongoing Management
|
|
||||||
- **Bug prioritization** - Fix what hurts priority drivers most
|
|
||||||
- **Stakeholder communication** - One-page visual shows strategic rationale
|
|
||||||
- **Team alignment** - Resolve debates by referencing the map
|
|
||||||
- **Validation testing** - Test if your assumptions about drivers are accurate
|
|
||||||
|
|
||||||
**The key insight:** This isn't a document you create and file away. It's a living strategic reference that guides every decision from features to marketing to support documentation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tone & Style
|
|
||||||
|
|
||||||
- **Conversational but authoritative** - You know this works
|
|
||||||
- **Practical, not academic** - Focus on real benefits
|
|
||||||
- **Energetic about the psychology** - This is fascinating stuff
|
|
||||||
- **Confident about the value** - This prevents expensive mistakes
|
|
||||||
- **Respectful of the heritage** - Standing on giants' shoulders
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What to Emphasize
|
|
||||||
|
|
||||||
✅ The three-layer connection (YOUR goals → WHO achieves them → THEIR goals)
|
|
||||||
✅ The gap between Product Brief and design (the missing link)
|
|
||||||
✅ Both positive and negative drivers (the WDS enhancement)
|
|
||||||
✅ Systematic scoring (data over opinions)
|
|
||||||
✅ Visual one-page map (accessible to everyone)
|
|
||||||
✅ 20+ year heritage (proven, not trendy)
|
|
||||||
✅ 90 minutes prevents months of waste
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What to Avoid
|
|
||||||
|
|
||||||
❌ Getting too technical about the methodology
|
|
||||||
❌ Spending too long on any one workshop
|
|
||||||
❌ Making it sound complicated or academic
|
|
||||||
❌ Forgetting to mention the heritage
|
|
||||||
❌ Skipping the negative drivers emphasis
|
|
||||||
❌ Not connecting to real business value
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
**IMPORTANT: Use the reference image as your exact style guide. Match all visual elements, colors, layout, and character design.**
|
|
||||||
|
|
||||||
Create a 1920x1080px YouTube thumbnail matching the reference image style.
|
|
||||||
|
|
||||||
**What to Change from Reference:**
|
|
||||||
|
|
||||||
**Headlines (Left side):**
|
|
||||||
- Line 1: "TRIGGER MAPPING" (Rubrik Light, 91pt, white)
|
|
||||||
- Line 2: "YOUR ONE SLIDE STRATEGY" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line 3: "FOR ANY DIGITAL PROJECT!" (Rubrik Bold, 91pt, white)
|
|
||||||
- Line spacing: 79pt
|
|
||||||
|
|
||||||
**Module Badge (Bottom-left):**
|
|
||||||
- "05 Trigger Mapping" (Rubrik Regular, 108pt, white on red #ff1744)
|
|
||||||
|
|
||||||
**Character Activity:**
|
|
||||||
- Keep the woman's angle and position similar as in the first reference image. Keep the character neutral and stylized as it is
|
|
||||||
- Woman is working with a large visual trigger map spread out in front of her
|
|
||||||
- She's connecting elements on the map with lines/arrows, showing strategic connections
|
|
||||||
- On the desk: sticky notes with "Business Goals", "Target Groups", "Drivers" visible as labels
|
|
||||||
- Expression: focused and strategic, making connections
|
|
||||||
- Skip the tablet
|
|
||||||
|
|
||||||
**Background Pattern:**
|
|
||||||
- Clear the background from previous objects except the globe
|
|
||||||
- Add oversized and toned down strategic mapping elements (connected nodes, mind-map branches, arrows showing flow, target/bullseye icons)
|
|
||||||
- Keep as in reference image
|
|
||||||
|
|
||||||
**Workspace Props:**
|
|
||||||
- Add: large trigger map diagram (visible strategic layers), sticky notes with labels, markers/pens, coffee cup, notebook
|
|
||||||
- The map should show visual hierarchy: center node with radiating connections
|
|
||||||
- No text should be visible or be presented with just scribble or gray markers
|
|
||||||
|
|
||||||
**Keep Everything Else from Reference:**
|
|
||||||
- do not put light objects behind her face since we need to keep her silhouette clear
|
|
||||||
- Top-right branding text
|
|
||||||
- Character design and style
|
|
||||||
- Color scheme and layout
|
|
||||||
|
|
||||||
.
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
Module 05 - Trigger Mapping - Connect Business Goals to User Psychology
|
|
||||||
<https://youtu.be/xs_cRk-NoJk>
|
|
||||||
|
|
||||||
Ever built something beautiful that nobody wanted? Trigger Mapping bridges business strategy to user psychology through 5 structured workshops, creating a visual one-page map that guides every design decision. Based on 20+ years of proven methodology.
|
|
||||||
|
|
||||||
*Free & open-source* | 6 minutes | Core methodology module
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The Problem - Why Brilliant Ideas Fail
|
|
||||||
00:41 The Solution - What is a Trigger Map?
|
|
||||||
01:30 The Three Layers - Business Goals, Target Groups, Usage Goals
|
|
||||||
02:48 The Psychology - Positive vs Negative Drivers (Loss Aversion)
|
|
||||||
04:01 Building the Map - The Process & Visual
|
|
||||||
05:09 The Benefits - Stop Guessing, Start Mapping
|
|
||||||
|
|
||||||
🎯 What You'll Create
|
|
||||||
|
|
||||||
Visual one-page Trigger Map connecting:
|
|
||||||
• Business Goals → Target Groups → Usage Goals (positive + negative drivers)
|
|
||||||
• Data-driven feature prioritization
|
|
||||||
• Clear strategic rationale for every design decision
|
|
||||||
|
|
||||||
📚 Course Resources
|
|
||||||
|
|
||||||
🌊 *WDS Presentation:*
|
|
||||||
<https://whiteport.com/whiteport-design-studio/>
|
|
||||||
|
|
||||||
📖 *Module 05 Overview:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/module-05-trigger-mapping/module-05-overview.md>
|
|
||||||
|
|
||||||
📖 *Tutorial 05:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/module-05-trigger-mapping/tutorial-05.md>
|
|
||||||
|
|
||||||
📖 *Trigger Mapping Guide:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/method/phase-2-trigger-mapping-guide.md>
|
|
||||||
|
|
||||||
💬 *UX-Design channel in the BMad Discord Community:*
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
📖 *GitHub Discussions:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
◀️ *Previous Module:* Module 04 - Product Brief
|
|
||||||
<https://youtu.be/yhKxkuLq1kQ>
|
|
||||||
|
|
||||||
▶️ *Next Module:* Module 06 - Scenarios (Coming Soon)
|
|
||||||
|
|
||||||
📚 *Full Course:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
⚡ Key Insight
|
|
||||||
|
|
||||||
Negative drivers (fears/pains) are often more powerful than positive ones. Loss aversion: people work twice as hard to avoid pain as to pursue equivalent gain.
|
|
||||||
|
|
||||||
📖 Heritage
|
|
||||||
|
|
||||||
Based on Effect Management (Mijo Balic & Ingrid Domingues, inUse Sweden) and Impact Mapping (Gojko Adzic)
|
|
||||||
<https://www.impactmapping.org>
|
|
||||||
|
|
||||||
🎨 About WDS
|
|
||||||
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). 90 minutes of strategic work saves months of building the wrong things. 🎯
|
|
||||||
|
|
||||||
#TriggerMapping #UserPsychology #FeaturePrioritization #WDS #StrategicDesign
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
Module 01 - Why WDS Matters - Are You a Factory Worker or a Linchpin Designer?
|
|
||||||
<https://www.youtube.com/watch?v=Xhw5JB7mpxw>
|
|
||||||
|
|
||||||
The AI era is here. The question is: are you a factory worker or a linchpin designer? Replaceable or indispensable?
|
|
||||||
|
|
||||||
This 30-minute deep dive explores why designers are irreplaceable in the AI era - not because of tools, but because of emotional labor, user-centric creativity, and the ability to walk into chaos and create order.
|
|
||||||
|
|
||||||
*You'll learn:*
|
|
||||||
✅ Seth Godin's Linchpin concept and why it matters RIGHT NOW
|
|
||||||
✅ Three irreplaceable gifts only human designers provide
|
|
||||||
✅ 5-dimensional thinking - the skill that makes you indispensable
|
|
||||||
✅ The three-part transformation WDS guides you through
|
|
||||||
✅ How to act: I Can. I Do. I Will.
|
|
||||||
|
|
||||||
*Free & open-source* | 30 minutes (3 lessons × 10 min)
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The Fundamental Choice
|
|
||||||
00:59 Two Paths: Factory vs Linchpin
|
|
||||||
02:25 Three Irreplaceable Gifts
|
|
||||||
04:14 The WDS Framework
|
|
||||||
05:42 The Mindset & First Steps
|
|
||||||
|
|
||||||
🎯 Key Concepts
|
|
||||||
|
|
||||||
*Linchpin Designer* - Walks into chaos and creates order (Seth Godin)
|
|
||||||
*Emotional Labor* - Genuinely caring about the outcome
|
|
||||||
*User-Centric Creativity* - Connecting business goals to user psychology
|
|
||||||
*5-Dimensional Thinking* - Business existence, goals, product strategy, target groups, technical viability
|
|
||||||
|
|
||||||
📚 Course Resources
|
|
||||||
|
|
||||||
🌊 *WDS Presentation:*
|
|
||||||
<https://whiteport.com/whiteport-design-studio/>
|
|
||||||
|
|
||||||
🛠️ *Installation Guide:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/getting-started/installation.md>
|
|
||||||
|
|
||||||
📚 *Linchpin Book by Seth Godin:*
|
|
||||||
<https://www.amazon.com/Linchpin-Are-You-Indispensable-ebook/dp/B00354Y9ZU>
|
|
||||||
|
|
||||||
💬 *UX-Design channel in the BMad Discord Community:*
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
📖 *GitHub Discussions:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
◀️ *Previous Module:* Module 00 - Getting Started
|
|
||||||
<https://youtu.be/qYPYx01YLUc>
|
|
||||||
|
|
||||||
▶️ *Next Module:* Module 02 - Installation & Setup
|
|
||||||
<https://www.youtube.com/watch?v=tYifpxFVVks>
|
|
||||||
|
|
||||||
📚 *Full Course:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
✅ *Next Steps:*
|
|
||||||
1. Complete the three written lessons (30 min)
|
|
||||||
2. Download an IDE (Cursor, VS Code, Windsurf)
|
|
||||||
3. Start Module 02: Installation & Setup
|
|
||||||
4. Join Discord community
|
|
||||||
5. Let yourself be known
|
|
||||||
|
|
||||||
💪 *The Mindset:* I Can. I Do. I Will. No matter what. No matter when. No matter how.
|
|
||||||
|
|
||||||
🎨 *About WDS*
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). Free access to AI agents for designers. The transformation: From task-doer to strategic leader. From replaceable to indispensable.
|
|
||||||
|
|
||||||
#UXDesign #AIDesign #LinchpinDesigner #WDS #BMadMethod #SethGodin #Linchpin
|
|
||||||
|
|
||||||
🔥 This is not the time to hide. The AI era is here. Stand up. Act. Download. Install. Build. Move.
|
|
||||||
|
|
||||||
*Ready to become indispensable? Watch the full module and move to Module 02! 🚀*
|
|
||||||
<https://www.youtube.com/watch?v=tYifpxFVVks>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
Module 02 - WDS Installation & Setup - From Zero to Hero in one Hour!
|
|
||||||
<https://www.youtube.com/watch?v=tYifpxFVVks>
|
|
||||||
|
|
||||||
"I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up."
|
|
||||||
|
|
||||||
Sound familiar? This 6-minute guided walkthrough takes you from complete beginner to fully set up with WDS - even if you've never touched GitHub, Git, or an IDE before.
|
|
||||||
|
|
||||||
*You'll learn:*
|
|
||||||
✅ Create a GitHub account and repository
|
|
||||||
✅ Install your IDE workspace (Cursor or VS Code)
|
|
||||||
✅ Clone your project to your computer
|
|
||||||
✅ Add WDS to your workspace
|
|
||||||
✅ Meet Mimir - your personal WDS guide
|
|
||||||
|
|
||||||
*Free & open-source* | 45-60 minutes setup | No technical experience required
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The Technical Setup Challenge
|
|
||||||
00:59 Creating Your GitHub Account
|
|
||||||
03:13 Installing Your IDE Workspace
|
|
||||||
04:43 Cloning Your Project
|
|
||||||
05:42 WDS Integration & Meeting Mimir
|
|
||||||
|
|
||||||
🎯 Key Concepts
|
|
||||||
|
|
||||||
*GitHub* - Professional cloud storage with version control
|
|
||||||
*Repository* - A tracked folder where your project lives
|
|
||||||
*IDE* - Your workspace for creating specifications
|
|
||||||
*Cloning* - Making a local copy of your GitHub repository
|
|
||||||
*Mimir* - Your WDS orchestrator (@wds-mimir anytime!)
|
|
||||||
|
|
||||||
📚 4 Lessons
|
|
||||||
|
|
||||||
1. *Git Setup* (15-20 min) - GitHub account, repository creation
|
|
||||||
2. *IDE Installation* (10 min) - Download Cursor or VS Code
|
|
||||||
3. *Repository Cloning* (10 min) - Clone project to your computer
|
|
||||||
4. *WDS Initialization* (15-20 min) - Add WDS, create 8-phase docs, activate Mimir
|
|
||||||
|
|
||||||
📁 *8-Phase Docs Structure:*
|
|
||||||
1-project-brief • 2-trigger-mapping • 3-prd-platform • 4-ux-design • 5-design-system • 6-design-deliveries • 7-testing • 8-ongoing-development
|
|
||||||
|
|
||||||
📚 Course Resources
|
|
||||||
|
|
||||||
🌊 *WDS Presentation:* [WDS Presentation](https://whiteport.com/whiteport-design-studio/)
|
|
||||||
|
|
||||||
💻 *Download Cursor:* <https://cursor.sh>
|
|
||||||
|
|
||||||
📥 *Download VS Code:* <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
📥 *GitHub:* <https://github.com>
|
|
||||||
|
|
||||||
💬 *UX-Design channel in the BMad Discord Community:*
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
📖 *GitHub Discussions:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
◀️ *Previous Module:* Module 01 - Why WDS Matters
|
|
||||||
<https://www.youtube.com/watch?v=Xhw5JB7mpxw>
|
|
||||||
|
|
||||||
▶️ *Next Module:* Module 03 - Alignment & Signoff
|
|
||||||
<https://www.youtube.com/watch?v=TKjOLlU8UCE>
|
|
||||||
|
|
||||||
📚 *Full Course:*
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
✅ *Next Steps:*
|
|
||||||
1. Complete the 4-lesson setup (follow along!)
|
|
||||||
2. Activate Mimir and have your first conversation
|
|
||||||
3. Start Module 03: Alignment & Signoff
|
|
||||||
4. Join the WDS community
|
|
||||||
|
|
||||||
💪 *"You can do this. I believe in you."* - Mimir
|
|
||||||
|
|
||||||
🎨 *About WDS*
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). Transforms designers into indispensable linchpins who connect business goals, user psychology, and technical constraints.
|
|
||||||
|
|
||||||
👤 *About Mimir*
|
|
||||||
Your WDS orchestrator - a wise advisor who assesses your skill level, guides setup, and provides support. Invoke anytime: @wds-mimir [your question]
|
|
||||||
|
|
||||||
#GitHub #IDESetup #Cursor #VSCode #WDS #Mimir #DesignCourse #BeginnerFriendly
|
|
||||||
|
|
||||||
*Ready to start? Follow along and you'll be WDS-ready in under an hour! 🚀*
|
|
||||||
<https://www.youtube.com/watch?v=TKjOLlU8UCE>
|
|
||||||
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
Module 03 - Alignment & Signoff - Get Stakeholder Buy-In for Your Design Projects
|
|
||||||
<https://www.youtube.com/watch?v=TKjOLlU8UCE>
|
|
||||||
|
|
||||||
Struggling with the business side of design? Feel uncomfortable talking about money or negotiating contracts? This module teaches you how to get stakeholder buy-in and protect your projects with clear agreements.
|
|
||||||
|
|
||||||
*You'll learn:*
|
|
||||||
✅ The discovery discipline: Understanding before solving
|
|
||||||
✅ When you need stakeholder alignment (and when to skip it)
|
|
||||||
✅ Create compelling alignment documents with quantified ROI
|
|
||||||
✅ The 6 elements of alignment (Idea, Why, What, How, Budget, Commitment)
|
|
||||||
✅ Formalize commitment with professional contracts
|
|
||||||
✅ Protect scope and handle change orders professionally
|
|
||||||
|
|
||||||
*Free & open-source* | 55-75 minutes | Optional module
|
|
||||||
|
|
||||||
⏱️ Timestamps
|
|
||||||
|
|
||||||
00:00 The Business Side Challenge
|
|
||||||
00:39 The Discovery Discipline
|
|
||||||
02:30 The 6-Element Toolkit
|
|
||||||
03:39 From Alignment to Contract
|
|
||||||
04:44 Becoming a Strategic Partner
|
|
||||||
|
|
||||||
🎯 Key Concepts
|
|
||||||
|
|
||||||
*Discovery Discipline* - Understand before you solve (measure twice, diagnose first)
|
|
||||||
*6 Elements of Alignment* - Idea, Why, What, How, Budget, Commitment
|
|
||||||
*Alignment Document* - Makes the case for why the project matters
|
|
||||||
*Signoff Documents* - External contracts or internal approval
|
|
||||||
*Scope Protection* - Clear boundaries, change order process
|
|
||||||
|
|
||||||
📚 Course Resources
|
|
||||||
|
|
||||||
🌊 *WDS Presentation:*
|
|
||||||
<https://whiteport.com/whiteport-design-studio/>
|
|
||||||
|
|
||||||
Project Pitch Guide:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/deliverables/project-pitch.md>
|
|
||||||
|
|
||||||
Service Agreement Templates:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/deliverables/service-agreement.md>
|
|
||||||
|
|
||||||
UX-Design channel in the BMad Discord Community:
|
|
||||||
<https://discord.gg/Pn63gAuX>
|
|
||||||
|
|
||||||
GitHub Discussions:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/discussions>
|
|
||||||
|
|
||||||
Previous Module: Module 02 - Installation & Setup
|
|
||||||
<https://www.youtube.com/watch?v=tYifpxFVVks>
|
|
||||||
|
|
||||||
Next Module: Module 04 - Product Brief
|
|
||||||
<https://youtu.be/yhKxkuLq1kQ>
|
|
||||||
|
|
||||||
Full Course:
|
|
||||||
<https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md>
|
|
||||||
|
|
||||||
✅ *When to Use This Module:*
|
|
||||||
✅ Consultant pitching to client
|
|
||||||
✅ Employee seeking stakeholder approval
|
|
||||||
✅ You struggle with business conversations
|
|
||||||
✅ You've been stuck in scope creep
|
|
||||||
|
|
||||||
❌ *Skip if:* Building yourself with full autonomy
|
|
||||||
|
|
||||||
<EFBFBD> *Discovery Discipline Flow:*
|
|
||||||
1. Discovery meeting → 2. Reflect → 3. Create pitch → 4. Present → 5. Iterate → 6. Get acceptance → 7. Generate contract → 8. Sign → 9. Proceed to Project Brief
|
|
||||||
|
|
||||||
✅ *Next Steps:*
|
|
||||||
1. Complete the 5 lessons
|
|
||||||
2. Follow Tutorial 03 to create alignment document
|
|
||||||
3. Practice with real or hypothetical project
|
|
||||||
4. Start Module 04 (or skip if you don't need alignment)
|
|
||||||
|
|
||||||
🎨 *About WDS*
|
|
||||||
AI-augmented design methodology by Mårten Angner (Whiteport, Sweden). Transforms designers into strategic leaders who confidently navigate business conversations and protect projects.
|
|
||||||
|
|
||||||
#DesignBusiness #ClientContracts #ScopeCreep #WDS #DesignROI #ProjectPitch
|
|
||||||
|
|
||||||
💼 *Remember:* Alignment isn't about being pushy. Contracts aren't about being defensive. They're about serving clients with clarity.
|
|
||||||
|
|
||||||
*Ready to master the business side of design? Watch the full module! 💼*
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
|
|
@ -1,124 +0,0 @@
|
||||||
# Lesson 01: Git Setup
|
|
||||||
|
|
||||||
**Create GitHub account and project repository**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Create GitHub account
|
|
||||||
- Choose professional username
|
|
||||||
- Create or join repository
|
|
||||||
- Understand repository structure
|
|
||||||
|
|
||||||
**Time:** 15-20 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 1: Create GitHub Account
|
|
||||||
|
|
||||||
### What is GitHub?
|
|
||||||
|
|
||||||
Professional cloud storage + time machine for your project files. Every change is saved, you can go back to any version, work with others.
|
|
||||||
|
|
||||||
### Step 1: Sign Up
|
|
||||||
|
|
||||||
1. Go to **<https://github.com>**
|
|
||||||
2. Click **"Sign up"**
|
|
||||||
3. Enter email, password, username
|
|
||||||
|
|
||||||
**Username Tips:**
|
|
||||||
- Professional: `john-designer`, `sarahux`, `mike-creates`
|
|
||||||
- You might share this with clients
|
|
||||||
|
|
||||||
4. Verify email
|
|
||||||
5. Log in
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You can log in to GitHub
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 2: Choose Your Scenario
|
|
||||||
|
|
||||||
**Scenario A:** Starting new project → Continue to Part 3
|
|
||||||
**Scenario B:** Joining existing → Skip to Part 5
|
|
||||||
**Scenario C:** Just learning → Skip to [Lesson 02](../lesson-02-ide-installation/02-full-lesson.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 3: Create Repository
|
|
||||||
|
|
||||||
1. Click profile icon → **"Your repositories"** → **"New"**
|
|
||||||
|
|
||||||
### Decide Repository Structure
|
|
||||||
|
|
||||||
**IMPORTANT: Your naming choice determines your structure!**
|
|
||||||
|
|
||||||
**Single Repository:**
|
|
||||||
- Name: `my-project` (e.g., `dog-walker-app`)
|
|
||||||
- Structure: Specs + code together
|
|
||||||
- Use when: Small team, building yourself, simple communication
|
|
||||||
|
|
||||||
**Separate Specifications Repository:**
|
|
||||||
- Name: `my-project-specs` (e.g., `dog-walker-app-specs`)
|
|
||||||
- Structure: Specs only, separate code repo
|
|
||||||
- Use when: Corporate, many developers, clear handoff needed
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 4: Create Repository
|
|
||||||
|
|
||||||
**Repository Settings:**
|
|
||||||
- Name: `____________` (lowercase-with-hyphens)
|
|
||||||
- Description: One-liner about project
|
|
||||||
- Public (portfolio) or Private (client work)
|
|
||||||
- ☑️ Check "Initialize with README"
|
|
||||||
- Click **"Create repository"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Repository created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 5: Join Existing Repository
|
|
||||||
|
|
||||||
**Email template:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Hi [Name],
|
|
||||||
|
|
||||||
I'd like to contribute to [project-name] using WDS methodology.
|
|
||||||
Could you add me as a collaborator?
|
|
||||||
|
|
||||||
My GitHub username: [your-username]
|
|
||||||
|
|
||||||
Thank you!
|
|
||||||
```
|
|
||||||
|
|
||||||
**Then:**
|
|
||||||
1. Accept invitation from email
|
|
||||||
2. Check repo name (ends in `-specs`? Separate repo)
|
|
||||||
3. Browse structure (has `docs/`? WDS already!)
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Access granted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Verification email missing → Check spam
|
|
||||||
**Issue:** Username taken → Try `yourname-designer-2`
|
|
||||||
**Issue:** Repository name taken → Add your username
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
GitHub account and repository ready! Now install your IDE.
|
|
||||||
|
|
||||||
**[Continue to Lesson 02: IDE Installation →](../lesson-02-ide-installation/02-full-lesson.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
# Lesson 01: Git Setup - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 15-20 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 1: Create GitHub Account
|
|
||||||
|
|
||||||
- [ ] Go to **<https://github.com>**
|
|
||||||
- [ ] Click **"Sign up"**
|
|
||||||
- [ ] Enter email, password, username (professional: `yourname-designer`)
|
|
||||||
- [ ] Verify email
|
|
||||||
- [ ] ✅ Log in successful
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 2: Choose Your Scenario
|
|
||||||
|
|
||||||
- [ ] **A:** Starting new project → Continue below
|
|
||||||
- [ ] **B:** Joining existing → Skip to "Join Existing"
|
|
||||||
- [ ] **C:** Just learning → Skip to [Lesson 02](../lesson-02-ide-installation/01-quick-checklist.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 3: Create New Repository
|
|
||||||
|
|
||||||
- [ ] Click profile icon → **"Your repositories"** → **"New"**
|
|
||||||
|
|
||||||
### Decide: Single or Separate?
|
|
||||||
|
|
||||||
- [ ] **Single repo:** `my-project` (specs + code together, small teams)
|
|
||||||
- [ ] **Separate repo:** `my-project-specs` (specs only, corporate/many devs)
|
|
||||||
|
|
||||||
### Repository Settings
|
|
||||||
|
|
||||||
- [ ] Name: `_____________` (lowercase-with-hyphens)
|
|
||||||
- [ ] Description: One-liner about project
|
|
||||||
- [ ] Public or Private
|
|
||||||
- [ ] ☑️ Check "Initialize with README"
|
|
||||||
- [ ] Click **"Create repository"**
|
|
||||||
- [ ] ✅ Repository created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 4: Join Existing Repository
|
|
||||||
|
|
||||||
- [ ] Ask owner for access (see full lesson for email template)
|
|
||||||
- [ ] Accept invitation from email
|
|
||||||
- [ ] Check repo structure
|
|
||||||
- [ ] ✅ Access granted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ GitHub ready!
|
|
||||||
|
|
||||||
**[→ Lesson 02: IDE Installation](../lesson-02-ide-installation/01-quick-checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
# Lesson 01: GitHub & IDE Setup - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 25-30 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 1: GitHub Account
|
|
||||||
|
|
||||||
- [ ] Go to **<https://github.com>**
|
|
||||||
- [ ] Click **"Sign up"**
|
|
||||||
- [ ] Enter email, password, username (professional: `yourname-designer`)
|
|
||||||
- [ ] Verify email
|
|
||||||
- [ ] ✅ Log in successful
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 2: Create or Join Repository
|
|
||||||
|
|
||||||
### Choose Your Scenario
|
|
||||||
|
|
||||||
- [ ] **A:** Starting new project → Continue below
|
|
||||||
- [ ] **B:** Joining existing → Skip to "Join Existing"
|
|
||||||
- [ ] **C:** Just learning → Skip to Part 3
|
|
||||||
|
|
||||||
### Create New Repository
|
|
||||||
|
|
||||||
- [ ] Click profile icon → **"Your repositories"** → **"New"**
|
|
||||||
|
|
||||||
**Decide: Single or Separate?**
|
|
||||||
|
|
||||||
- [ ] **Single repo:** `my-project` (specs + code together, for small teams)
|
|
||||||
- [ ] **Separate repo:** `my-project-specs` (specs only, for corporate/many devs)
|
|
||||||
|
|
||||||
- [ ] Name: `_____________` (lowercase-with-hyphens)
|
|
||||||
- [ ] Description: One-liner about project
|
|
||||||
- [ ] Public or Private
|
|
||||||
- [ ] ☑️ Check "Initialize with README"
|
|
||||||
- [ ] Click **"Create repository"**
|
|
||||||
- [ ] ✅ Repository created
|
|
||||||
|
|
||||||
### Join Existing Repository
|
|
||||||
|
|
||||||
- [ ] Ask owner for access (see full lesson for email template)
|
|
||||||
- [ ] Accept invitation from email
|
|
||||||
- [ ] Check repo structure (name, folders)
|
|
||||||
- [ ] ✅ Access granted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 3: IDE Installation
|
|
||||||
|
|
||||||
### Choose & Download
|
|
||||||
|
|
||||||
- [ ] **Cursor** (recommended) → <https://cursor.sh>
|
|
||||||
- [ ] **VS Code** (alternative) → <https://code.visualstudio.com>
|
|
||||||
- [ ] Download installer
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
- [ ] **Windows:** Run `.exe`, click through
|
|
||||||
- [ ] **Mac:** Drag to Applications, open
|
|
||||||
- [ ] **Linux:** Follow distro instructions
|
|
||||||
|
|
||||||
### First Launch
|
|
||||||
|
|
||||||
- [ ] Choose theme (Light/Dark)
|
|
||||||
- [ ] Sign in with GitHub → Yes!
|
|
||||||
- [ ] Install recommended extensions → Yes
|
|
||||||
- [ ] ✅ IDE open
|
|
||||||
|
|
||||||
### Verify Terminal
|
|
||||||
|
|
||||||
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
- [ ] ✅ Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ GitHub & IDE ready!
|
|
||||||
|
|
||||||
**[→ Lesson 02: Git Configuration](../lesson-02-git-setup/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,203 +0,0 @@
|
||||||
# Lesson 01: GitHub & IDE Setup
|
|
||||||
|
|
||||||
**Get your development environment ready**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Create GitHub account
|
|
||||||
- Create or join repository
|
|
||||||
- Install IDE (Cursor or VS Code)
|
|
||||||
- Verify everything works
|
|
||||||
|
|
||||||
**Time:** 25-30 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 1: GitHub Setup
|
|
||||||
|
|
||||||
### What is GitHub?
|
|
||||||
|
|
||||||
Professional cloud storage + time machine for your project files. Every change is saved, you can go back to any version, and you can work with others.
|
|
||||||
|
|
||||||
### Step 1: Create GitHub Account
|
|
||||||
|
|
||||||
1. Go to **<https://github.com>**
|
|
||||||
2. Click **"Sign up"** (top right)
|
|
||||||
3. Enter email, password, username
|
|
||||||
|
|
||||||
**Username Tips:**
|
|
||||||
- Professional: `john-designer`, `sarahux`, `mike-creates`
|
|
||||||
- You might share this with clients
|
|
||||||
|
|
||||||
4. Verify email
|
|
||||||
5. Log in
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You can log in to GitHub
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 2: Choose Your Scenario
|
|
||||||
|
|
||||||
**Scenario A: Starting a New Project** → Continue to Step 3
|
|
||||||
**Scenario B: Joining Existing Project** → Skip to Step 6
|
|
||||||
**Scenario C: Just Learning WDS** → Skip to Part 2
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 3: Create Repository (Scenario A)
|
|
||||||
|
|
||||||
1. Click profile icon → **"Your repositories"** → **"New"**
|
|
||||||
|
|
||||||
### Step 4: Decide Repository Structure
|
|
||||||
|
|
||||||
**IMPORTANT: Your naming choice determines your structure!**
|
|
||||||
|
|
||||||
#### Single Repository
|
|
||||||
|
|
||||||
**Name:** `my-project` (e.g., `dog-walker-app`)
|
|
||||||
|
|
||||||
```
|
|
||||||
my-project/
|
|
||||||
├── docs/ ← WDS specifications
|
|
||||||
└── src/ ← Code
|
|
||||||
```
|
|
||||||
|
|
||||||
**Use when:**
|
|
||||||
- Small team, building yourself
|
|
||||||
- Simple communication
|
|
||||||
- Rapid iteration
|
|
||||||
|
|
||||||
#### Separate Specifications Repository
|
|
||||||
|
|
||||||
**Name:** `my-project-specs` (e.g., `dog-walker-app-specs`)
|
|
||||||
|
|
||||||
```
|
|
||||||
my-project-specs/ ← Specifications only
|
|
||||||
my-project/ ← Separate code repo
|
|
||||||
```
|
|
||||||
|
|
||||||
**Use when:**
|
|
||||||
- Corporate environment
|
|
||||||
- Many developers
|
|
||||||
- Clear handoff needed
|
|
||||||
|
|
||||||
### Step 5: Create Repository
|
|
||||||
|
|
||||||
- **Name:** `____________` (lowercase-with-hyphens)
|
|
||||||
- **Description:** One-liner about project
|
|
||||||
- **Public** (portfolio) or **Private** (client work)
|
|
||||||
- ☑️ **Check "Initialize with README"**
|
|
||||||
- Click **"Create repository"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Repository created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 6: Join Existing Repository (Scenario B)
|
|
||||||
|
|
||||||
**Email template:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Hi [Name],
|
|
||||||
|
|
||||||
I'd like to contribute to [project-name] using WDS methodology.
|
|
||||||
Could you add me as a collaborator?
|
|
||||||
|
|
||||||
My GitHub username: [your-username]
|
|
||||||
|
|
||||||
Thank you!
|
|
||||||
```
|
|
||||||
|
|
||||||
**Then:**
|
|
||||||
1. Accept invitation from email
|
|
||||||
2. Check repo name (ends in `-specs`? Separate repo)
|
|
||||||
3. Browse structure (has `docs/`? WDS already!)
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Access granted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Part 2: IDE Installation
|
|
||||||
|
|
||||||
### What is an IDE?
|
|
||||||
|
|
||||||
Your workspace for creating specifications. Like Microsoft Word, but for design files.
|
|
||||||
|
|
||||||
### Step 1: Choose Your IDE
|
|
||||||
|
|
||||||
**Cursor (Recommended)**
|
|
||||||
- Built for AI assistance
|
|
||||||
- Perfect for WDS
|
|
||||||
- Download: <https://cursor.sh>
|
|
||||||
|
|
||||||
**VS Code (Alternative)**
|
|
||||||
- Industry standard
|
|
||||||
- Works great too
|
|
||||||
- Download: <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
**For beginners:** Choose Cursor
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 2: Install
|
|
||||||
|
|
||||||
**Windows:**
|
|
||||||
1. Run `.exe` file
|
|
||||||
2. Click through installer
|
|
||||||
3. Use defaults
|
|
||||||
|
|
||||||
**Mac:**
|
|
||||||
1. Open download
|
|
||||||
2. Drag to Applications
|
|
||||||
3. Open from Applications
|
|
||||||
|
|
||||||
**Linux:**
|
|
||||||
Follow distro instructions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 3: First Launch
|
|
||||||
|
|
||||||
1. Choose theme (Light/Dark)
|
|
||||||
2. **Sign in with GitHub** → Yes!
|
|
||||||
3. Install recommended extensions → Yes
|
|
||||||
|
|
||||||
**✅ Checkpoint:** IDE open and ready
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Step 4: Verify Terminal
|
|
||||||
|
|
||||||
Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**GitHub Issues:**
|
|
||||||
- **Verification email missing** → Check spam
|
|
||||||
- **Username taken** → Try `yourname-designer-2`
|
|
||||||
- **Repository name taken** → Add your username
|
|
||||||
|
|
||||||
**IDE Issues:**
|
|
||||||
- **Can't find download** → Check Downloads folder
|
|
||||||
- **Mac "unidentified developer"** → Right-click → Open
|
|
||||||
- **Terminal won't open** → View menu → Terminal → New Terminal
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
GitHub account, repository, and IDE are ready! Now let's configure Git.
|
|
||||||
|
|
||||||
**[Continue to Lesson 02: Git Configuration →](../lesson-02-git-setup/lesson.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
# Lesson 01: GitHub Setup - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 15-20 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create GitHub Account
|
|
||||||
|
|
||||||
- [ ] Go to **<https://github.com>**
|
|
||||||
- [ ] Click **"Sign up"**
|
|
||||||
- [ ] Enter email, password, username (professional: `yourname-designer`)
|
|
||||||
- [ ] Verify email
|
|
||||||
- [ ] ✅ Log in successful
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose Your Scenario
|
|
||||||
|
|
||||||
- [ ] **A:** Starting new project → Continue below
|
|
||||||
- [ ] **B:** Joining existing → Skip to "Join Existing" section
|
|
||||||
- [ ] **C:** Just learning → Skip to [Lesson 02](../lesson-02-install-ide/checklist.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create New Repository
|
|
||||||
|
|
||||||
- [ ] Click profile icon → **"Your repositories"** → **"New"**
|
|
||||||
|
|
||||||
### Decide: Single or Separate?
|
|
||||||
|
|
||||||
**Single repo (specs + code together):**
|
|
||||||
- [ ] Name: `my-project` (e.g., `dog-walker-app`)
|
|
||||||
- [ ] For: Small team, building yourself, simple communication
|
|
||||||
|
|
||||||
**Separate specs repo (specs only):**
|
|
||||||
- [ ] Name: `my-project-specs` (e.g., `dog-walker-app-specs`)
|
|
||||||
- [ ] For: Corporate, many developers, clear handoff
|
|
||||||
|
|
||||||
### Repository Settings
|
|
||||||
|
|
||||||
- [ ] Name: `_____________` (lowercase-with-hyphens)
|
|
||||||
- [ ] Description: One-liner about project
|
|
||||||
- [ ] Public or Private
|
|
||||||
- [ ] ☑️ **Check "Initialize with README"**
|
|
||||||
- [ ] Click **"Create repository"**
|
|
||||||
- [ ] ✅ Repository created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Join Existing Repository
|
|
||||||
|
|
||||||
- [ ] Ask owner for access (email template in lesson.md)
|
|
||||||
- [ ] Check email for GitHub invitation
|
|
||||||
- [ ] Click **"Accept invitation"**
|
|
||||||
- [ ] Check repo name (ends in `-specs`? Separate repo)
|
|
||||||
- [ ] Browse repo structure (has `docs/`? WDS already!)
|
|
||||||
- [ ] ✅ Access granted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ GitHub setup complete!
|
|
||||||
|
|
||||||
**[→ Lesson 02: IDE Installation](../lesson-02-install-ide/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
# Lesson 02: Git Configuration - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 5 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose Approach
|
|
||||||
|
|
||||||
- [ ] **Option 1:** Let Cursor handle Git (do nothing - easiest!)
|
|
||||||
- [ ] **Option 2:** Use GitHub Desktop (visual) → <https://desktop.github.com>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## If Using GitHub Desktop
|
|
||||||
|
|
||||||
- [ ] Download from <https://desktop.github.com>
|
|
||||||
- [ ] Install
|
|
||||||
- [ ] Sign in with GitHub account
|
|
||||||
- [ ] ✅ Ready for visual cloning
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Recap Repository Structure
|
|
||||||
|
|
||||||
From Lesson 01:
|
|
||||||
- [ ] Single repo: `my-project` (specs + code together)
|
|
||||||
- [ ] Separate repo: `my-project-specs` (specs only)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ Git ready!
|
|
||||||
|
|
||||||
**[→ Lesson 03: Repository Cloning & WDS Integration](../lesson-03-clone-and-wds/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
# Lesson 02: IDE Installation - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 10 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose IDE
|
|
||||||
|
|
||||||
- [ ] **Cursor** (recommended) → <https://cursor.sh>
|
|
||||||
- [ ] **VS Code** (alternative) → <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
- [ ] Download installer
|
|
||||||
- [ ] **Windows:** Run `.exe`, click through
|
|
||||||
- [ ] **Mac:** Drag to Applications, open
|
|
||||||
- [ ] **Linux:** Follow distro instructions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## First Launch
|
|
||||||
|
|
||||||
- [ ] Choose theme (Light/Dark)
|
|
||||||
- [ ] Sign in with GitHub → Yes!
|
|
||||||
- [ ] Install recommended extensions → Yes
|
|
||||||
- [ ] ✅ IDE open
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verify Terminal
|
|
||||||
|
|
||||||
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
- [ ] ✅ Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ IDE installed!
|
|
||||||
|
|
||||||
**[→ Lesson 03: Git Repository Cloning](../lesson-03-git-cloning/01-quick-checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
# Lesson 02: IDE Installation
|
|
||||||
|
|
||||||
**Get your workspace ready**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Choose IDE (Cursor or VS Code)
|
|
||||||
- Install and configure
|
|
||||||
- Verify terminal works
|
|
||||||
|
|
||||||
**Time:** 10 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Choose Your IDE
|
|
||||||
|
|
||||||
### Cursor (Recommended)
|
|
||||||
|
|
||||||
- Built for AI assistance
|
|
||||||
- Perfect for WDS
|
|
||||||
- Download: <https://cursor.sh>
|
|
||||||
|
|
||||||
### VS Code (Alternative)
|
|
||||||
|
|
||||||
- Industry standard
|
|
||||||
- Works great too
|
|
||||||
- Download: <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
**For beginners:** Choose Cursor
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Install
|
|
||||||
|
|
||||||
**Windows:**
|
|
||||||
1. Run `.exe` file
|
|
||||||
2. Click through installer
|
|
||||||
3. Use defaults
|
|
||||||
|
|
||||||
**Mac:**
|
|
||||||
1. Open download
|
|
||||||
2. Drag to Applications
|
|
||||||
3. Open from Applications
|
|
||||||
|
|
||||||
**Linux:**
|
|
||||||
Follow distro instructions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: First Launch
|
|
||||||
|
|
||||||
1. Choose theme (Light/Dark)
|
|
||||||
2. **Sign in with GitHub** → Yes!
|
|
||||||
3. Install recommended extensions → Yes
|
|
||||||
|
|
||||||
**✅ Checkpoint:** IDE open
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Verify Terminal
|
|
||||||
|
|
||||||
Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Can't find download → Check Downloads folder
|
|
||||||
**Issue:** Mac "unidentified developer" → Right-click → Open
|
|
||||||
**Issue:** Terminal won't open → View menu → Terminal → New Terminal
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
IDE ready! Now clone your Git repository.
|
|
||||||
|
|
||||||
**[Continue to Lesson 03: Git Repository Cloning →](../lesson-03-git-cloning/02-full-lesson.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
# Lesson 02: IDE Installation - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 10 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose IDE
|
|
||||||
|
|
||||||
- [ ] **Cursor** (recommended) → <https://cursor.sh>
|
|
||||||
- [ ] **VS Code** (alternative) → <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
- [ ] Download installer
|
|
||||||
- [ ] **Windows:** Run `.exe`, click through
|
|
||||||
- [ ] **Mac:** Drag to Applications, open
|
|
||||||
- [ ] **Linux:** Follow distro instructions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## First Launch
|
|
||||||
|
|
||||||
- [ ] Choose theme (Light/Dark)
|
|
||||||
- [ ] Sign in with GitHub → Yes!
|
|
||||||
- [ ] Install recommended extensions → Yes
|
|
||||||
- [ ] ✅ IDE open
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verify Terminal
|
|
||||||
|
|
||||||
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
- [ ] ✅ Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ IDE installed!
|
|
||||||
|
|
||||||
**[→ Lesson 03: Git Repository Cloning](../lesson-03-git-cloning/01-quick-checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
# Lesson 02: IDE Installation - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 10 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose IDE
|
|
||||||
|
|
||||||
- [ ] **Cursor** (recommended for AI work) → <https://cursor.sh>
|
|
||||||
- [ ] **VS Code** (alternative) → <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
- [ ] Download installer
|
|
||||||
- [ ] **Windows:** Run `.exe`, click through
|
|
||||||
- [ ] **Mac:** Drag to Applications, open
|
|
||||||
- [ ] **Linux:** Follow distro instructions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## First Launch
|
|
||||||
|
|
||||||
- [ ] Choose theme (Light/Dark)
|
|
||||||
- [ ] **Sign in with GitHub** → Yes!
|
|
||||||
- [ ] Install recommended extensions → Yes
|
|
||||||
- [ ] ✅ IDE open
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verify Terminal
|
|
||||||
|
|
||||||
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
|
||||||
- [ ] ✅ Terminal panel appears
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ IDE installed!
|
|
||||||
|
|
||||||
**[→ Lesson 03: Git Configuration](../lesson-03-git-setup/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
# Lesson 02: IDE Installation
|
|
||||||
|
|
||||||
**Get your workspace set up with Cursor or VS Code**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Choose between Cursor and VS Code
|
|
||||||
- Download and install your IDE
|
|
||||||
- Complete first-launch setup
|
|
||||||
- Sign in with GitHub
|
|
||||||
|
|
||||||
**Time:** 10 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is an IDE?
|
|
||||||
|
|
||||||
**IDE = Integrated Development Environment**
|
|
||||||
|
|
||||||
Your workspace for creating specifications. Like Microsoft Word, but for design files.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Choose Your IDE
|
|
||||||
|
|
||||||
### Cursor (Recommended)
|
|
||||||
|
|
||||||
**Why Cursor:**
|
|
||||||
- Built for AI assistance
|
|
||||||
- Modern interface
|
|
||||||
- Perfect for WDS
|
|
||||||
- **Download:** <https://cursor.sh>
|
|
||||||
|
|
||||||
### VS Code (Alternative)
|
|
||||||
|
|
||||||
**Why VS Code:**
|
|
||||||
- Industry standard
|
|
||||||
- More extensions
|
|
||||||
- Works great with WDS too
|
|
||||||
- **Download:** <https://code.visualstudio.com>
|
|
||||||
|
|
||||||
**For beginners:** Choose Cursor. It's designed for AI-augmented work.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Install Cursor
|
|
||||||
|
|
||||||
### 2.1 Download
|
|
||||||
|
|
||||||
1. Go to **<https://cursor.sh>**
|
|
||||||
2. Click download button for your platform
|
|
||||||
3. Wait for download
|
|
||||||
|
|
||||||
### 2.2 Install
|
|
||||||
|
|
||||||
**Windows:**
|
|
||||||
1. Double-click the `.exe` file
|
|
||||||
2. Follow installer prompts
|
|
||||||
3. Use default settings
|
|
||||||
4. Click "Finish"
|
|
||||||
|
|
||||||
**Mac:**
|
|
||||||
1. Open the download
|
|
||||||
2. Drag Cursor to Applications folder
|
|
||||||
3. Open Applications folder
|
|
||||||
4. Double-click Cursor to launch
|
|
||||||
|
|
||||||
**Linux:**
|
|
||||||
1. Follow installation instructions for your distribution
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: First Launch Setup
|
|
||||||
|
|
||||||
1. Open Cursor for the first time
|
|
||||||
2. Choose your theme (Light or Dark - you can change this later)
|
|
||||||
|
|
||||||
### 3.1 Setup Wizard
|
|
||||||
|
|
||||||
Cursor will ask you a few questions:
|
|
||||||
|
|
||||||
- **"Import settings from VS Code?"** → Skip (unless you already use VS Code)
|
|
||||||
- **"Sign in with GitHub?"** → Yes! (makes cloning easier)
|
|
||||||
- **"Install recommended extensions?"** → Yes
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Cursor is open and ready
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install VS Code (Alternative)
|
|
||||||
|
|
||||||
If you chose VS Code instead:
|
|
||||||
|
|
||||||
### Download and Install
|
|
||||||
|
|
||||||
1. Go to **<https://code.visualstudio.com>**
|
|
||||||
2. Download for your platform
|
|
||||||
3. Follow same installation steps as Cursor above
|
|
||||||
4. Complete first-launch setup
|
|
||||||
5. Sign in with GitHub when prompted
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verify Installation
|
|
||||||
|
|
||||||
### Open the Terminal
|
|
||||||
|
|
||||||
This is important for upcoming lessons!
|
|
||||||
|
|
||||||
**Windows / Linux:**
|
|
||||||
- Press **Ctrl + `** (backtick key, usually above Tab)
|
|
||||||
|
|
||||||
**Mac:**
|
|
||||||
- Press **Cmd + `** (backtick key)
|
|
||||||
|
|
||||||
**You should see a terminal panel appear at the bottom!**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Terminal opens successfully
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Can't find download
|
|
||||||
**Solution:** Check your Downloads folder
|
|
||||||
|
|
||||||
**Issue:** Mac says "Cannot open - unidentified developer"
|
|
||||||
**Solution:** Right-click Cursor → Click "Open" → Click "Open" again
|
|
||||||
|
|
||||||
**Issue:** Terminal won't open
|
|
||||||
**Solution:** View menu → Terminal → New Terminal
|
|
||||||
|
|
||||||
**Issue:** GitHub sign-in fails
|
|
||||||
**Solution:** You can skip for now, we'll handle it later
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
Your IDE is ready! Now let's understand Git and how your IDE handles it automatically.
|
|
||||||
|
|
||||||
**[Continue to Lesson 03: Git Configuration →](../lesson-03-git-setup/tutorial.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
# Lesson 03: Git Repository Cloning - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 10 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Projects Folder
|
|
||||||
|
|
||||||
In terminal (**Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Windows
|
|
||||||
mkdir C:\Projects
|
|
||||||
cd C:\Projects
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir ~/Projects
|
|
||||||
cd ~/Projects
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ Projects folder created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone Your Repository
|
|
||||||
|
|
||||||
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
|
|
||||||
- [ ] In terminal: `git clone [paste-url]`
|
|
||||||
- [ ] (If prompted: Install Git → Click "Install")
|
|
||||||
- [ ] ✅ "done" message
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open Project in IDE
|
|
||||||
|
|
||||||
- [ ] **File** → **Open Folder**
|
|
||||||
- [ ] Select your project folder
|
|
||||||
- [ ] ✅ Project in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ Repository cloned!
|
|
||||||
|
|
||||||
**[→ Lesson 04: WDS Project Initialization](../lesson-04-wds-initialization/01-quick-checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
# Lesson 03: Git Repository Cloning
|
|
||||||
|
|
||||||
**Clone your project to your computer**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Create Projects folder
|
|
||||||
- Clone your repository
|
|
||||||
- Open project in IDE
|
|
||||||
- Understand Git auto-installation
|
|
||||||
|
|
||||||
**Time:** 10 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Create Projects Folder
|
|
||||||
|
|
||||||
**Choose a location:**
|
|
||||||
- Windows: `C:\Users\YourName\Projects\`
|
|
||||||
- Mac/Linux: `~/Projects/`
|
|
||||||
|
|
||||||
In terminal (**Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Windows
|
|
||||||
mkdir C:\Projects
|
|
||||||
cd C:\Projects
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir ~/Projects
|
|
||||||
cd ~/Projects
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Projects folder created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Get Repository URL
|
|
||||||
|
|
||||||
1. Go to your repository on GitHub
|
|
||||||
2. Click green **"Code"** button
|
|
||||||
3. Make sure **"HTTPS"** selected
|
|
||||||
4. Click copy icon (📋)
|
|
||||||
|
|
||||||
**Your URL:** `https://github.com/your-username/your-project.git`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Clone Repository
|
|
||||||
|
|
||||||
In terminal:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone [paste your URL]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/john-designer/dog-walker-app.git
|
|
||||||
```
|
|
||||||
|
|
||||||
**If Cursor prompts "Install Git?"** → Click **"Install"**, wait, try again
|
|
||||||
|
|
||||||
**✅ Checkpoint:** See "Cloning into..." then "done"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Open Project in IDE
|
|
||||||
|
|
||||||
1. **File** → **Open Folder**
|
|
||||||
2. Navigate to Projects folder
|
|
||||||
3. Select your project folder
|
|
||||||
4. Click **"Select Folder"** or **"Open"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Project name in sidebar with README.md
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## About Git Auto-Installation
|
|
||||||
|
|
||||||
**Git** is the tool that syncs with GitHub. Modern IDEs handle this automatically:
|
|
||||||
|
|
||||||
- First time cloning → IDE prompts to install
|
|
||||||
- You click "Install"
|
|
||||||
- Done!
|
|
||||||
|
|
||||||
**Alternative:** Use GitHub Desktop (<https://desktop.github.com>) for visual interface
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** "Git command not found" → Let IDE install when prompted
|
|
||||||
**Issue:** "Permission denied" → Sign into GitHub in IDE
|
|
||||||
**Issue:** Clone fails → Check URL copied correctly
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
Project cloned! Now initialize WDS and meet Mimir.
|
|
||||||
|
|
||||||
**[Continue to Lesson 04: WDS Project Initialization →](../lesson-04-wds-initialization/02-full-lesson.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
# Lesson 03: Git Repository Cloning - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 10 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Projects Folder
|
|
||||||
|
|
||||||
In terminal (**Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Windows
|
|
||||||
mkdir C:\Projects
|
|
||||||
cd C:\Projects
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir ~/Projects
|
|
||||||
cd ~/Projects
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ Projects folder created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone Your Repository
|
|
||||||
|
|
||||||
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
|
|
||||||
- [ ] In terminal: `git clone [paste-url]`
|
|
||||||
- [ ] (If prompted: Install Git → Click "Install")
|
|
||||||
- [ ] ✅ "done" message
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open Project in IDE
|
|
||||||
|
|
||||||
- [ ] **File** → **Open Folder**
|
|
||||||
- [ ] Select your project folder
|
|
||||||
- [ ] ✅ Project in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ Repository cloned!
|
|
||||||
|
|
||||||
**[→ Lesson 04: WDS Project Initialization](../lesson-04-wds-initialization/01-quick-checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
# Lesson 03: Git Configuration - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 5 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Choose Approach
|
|
||||||
|
|
||||||
- [ ] **Option 1:** Let Cursor handle Git (easiest - do nothing now!)
|
|
||||||
- [ ] **Option 2:** Use GitHub Desktop (visual) → <https://desktop.github.com>
|
|
||||||
- [ ] **Option 3:** Check terminal: `git --version`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## If Using GitHub Desktop
|
|
||||||
|
|
||||||
- [ ] Download from <https://desktop.github.com>
|
|
||||||
- [ ] Install
|
|
||||||
- [ ] Sign in with GitHub account
|
|
||||||
- [ ] ✅ Ready to clone visually
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Recap Your Repo Structure
|
|
||||||
|
|
||||||
You decided in Lesson 01:
|
|
||||||
- [ ] Single repo: `my-project` (specs + code together)
|
|
||||||
- [ ] Separate repo: `my-project-specs` (specs only)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ Git configured!
|
|
||||||
|
|
||||||
**[→ Lesson 04: Repository Cloning & WDS Integration](../lesson-04-clone-and-wds/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,159 +0,0 @@
|
||||||
# Lesson 03: Git Configuration
|
|
||||||
|
|
||||||
**Let your IDE handle Git automatically**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Understand what Git does
|
|
||||||
- Recap your repository structure decision
|
|
||||||
- Let Cursor install Git automatically
|
|
||||||
- OR use GitHub Desktop (visual alternative)
|
|
||||||
|
|
||||||
**Time:** 5 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is Git?
|
|
||||||
|
|
||||||
**Git** is the behind-the-scenes tool that syncs your computer with GitHub.
|
|
||||||
|
|
||||||
**Good news:** You don't need to install it manually! Modern IDEs like Cursor handle this for you.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Recap Your Repository Structure
|
|
||||||
|
|
||||||
**You already decided this in Lesson 01 when naming your repo!**
|
|
||||||
|
|
||||||
### Single Repo (named `my-project`)
|
|
||||||
```
|
|
||||||
my-project/
|
|
||||||
├── docs/ ← Your WDS specifications
|
|
||||||
└── src/ ← Code lives here too
|
|
||||||
```
|
|
||||||
|
|
||||||
### Separate Repo (named `my-project-specs`)
|
|
||||||
```
|
|
||||||
my-project-specs/ ← This repo (specifications only)
|
|
||||||
← Code repo created separately
|
|
||||||
```
|
|
||||||
|
|
||||||
**For this tutorial, we assume single repo** (`dog-walker-app`)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Choose Your Git Approach
|
|
||||||
|
|
||||||
### Option 1: Let Cursor Handle It (Recommended)
|
|
||||||
|
|
||||||
**The easiest way:** Do nothing!
|
|
||||||
|
|
||||||
When you try to clone a repository in Lesson 04, Cursor will:
|
|
||||||
|
|
||||||
1. Check if Git is installed
|
|
||||||
2. If not, **automatically prompt you**: "Install Git?"
|
|
||||||
3. You click **"Install"**
|
|
||||||
4. Done!
|
|
||||||
|
|
||||||
**That's it.** No command line needed.
|
|
||||||
|
|
||||||
**✅ This is the recommended path for beginners**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Option 2: GitHub Desktop (Visual Alternative)
|
|
||||||
|
|
||||||
**For designers who prefer visual tools:**
|
|
||||||
|
|
||||||
#### Why GitHub Desktop?
|
|
||||||
|
|
||||||
- ✅ No terminal commands needed
|
|
||||||
- ✅ Visual interface for everything
|
|
||||||
- ✅ See changes side-by-side
|
|
||||||
- ✅ Many professional designers use it
|
|
||||||
- ✅ Works perfectly with Cursor
|
|
||||||
|
|
||||||
#### Install GitHub Desktop
|
|
||||||
|
|
||||||
1. Download from **<https://desktop.github.com>**
|
|
||||||
2. Install it (follow standard installer)
|
|
||||||
3. Open GitHub Desktop
|
|
||||||
4. Sign in with your GitHub account
|
|
||||||
5. Done!
|
|
||||||
|
|
||||||
#### How it Works
|
|
||||||
|
|
||||||
- Use GitHub Desktop to **clone** repositories
|
|
||||||
- Use GitHub Desktop to **commit** and **push** changes
|
|
||||||
- Use Cursor to **edit** specifications
|
|
||||||
- They work together perfectly!
|
|
||||||
|
|
||||||
**This is a perfectly valid professional workflow.**
|
|
||||||
|
|
||||||
**Bonus:** GitHub Desktop also helps you decide between single vs separate repos visually!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Option 3: Already Comfortable with Terminal?
|
|
||||||
|
|
||||||
**Optional check for those who want to know:**
|
|
||||||
|
|
||||||
In Cursor terminal (press **Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git --version
|
|
||||||
```
|
|
||||||
|
|
||||||
**If you see a version number:**
|
|
||||||
```
|
|
||||||
git version 2.x.x
|
|
||||||
```
|
|
||||||
✅ Git is installed!
|
|
||||||
|
|
||||||
**If you see "command not found":**
|
|
||||||
No problem! Continue to Lesson 04, Cursor will prompt you.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Which Option Should You Choose?
|
|
||||||
|
|
||||||
**Choose Option 1 (Let Cursor Handle It) if:**
|
|
||||||
- You're a complete beginner
|
|
||||||
- You want the simplest path
|
|
||||||
- You're comfortable with terminal appearing in Lesson 04
|
|
||||||
|
|
||||||
**Choose Option 2 (GitHub Desktop) if:**
|
|
||||||
- You prefer visual interfaces
|
|
||||||
- You want to see changes graphically
|
|
||||||
- You're nervous about terminal commands
|
|
||||||
- You want a tool you'll keep using
|
|
||||||
|
|
||||||
**Both are great!** Many professionals use GitHub Desktop daily.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Not sure which option to choose
|
|
||||||
**Solution:** Use Option 1 (Let Cursor handle it) - simplest for beginners
|
|
||||||
|
|
||||||
**Issue:** GitHub Desktop won't sign in
|
|
||||||
**Solution:** Make sure you completed Lesson 01 (GitHub account created)
|
|
||||||
|
|
||||||
**Issue:** Worried about making mistakes
|
|
||||||
**Solution:** Git saves everything - you can always undo!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
Git will be ready when you need it! Now it's time to clone your repository and add WDS to your workspace.
|
|
||||||
|
|
||||||
**[Continue to Lesson 04: Repository Cloning & WDS Integration →](../lesson-04-clone-and-wds/tutorial.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
# Lesson 04: Repository Cloning & WDS Integration - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 15-20 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Projects Folder
|
|
||||||
|
|
||||||
In Cursor terminal (**Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Windows
|
|
||||||
mkdir C:\Projects
|
|
||||||
cd C:\Projects
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir ~/Projects
|
|
||||||
cd ~/Projects
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ Projects folder created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone Your Project
|
|
||||||
|
|
||||||
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
|
|
||||||
- [ ] In terminal: `git clone [paste-url-here]`
|
|
||||||
- [ ] (If prompted: Install Git → Click "Install")
|
|
||||||
- [ ] ✅ "done" message
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open Project in Cursor
|
|
||||||
|
|
||||||
- [ ] **File** → **Open Folder**
|
|
||||||
- [ ] Select your project folder
|
|
||||||
- [ ] ✅ Project in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone WDS
|
|
||||||
|
|
||||||
In terminal:
|
|
||||||
```bash
|
|
||||||
cd ~/Projects # or cd C:\Projects
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ WDS cloned
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Add WDS to Workspace
|
|
||||||
|
|
||||||
- [ ] **File** → **Add Folder to Workspace**
|
|
||||||
- [ ] Select `whiteport-design-studio` folder
|
|
||||||
- [ ] Click **"Add"**
|
|
||||||
- [ ] ✅ Both folders in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Docs Structure
|
|
||||||
|
|
||||||
In terminal (in YOUR project folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/your-project-name # YOUR project!
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir -p docs/{1-project-brief,2-trigger-mapping,3-prd-platform,4-ux-design,5-design-system,6-design-deliveries,7-testing,8-ongoing-development}
|
|
||||||
|
|
||||||
# Windows (if above doesn't work)
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief 2-trigger-mapping 3-prd-platform 4-ux-design 5-design-system 6-design-deliveries 7-testing 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ 8 folders in `docs/`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Step
|
|
||||||
|
|
||||||
✅ Everything cloned and ready!
|
|
||||||
|
|
||||||
**[→ Lesson 05: Mimir Activation](../lesson-05-initiate-mimir/checklist.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
# Lesson 04: Repository Cloning & WDS Integration
|
|
||||||
|
|
||||||
**Get your project and WDS onto your computer**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Clone your project repository
|
|
||||||
- Add WDS to your workspace
|
|
||||||
- Create docs folder structure
|
|
||||||
|
|
||||||
**Time:** 15-20 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Choose Where to Store Projects
|
|
||||||
|
|
||||||
**Create a Projects folder:**
|
|
||||||
|
|
||||||
**Windows:** `C:\Users\YourName\Projects\`
|
|
||||||
**Mac/Linux:** `/Users/YourName/Projects/` or `~/Projects/`
|
|
||||||
|
|
||||||
### Create the Folder
|
|
||||||
|
|
||||||
In Cursor terminal (**Ctrl+`** or **Cmd+`**):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Windows
|
|
||||||
mkdir C:\Projects
|
|
||||||
cd C:\Projects
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir ~/Projects
|
|
||||||
cd ~/Projects
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Projects folder created
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Clone Your Project Repository
|
|
||||||
|
|
||||||
**What is cloning?** Copying your GitHub repository to your computer so you can work on it.
|
|
||||||
|
|
||||||
### 2.1 Get Your Repository URL
|
|
||||||
|
|
||||||
1. Go to your repository on GitHub
|
|
||||||
2. Click the green **"Code"** button
|
|
||||||
3. Make sure **"HTTPS"** is selected
|
|
||||||
4. Click the **copy icon** (📋)
|
|
||||||
|
|
||||||
**Your URL looks like:** `https://github.com/your-username/your-project.git`
|
|
||||||
|
|
||||||
### 2.2 Clone the Repository
|
|
||||||
|
|
||||||
In Cursor terminal:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone [paste your URL here]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/john-designer/dog-walker-app.git
|
|
||||||
```
|
|
||||||
|
|
||||||
**If Cursor prompts "Install Git?"** → Click **"Install"** and wait, then try again.
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You see "Cloning into..." and then "done"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Open Your Project in Cursor
|
|
||||||
|
|
||||||
1. In Cursor: **File** → **Open Folder**
|
|
||||||
2. Navigate to your Projects folder
|
|
||||||
3. Select your project folder (e.g., `dog-walker-app`)
|
|
||||||
4. Click **"Select Folder"** or **"Open"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You see your project name in the left sidebar with README.md
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Clone WDS Repository
|
|
||||||
|
|
||||||
**What is WDS?** The methodology files that contain agents, workflows, and training.
|
|
||||||
|
|
||||||
**WDS lives separately from your project.**
|
|
||||||
|
|
||||||
In Cursor terminal (make sure you're in Projects folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Navigate back to Projects folder
|
|
||||||
cd ~/Projects # Mac/Linux
|
|
||||||
cd C:\Projects # Windows
|
|
||||||
|
|
||||||
# Clone WDS
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** WDS cloned successfully
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Add WDS to Your Workspace
|
|
||||||
|
|
||||||
1. In Cursor: **File** → **Add Folder to Workspace**
|
|
||||||
2. Navigate to your Projects folder
|
|
||||||
3. Select the `whiteport-design-studio` folder
|
|
||||||
4. Click **"Add"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You see both folders in your Cursor sidebar:
|
|
||||||
- your-project
|
|
||||||
- whiteport-design-studio
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Create Docs Folder Structure
|
|
||||||
|
|
||||||
**What is the docs folder?** Where all your WDS specifications will live. This is your design source of truth.
|
|
||||||
|
|
||||||
**Navigate to YOUR project (not WDS):**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Change to your project
|
|
||||||
cd ~/Projects/dog-walker-app # Mac/Linux (use YOUR project name!)
|
|
||||||
cd C:\Projects\dog-walker-app # Windows (use YOUR project name!)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Create the 8-phase structure:**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Mac/Linux (works in most terminals)
|
|
||||||
mkdir -p docs/1-project-brief
|
|
||||||
mkdir -p docs/2-trigger-mapping
|
|
||||||
mkdir -p docs/3-prd-platform
|
|
||||||
mkdir -p docs/4-ux-design
|
|
||||||
mkdir -p docs/5-design-system
|
|
||||||
mkdir -p docs/6-design-deliveries
|
|
||||||
mkdir -p docs/7-testing
|
|
||||||
mkdir -p docs/8-ongoing-development
|
|
||||||
```
|
|
||||||
|
|
||||||
**Windows alternative (if above doesn't work):**
|
|
||||||
```bash
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief
|
|
||||||
mkdir 2-trigger-mapping
|
|
||||||
mkdir 3-prd-platform
|
|
||||||
mkdir 4-ux-design
|
|
||||||
mkdir 5-design-system
|
|
||||||
mkdir 6-design-deliveries
|
|
||||||
mkdir 7-testing
|
|
||||||
mkdir 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You see a `docs/` folder with 8 numbered subfolders in your project
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quick Reference: What Lives Where
|
|
||||||
|
|
||||||
```
|
|
||||||
Your Computer/
|
|
||||||
└── Projects/
|
|
||||||
├── your-project/ ← YOUR PROJECT
|
|
||||||
│ ├── docs/ ← Your specifications
|
|
||||||
│ │ ├── 1-project-brief/
|
|
||||||
│ │ ├── 2-trigger-mapping/
|
|
||||||
│ │ ├── 3-prd-platform/
|
|
||||||
│ │ ├── 4-ux-design/
|
|
||||||
│ │ ├── 5-design-system/
|
|
||||||
│ │ ├── 6-design-deliveries/
|
|
||||||
│ │ ├── 7-testing/
|
|
||||||
│ │ └── 8-ongoing-development/
|
|
||||||
│ ├── src/ ← Code (if single repo)
|
|
||||||
│ └── README.md
|
|
||||||
│
|
|
||||||
└── whiteport-design-studio/ ← WDS METHODOLOGY
|
|
||||||
└── src/modules/wds/
|
|
||||||
├── agents/
|
|
||||||
├── workflows/
|
|
||||||
├── course/
|
|
||||||
└── MIMIR-WDS-ORCHESTRATOR.md
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** "Git command not found"
|
|
||||||
**Solution:** Let Cursor install Git when prompted, then try again
|
|
||||||
|
|
||||||
**Issue:** "Permission denied" when cloning
|
|
||||||
**Solution:** Make sure you're signed into GitHub in Cursor
|
|
||||||
|
|
||||||
**Issue:** "Can't find MIMIR file"
|
|
||||||
**Solution:** Make sure you added `whiteport-design-studio` folder to workspace (Step 5)
|
|
||||||
|
|
||||||
**Issue:** "mkdir: cannot create directory"
|
|
||||||
**Solution:** Make sure you're in your project folder: `cd ~/Projects/your-project`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
Everything is set up! Now let's activate Mimir and begin your WDS journey.
|
|
||||||
|
|
||||||
**[Continue to Lesson 05: Mimir Activation →](../lesson-05-initiate-mimir/tutorial.md)**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
# Lesson 04: WDS Project Initialization - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 15-20 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone WDS Repository
|
|
||||||
|
|
||||||
In terminal (in Projects folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects # or cd C:\Projects
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ WDS cloned
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Add WDS to Workspace
|
|
||||||
|
|
||||||
- [ ] **File** → **Add Folder to Workspace**
|
|
||||||
- [ ] Select `whiteport-design-studio` folder
|
|
||||||
- [ ] ✅ Both folders in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Docs Structure
|
|
||||||
|
|
||||||
In terminal (in YOUR project):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/your-project-name
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir -p docs/{1-project-brief,2-trigger-mapping,3-prd-platform,4-ux-design,5-design-system,6-design-deliveries,7-testing,8-ongoing-development}
|
|
||||||
|
|
||||||
# Windows (if above doesn't work)
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief 2-trigger-mapping 3-prd-platform 4-ux-design 5-design-system 6-design-deliveries 7-testing 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ 8 folders in `docs/`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Activate Mimir
|
|
||||||
|
|
||||||
- [ ] Find `whiteport-design-studio/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
- [ ] Press **Ctrl+L** or **Cmd+L** (open AI chat)
|
|
||||||
- [ ] Drag Mimir file to chat
|
|
||||||
- [ ] Type: "Hello Mimir! I just completed setup."
|
|
||||||
- [ ] ✅ Mimir responds!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 Complete!
|
|
||||||
|
|
||||||
- ✅ GitHub account & repository
|
|
||||||
- ✅ IDE installed
|
|
||||||
- ✅ Project cloned
|
|
||||||
- ✅ WDS integrated
|
|
||||||
- ✅ Docs structure created
|
|
||||||
- ✅ Mimir activated
|
|
||||||
|
|
||||||
**Next:** [Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
# Lesson 04: WDS Project Initialization
|
|
||||||
|
|
||||||
**Add WDS, create structure, activate Mimir**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Clone WDS repository
|
|
||||||
- Add WDS to workspace
|
|
||||||
- Create docs structure (8 phases)
|
|
||||||
- Activate Mimir
|
|
||||||
|
|
||||||
**Time:** 15-20 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Clone WDS Repository
|
|
||||||
|
|
||||||
**WDS lives separately from your project.**
|
|
||||||
|
|
||||||
In terminal (make sure you're in Projects folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Navigate to Projects
|
|
||||||
cd ~/Projects # Mac/Linux
|
|
||||||
cd C:\Projects # Windows
|
|
||||||
|
|
||||||
# Clone WDS
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** WDS cloned successfully
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Add WDS to Workspace
|
|
||||||
|
|
||||||
1. **File** → **Add Folder to Workspace**
|
|
||||||
2. Navigate to Projects folder
|
|
||||||
3. Select `whiteport-design-studio` folder
|
|
||||||
4. Click **"Add"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Both folders in sidebar:
|
|
||||||
- your-project
|
|
||||||
- whiteport-design-studio
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Create Docs Structure
|
|
||||||
|
|
||||||
**What is docs?** Where all WDS specifications live. Your design source of truth.
|
|
||||||
|
|
||||||
Navigate to YOUR project:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/your-project-name # Use YOUR project name!
|
|
||||||
cd C:\Projects\your-project-name # Windows
|
|
||||||
```
|
|
||||||
|
|
||||||
Create 8-phase structure:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir -p docs/1-project-brief
|
|
||||||
mkdir -p docs/2-trigger-mapping
|
|
||||||
mkdir -p docs/3-prd-platform
|
|
||||||
mkdir -p docs/4-ux-design
|
|
||||||
mkdir -p docs/5-design-system
|
|
||||||
mkdir -p docs/6-design-deliveries
|
|
||||||
mkdir -p docs/7-testing
|
|
||||||
mkdir -p docs/8-ongoing-development
|
|
||||||
```
|
|
||||||
|
|
||||||
**Windows alternative:**
|
|
||||||
```bash
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief
|
|
||||||
mkdir 2-trigger-mapping
|
|
||||||
mkdir 3-prd-platform
|
|
||||||
mkdir 4-ux-design
|
|
||||||
mkdir 5-design-system
|
|
||||||
mkdir 6-design-deliveries
|
|
||||||
mkdir 7-testing
|
|
||||||
mkdir 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** `docs/` folder with 8 numbered subfolders
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Activate Mimir
|
|
||||||
|
|
||||||
### What is Mimir?
|
|
||||||
|
|
||||||
Your WDS guide and orchestrator. He'll:
|
|
||||||
- Assess your skill level
|
|
||||||
- Check your setup
|
|
||||||
- Guide your next steps
|
|
||||||
- Connect you with specialist agents
|
|
||||||
|
|
||||||
### Find Mimir
|
|
||||||
|
|
||||||
In IDE sidebar:
|
|
||||||
1. Expand `whiteport-design-studio`
|
|
||||||
2. Expand `src` → `modules` → `wds`
|
|
||||||
3. Find `MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
|
|
||||||
### Open AI Chat
|
|
||||||
|
|
||||||
- **Windows/Linux:** Press **Ctrl+L**
|
|
||||||
- **Mac:** Press **Cmd+L**
|
|
||||||
- Or click chat icon
|
|
||||||
|
|
||||||
### Activate
|
|
||||||
|
|
||||||
1. Drag `MIMIR-WDS-ORCHESTRATOR.md` into chat
|
|
||||||
2. OR type: `@MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
3. Type: "Hello Mimir! I just completed setup and I'm ready to start."
|
|
||||||
4. Press **Enter**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Mimir responds and welcomes you!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Answer Mimir's Questions
|
|
||||||
|
|
||||||
Be honest about:
|
|
||||||
- Your skill level
|
|
||||||
- Your project
|
|
||||||
- How you're feeling
|
|
||||||
|
|
||||||
Mimir will:
|
|
||||||
- Verify your installation
|
|
||||||
- Guide your next steps
|
|
||||||
- Connect you with specialists
|
|
||||||
|
|
||||||
**Remember:** `@wds-mimir [your question]` anytime!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quick Reference: File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
Projects/
|
|
||||||
├── your-project/ ← YOUR PROJECT
|
|
||||||
│ ├── docs/ ← Specifications
|
|
||||||
│ │ ├── 1-project-brief/
|
|
||||||
│ │ ├── 2-trigger-mapping/
|
|
||||||
│ │ ├── 3-prd-platform/
|
|
||||||
│ │ ├── 4-ux-design/
|
|
||||||
│ │ ├── 5-design-system/
|
|
||||||
│ │ ├── 6-design-deliveries/
|
|
||||||
│ │ ├── 7-testing/
|
|
||||||
│ │ └── 8-ongoing-development/
|
|
||||||
│ └── README.md
|
|
||||||
│
|
|
||||||
└── whiteport-design-studio/ ← WDS METHODOLOGY
|
|
||||||
└── src/modules/wds/
|
|
||||||
├── agents/
|
|
||||||
├── workflows/
|
|
||||||
├── course/
|
|
||||||
└── MIMIR-WDS-ORCHESTRATOR.md
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Can't find MIMIR file → Check WDS added to workspace
|
|
||||||
**Issue:** Drag doesn't work → Use `@MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
**Issue:** mkdir fails → Make sure you're in your project folder
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 Congratulations!
|
|
||||||
|
|
||||||
You've completed Module 02: Installation & Setup!
|
|
||||||
|
|
||||||
**What you accomplished:**
|
|
||||||
- ✅ GitHub account & repository
|
|
||||||
- ✅ IDE installed
|
|
||||||
- ✅ Project cloned
|
|
||||||
- ✅ WDS integrated
|
|
||||||
- ✅ Docs structure created
|
|
||||||
- ✅ Mimir activated
|
|
||||||
|
|
||||||
**You're ready to design with WDS!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)**
|
|
||||||
- **[WDS Training Course](../../00-course-overview.md)**
|
|
||||||
- **Ask Mimir:** "What should I do next?"
|
|
||||||
|
|
||||||
**Remember:** `@wds-mimir [your question]` anytime! 🌊
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
# Lesson 04: WDS Project Initialization
|
|
||||||
|
|
||||||
**Add WDS, create structure, activate Mimir**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Clone WDS repository
|
|
||||||
- Add WDS to workspace
|
|
||||||
- Create docs structure (8 phases)
|
|
||||||
- Activate Mimir
|
|
||||||
|
|
||||||
**Time:** 15-20 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Clone WDS Repository
|
|
||||||
|
|
||||||
**WDS lives separately from your project.**
|
|
||||||
|
|
||||||
In terminal (make sure you're in Projects folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Navigate to Projects
|
|
||||||
cd ~/Projects # Mac/Linux
|
|
||||||
cd C:\Projects # Windows
|
|
||||||
|
|
||||||
# Clone WDS
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** WDS cloned successfully
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Add WDS to Workspace
|
|
||||||
|
|
||||||
1. **File** → **Add Folder to Workspace**
|
|
||||||
2. Navigate to Projects folder
|
|
||||||
3. Select `whiteport-design-studio` folder
|
|
||||||
4. Click **"Add"**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Both folders in sidebar:
|
|
||||||
- your-project
|
|
||||||
- whiteport-design-studio
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Create Docs Structure
|
|
||||||
|
|
||||||
**What is docs?** Where all WDS specifications live. Your design source of truth.
|
|
||||||
|
|
||||||
Navigate to YOUR project:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/your-project-name # Use YOUR project name!
|
|
||||||
cd C:\Projects\your-project-name # Windows
|
|
||||||
```
|
|
||||||
|
|
||||||
Create 8-phase structure:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir -p docs/1-project-brief
|
|
||||||
mkdir -p docs/2-trigger-mapping
|
|
||||||
mkdir -p docs/3-prd-platform
|
|
||||||
mkdir -p docs/4-ux-design
|
|
||||||
mkdir -p docs/5-design-system
|
|
||||||
mkdir -p docs/6-design-deliveries
|
|
||||||
mkdir -p docs/7-testing
|
|
||||||
mkdir -p docs/8-ongoing-development
|
|
||||||
```
|
|
||||||
|
|
||||||
**Windows alternative:**
|
|
||||||
```bash
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief
|
|
||||||
mkdir 2-trigger-mapping
|
|
||||||
mkdir 3-prd-platform
|
|
||||||
mkdir 4-ux-design
|
|
||||||
mkdir 5-design-system
|
|
||||||
mkdir 6-design-deliveries
|
|
||||||
mkdir 7-testing
|
|
||||||
mkdir 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Checkpoint:** `docs/` folder with 8 numbered subfolders
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Activate Mimir
|
|
||||||
|
|
||||||
### What is Mimir?
|
|
||||||
|
|
||||||
Your WDS guide and orchestrator. He'll:
|
|
||||||
- Assess your skill level
|
|
||||||
- Check your setup
|
|
||||||
- Guide your next steps
|
|
||||||
- Connect you with specialist agents
|
|
||||||
|
|
||||||
### Find Mimir
|
|
||||||
|
|
||||||
In IDE sidebar:
|
|
||||||
1. Expand `whiteport-design-studio`
|
|
||||||
2. Expand `src` → `modules` → `wds`
|
|
||||||
3. Find `MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
|
|
||||||
### Open AI Chat
|
|
||||||
|
|
||||||
- **Windows/Linux:** Press **Ctrl+L**
|
|
||||||
- **Mac:** Press **Cmd+L**
|
|
||||||
- Or click chat icon
|
|
||||||
|
|
||||||
### Activate
|
|
||||||
|
|
||||||
1. Drag `MIMIR-WDS-ORCHESTRATOR.md` into chat
|
|
||||||
2. OR type: `@MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
3. Type: "Hello Mimir! I just completed setup and I'm ready to start."
|
|
||||||
4. Press **Enter**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** Mimir responds and welcomes you!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Answer Mimir's Questions
|
|
||||||
|
|
||||||
Be honest about:
|
|
||||||
- Your skill level
|
|
||||||
- Your project
|
|
||||||
- How you're feeling
|
|
||||||
|
|
||||||
Mimir will:
|
|
||||||
- Verify your installation
|
|
||||||
- Guide your next steps
|
|
||||||
- Connect you with specialists
|
|
||||||
|
|
||||||
**Remember:** `@wds-mimir [your question]` anytime!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quick Reference: File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
Projects/
|
|
||||||
├── your-project/ ← YOUR PROJECT
|
|
||||||
│ ├── docs/ ← Specifications
|
|
||||||
│ │ ├── 1-project-brief/
|
|
||||||
│ │ ├── 2-trigger-mapping/
|
|
||||||
│ │ ├── 3-prd-platform/
|
|
||||||
│ │ ├── 4-ux-design/
|
|
||||||
│ │ ├── 5-design-system/
|
|
||||||
│ │ ├── 6-design-deliveries/
|
|
||||||
│ │ ├── 7-testing/
|
|
||||||
│ │ └── 8-ongoing-development/
|
|
||||||
│ └── README.md
|
|
||||||
│
|
|
||||||
└── whiteport-design-studio/ ← WDS METHODOLOGY
|
|
||||||
└── src/modules/wds/
|
|
||||||
├── agents/
|
|
||||||
├── workflows/
|
|
||||||
├── course/
|
|
||||||
└── MIMIR-WDS-ORCHESTRATOR.md
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Can't find MIMIR file → Check WDS added to workspace
|
|
||||||
**Issue:** Drag doesn't work → Use `@MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
**Issue:** mkdir fails → Make sure you're in your project folder
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 Congratulations!
|
|
||||||
|
|
||||||
You've completed Module 02: Installation & Setup!
|
|
||||||
|
|
||||||
**What you accomplished:**
|
|
||||||
- ✅ GitHub account & repository
|
|
||||||
- ✅ IDE installed
|
|
||||||
- ✅ Project cloned
|
|
||||||
- ✅ WDS integrated
|
|
||||||
- ✅ Docs structure created
|
|
||||||
- ✅ Mimir activated
|
|
||||||
|
|
||||||
**You're ready to design with WDS!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next?
|
|
||||||
|
|
||||||
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)**
|
|
||||||
- **[WDS Training Course](../../00-course-overview.md)**
|
|
||||||
- **Ask Mimir:** "What should I do next?"
|
|
||||||
|
|
||||||
**Remember:** `@wds-mimir [your question]` anytime! 🌊
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
# Lesson 04: WDS Project Initialization - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 15-20 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Clone WDS Repository
|
|
||||||
|
|
||||||
In terminal (in Projects folder):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects # or cd C:\Projects
|
|
||||||
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ WDS cloned
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Add WDS to Workspace
|
|
||||||
|
|
||||||
- [ ] **File** → **Add Folder to Workspace**
|
|
||||||
- [ ] Select `whiteport-design-studio` folder
|
|
||||||
- [ ] ✅ Both folders in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Create Docs Structure
|
|
||||||
|
|
||||||
In terminal (in YOUR project):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/your-project-name
|
|
||||||
|
|
||||||
# Mac/Linux
|
|
||||||
mkdir -p docs/{1-project-brief,2-trigger-mapping,3-prd-platform,4-ux-design,5-design-system,6-design-deliveries,7-testing,8-ongoing-development}
|
|
||||||
|
|
||||||
# Windows (if above doesn't work)
|
|
||||||
mkdir docs
|
|
||||||
cd docs
|
|
||||||
mkdir 1-project-brief 2-trigger-mapping 3-prd-platform 4-ux-design 5-design-system 6-design-deliveries 7-testing 8-ongoing-development
|
|
||||||
cd ..
|
|
||||||
```
|
|
||||||
|
|
||||||
- [ ] ✅ 8 folders in `docs/`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Activate Mimir
|
|
||||||
|
|
||||||
- [ ] Find `whiteport-design-studio/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
- [ ] Press **Ctrl+L** or **Cmd+L** (open AI chat)
|
|
||||||
- [ ] Drag Mimir file to chat
|
|
||||||
- [ ] Type: "Hello Mimir! I just completed setup."
|
|
||||||
- [ ] ✅ Mimir responds!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 Complete!
|
|
||||||
|
|
||||||
- ✅ GitHub account & repository
|
|
||||||
- ✅ IDE installed
|
|
||||||
- ✅ Project cloned
|
|
||||||
- ✅ WDS integrated
|
|
||||||
- ✅ Docs structure created
|
|
||||||
- ✅ Mimir activated
|
|
||||||
|
|
||||||
**Next:** [Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson](02-full-lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
# Lesson 05: Mimir Activation - Quick Checklist
|
|
||||||
|
|
||||||
**⏱️ 5 minutes**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Find Mimir
|
|
||||||
|
|
||||||
In Cursor sidebar:
|
|
||||||
- [ ] Expand `whiteport-design-studio`
|
|
||||||
- [ ] Expand `src` → `modules` → `wds`
|
|
||||||
- [ ] Find `MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open AI Chat
|
|
||||||
|
|
||||||
- [ ] Press **Ctrl+L** (Win/Linux) or **Cmd+L** (Mac)
|
|
||||||
- [ ] Or click chat icon in sidebar
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Activate Mimir
|
|
||||||
|
|
||||||
- [ ] Drag `MIMIR-WDS-ORCHESTRATOR.md` into chat input
|
|
||||||
- [ ] OR type: `@MIMIR-WDS-ORCHESTRATOR.md`
|
|
||||||
- [ ] Type: "Hello Mimir! I just completed setup and I'm ready to start."
|
|
||||||
- [ ] Press **Enter**
|
|
||||||
- [ ] ✅ Mimir responds!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Answer Mimir's Questions
|
|
||||||
|
|
||||||
Be honest about:
|
|
||||||
- [ ] Your skill level (beginner/learning/comfortable/experienced)
|
|
||||||
- [ ] Your project
|
|
||||||
- [ ] How you're feeling
|
|
||||||
|
|
||||||
Mimir will:
|
|
||||||
- [ ] Verify your installation
|
|
||||||
- [ ] Guide your next steps
|
|
||||||
- [ ] Connect you with specialist agents when ready
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Remember This Command
|
|
||||||
|
|
||||||
Whenever you need help:
|
|
||||||
```
|
|
||||||
@wds-mimir [your question]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 You Did It!
|
|
||||||
|
|
||||||
**Completed:**
|
|
||||||
- ✅ GitHub account & repository
|
|
||||||
- ✅ IDE installed
|
|
||||||
- ✅ Project cloned
|
|
||||||
- ✅ WDS integrated
|
|
||||||
- ✅ Docs structure created
|
|
||||||
- ✅ Mimir activated
|
|
||||||
|
|
||||||
**You're ready to design with WDS!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)**
|
|
||||||
- **[WDS Training Course](../../00-course-overview.md)**
|
|
||||||
- **Ask Mimir:** "What should I do next?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Need more detail?** See [full lesson explanation](lesson.md)
|
|
||||||
|
|
||||||
|
|
@ -1,244 +0,0 @@
|
||||||
# Lesson 05: Mimir Activation
|
|
||||||
|
|
||||||
**Activate your WDS guide and begin your journey**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
- Find the Mimir orchestrator file
|
|
||||||
- Drag it to AI chat
|
|
||||||
- Have your first conversation with Mimir
|
|
||||||
- Begin guided WDS workflow
|
|
||||||
|
|
||||||
**Time:** 5 minutes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is Mimir?
|
|
||||||
|
|
||||||
**Mimir** is your WDS guide and orchestrator.
|
|
||||||
|
|
||||||
Think of Mimir as:
|
|
||||||
- Your coach through WDS methodology
|
|
||||||
- Your trainer for each workflow
|
|
||||||
- Your psychologist when things feel overwhelming
|
|
||||||
- Your strategist for project decisions
|
|
||||||
|
|
||||||
**Mimir's role:** Assess your needs, understand your skill level, and connect you with the right specialist agents (Freya, Saga, Idunn) when appropriate.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Find the Mimir File
|
|
||||||
|
|
||||||
In Cursor sidebar:
|
|
||||||
|
|
||||||
1. Expand **`whiteport-design-studio`**
|
|
||||||
2. Expand **`src`** → **`modules`** → **`wds`**
|
|
||||||
3. Find **`MIMIR-WDS-ORCHESTRATOR.md`**
|
|
||||||
|
|
||||||
**✅ Checkpoint:** You can see the Mimir file
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Open AI Chat
|
|
||||||
|
|
||||||
In Cursor:
|
|
||||||
|
|
||||||
- **Windows/Linux:** Press **Ctrl+L**
|
|
||||||
- **Mac:** Press **Cmd+L**
|
|
||||||
- Or click the **chat icon** in the sidebar
|
|
||||||
|
|
||||||
**The AI chat panel will appear!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Drag Mimir to Chat
|
|
||||||
|
|
||||||
1. Click and hold **`MIMIR-WDS-ORCHESTRATOR.md`** in the sidebar
|
|
||||||
2. Drag it into the AI chat input area
|
|
||||||
3. Release
|
|
||||||
|
|
||||||
**You should see the file attached to your message!**
|
|
||||||
|
|
||||||
**Alternative method:**
|
|
||||||
Type in chat:
|
|
||||||
```
|
|
||||||
@MIMIR-WDS-ORCHESTRATOR.md
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Send Your First Message
|
|
||||||
|
|
||||||
**Type your first message:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Hello Mimir! I just completed the installation setup and I'm ready to start.
|
|
||||||
```
|
|
||||||
|
|
||||||
**Press Enter or click Send**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What Mimir Will Do
|
|
||||||
|
|
||||||
Mimir will:
|
|
||||||
|
|
||||||
1. **Welcome you warmly** 🌊
|
|
||||||
2. **Assess your situation:**
|
|
||||||
- Technical skill level (beginner → experienced)
|
|
||||||
- Emotional state (excited, nervous, ready)
|
|
||||||
- Familiarity with WDS
|
|
||||||
3. **Check your environment:**
|
|
||||||
- Is WDS repository present?
|
|
||||||
- Is your project set up correctly?
|
|
||||||
- Do you have the docs structure?
|
|
||||||
4. **Understand your project:**
|
|
||||||
- What are you building?
|
|
||||||
- What phase are you in?
|
|
||||||
- Do you need to start from Project Brief?
|
|
||||||
5. **Guide your next steps:**
|
|
||||||
- Route you to appropriate agent if needed
|
|
||||||
- Suggest which workflow to start with
|
|
||||||
- Offer training if you want to learn first
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Be Honest with Mimir
|
|
||||||
|
|
||||||
**Mimir adapts to YOU.**
|
|
||||||
|
|
||||||
If you're nervous → Mimir will be extra patient
|
|
||||||
If you're experienced → Mimir will be concise
|
|
||||||
If you're confused → Mimir will slow down
|
|
||||||
|
|
||||||
**There are no wrong answers!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Example First Conversation
|
|
||||||
|
|
||||||
**You:**
|
|
||||||
> Hello Mimir! I just completed setup and I'm ready to start.
|
|
||||||
|
|
||||||
**Mimir:**
|
|
||||||
> Welcome! 🌊 I'm Mimir, your guide through Whiteport Design Studio.
|
|
||||||
>
|
|
||||||
> I can see you've completed the installation - that's fantastic work!
|
|
||||||
>
|
|
||||||
> Let me understand your situation:
|
|
||||||
> 1. How comfortable are you with design tools and AI assistants? (Complete beginner / Learning / Comfortable / Experienced)
|
|
||||||
> 2. What project are you working on?
|
|
||||||
> 3. How are you feeling about starting this journey?
|
|
||||||
|
|
||||||
**Just answer honestly!** Mimir will adapt to your needs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Whenever You Need Help
|
|
||||||
|
|
||||||
**Remember this simple command:**
|
|
||||||
|
|
||||||
```
|
|
||||||
@wds-mimir [your question]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Examples:**
|
|
||||||
- `@wds-mimir I'm stuck on trigger mapping, can you help?`
|
|
||||||
- `@wds-mimir Which agent should I work with for UX design?`
|
|
||||||
- `@wds-mimir I feel overwhelmed, where should I start?`
|
|
||||||
- `@wds-mimir Can you walk me through the WDS training?`
|
|
||||||
|
|
||||||
**No question is too small. Mimir is always here to guide you.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
**Issue:** Can't find MIMIR file
|
|
||||||
**Solution:** Make sure you added `whiteport-design-studio` to workspace (Lesson 04, Step 5)
|
|
||||||
|
|
||||||
**Issue:** Drag doesn't work
|
|
||||||
**Solution:** Use `@MIMIR-WDS-ORCHESTRATOR.md` instead
|
|
||||||
|
|
||||||
**Issue:** AI doesn't respond
|
|
||||||
**Solution:** Make sure you're connected to internet, wait a moment, try again
|
|
||||||
|
|
||||||
**Issue:** Not sure what to say
|
|
||||||
**Solution:** Just say "Hello! I'm new and ready to start" - Mimir will guide you from there
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎉 Congratulations!
|
|
||||||
|
|
||||||
### You Did It!
|
|
||||||
|
|
||||||
You've completed the entire Module 02: Installation & Setup!
|
|
||||||
|
|
||||||
**What you accomplished:**
|
|
||||||
- ✅ Created GitHub account
|
|
||||||
- ✅ Set up project repository
|
|
||||||
- ✅ Installed IDE (Cursor or VS Code)
|
|
||||||
- ✅ Cloned your project
|
|
||||||
- ✅ Added WDS to workspace
|
|
||||||
- ✅ Created docs structure
|
|
||||||
- ✅ Activated Mimir
|
|
||||||
|
|
||||||
**This is HUGE!** Many designers never get past this point. You're ready to design with WDS.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Your Journey Continues
|
|
||||||
|
|
||||||
**Next steps (Mimir will guide you):**
|
|
||||||
|
|
||||||
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)** - If starting a new project
|
|
||||||
- **[WDS Training Course](../../00-course-overview.md)** - If you want to learn methodology first
|
|
||||||
- **Ask Mimir** - "What should I do next?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Pro Tips for Beginners
|
|
||||||
|
|
||||||
**Tip 1: Commit Often**
|
|
||||||
Every time you make meaningful progress, save to GitHub:
|
|
||||||
```bash
|
|
||||||
git add .
|
|
||||||
git commit -m "Describe what you did"
|
|
||||||
git push
|
|
||||||
```
|
|
||||||
|
|
||||||
**Tip 2: Keep WDS Updated**
|
|
||||||
Once a month, update WDS to get new features:
|
|
||||||
```bash
|
|
||||||
cd ~/Projects/whiteport-design-studio
|
|
||||||
git pull
|
|
||||||
```
|
|
||||||
|
|
||||||
**Tip 3: When in Doubt, Ask Mimir**
|
|
||||||
```
|
|
||||||
@wds-mimir [your question]
|
|
||||||
```
|
|
||||||
No question is too small!
|
|
||||||
|
|
||||||
**Tip 4: Save Your Workspace**
|
|
||||||
In Cursor: **File** → **Save Workspace As** → `my-project.code-workspace`
|
|
||||||
Next time, just open this file!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Remember
|
|
||||||
|
|
||||||
**Whenever in doubt:**
|
|
||||||
|
|
||||||
```
|
|
||||||
@wds-mimir [your question]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Mimir believes in you. You can do this. Welcome to WDS.** 🌊
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
# Module 02: Installation & Setup
|
|
||||||
|
|
||||||
**From zero to WDS-ready - complete beginner friendly**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This module takes you from having nothing to being fully set up with WDS, even if you've never used GitHub or an IDE before.
|
|
||||||
|
|
||||||
**Time:** 45-60 minutes total
|
|
||||||
**Difficulty:** Beginner
|
|
||||||
**Prerequisites:** Computer + Internet + Email
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Lessons
|
|
||||||
|
|
||||||
### [Lesson 01: Git Setup](lesson-01-git-setup/)
|
|
||||||
**15-20 minutes** | Create GitHub account and repository
|
|
||||||
|
|
||||||
- **[01 - Quick Checklist](lesson-01-git-setup/01-quick-checklist.md)** - Action list
|
|
||||||
- **[02 - Full Lesson](lesson-01-git-setup/02-full-lesson.md)** - With explanations
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### [Lesson 02: IDE Installation](lesson-02-ide-installation/)
|
|
||||||
**10 minutes** | Install Cursor or VS Code
|
|
||||||
|
|
||||||
- **[01 - Quick Checklist](lesson-02-ide-installation/01-quick-checklist.md)** - Action list
|
|
||||||
- **[02 - Full Lesson](lesson-02-ide-installation/02-full-lesson.md)** - With explanations
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### [Lesson 03: Git Repository Cloning](lesson-03-git-cloning/)
|
|
||||||
**10 minutes** | Clone your project to your computer
|
|
||||||
|
|
||||||
- **[01 - Quick Checklist](lesson-03-git-cloning/01-quick-checklist.md)** - Action list
|
|
||||||
- **[02 - Full Lesson](lesson-03-git-cloning/02-full-lesson.md)** - With explanations
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### [Lesson 04: WDS Project Initialization](lesson-04-wds-initialization/)
|
|
||||||
**15-20 minutes** | Add WDS, create docs structure, activate Mimir
|
|
||||||
|
|
||||||
- **[01 - Quick Checklist](lesson-04-wds-initialization/01-quick-checklist.md)** - Action list
|
|
||||||
- **[02 - Full Lesson](lesson-04-wds-initialization/02-full-lesson.md)** - With explanations
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quick Start
|
|
||||||
|
|
||||||
**Want the fastest path?**
|
|
||||||
|
|
||||||
Follow the checklists: [Start with Lesson 01 Checklist →](lesson-01-git-setup/01-quick-checklist.md)
|
|
||||||
|
|
||||||
**Want detailed explanations?**
|
|
||||||
|
|
||||||
Follow the full lessons: [Start with Lesson 01 Full Lesson →](lesson-01-git-setup/02-full-lesson.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## After This Module
|
|
||||||
|
|
||||||
- ✅ GitHub account and repository
|
|
||||||
- ✅ IDE installed and configured
|
|
||||||
- ✅ Project cloned to your computer
|
|
||||||
- ✅ WDS integrated in workspace
|
|
||||||
- ✅ Docs folder structure created
|
|
||||||
- ✅ Mimir activated and ready
|
|
||||||
|
|
||||||
**Next:** [Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Part of the WDS Course: From Designer to Linchpin*
|
|
||||||
*[← Back to Course Overview](../00-course-overview.md)*
|
|
||||||
|
|
@ -1,460 +0,0 @@
|
||||||
# Tutorial 04: Map Triggers & Outcomes
|
|
||||||
|
|
||||||
**Hands-on guide to understanding WHAT triggers user needs and WHY your business exists**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This tutorial teaches you how to map the psychological triggers that drive user behavior and connect them to business outcomes.
|
|
||||||
|
|
||||||
**Time:** 45-60 minutes
|
|
||||||
**Prerequisites:** Module 03 completed (Target Groups identified)
|
|
||||||
**What you'll create:** A complete trigger map for your top target group
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- How to identify user trigger moments
|
|
||||||
- Mapping from trigger → need → solution → outcome
|
|
||||||
- Connecting user psychology to business value
|
|
||||||
- Prioritizing features by trigger impact
|
|
||||||
- Creating a traceable chain of reasoning
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Select Your Top Target Group (5 min)
|
|
||||||
|
|
||||||
From Module 03, choose your highest-priority target group.
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
Target Group: Busy Parents with Family Dog
|
|
||||||
Priority: #1 (highest impact + feasibility)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Selected Target Group: [Your top group]
|
|
||||||
Why this group: [Reasoning]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Identify Trigger Moments (15 min)
|
|
||||||
|
|
||||||
### What is a trigger?
|
|
||||||
|
|
||||||
A specific moment when a user realizes they have a need your product can solve.
|
|
||||||
|
|
||||||
### Framework: The Trigger Moment
|
|
||||||
|
|
||||||
**Ask:**
|
|
||||||
|
|
||||||
- WHEN does the user feel pain/frustration?
|
|
||||||
- WHAT specific situation causes this?
|
|
||||||
- WHY does this matter to them emotionally?
|
|
||||||
|
|
||||||
**Example (Dog Week - Busy Parents):**
|
|
||||||
|
|
||||||
**Trigger 1: Morning Chaos**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHEN: Monday morning, everyone rushing
|
|
||||||
WHAT: Nobody knows who's walking the dog
|
|
||||||
WHY: Stress, guilt, family conflict, dog's needs unmet
|
|
||||||
```
|
|
||||||
|
|
||||||
**Trigger 2: Forgotten Feeding**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHEN: Evening, parent realizes dog wasn't fed
|
|
||||||
WHAT: Uncertainty about who was responsible
|
|
||||||
WHY: Guilt, worry about dog's health, family tension
|
|
||||||
```
|
|
||||||
|
|
||||||
**Trigger 3: Vet Appointment Missed**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHEN: Vet calls about missed appointment
|
|
||||||
WHAT: Nobody remembered or knew about it
|
|
||||||
WHY: Embarrassment, concern for dog, wasted money
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Identify 3-5 trigger moments for your target group:
|
|
||||||
|
|
||||||
Trigger 1: [Name]
|
|
||||||
WHEN: [Specific moment]
|
|
||||||
WHAT: [Specific situation]
|
|
||||||
WHY: [Emotional impact]
|
|
||||||
|
|
||||||
Trigger 2: [Name]
|
|
||||||
WHEN:
|
|
||||||
WHAT:
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
[Continue for 3-5 triggers]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "Let's dig deeper into each trigger:
|
|
||||||
- What happens right before this moment?
|
|
||||||
- What emotions does the user feel?
|
|
||||||
- How often does this happen?
|
|
||||||
- What do they try now (that doesn't work)?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Map User Needs (10 min)
|
|
||||||
|
|
||||||
### What is the need?
|
|
||||||
|
|
||||||
The underlying requirement the user has when triggered.
|
|
||||||
|
|
||||||
### Framework: From Trigger to Need
|
|
||||||
|
|
||||||
**For each trigger, ask:**
|
|
||||||
|
|
||||||
- What does the user need in this moment?
|
|
||||||
- What would make this situation better?
|
|
||||||
- What's the core problem to solve?
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
**Trigger: Morning Chaos**
|
|
||||||
|
|
||||||
```
|
|
||||||
Need: Know immediately who's responsible for dog care today
|
|
||||||
Need: See the full week's schedule at a glance
|
|
||||||
Need: Get reminded before tasks are due
|
|
||||||
```
|
|
||||||
|
|
||||||
**Trigger: Forgotten Feeding**
|
|
||||||
|
|
||||||
```
|
|
||||||
Need: Track whether tasks were completed
|
|
||||||
Need: Get notifications when tasks are overdue
|
|
||||||
Need: See task history to avoid confusion
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each trigger, identify 2-3 core needs:
|
|
||||||
|
|
||||||
Trigger 1: [Name]
|
|
||||||
Needs:
|
|
||||||
- [Need 1]
|
|
||||||
- [Need 2]
|
|
||||||
- [Need 3]
|
|
||||||
|
|
||||||
[Continue for all triggers]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Define Solutions (10 min)
|
|
||||||
|
|
||||||
### What is the solution?
|
|
||||||
|
|
||||||
The specific feature or capability that addresses the need.
|
|
||||||
|
|
||||||
### Framework: Need to Solution
|
|
||||||
|
|
||||||
**For each need, ask:**
|
|
||||||
|
|
||||||
- What feature would solve this?
|
|
||||||
- How would it work?
|
|
||||||
- What's the simplest version?
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
**Need: Know who's responsible today**
|
|
||||||
|
|
||||||
```
|
|
||||||
Solution: Daily schedule view with assigned responsibilities
|
|
||||||
- Shows today's tasks
|
|
||||||
- Highlights current user's tasks
|
|
||||||
- Shows who's assigned to each task
|
|
||||||
```
|
|
||||||
|
|
||||||
**Need: Get reminded before tasks are due**
|
|
||||||
|
|
||||||
```
|
|
||||||
Solution: Smart notifications
|
|
||||||
- Reminder 1 hour before task
|
|
||||||
- Escalation if task not completed
|
|
||||||
- Family-wide visibility of overdue tasks
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each need, define a solution:
|
|
||||||
|
|
||||||
Need: [Need description]
|
|
||||||
Solution: [Feature name]
|
|
||||||
- [How it works]
|
|
||||||
- [Key capabilities]
|
|
||||||
- [User benefit]
|
|
||||||
|
|
||||||
[Continue for all needs]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "Let's validate each solution:
|
|
||||||
- Does this truly solve the need?
|
|
||||||
- Is it the simplest solution?
|
|
||||||
- Are there edge cases to consider?
|
|
||||||
- How does this connect to business goals?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Map Business Outcomes (10 min)
|
|
||||||
|
|
||||||
### What is the outcome?
|
|
||||||
|
|
||||||
The business value created when users get their needs met.
|
|
||||||
|
|
||||||
### Framework: Solution to Outcome
|
|
||||||
|
|
||||||
**For each solution, ask:**
|
|
||||||
|
|
||||||
- How does this create business value?
|
|
||||||
- What metrics improve?
|
|
||||||
- How does this support business goals?
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
**Solution: Daily schedule view**
|
|
||||||
|
|
||||||
```
|
|
||||||
User Outcome: Reduced stress, better dog care
|
|
||||||
Business Outcome:
|
|
||||||
- Increased daily active users (checking schedule)
|
|
||||||
- Higher retention (solving real pain)
|
|
||||||
- Word-of-mouth growth (visible family benefit)
|
|
||||||
Metrics: DAU, retention rate, NPS
|
|
||||||
```
|
|
||||||
|
|
||||||
**Solution: Smart notifications**
|
|
||||||
|
|
||||||
```
|
|
||||||
User Outcome: Never miss dog care tasks
|
|
||||||
Business Outcome:
|
|
||||||
- Increased engagement (notification opens)
|
|
||||||
- Higher task completion (core value delivered)
|
|
||||||
- Premium feature potential (advanced notifications)
|
|
||||||
Metrics: Notification open rate, task completion rate, conversion
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each solution, map to business outcomes:
|
|
||||||
|
|
||||||
Solution: [Feature name]
|
|
||||||
User Outcome: [How user benefits]
|
|
||||||
Business Outcome: [How business benefits]
|
|
||||||
Metrics: [What you'll measure]
|
|
||||||
|
|
||||||
[Continue for all solutions]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Create Trigger Map Visualization (10 min)
|
|
||||||
|
|
||||||
### Format:
|
|
||||||
|
|
||||||
```
|
|
||||||
TARGET GROUP: [Group name]
|
|
||||||
|
|
||||||
TRIGGER → NEED → SOLUTION → OUTCOME
|
|
||||||
|
|
||||||
1. [Trigger name]
|
|
||||||
WHEN: [Moment]
|
|
||||||
↓
|
|
||||||
NEED: [Core need]
|
|
||||||
↓
|
|
||||||
SOLUTION: [Feature]
|
|
||||||
↓
|
|
||||||
OUTCOME: [Business value]
|
|
||||||
METRICS: [Measurements]
|
|
||||||
|
|
||||||
2. [Next trigger...]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example (Dog Week - Simplified):**
|
|
||||||
|
|
||||||
```
|
|
||||||
TARGET GROUP: Busy Parents with Family Dog
|
|
||||||
|
|
||||||
TRIGGER → NEED → SOLUTION → OUTCOME
|
|
||||||
|
|
||||||
1. Morning Chaos
|
|
||||||
WHEN: Monday morning, nobody knows dog responsibilities
|
|
||||||
↓
|
|
||||||
NEED: Know who's responsible for dog care today
|
|
||||||
↓
|
|
||||||
SOLUTION: Daily schedule view with assigned tasks
|
|
||||||
↓
|
|
||||||
OUTCOME: Increased DAU, higher retention
|
|
||||||
METRICS: Daily active users, 7-day retention
|
|
||||||
|
|
||||||
2. Forgotten Feeding
|
|
||||||
WHEN: Evening, uncertainty about feeding
|
|
||||||
↓
|
|
||||||
NEED: Track task completion in real-time
|
|
||||||
↓
|
|
||||||
SOLUTION: Task completion tracking + notifications
|
|
||||||
↓
|
|
||||||
OUTCOME: Higher engagement, core value delivered
|
|
||||||
METRICS: Task completion rate, notification opens
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Create your trigger map:
|
|
||||||
[Your complete map]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 7: Prioritize by Impact (5 min)
|
|
||||||
|
|
||||||
### Framework: Impact Score
|
|
||||||
|
|
||||||
**For each trigger-to-outcome chain, rate:**
|
|
||||||
|
|
||||||
- **User Impact** (1-5): How much does this help the user?
|
|
||||||
- **Business Impact** (1-5): How much business value does this create?
|
|
||||||
- **Feasibility** (1-5): How easy is this to build?
|
|
||||||
|
|
||||||
**Calculate:** `Priority Score = (User Impact + Business Impact) × Feasibility`
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
1. Morning Chaos → Daily Schedule
|
|
||||||
User: 5, Business: 5, Feasibility: 4
|
|
||||||
Score: (5+5) × 4 = 40 ⭐ HIGHEST PRIORITY
|
|
||||||
|
|
||||||
2. Forgotten Feeding → Task Tracking
|
|
||||||
User: 5, Business: 4, Feasibility: 4
|
|
||||||
Score: (5+4) × 4 = 36 ⭐ HIGH PRIORITY
|
|
||||||
|
|
||||||
3. Vet Appointment → Calendar Integration
|
|
||||||
User: 4, Business: 3, Feasibility: 2
|
|
||||||
Score: (4+3) × 2 = 14 → LOWER PRIORITY
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Score and rank your triggers:
|
|
||||||
[Your prioritized list]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 8: Save Your Trigger Map
|
|
||||||
|
|
||||||
**Create file:** `B-Trigger-Map/trigger-map-[target-group].md`
|
|
||||||
|
|
||||||
**Use template from:** `workflows/2-trigger-mapping/templates/trigger-map.template.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
✅ **Identified trigger moments** - You know WHEN users need your product
|
|
||||||
✅ **Mapped user needs** - You understand WHAT users need
|
|
||||||
✅ **Defined solutions** - You know WHAT to build
|
|
||||||
✅ **Connected to business** - You know WHY each feature matters
|
|
||||||
✅ **Prioritized features** - You know WHAT to build first
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Power of Trigger Mapping
|
|
||||||
|
|
||||||
**This is strategic gold:**
|
|
||||||
|
|
||||||
- Every feature traces back to a real user trigger
|
|
||||||
- Every decision is backed by user psychology
|
|
||||||
- Every feature connects to business value
|
|
||||||
- No more guessing what to build
|
|
||||||
- No more building things nobody uses
|
|
||||||
|
|
||||||
**When product managers ask "what should we build next?"**
|
|
||||||
→ You have the answer, backed by data and reasoning
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Immediate:**
|
|
||||||
|
|
||||||
- Repeat for your top 2-3 target groups
|
|
||||||
- Compare trigger maps across groups
|
|
||||||
- Identify overlapping needs (efficiency opportunity)
|
|
||||||
|
|
||||||
**Next Module:**
|
|
||||||
|
|
||||||
- [Module 05: Prioritize Features](../module-05-prioritize-features/module-05-overview.md)
|
|
||||||
- Create your feature roadmap based on trigger impact
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: How many triggers should I identify per target group?**
|
|
||||||
A: Start with 3-5 major triggers. You can always add more later.
|
|
||||||
|
|
||||||
**Q: What if multiple triggers lead to the same solution?**
|
|
||||||
A: Perfect! This means the solution has high leverage. Document all triggers it solves.
|
|
||||||
|
|
||||||
**Q: Should I map triggers for all target groups?**
|
|
||||||
A: Start with your top 1-2 groups. Add more as needed.
|
|
||||||
|
|
||||||
**Q: How do I validate these triggers are real?**
|
|
||||||
A: User research, interviews, observation. The trigger map is a hypothesis to test.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO ✅**
|
|
||||||
|
|
||||||
- Be specific about trigger moments
|
|
||||||
- Focus on emotional impact (the "why")
|
|
||||||
- Connect everything to business outcomes
|
|
||||||
- Prioritize ruthlessly
|
|
||||||
- Test assumptions with users
|
|
||||||
|
|
||||||
**DON'T ❌**
|
|
||||||
|
|
||||||
- List generic "user wants X" statements
|
|
||||||
- Skip the emotional "why"
|
|
||||||
- Create solutions without clear triggers
|
|
||||||
- Try to solve everything at once
|
|
||||||
- Forget to measure outcomes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Your trigger map is the strategic foundation that guides every design decision!**
|
|
||||||
|
|
||||||
[← Back to Module 04](module-04-overview.md) | [Next: Module 05 →](../module-05-prioritize-features/module-05-overview.md)
|
|
||||||
|
|
@ -1,274 +0,0 @@
|
||||||
# Lesson 3: Workshop 1 - Business Goals
|
|
||||||
|
|
||||||
**Define What Winning Looks Like**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Workshop 1 is where you establish the strategic foundation for your entire Trigger Map. You'll define both your aspirational vision and concrete measurable objectives that prove you're succeeding.
|
|
||||||
|
|
||||||
**Duration:** 15-20 minutes
|
|
||||||
**Format:** Conversational with Saga
|
|
||||||
**Output:** Vision statement + 3-5 strategic objectives
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Understanding the Two Levels
|
|
||||||
|
|
||||||
Business goals work on two distinct levels:
|
|
||||||
|
|
||||||
### 1. Vision (Visionary Statements)
|
|
||||||
|
|
||||||
**What it is:**
|
|
||||||
- Aspirational and motivational
|
|
||||||
- Grand ambitions that reflect focus and direction
|
|
||||||
- Not exact or measurable
|
|
||||||
- Examples: "Be the best," "Fastest in market," "Top of mind"
|
|
||||||
|
|
||||||
**Characteristics:**
|
|
||||||
- Easy to set, hard to measure
|
|
||||||
- Provides the "why" and emotional drive
|
|
||||||
- Inspires and motivates the team
|
|
||||||
- Gives direction without rigid constraints
|
|
||||||
|
|
||||||
### 2. Strategic Objectives
|
|
||||||
|
|
||||||
**What it is:**
|
|
||||||
- Specific and measurable (expressed using SMART method)
|
|
||||||
- Observable evidence that vision is being realized
|
|
||||||
- Concrete milestones you can track
|
|
||||||
- Examples: "10,000 users by Q4," "70% retention rate"
|
|
||||||
|
|
||||||
**Characteristics:**
|
|
||||||
- Harder to set, easy to measure
|
|
||||||
- Provides the "what" and accountability
|
|
||||||
- Enables progress tracking
|
|
||||||
- Creates clear success criteria
|
|
||||||
|
|
||||||
**Why both matter:** Visionary statements provide motivation and direction. Objectives provide accountability and proof of progress. Together they create both inspiration and measurement.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Workshop Flow
|
|
||||||
|
|
||||||
### Step 1: Start with Vision
|
|
||||||
|
|
||||||
**Capture the grand ambition:**
|
|
||||||
- What's the aspirational future state?
|
|
||||||
- What motivates the team?
|
|
||||||
- What's the "why" behind this project?
|
|
||||||
- Don't worry about exact measurement yet
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
"Make remote work sustainable and healthy for distributed teams"
|
|
||||||
|
|
||||||
### Step 2: Ask "What Will We Observe?"
|
|
||||||
|
|
||||||
**Bridge from soft to hard goals:**
|
|
||||||
- When this vision is being realized, what will we see in the world?
|
|
||||||
- What measurable evidence proves we're succeeding?
|
|
||||||
- What observable changes indicate progress?
|
|
||||||
|
|
||||||
**This is the critical bridging question** that transforms aspiration into measurable reality.
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
"When remote work is sustainable and healthy, we'll observe teams using tools daily, staying engaged long-term, and growing their usage. We'll see business metrics that prove the model works."
|
|
||||||
|
|
||||||
### Step 3: Define Strategic Objectives
|
|
||||||
|
|
||||||
**Transform observations into specific goals:**
|
|
||||||
- 3-5 concrete objectives
|
|
||||||
- Each expressed using SMART method (Specific, Measurable, Achievable, Relevant, Time-bound)
|
|
||||||
- Focus on what's truly measurable
|
|
||||||
- Set realistic timeframes
|
|
||||||
|
|
||||||
See [SMART Method Reference](../../models/smart-goals-model.md) for detailed guidance on creating strategic objectives.
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
1. Achieve 5,000 active teams by Q4 2024
|
|
||||||
2. Increase average session time to 15 minutes daily
|
|
||||||
3. Reach 70% weekly retention rate
|
|
||||||
4. Generate $50K MRR by end of year
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Questions Saga Asks
|
|
||||||
|
|
||||||
### For Vision (Visionary Statements)
|
|
||||||
|
|
||||||
- "What's the grand ambition behind this project?"
|
|
||||||
- "What does 'winning' look like at the highest level?"
|
|
||||||
- "What vision motivates your team?"
|
|
||||||
- "Why does this project matter?"
|
|
||||||
|
|
||||||
### Bridging to Objectives
|
|
||||||
|
|
||||||
- "When this vision is being realized, what will we observe in the world?"
|
|
||||||
- "What measurable evidence would prove you're succeeding?"
|
|
||||||
- "What would we see that indicates progress toward this vision?"
|
|
||||||
|
|
||||||
### For Strategic Objectives (using SMART method)
|
|
||||||
|
|
||||||
- "What specific, measurable outcomes would prove success?"
|
|
||||||
- "By when do you need to achieve these objectives?"
|
|
||||||
- "How will you measure progress?"
|
|
||||||
- "What counts as 'active' or 'successful' in your context?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Generic Example Walkthrough
|
|
||||||
|
|
||||||
### Vision (Soft Goal)
|
|
||||||
|
|
||||||
"Make remote work sustainable and healthy for distributed teams"
|
|
||||||
|
|
||||||
**Why this works:**
|
|
||||||
- Aspirational and motivating
|
|
||||||
- Clear direction without rigid constraints
|
|
||||||
- Easy to communicate and remember
|
|
||||||
- Inspires the team
|
|
||||||
|
|
||||||
### Bridging Question
|
|
||||||
|
|
||||||
"When remote work is sustainable and healthy, what will we observe?"
|
|
||||||
|
|
||||||
**Observations:**
|
|
||||||
- Teams using our solution daily
|
|
||||||
- High retention rates (people stay)
|
|
||||||
- Growing usage patterns
|
|
||||||
- Sustainable business model (revenue)
|
|
||||||
|
|
||||||
### Strategic Objectives (using SMART method)
|
|
||||||
|
|
||||||
1. **Achieve 5,000 active teams by Q4 2024**
|
|
||||||
- Specific: Active teams (defined metric)
|
|
||||||
- Measurable: 5,000 teams
|
|
||||||
- Achievable: Based on market size and growth rate
|
|
||||||
- Relevant: Proves market adoption
|
|
||||||
- Time-bound: Q4 2024
|
|
||||||
|
|
||||||
2. **Increase average session time to 15 minutes daily**
|
|
||||||
- Specific: Session time metric
|
|
||||||
- Measurable: 15 minutes
|
|
||||||
- Achievable: Industry benchmarks
|
|
||||||
- Relevant: Indicates engagement
|
|
||||||
- Time-bound: Daily measurement
|
|
||||||
|
|
||||||
3. **Reach 70% weekly retention rate**
|
|
||||||
- Specific: Weekly retention
|
|
||||||
- Measurable: 70% rate
|
|
||||||
- Achievable: Above industry average
|
|
||||||
- Relevant: Proves value delivery
|
|
||||||
- Time-bound: Weekly tracking
|
|
||||||
|
|
||||||
4. **Generate $50K MRR by end of year**
|
|
||||||
- Specific: Monthly recurring revenue
|
|
||||||
- Measurable: $50K
|
|
||||||
- Achievable: Based on pricing and targets
|
|
||||||
- Relevant: Business sustainability
|
|
||||||
- Time-bound: End of year
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You Get from Workshop 1
|
|
||||||
|
|
||||||
✅ **Inspiring vision** that motivates the team
|
|
||||||
✅ **Measurable objectives** that prove progress
|
|
||||||
✅ **Clear connection** between ambition and accountability
|
|
||||||
✅ **Foundation** for all strategic decisions
|
|
||||||
✅ **Alignment** on both "why" and "what"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Skipping the Vision
|
|
||||||
|
|
||||||
**Problem:** Jumping straight to metrics without capturing the aspiration
|
|
||||||
**Why it fails:** Team loses motivation, no emotional connection
|
|
||||||
**Fix:** Start with the grand ambition, then bridge to metrics
|
|
||||||
|
|
||||||
### Mistake 2: Vague Objectives
|
|
||||||
|
|
||||||
**Problem:** "Improve user experience" or "Get more customers"
|
|
||||||
**Why it fails:** Can't measure progress, no accountability
|
|
||||||
**Fix:** Make every objective SMART with specific numbers
|
|
||||||
|
|
||||||
### Mistake 3: Too Many Objectives
|
|
||||||
|
|
||||||
**Problem:** Listing 15 different metrics to track
|
|
||||||
**Why it fails:** Dilutes focus, creates confusion
|
|
||||||
**Fix:** Limit to 3-5 most critical objectives
|
|
||||||
|
|
||||||
### Mistake 4: Unrealistic Targets
|
|
||||||
|
|
||||||
**Problem:** "Become #1 in the world in 30 days"
|
|
||||||
**Why it fails:** Demoralizes team, loses credibility
|
|
||||||
**Fix:** Set challenging but achievable goals based on resources
|
|
||||||
|
|
||||||
### Mistake 5: Missing the Bridge
|
|
||||||
|
|
||||||
**Problem:** Vision and objectives feel disconnected
|
|
||||||
**Why it fails:** Team doesn't see how metrics prove vision
|
|
||||||
**Fix:** Use the bridging question to connect them explicitly
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How This Feeds Into Next Workshops
|
|
||||||
|
|
||||||
**Workshop 1 creates the foundation:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Business Goals (Vision + Objectives)
|
|
||||||
↓
|
|
||||||
Workshop 2: Which user groups can help achieve these?
|
|
||||||
↓
|
|
||||||
Workshop 3: What drives those groups' behavior?
|
|
||||||
↓
|
|
||||||
Workshop 4: Which groups and drivers matter most?
|
|
||||||
↓
|
|
||||||
Workshop 5: Which features address top priorities?
|
|
||||||
```
|
|
||||||
|
|
||||||
Everything traces back to the goals you define here.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO:**
|
|
||||||
- ✅ Start with aspiration before metrics
|
|
||||||
- ✅ Use the bridging question explicitly
|
|
||||||
- ✅ Make objectives truly SMART
|
|
||||||
- ✅ Limit to 3-5 key objectives
|
|
||||||
- ✅ Reference your Product Brief
|
|
||||||
|
|
||||||
**DON'T:**
|
|
||||||
- ❌ Skip the vision (just list metrics)
|
|
||||||
- ❌ Accept vague objectives
|
|
||||||
- ❌ Set unrealistic targets
|
|
||||||
- ❌ Create too many objectives
|
|
||||||
- ❌ Forget to connect vision to objectives
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next
|
|
||||||
|
|
||||||
Workshop 2 identifies WHO can help you achieve these goals - your target groups. You'll create prioritized personas that become the foundation for understanding user psychology.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Two levels of goals** - Vision (visionary/aspirational) + Strategic Objectives (measurable using SMART method)
|
|
||||||
✅ **Bridging question is critical** - "What will we observe when vision is realized?"
|
|
||||||
✅ **Strategic objectives using SMART method** - Specific, Measurable, Achievable, Relevant, Time-bound
|
|
||||||
✅ **3-5 objectives maximum** - Focus on what truly matters
|
|
||||||
✅ **Foundation for everything** - All workshops build from here
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 3](lesson-03-five-workshops-overview.md) | [Next: Lesson 5 - Workshop 2: Target Groups →](lesson-05-workshop-2-target-groups.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,504 +0,0 @@
|
||||||
# Lesson 4: Workshop 2 - Target Groups
|
|
||||||
|
|
||||||
**Who Is Ensuring Our Success?**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Core Question
|
|
||||||
|
|
||||||
**Identify WHO out there in the world will make sure, with their use of the product, that you achieve your goals.**
|
|
||||||
|
|
||||||
This question contains the entire chain of value creation. Let's break it down:
|
|
||||||
|
|
||||||
### Breaking Down the Question
|
|
||||||
|
|
||||||
**"WHO"**
|
|
||||||
- Which representative from which ICP (Ideal Customer Profile)?
|
|
||||||
- Specific behavioral and contextual profiles
|
|
||||||
- Not demographics, but real people with real contexts
|
|
||||||
|
|
||||||
**"Out there in the world"**
|
|
||||||
- These are real people whose lives your product needs to touch
|
|
||||||
- Not abstract user segments, but actual humans in specific situations
|
|
||||||
- Your product must reach and impact their reality
|
|
||||||
|
|
||||||
**"Will make sure"**
|
|
||||||
- A product needs to be used, and used in the intended way
|
|
||||||
- Usage alone isn't enough - it must be the right usage
|
|
||||||
- Their behavior drives the outcome
|
|
||||||
|
|
||||||
**"With their use of the product"**
|
|
||||||
- The product must give more value than the pain of using it
|
|
||||||
- If usage pain > value gained, they won't care
|
|
||||||
- They need motivation to engage and continue
|
|
||||||
|
|
||||||
**"That you achieve your goals"**
|
|
||||||
- The use of the product must tie to measurable business goals
|
|
||||||
- Without this connection, success isn't possible
|
|
||||||
- This completes the chain: WHO → uses product → right way → creates value → achieves goals
|
|
||||||
|
|
||||||
**This distinction is critical** and reflects throughout the entire Trigger Mapping methodology.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Workshop 2 is where you identify the specific user groups whose behavior will drive your business success. You'll create detailed personas and prioritize them by strategic value.
|
|
||||||
|
|
||||||
**Duration:** 20-25 minutes
|
|
||||||
**Format:** Conversational with Saga
|
|
||||||
**Output:** 3-5 prioritized personas with deep context
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
### 1. Identify Groups
|
|
||||||
|
|
||||||
**Find the user types who can drive your success:**
|
|
||||||
- Not demographics ("parents aged 30-45")
|
|
||||||
- Behavioral and contextual profiles ("busy working parents juggling multiple schedules")
|
|
||||||
- Real people out there in the world whose lives your product will touch
|
|
||||||
- 3-5 distinct groups
|
|
||||||
- Focus on who can help achieve your business goals through their product use
|
|
||||||
|
|
||||||
**Key question:** "WHO out there in the world will make sure, with their use of the product, that we achieve our goals?"
|
|
||||||
|
|
||||||
### 2. Create Personas
|
|
||||||
|
|
||||||
**For each group, develop a rich profile:**
|
|
||||||
- Name and context (their situation)
|
|
||||||
- Goals and motivations (what they want)
|
|
||||||
- Frustrations and fears (what they struggle with)
|
|
||||||
- Behavioral patterns (how they act)
|
|
||||||
|
|
||||||
**Go beyond demographics** - understand their world, their challenges, their aspirations.
|
|
||||||
|
|
||||||
### 3. Prioritize
|
|
||||||
|
|
||||||
**Rank groups by strategic value:**
|
|
||||||
- Which groups have highest impact on business goals?
|
|
||||||
- Which are most feasible to reach and serve?
|
|
||||||
- Rank 1-N based on strategic importance
|
|
||||||
|
|
||||||
**This ranking becomes critical** for the next workshops.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Questions Saga Asks
|
|
||||||
|
|
||||||
### Identifying Groups
|
|
||||||
|
|
||||||
- "Who are the people whose behavior will drive your business success?"
|
|
||||||
- "What different user types could help you achieve your goals?"
|
|
||||||
- "Looking at your objectives, who has the power to make them happen?"
|
|
||||||
|
|
||||||
### Creating Personas
|
|
||||||
|
|
||||||
- "Tell me about [group name]. What's their situation?"
|
|
||||||
- "What's their context? What are they trying to accomplish?"
|
|
||||||
- "What are their goals and motivations?"
|
|
||||||
- "What frustrates them in their current situation?"
|
|
||||||
- "What do they fear or want to avoid?"
|
|
||||||
- "What behavioral patterns do they exhibit?"
|
|
||||||
|
|
||||||
### Prioritizing
|
|
||||||
|
|
||||||
- "Which group has the most potential impact on your top business goal?"
|
|
||||||
- "Which group is most feasible to reach and serve effectively?"
|
|
||||||
- "How would you rank these groups by strategic value?"
|
|
||||||
- "Why does this group rank higher than the others?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Generic Example
|
|
||||||
|
|
||||||
### Target Group 1: Remote Team Leads
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- Managing 5-10 distributed team members across time zones
|
|
||||||
- Responsible for team performance and wellbeing
|
|
||||||
- Limited visibility into individual struggles
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Keep team productive and connected
|
|
||||||
- Recognize and support struggling members early
|
|
||||||
- Demonstrate effective leadership to management
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Can't tell who's struggling until it's too late
|
|
||||||
- Async communication creates gaps
|
|
||||||
- Hard to build team culture remotely
|
|
||||||
- Limited tools for monitoring team health
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Team burnout without noticing
|
|
||||||
- Missed deadlines due to unseen problems
|
|
||||||
- Poor performance reviews
|
|
||||||
- Losing top performers
|
|
||||||
- Team becoming disconnected
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Checks in with team daily
|
|
||||||
- Monitors project progress closely
|
|
||||||
- Seeks early warning signs
|
|
||||||
- Values data-driven insights
|
|
||||||
|
|
||||||
**Priority:** #1 (High impact + reachable + urgent pain)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Target Group 2: Solo Remote Workers
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- Working alone from home without office structure
|
|
||||||
- No team to provide accountability or connection
|
|
||||||
- Struggling with boundaries and focus
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Stay focused and productive
|
|
||||||
- Maintain work-life boundaries
|
|
||||||
- Feel connected to professional community
|
|
||||||
- Advance career despite isolation
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Constant distractions at home
|
|
||||||
- Isolation and loneliness
|
|
||||||
- Overworking without clear boundaries
|
|
||||||
- Lack of professional development
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Career stagnation
|
|
||||||
- Burnout from overwork
|
|
||||||
- Losing touch with industry
|
|
||||||
- Being forgotten by management
|
|
||||||
- Professional isolation
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Seeks structure and routine
|
|
||||||
- Values community connection
|
|
||||||
- Struggles with self-discipline
|
|
||||||
- Craves professional growth
|
|
||||||
|
|
||||||
**Priority:** #2 (Large market + moderate impact)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Target Group 3: Remote Executives
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- Overseeing multiple distributed teams
|
|
||||||
- Responsible for organizational performance
|
|
||||||
- Limited visibility into team dynamics
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Ensure organizational productivity
|
|
||||||
- Maintain company culture remotely
|
|
||||||
- Make data-driven decisions
|
|
||||||
- Retain top talent
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Can't gauge team morale
|
|
||||||
- Limited insights into team health
|
|
||||||
- Difficult to spot problems early
|
|
||||||
- Hard to maintain culture at scale
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Organizational dysfunction
|
|
||||||
- Mass turnover
|
|
||||||
- Productivity decline
|
|
||||||
- Cultural erosion
|
|
||||||
- Competitive disadvantage
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Relies on aggregated data
|
|
||||||
- Values high-level insights
|
|
||||||
- Needs quick decision-making tools
|
|
||||||
- Focuses on organizational metrics
|
|
||||||
|
|
||||||
**Priority:** #3 (High value but harder to reach)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Another Generic Example: Public Transport App
|
|
||||||
|
|
||||||
This example shows how the same "customers" (travelers) have completely different needs based on their context.
|
|
||||||
|
|
||||||
### Target Group 1: Daily Commuters
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- Same route every workday (home ↔ work)
|
|
||||||
- Time-sensitive schedule (must arrive on time)
|
|
||||||
- Experienced with the system
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Get to work/home efficiently
|
|
||||||
- Minimize waiting time
|
|
||||||
- Avoid delays and disruptions
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Unexpected delays without warning
|
|
||||||
- Crowded vehicles during rush hour
|
|
||||||
- Unreliable schedules
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Being late to work (professional consequences)
|
|
||||||
- Missing important meetings
|
|
||||||
- Unpredictable commute times
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Checks app before leaving
|
|
||||||
- Knows alternative routes
|
|
||||||
- Values real-time updates
|
|
||||||
- Wants predictability
|
|
||||||
|
|
||||||
**Priority:** #1 (Highest volume, daily usage, urgent needs)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Target Group 2: Tourists
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- Unfamiliar with the city and transit system
|
|
||||||
- Exploring multiple destinations
|
|
||||||
- No time pressure but limited trip duration
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Navigate unfamiliar system confidently
|
|
||||||
- Find best routes to attractions
|
|
||||||
- Understand ticketing and payment
|
|
||||||
- Maximize sightseeing time
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Confusing route options
|
|
||||||
- Unclear ticketing systems
|
|
||||||
- Language barriers
|
|
||||||
- Getting lost or taking wrong line
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Wasting vacation time being lost
|
|
||||||
- Looking foolish or incompetent
|
|
||||||
- Missing key attractions
|
|
||||||
- Overpaying for tickets
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Plans routes in advance
|
|
||||||
- Needs step-by-step guidance
|
|
||||||
- Values visual/map-based navigation
|
|
||||||
- Seeks reassurance at each step
|
|
||||||
|
|
||||||
**Priority:** #2 (Growing market, different needs than commuters)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Target Group 3: Seniors
|
|
||||||
|
|
||||||
**Context:**
|
|
||||||
- May have mobility limitations
|
|
||||||
- Less familiar with digital tools
|
|
||||||
- Often traveling during off-peak hours
|
|
||||||
- May need accessibility features
|
|
||||||
|
|
||||||
**Goals:**
|
|
||||||
- Travel safely and comfortably
|
|
||||||
- Avoid physical strain (stairs, long walks)
|
|
||||||
- Feel confident using the system
|
|
||||||
- Maintain independence
|
|
||||||
|
|
||||||
**Frustrations:**
|
|
||||||
- Complicated digital interfaces
|
|
||||||
- Lack of accessibility information
|
|
||||||
- Physical barriers (stairs, gaps)
|
|
||||||
- Small text and confusing layouts
|
|
||||||
|
|
||||||
**Fears:**
|
|
||||||
- Falling or getting injured
|
|
||||||
- Being stranded or unable to get help
|
|
||||||
- Losing independence
|
|
||||||
- Embarrassment from not understanding technology
|
|
||||||
|
|
||||||
**Behavioral Patterns:**
|
|
||||||
- Prefers simple, clear interfaces
|
|
||||||
- Values accessibility information
|
|
||||||
- Needs larger text and clear instructions
|
|
||||||
- May prefer human assistance options
|
|
||||||
|
|
||||||
**Priority:** #3 (Important for accessibility, regulatory requirements)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Why This Example Works
|
|
||||||
|
|
||||||
**Same product (public transport app), completely different needs:**
|
|
||||||
|
|
||||||
**Commuters need:**
|
|
||||||
- Real-time delay alerts
|
|
||||||
- Quick route alternatives
|
|
||||||
- Predictability and reliability
|
|
||||||
- Speed and efficiency
|
|
||||||
|
|
||||||
**Tourists need:**
|
|
||||||
- Step-by-step navigation
|
|
||||||
- Visual/map-based guidance
|
|
||||||
- Ticketing help
|
|
||||||
- Confidence and reassurance
|
|
||||||
|
|
||||||
**Seniors need:**
|
|
||||||
- Accessibility information
|
|
||||||
- Simple, clear interfaces
|
|
||||||
- Larger text and buttons
|
|
||||||
- Safety and comfort features
|
|
||||||
|
|
||||||
**The insight:** If you designed only for commuters (speed and efficiency), you'd fail tourists and seniors. If you designed only for tourists (detailed guidance), you'd frustrate commuters who want speed. Understanding these distinct groups allows you to prioritize features strategically.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why Behavioral Profiles Matter
|
|
||||||
|
|
||||||
### Not This (Demographics)
|
|
||||||
|
|
||||||
"Parents aged 30-45 with household income $75K+"
|
|
||||||
|
|
||||||
**Problem:** Doesn't tell you what drives behavior, what they need, or how to design for them.
|
|
||||||
|
|
||||||
### This (Behavioral + Contextual)
|
|
||||||
|
|
||||||
"Busy working parents juggling multiple kids' schedules, family dog care, and full-time jobs - constantly afraid of dropping the ball on family responsibilities"
|
|
||||||
|
|
||||||
**Why it works:** You understand their world, their challenges, their fears. You can design for their actual needs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prioritization Criteria
|
|
||||||
|
|
||||||
### Impact on Business Goals
|
|
||||||
|
|
||||||
**Ask:**
|
|
||||||
- Which group's behavior most directly drives our objectives?
|
|
||||||
- Which group has the power to make our goals happen?
|
|
||||||
- Which group's success equals our success?
|
|
||||||
|
|
||||||
**Example:** Remote Team Leads rank #1 because each one brings 5-10 users (their team), has budget authority, and urgent pain.
|
|
||||||
|
|
||||||
### Feasibility to Reach
|
|
||||||
|
|
||||||
**Ask:**
|
|
||||||
- Can we actually reach this group?
|
|
||||||
- Do we have channels to communicate with them?
|
|
||||||
- Can we serve them with our resources?
|
|
||||||
- Is the market size sufficient?
|
|
||||||
|
|
||||||
**Example:** Executives rank lower because they're harder to reach despite high value.
|
|
||||||
|
|
||||||
### Urgency of Pain
|
|
||||||
|
|
||||||
**Ask:**
|
|
||||||
- How urgent is their problem?
|
|
||||||
- Are they actively seeking solutions?
|
|
||||||
- What's the cost of not solving this?
|
|
||||||
|
|
||||||
**Example:** Team Leads have urgent pain (team burnout risk) vs Solo Workers have chronic pain (isolation).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You Get from Workshop 2
|
|
||||||
|
|
||||||
✅ **3-5 prioritized personas** with rich context
|
|
||||||
✅ **Deep understanding** of each group's world
|
|
||||||
✅ **Clear ranking** by strategic value
|
|
||||||
✅ **Foundation** for psychological mapping
|
|
||||||
✅ **Focus** for design efforts
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Demographic Personas
|
|
||||||
|
|
||||||
**Problem:** "Males 25-40 with college degrees"
|
|
||||||
**Why it fails:** Doesn't explain behavior or needs
|
|
||||||
**Fix:** Focus on context, goals, frustrations, fears
|
|
||||||
|
|
||||||
### Mistake 2: Too Many Groups
|
|
||||||
|
|
||||||
**Problem:** Identifying 10+ different user types
|
|
||||||
**Why it fails:** Dilutes focus, impossible to serve all
|
|
||||||
**Fix:** Limit to 3-5 most strategic groups
|
|
||||||
|
|
||||||
### Mistake 3: No Prioritization
|
|
||||||
|
|
||||||
**Problem:** "All groups are equally important"
|
|
||||||
**Why it fails:** Can't focus design efforts
|
|
||||||
**Fix:** Rank ruthlessly by strategic value
|
|
||||||
|
|
||||||
### Mistake 4: Ignoring Feasibility
|
|
||||||
|
|
||||||
**Problem:** Targeting groups you can't reach
|
|
||||||
**Why it fails:** Wastes resources on impossible goals
|
|
||||||
**Fix:** Balance impact with reachability
|
|
||||||
|
|
||||||
### Mistake 5: Surface-Level Personas
|
|
||||||
|
|
||||||
**Problem:** "They want to be productive"
|
|
||||||
**Why it fails:** Too generic to guide design
|
|
||||||
**Fix:** Dig deeper - what's their context? Their fears?
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How This Feeds Into Next Workshops
|
|
||||||
|
|
||||||
**Workshop 2 sets up the psychology mapping:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Business Goals
|
|
||||||
↓
|
|
||||||
Target Groups (prioritized personas)
|
|
||||||
↓
|
|
||||||
Workshop 3: What drives each group's behavior?
|
|
||||||
↓
|
|
||||||
Workshop 4: Which drivers are most powerful?
|
|
||||||
↓
|
|
||||||
Workshop 5: Which features address top drivers?
|
|
||||||
```
|
|
||||||
|
|
||||||
The personas you create here become the foundation for understanding psychological drivers.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO:**
|
|
||||||
- ✅ Focus on behavioral and contextual profiles
|
|
||||||
- ✅ Dig deep into frustrations and fears
|
|
||||||
- ✅ Prioritize ruthlessly (not everyone is #1)
|
|
||||||
- ✅ Consider both impact and feasibility
|
|
||||||
- ✅ Create personas you can actually design for
|
|
||||||
|
|
||||||
**DON'T:**
|
|
||||||
- ❌ Use demographic categories only
|
|
||||||
- ❌ Create too many personas
|
|
||||||
- ❌ Skip prioritization
|
|
||||||
- ❌ Accept surface-level descriptions
|
|
||||||
- ❌ Ignore feasibility constraints
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next
|
|
||||||
|
|
||||||
Workshop 3 maps the psychological drivers for each persona - both what they want to achieve (positive drivers) and what they want to avoid (negative drivers). This is where you understand the psychology that drives behavior.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Behavioral profiles, not demographics** - Context, goals, frustrations, fears
|
|
||||||
✅ **3-5 groups maximum** - Focus on strategic value
|
|
||||||
✅ **Prioritize ruthlessly** - Rank by impact + feasibility
|
|
||||||
✅ **Deep understanding** - Know their world, not just their age
|
|
||||||
✅ **Foundation for psychology** - These personas drive next workshops
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 4](lesson-04-workshop-1-business-goals.md) | [Next: Lesson 6 - Workshop 3: Driving Forces →](lesson-06-workshop-3-driving-forces.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,313 +0,0 @@
|
||||||
# Lesson 6: Workshop 4 - Prioritization
|
|
||||||
|
|
||||||
**Rank What Matters Most**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Workshop 4 is where you make strategic choices about what matters most. You'll rank your target groups and their psychological drivers to create clear priorities that guide all design decisions.
|
|
||||||
|
|
||||||
**Duration:** 15-20 minutes
|
|
||||||
**Format:** Conversational with Saga
|
|
||||||
**Output:** Ranked target groups + ranked drivers for each group
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
### 1. Prioritize Target Groups
|
|
||||||
|
|
||||||
**Rank your personas by strategic value:**
|
|
||||||
- Which groups have highest business impact?
|
|
||||||
- Which are most feasible to serve?
|
|
||||||
- Rank 1-N based on strategic importance
|
|
||||||
|
|
||||||
**This ranking determines** which groups get design focus first.
|
|
||||||
|
|
||||||
### 2. Prioritize Driving Forces
|
|
||||||
|
|
||||||
**For each group, rank their psychological drivers:**
|
|
||||||
- Within each persona, which drivers are strongest?
|
|
||||||
- Which have most emotional intensity?
|
|
||||||
- Which would drive the most urgent action?
|
|
||||||
- Rank by power to drive behavior
|
|
||||||
|
|
||||||
**This ranking determines** which drivers become your feature scoring criteria.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Questions Saga Asks
|
|
||||||
|
|
||||||
### For Target Groups
|
|
||||||
|
|
||||||
- "Which target group will have the biggest impact on your top business goal?"
|
|
||||||
- "Which group is most feasible to reach and serve effectively?"
|
|
||||||
- "How would you rank all groups from highest to lowest strategic value?"
|
|
||||||
- "Why does this group rank higher than the others?"
|
|
||||||
- "What makes this group more strategic?"
|
|
||||||
|
|
||||||
### For Driving Forces
|
|
||||||
|
|
||||||
- "For [top persona], which driving forces are most powerful?"
|
|
||||||
- "Which drivers have the most emotional intensity?"
|
|
||||||
- "Which pain points cause the most urgent need to act?"
|
|
||||||
- "Which positive drivers are strongest motivators?"
|
|
||||||
- "How would you rank these drivers by their power to drive behavior?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Generic Example
|
|
||||||
|
|
||||||
### Target Group Rankings
|
|
||||||
|
|
||||||
**1. Remote Team Leads** (Priority #1)
|
|
||||||
- **Why #1:** High impact (each brings 5-10 users), reachable through professional channels, urgent pain (team burnout risk), budget authority
|
|
||||||
- **Business impact:** Directly drives user acquisition and retention goals
|
|
||||||
- **Feasibility:** Can reach through LinkedIn, management communities
|
|
||||||
|
|
||||||
**2. Solo Remote Workers** (Priority #2)
|
|
||||||
- **Why #2:** Large market size, moderate impact per user, chronic pain (less urgent than team leads)
|
|
||||||
- **Business impact:** Volume play, good retention potential
|
|
||||||
- **Feasibility:** Reachable through remote work communities
|
|
||||||
|
|
||||||
**3. Remote Executives** (Priority #3)
|
|
||||||
- **Why #3:** High value per user, but harder to reach, longer sales cycles
|
|
||||||
- **Business impact:** Strategic accounts, high revenue potential
|
|
||||||
- **Feasibility:** Difficult to reach, requires different approach
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Driving Force Rankings: Remote Team Lead
|
|
||||||
|
|
||||||
**Top 5 Prioritized Drivers:**
|
|
||||||
|
|
||||||
**1. Fear of team burnout without noticing** (NEGATIVE)
|
|
||||||
- **Why #1:** Most urgent, highest emotional intensity, constant worry
|
|
||||||
- **Emotional core:** Guilt and responsibility for people's wellbeing
|
|
||||||
- **Urgency:** Very high (active problem)
|
|
||||||
- **Impact:** Directly threatens their success
|
|
||||||
|
|
||||||
**2. Want to demonstrate effective leadership** (POSITIVE)
|
|
||||||
- **Why #2:** Career driver, strong motivation, measurable outcome
|
|
||||||
- **Emotional core:** Professional advancement and recognition
|
|
||||||
- **Urgency:** High (ongoing career goal)
|
|
||||||
- **Impact:** Affects long-term success
|
|
||||||
|
|
||||||
**3. Fear of losing top performers** (NEGATIVE)
|
|
||||||
- **Why #3:** Business impact, reflects on leadership, costly outcome
|
|
||||||
- **Emotional core:** Failure and loss
|
|
||||||
- **Urgency:** High (retention risk)
|
|
||||||
- **Impact:** Damages team and reputation
|
|
||||||
|
|
||||||
**4. Want to build strong team culture** (POSITIVE)
|
|
||||||
- **Why #4:** Aspirational, important but less urgent
|
|
||||||
- **Emotional core:** Pride in team cohesion
|
|
||||||
- **Urgency:** Medium (long-term goal)
|
|
||||||
- **Impact:** Enables other goals
|
|
||||||
|
|
||||||
**5. Fear of missed deadlines** (NEGATIVE)
|
|
||||||
- **Why #5:** Important but less emotionally intense than top fears
|
|
||||||
- **Emotional core:** Professional embarrassment
|
|
||||||
- **Urgency:** Medium (project-dependent)
|
|
||||||
- **Impact:** Situational
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prioritization Criteria
|
|
||||||
|
|
||||||
### For Target Groups
|
|
||||||
|
|
||||||
**Business Impact:**
|
|
||||||
- Which group's behavior most directly drives objectives?
|
|
||||||
- Which group has power to make goals happen?
|
|
||||||
- What's the multiplier effect? (e.g., team leads bring teams)
|
|
||||||
|
|
||||||
**Feasibility:**
|
|
||||||
- Can we actually reach this group?
|
|
||||||
- Do we have channels to communicate?
|
|
||||||
- Can we serve them with our resources?
|
|
||||||
- Is market size sufficient?
|
|
||||||
|
|
||||||
**Urgency of Pain:**
|
|
||||||
- How urgent is their problem?
|
|
||||||
- Are they actively seeking solutions?
|
|
||||||
- What's the cost of not solving?
|
|
||||||
|
|
||||||
**Strategic Fit:**
|
|
||||||
- Does this align with company strengths?
|
|
||||||
- Is this a sustainable advantage?
|
|
||||||
- Does this open future opportunities?
|
|
||||||
|
|
||||||
### For Driving Forces
|
|
||||||
|
|
||||||
**Emotional Intensity:**
|
|
||||||
- How strongly do they feel this?
|
|
||||||
- Does this keep them up at night?
|
|
||||||
- Is this a constant worry or occasional concern?
|
|
||||||
|
|
||||||
**Urgency:**
|
|
||||||
- How immediate is the need?
|
|
||||||
- What triggers action on this?
|
|
||||||
- Is this active pain or chronic discomfort?
|
|
||||||
|
|
||||||
**Impact on Behavior:**
|
|
||||||
- Would solving this drive adoption?
|
|
||||||
- Would this prevent churn?
|
|
||||||
- Does this create word-of-mouth?
|
|
||||||
|
|
||||||
**Measurability:**
|
|
||||||
- Can we tell if we've addressed this?
|
|
||||||
- Can users articulate this need?
|
|
||||||
- Is there observable behavior change?
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why Prioritization Matters
|
|
||||||
|
|
||||||
### Without Prioritization
|
|
||||||
|
|
||||||
**Problems:**
|
|
||||||
- Try to serve everyone equally (serve no one well)
|
|
||||||
- Build features that address minor drivers
|
|
||||||
- Waste resources on low-impact groups
|
|
||||||
- No clear focus for design
|
|
||||||
|
|
||||||
**Result:** Mediocre product that doesn't deeply solve anyone's problems.
|
|
||||||
|
|
||||||
### With Prioritization
|
|
||||||
|
|
||||||
**Benefits:**
|
|
||||||
- Focus design on highest-impact groups
|
|
||||||
- Address most powerful psychological drivers
|
|
||||||
- Allocate resources strategically
|
|
||||||
- Create deep value for top segments
|
|
||||||
|
|
||||||
**Result:** Product that deeply solves urgent problems for strategic users.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Prioritization Cascade
|
|
||||||
|
|
||||||
Once you have rankings, design decisions become clear:
|
|
||||||
|
|
||||||
```
|
|
||||||
Top Business Goal
|
|
||||||
↓
|
|
||||||
Top Target Group (who can best achieve this?)
|
|
||||||
↓
|
|
||||||
Top Psychological Driver (what drives them most?)
|
|
||||||
↓
|
|
||||||
Features that address this driver
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
- **Goal:** Increase user retention to 70%
|
|
||||||
- **Top Group:** Remote Team Leads (high retention potential)
|
|
||||||
- **Top Driver:** Fear of team burnout without noticing
|
|
||||||
- **Top Feature:** Daily team pulse check with burnout indicators
|
|
||||||
- **Why:** Addresses their #1 fear, drives retention
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You Get from Workshop 4
|
|
||||||
|
|
||||||
✅ **Clear strategic priorities** - Know what matters most
|
|
||||||
✅ **Ranked target groups** - Focus design efforts
|
|
||||||
✅ **Ranked drivers** - Know which psychology to address
|
|
||||||
✅ **Decision framework** - Guide all feature discussions
|
|
||||||
✅ **Data for scoring** - Foundation for Workshop 5
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Everything Is Priority #1
|
|
||||||
|
|
||||||
**Problem:** "All groups are equally important"
|
|
||||||
**Why it fails:** Dilutes focus, serves no one well
|
|
||||||
**Fix:** Make hard choices, rank ruthlessly
|
|
||||||
|
|
||||||
### Mistake 2: Prioritizing by Ease
|
|
||||||
|
|
||||||
**Problem:** "Let's focus on the easiest group first"
|
|
||||||
**Why it fails:** May not drive business goals
|
|
||||||
**Fix:** Balance impact with feasibility
|
|
||||||
|
|
||||||
### Mistake 3: Ignoring Emotional Intensity
|
|
||||||
|
|
||||||
**Problem:** Ranking drivers by logic, not emotion
|
|
||||||
**Why it fails:** Miss what actually drives behavior
|
|
||||||
**Fix:** Consider emotional intensity and urgency
|
|
||||||
|
|
||||||
### Mistake 4: Too Many Top Priorities
|
|
||||||
|
|
||||||
**Problem:** "Top 10 drivers are all critical"
|
|
||||||
**Why it fails:** Can't focus, spreads resources thin
|
|
||||||
**Fix:** Limit to top 5-7 drivers for scoring
|
|
||||||
|
|
||||||
### Mistake 5: Forgetting Business Goals
|
|
||||||
|
|
||||||
**Problem:** Prioritizing based on interesting psychology
|
|
||||||
**Why it fails:** Doesn't connect to business success
|
|
||||||
**Fix:** Always trace back to business objectives
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How This Feeds Into Workshop 5
|
|
||||||
|
|
||||||
**Workshop 4 creates the scoring criteria:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Business Goals
|
|
||||||
↓
|
|
||||||
Target Groups (ranked)
|
|
||||||
↓
|
|
||||||
Driving Forces (ranked for each group)
|
|
||||||
↓
|
|
||||||
Top 5-7 Drivers (scoring criteria)
|
|
||||||
↓
|
|
||||||
Workshop 5: Score features against these drivers
|
|
||||||
```
|
|
||||||
|
|
||||||
The top-ranked drivers become the columns in your feature scoring matrix.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO:**
|
|
||||||
- ✅ Make hard choices (not everything is #1)
|
|
||||||
- ✅ Consider both impact and feasibility
|
|
||||||
- ✅ Focus on emotional intensity
|
|
||||||
- ✅ Limit to top 5-7 drivers for scoring
|
|
||||||
- ✅ Trace priorities back to business goals
|
|
||||||
|
|
||||||
**DON'T:**
|
|
||||||
- ❌ Avoid making choices
|
|
||||||
- ❌ Prioritize by ease alone
|
|
||||||
- ❌ Ignore emotional intensity
|
|
||||||
- ❌ Create too many "top" priorities
|
|
||||||
- ❌ Forget the business objectives
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next
|
|
||||||
|
|
||||||
Workshop 5 uses these priorities to systematically score features. Each feature gets rated against your top-ranked drivers, creating a data-driven roadmap.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Ruthless prioritization** - Not everything can be #1
|
|
||||||
✅ **Two levels of ranking** - Groups first, then drivers
|
|
||||||
✅ **Strategic criteria** - Impact + feasibility + urgency
|
|
||||||
✅ **Top 5-7 drivers** - Become feature scoring criteria
|
|
||||||
✅ **Clear focus** - Guides all design decisions
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 6](lesson-06-workshop-3-driving-forces.md) | [Next: Lesson 8 - Workshop 5: Feature Impact →](lesson-08-workshop-5-feature-impact.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,474 +0,0 @@
|
||||||
# Lesson 7: Workshop 5 - Feature Impact
|
|
||||||
|
|
||||||
**Score Features by Strategic Impact**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Workshop 5 is where strategy becomes actionable roadmap. You'll systematically score your feature ideas against the prioritized psychological drivers from Workshop 4, creating a data-driven feature prioritization.
|
|
||||||
|
|
||||||
**Duration:** 20-30 minutes
|
|
||||||
**Format:** Conversational with Saga
|
|
||||||
**Output:** Scored and ranked feature list
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Do
|
|
||||||
|
|
||||||
### 1. List Features
|
|
||||||
|
|
||||||
**Brainstorm all potential features:**
|
|
||||||
- Ideas from Product Brief
|
|
||||||
- Stakeholder requests
|
|
||||||
- Competitive features
|
|
||||||
- User feedback
|
|
||||||
- Team suggestions
|
|
||||||
|
|
||||||
**Aim for:** 10-20 features to evaluate
|
|
||||||
|
|
||||||
### 2. Score Each Feature
|
|
||||||
|
|
||||||
**Rate against top 5-7 prioritized drivers:**
|
|
||||||
- How well does this feature address each driver?
|
|
||||||
- Use 0-3 scale for each driver
|
|
||||||
- Be honest (don't inflate scores)
|
|
||||||
|
|
||||||
**Scoring scale:**
|
|
||||||
- **3** = Directly addresses this driver (core solution)
|
|
||||||
- **2** = Significantly helps with this driver
|
|
||||||
- **1** = Somewhat related to this driver
|
|
||||||
- **0** = Doesn't address this driver
|
|
||||||
|
|
||||||
### 3. Calculate Total Scores
|
|
||||||
|
|
||||||
**Sum scores across all drivers:**
|
|
||||||
- Add up the scores for each feature
|
|
||||||
- Higher total = higher strategic impact
|
|
||||||
- This becomes your prioritization data
|
|
||||||
|
|
||||||
### 4. Rank and Create Roadmap
|
|
||||||
|
|
||||||
**Sort features by total score:**
|
|
||||||
- Highest scores = Phase 1 (highest impact)
|
|
||||||
- High scores = Phase 2
|
|
||||||
- Medium scores = Phase 3
|
|
||||||
- Low scores = Backlog or cut
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Questions Saga Asks
|
|
||||||
|
|
||||||
### Listing Features
|
|
||||||
|
|
||||||
- "What features are you considering for this product?"
|
|
||||||
- "What ideas came up in your Product Brief?"
|
|
||||||
- "What have stakeholders requested?"
|
|
||||||
- "What do competitors offer that you're considering?"
|
|
||||||
- "Are there any features you're unsure about?"
|
|
||||||
|
|
||||||
### Scoring Each Feature
|
|
||||||
|
|
||||||
- "How well does [feature] address [top driver]?"
|
|
||||||
- "Does this feature create gain or reduce pain for this persona?"
|
|
||||||
- "On a scale of 0-3, how much impact does this have on [driver]?"
|
|
||||||
- "Why that score? What specifically does it address?"
|
|
||||||
- "Is this a 2 or a 3? What's the difference?"
|
|
||||||
|
|
||||||
### Validation
|
|
||||||
|
|
||||||
- "Are there features that would score higher that we haven't listed?"
|
|
||||||
- "Could we modify any features to increase their impact?"
|
|
||||||
- "Do these scores match your intuition? If not, why?"
|
|
||||||
- "Which features are you surprised scored high or low?"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Generic Example: Scoring Matrix
|
|
||||||
|
|
||||||
### Context
|
|
||||||
|
|
||||||
**Top 5 Prioritized Drivers (Remote Team Leads):**
|
|
||||||
1. Fear of team burnout without noticing (NEGATIVE)
|
|
||||||
2. Want to demonstrate effective leadership (POSITIVE)
|
|
||||||
3. Fear of losing top performers (NEGATIVE)
|
|
||||||
4. Want to build strong team culture (POSITIVE)
|
|
||||||
5. Fear of missed deadlines (NEGATIVE)
|
|
||||||
|
|
||||||
### Features to Score
|
|
||||||
|
|
||||||
| Feature | Burnout Fear | Leadership | Retention | Culture | Deadlines | **Total** |
|
|
||||||
|---------|-------------|------------|-----------|---------|-----------|-----------|
|
|
||||||
| Daily team pulse check | 3 | 2 | 2 | 1 | 1 | **9** |
|
|
||||||
| Team workload dashboard | 3 | 2 | 2 | 0 | 2 | **9** |
|
|
||||||
| Recognition system | 1 | 1 | 2 | 3 | 0 | **7** |
|
|
||||||
| 1-on-1 scheduling assistant | 2 | 2 | 1 | 1 | 0 | **6** |
|
|
||||||
| Meeting summaries | 0 | 1 | 0 | 1 | 2 | **4** |
|
|
||||||
| Async video updates | 1 | 1 | 0 | 2 | 0 | **4** |
|
|
||||||
| Team chat | 0 | 0 | 1 | 2 | 0 | **3** |
|
|
||||||
|
|
||||||
### Detailed Scoring Example
|
|
||||||
|
|
||||||
**Feature: Daily Team Pulse Check**
|
|
||||||
|
|
||||||
**Against "Fear of team burnout without noticing" (Score: 3)**
|
|
||||||
- Directly addresses the fear
|
|
||||||
- Provides daily visibility into team health
|
|
||||||
- Early warning system for burnout indicators
|
|
||||||
- Core solution to the problem
|
|
||||||
|
|
||||||
**Against "Want to demonstrate effective leadership" (Score: 2)**
|
|
||||||
- Provides data to show proactive management
|
|
||||||
- Enables evidence-based leadership decisions
|
|
||||||
- Significantly helps but not the primary purpose
|
|
||||||
|
|
||||||
**Against "Fear of losing top performers" (Score: 2)**
|
|
||||||
- Early warning helps prevent burnout-driven turnover
|
|
||||||
- Identifies at-risk team members
|
|
||||||
- Significantly helps with retention
|
|
||||||
|
|
||||||
**Against "Want to build strong team culture" (Score: 1)**
|
|
||||||
- Shows you care about team wellbeing
|
|
||||||
- Somewhat related but not primary benefit
|
|
||||||
|
|
||||||
**Against "Fear of missed deadlines" (Score: 1)**
|
|
||||||
- Can identify capacity issues early
|
|
||||||
- Somewhat helps but not main purpose
|
|
||||||
|
|
||||||
**Total: 9 points** (Highest strategic impact)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Feature: Team Chat**
|
|
||||||
|
|
||||||
**Against "Fear of team burnout" (Score: 0)**
|
|
||||||
- Doesn't address burnout visibility
|
|
||||||
- No impact on this driver
|
|
||||||
|
|
||||||
**Against "Want to demonstrate leadership" (Score: 0)**
|
|
||||||
- Doesn't provide leadership insights
|
|
||||||
- No impact on this driver
|
|
||||||
|
|
||||||
**Against "Fear of losing performers" (Score: 1)**
|
|
||||||
- Helps with connection (minor retention factor)
|
|
||||||
- Somewhat related
|
|
||||||
|
|
||||||
**Against "Want to build team culture" (Score: 2)**
|
|
||||||
- Enables team connection
|
|
||||||
- Significantly helps with culture
|
|
||||||
|
|
||||||
**Against "Fear of missed deadlines" (Score: 0)**
|
|
||||||
- Doesn't address deadline management
|
|
||||||
- No impact on this driver
|
|
||||||
|
|
||||||
**Total: 3 points** (Low strategic impact for this persona)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Prioritized Roadmap
|
|
||||||
|
|
||||||
Based on scores, create phases:
|
|
||||||
|
|
||||||
### Phase 1: Highest Impact (8-10 points)
|
|
||||||
- Daily team pulse check (9)
|
|
||||||
- Team workload dashboard (9)
|
|
||||||
|
|
||||||
**Why first:** Directly address top fears, highest strategic value
|
|
||||||
|
|
||||||
### Phase 2: High Impact (6-7 points)
|
|
||||||
- Recognition system (7)
|
|
||||||
- 1-on-1 scheduling assistant (6)
|
|
||||||
|
|
||||||
**Why second:** Good strategic value, support top priorities
|
|
||||||
|
|
||||||
### Phase 3: Medium Impact (4-5 points)
|
|
||||||
- Meeting summaries (4)
|
|
||||||
- Async video updates (4)
|
|
||||||
|
|
||||||
**Why third:** Some value but lower priority
|
|
||||||
|
|
||||||
### Backlog: Low Impact (0-3 points)
|
|
||||||
- Team chat (3)
|
|
||||||
|
|
||||||
**Why backlog:** Doesn't address top strategic drivers for this persona
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why This Works
|
|
||||||
|
|
||||||
### It's Strategic
|
|
||||||
|
|
||||||
**Every score connects to:**
|
|
||||||
- A prioritized psychological driver
|
|
||||||
- A prioritized target group
|
|
||||||
- A business goal
|
|
||||||
|
|
||||||
**Not arbitrary** - traceable to strategy
|
|
||||||
|
|
||||||
### It's Objective
|
|
||||||
|
|
||||||
**Traditional approach:**
|
|
||||||
"I think Feature A is more important"
|
|
||||||
|
|
||||||
**Feature Impact approach:**
|
|
||||||
"Feature A scores 9, Feature B scores 4"
|
|
||||||
|
|
||||||
**Data beats opinions**
|
|
||||||
|
|
||||||
### It's Defensible
|
|
||||||
|
|
||||||
**When stakeholders ask "Why aren't we building X?"**
|
|
||||||
|
|
||||||
**You can show:**
|
|
||||||
1. Here's our Trigger Map
|
|
||||||
2. Here are our top prioritized drivers
|
|
||||||
3. Here's how features score against them
|
|
||||||
4. Feature X scores lower than our current roadmap
|
|
||||||
|
|
||||||
**Strategic reasoning, not politics**
|
|
||||||
|
|
||||||
### It's Flexible
|
|
||||||
|
|
||||||
**When priorities change:**
|
|
||||||
- Update driver rankings
|
|
||||||
- Re-score features
|
|
||||||
- New roadmap emerges automatically
|
|
||||||
|
|
||||||
**Strategy drives features, not the reverse**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Scoring Guidelines
|
|
||||||
|
|
||||||
### Be Honest
|
|
||||||
|
|
||||||
**Don't:**
|
|
||||||
- Inflate scores to justify pet features
|
|
||||||
- Score based on what you want to build
|
|
||||||
- Let politics influence scoring
|
|
||||||
|
|
||||||
**Do:**
|
|
||||||
- Score based on actual impact
|
|
||||||
- Accept that some features score low
|
|
||||||
- Challenge your own assumptions
|
|
||||||
|
|
||||||
### Be Specific
|
|
||||||
|
|
||||||
**When scoring, ask:**
|
|
||||||
- "How SPECIFICALLY does this address the driver?"
|
|
||||||
- "What about this feature reduces that pain?"
|
|
||||||
- "What evidence supports this score?"
|
|
||||||
|
|
||||||
### Use the Full Scale
|
|
||||||
|
|
||||||
**0-3 scale exists for a reason:**
|
|
||||||
- **0** is okay - not everything addresses everything
|
|
||||||
- **3** should be rare - only direct solutions
|
|
||||||
- **1-2** is where most scores land
|
|
||||||
|
|
||||||
### Consider Both Positive and Negative
|
|
||||||
|
|
||||||
**Features can address:**
|
|
||||||
- Negative drivers (reduce pain, prevent fears)
|
|
||||||
- Positive drivers (enable goals, create gains)
|
|
||||||
- Both (most powerful features)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Patterns
|
|
||||||
|
|
||||||
### Pattern 1: High Scores Across Multiple Drivers
|
|
||||||
|
|
||||||
**What it means:** High-leverage feature addressing multiple needs
|
|
||||||
|
|
||||||
**Example:** Daily pulse check scores high on burnout fear, leadership goals, retention fear
|
|
||||||
|
|
||||||
**Action:** Prioritize - strategically valuable
|
|
||||||
|
|
||||||
### Pattern 2: High Score on Top Driver Only
|
|
||||||
|
|
||||||
**What it means:** Laser-focused solution for most important need
|
|
||||||
|
|
||||||
**Example:** Workload balancing scores 3 on burnout fear, low on others
|
|
||||||
|
|
||||||
**Action:** Still high priority if that driver is #1
|
|
||||||
|
|
||||||
### Pattern 3: Moderate Scores Across Many
|
|
||||||
|
|
||||||
**What it means:** Nice-to-have that helps a bit with everything
|
|
||||||
|
|
||||||
**Example:** Team chat scores 1-2 on multiple drivers
|
|
||||||
|
|
||||||
**Action:** Lower priority - not solving urgent problems
|
|
||||||
|
|
||||||
### Pattern 4: Low Scores Everywhere
|
|
||||||
|
|
||||||
**What it means:** Feature doesn't connect to strategy
|
|
||||||
|
|
||||||
**Example:** Fancy animations score 0-1 across all drivers
|
|
||||||
|
|
||||||
**Action:** Cut it or deprioritize significantly
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Beyond the Numbers
|
|
||||||
|
|
||||||
### The Conversation Matters
|
|
||||||
|
|
||||||
**Questions that emerge:**
|
|
||||||
- "Why doesn't this feature score higher?"
|
|
||||||
- "Could we modify it to address more drivers?"
|
|
||||||
- "Are we missing a feature that would score higher?"
|
|
||||||
- "Do these scores match our intuition?"
|
|
||||||
|
|
||||||
**Insights from discussion:**
|
|
||||||
- Features can be refined to increase impact
|
|
||||||
- Missing features can be identified
|
|
||||||
- Assumptions can be challenged
|
|
||||||
- Strategy can be sharpened
|
|
||||||
|
|
||||||
### Combining with Other Factors
|
|
||||||
|
|
||||||
**Feature Impact = Strategic value**
|
|
||||||
|
|
||||||
**Also consider:**
|
|
||||||
- **Feasibility:** How hard to build?
|
|
||||||
- **Dependencies:** What's required first?
|
|
||||||
- **Market timing:** Competitive urgency?
|
|
||||||
- **Resources:** Do we have capacity?
|
|
||||||
|
|
||||||
**Combined formula:**
|
|
||||||
```
|
|
||||||
Priority = (Strategic Impact × Feasibility) + Urgency Bonus
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You Get from Workshop 5
|
|
||||||
|
|
||||||
✅ **Scored feature list** - Quantified strategic impact
|
|
||||||
✅ **Ranked roadmap** - Clear prioritization
|
|
||||||
✅ **Strategic justification** - Defensible decisions
|
|
||||||
✅ **Data-driven priorities** - Not opinions
|
|
||||||
✅ **Traceable reasoning** - Feature → Driver → Group → Goal
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Inflating Scores
|
|
||||||
|
|
||||||
**Problem:** Scoring pet features higher than deserved
|
|
||||||
**Why it fails:** Undermines the whole system
|
|
||||||
**Fix:** Be brutally honest, challenge yourself
|
|
||||||
|
|
||||||
### Mistake 2: Scoring Too Many Features
|
|
||||||
|
|
||||||
**Problem:** Trying to score 50+ features
|
|
||||||
**Why it fails:** Takes too long, loses focus
|
|
||||||
**Fix:** Start with 10-20 most viable features
|
|
||||||
|
|
||||||
### Mistake 3: Ignoring Low Scores
|
|
||||||
|
|
||||||
**Problem:** "But we still need to build it"
|
|
||||||
**Why it fails:** Wastes resources on low-impact features
|
|
||||||
**Fix:** Accept that some features should be cut
|
|
||||||
|
|
||||||
### Mistake 4: Not Re-Scoring
|
|
||||||
|
|
||||||
**Problem:** Never updating scores as you learn
|
|
||||||
**Why it fails:** Roadmap becomes stale
|
|
||||||
**Fix:** Re-score quarterly or when strategy shifts
|
|
||||||
|
|
||||||
### Mistake 5: Forgetting Feasibility
|
|
||||||
|
|
||||||
**Problem:** Prioritizing impossible features
|
|
||||||
**Why it fails:** Can't actually execute
|
|
||||||
**Fix:** Combine strategic score with feasibility
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Using the Scored Feature List
|
|
||||||
|
|
||||||
### For Sprint Planning
|
|
||||||
|
|
||||||
**Each sprint:**
|
|
||||||
- Reference the scored list
|
|
||||||
- Focus on highest-impact features
|
|
||||||
- Validate against Trigger Map
|
|
||||||
- Make trade-offs based on strategy
|
|
||||||
|
|
||||||
### For Stakeholder Communication
|
|
||||||
|
|
||||||
**When presenting:**
|
|
||||||
1. Show the Trigger Map
|
|
||||||
2. Show the scoring matrix
|
|
||||||
3. Show the prioritized list
|
|
||||||
4. Explain the strategic reasoning
|
|
||||||
|
|
||||||
**Stakeholders appreciate:**
|
|
||||||
- Clear methodology
|
|
||||||
- Traceable decisions
|
|
||||||
- Strategic foundation
|
|
||||||
- Data-driven approach
|
|
||||||
|
|
||||||
### For Design Decisions
|
|
||||||
|
|
||||||
**During design:**
|
|
||||||
- Reference the scores
|
|
||||||
- Focus on high-impact features first
|
|
||||||
- Ensure design addresses the drivers
|
|
||||||
- Validate against scoring
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
"We're designing the pulse check (score: 9). It needs to address burnout fear, so let's include early warning indicators and actionable suggestions."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Complete Chain
|
|
||||||
|
|
||||||
Now you have the full Trigger Mapping system:
|
|
||||||
|
|
||||||
```
|
|
||||||
Workshop 1: Business Goals (Vision + Objectives)
|
|
||||||
↓
|
|
||||||
Workshop 2: Target Groups (3-5 prioritized personas)
|
|
||||||
↓
|
|
||||||
Workshop 3: Driving Forces (positive + negative for each)
|
|
||||||
↓
|
|
||||||
Workshop 4: Prioritization (ranked groups and drivers)
|
|
||||||
↓
|
|
||||||
Workshop 5: Feature Impact (scored feature list)
|
|
||||||
↓
|
|
||||||
Strategic Roadmap (data-driven priorities)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Every feature traces back to:**
|
|
||||||
- A psychological driver
|
|
||||||
- A target group
|
|
||||||
- A business goal
|
|
||||||
|
|
||||||
**No orphaned features. No guesswork. Strategic clarity.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next
|
|
||||||
|
|
||||||
You're ready to create your own Trigger Map. The tutorial walks through all 5 workshops step by step with Saga, and the next lessons cover how to create and use the visual Trigger Map.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Systematic scoring** - Features rated 0-3 against prioritized drivers
|
|
||||||
✅ **Data-driven roadmap** - Total scores determine priorities
|
|
||||||
✅ **Strategically defensible** - Every decision traces to strategy
|
|
||||||
✅ **Flexible and updateable** - Re-score when strategy shifts
|
|
||||||
✅ **Beyond numbers** - The conversation reveals insights
|
|
||||||
✅ **Complete traceability** - Feature → Driver → Group → Goal
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 7](lesson-07-workshop-4-prioritization.md) | [Next: Lesson 9 - Positive & Negative Drivers →](lesson-09-positive-negative-drivers.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,348 +0,0 @@
|
||||||
# Lesson 4: Positive & Negative Drivers
|
|
||||||
|
|
||||||
**The Psychology That Drives Behavior**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Core Concept
|
|
||||||
|
|
||||||
Every user has two types of motivations:
|
|
||||||
|
|
||||||
**Positive Drivers (GAIN):**
|
|
||||||
- What they want to achieve
|
|
||||||
- Benefits they're seeking
|
|
||||||
- Goals that pull them forward
|
|
||||||
|
|
||||||
**Negative Drivers (PAIN):**
|
|
||||||
- What they want to avoid
|
|
||||||
- Problems they're trying to escape
|
|
||||||
- Fears that push them to act
|
|
||||||
|
|
||||||
**The key insight:** Both matter, but they work differently. Understanding both gives you the complete psychological picture.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Why Negative Drivers Are More Powerful
|
|
||||||
|
|
||||||
Research in behavioral psychology consistently shows: **People work harder to avoid pain than to pursue gain.**
|
|
||||||
|
|
||||||
This is called **loss aversion** - the psychological principle that losses feel roughly twice as painful as equivalent gains feel good.
|
|
||||||
|
|
||||||
### Generic Examples
|
|
||||||
|
|
||||||
**Scenario 1: Fitness App**
|
|
||||||
|
|
||||||
**Positive driver:** "Want to look good for summer"
|
|
||||||
- Motivating? Yes
|
|
||||||
- Urgent? Not really
|
|
||||||
- Action trigger: Weak (can start "next week")
|
|
||||||
|
|
||||||
**Negative driver:** "Fear of health problems like my parent had"
|
|
||||||
- Motivating? Extremely
|
|
||||||
- Urgent? Yes
|
|
||||||
- Action trigger: Strong (need to act now)
|
|
||||||
|
|
||||||
**Which drives more sign-ups?** The fear.
|
|
||||||
|
|
||||||
**Scenario 2: Project Management Tool**
|
|
||||||
|
|
||||||
**Positive driver:** "Want to be more organized"
|
|
||||||
- Nice to have
|
|
||||||
- Can live without it
|
|
||||||
- Low urgency
|
|
||||||
|
|
||||||
**Negative driver:** "Fear of missing client deadline and losing contract"
|
|
||||||
- Critical need
|
|
||||||
- Can't afford to fail
|
|
||||||
- High urgency
|
|
||||||
|
|
||||||
**Which drives more conversions?** The fear.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How to Identify Positive Drivers
|
|
||||||
|
|
||||||
Positive drivers are what users are moving TOWARD.
|
|
||||||
|
|
||||||
### The Questions to Ask
|
|
||||||
|
|
||||||
- What do they want to accomplish?
|
|
||||||
- What positive outcomes are they seeking?
|
|
||||||
- What would make their situation better?
|
|
||||||
- What goals are they trying to achieve?
|
|
||||||
- What benefits would they value?
|
|
||||||
|
|
||||||
### Generic Examples Across Contexts
|
|
||||||
|
|
||||||
**Professional Context:**
|
|
||||||
- Want to advance in career
|
|
||||||
- Want to be seen as competent leader
|
|
||||||
- Want to deliver high-quality work
|
|
||||||
- Want to build strong professional reputation
|
|
||||||
- Want to learn new skills
|
|
||||||
|
|
||||||
**Personal Context:**
|
|
||||||
- Want to feel in control of their life
|
|
||||||
- Want to spend quality time with family
|
|
||||||
- Want to maintain healthy lifestyle
|
|
||||||
- Want to feel accomplished
|
|
||||||
- Want to reduce stress
|
|
||||||
|
|
||||||
**Social Context:**
|
|
||||||
- Want to be respected by peers
|
|
||||||
- Want to contribute to community
|
|
||||||
- Want to build meaningful relationships
|
|
||||||
- Want to be seen as helpful
|
|
||||||
- Want to belong to a group
|
|
||||||
|
|
||||||
### Avoiding Surface-Level Statements
|
|
||||||
|
|
||||||
**❌ Too vague:**
|
|
||||||
- "Want to be productive"
|
|
||||||
- "Want to save time"
|
|
||||||
- "Want better results"
|
|
||||||
|
|
||||||
**✅ Specific and meaningful:**
|
|
||||||
- "Want to complete projects without last-minute panic"
|
|
||||||
- "Want to leave work on time to have dinner with family"
|
|
||||||
- "Want to deliver work that impresses stakeholders"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How to Identify Negative Drivers
|
|
||||||
|
|
||||||
Negative drivers are what users are moving AWAY FROM.
|
|
||||||
|
|
||||||
### The Questions to Ask
|
|
||||||
|
|
||||||
- What problems are they trying to avoid?
|
|
||||||
- What frustrates them about current situation?
|
|
||||||
- What do they fear will happen?
|
|
||||||
- What keeps them up at night?
|
|
||||||
- What would be embarrassing or costly?
|
|
||||||
|
|
||||||
### Generic Examples Across Contexts
|
|
||||||
|
|
||||||
**Professional Context:**
|
|
||||||
- Fear of missing important deadlines
|
|
||||||
- Fear of looking incompetent to boss/clients
|
|
||||||
- Fear of being passed over for promotion
|
|
||||||
- Fear of making costly mistakes
|
|
||||||
- Fear of falling behind in skills
|
|
||||||
|
|
||||||
**Personal Context:**
|
|
||||||
- Fear of burnout and health decline
|
|
||||||
- Fear of missing important family moments
|
|
||||||
- Fear of losing control of their life
|
|
||||||
- Fear of financial instability
|
|
||||||
- Fear of disappointing loved ones
|
|
||||||
|
|
||||||
**Social Context:**
|
|
||||||
- Fear of being judged by peers
|
|
||||||
- Fear of letting team down
|
|
||||||
- Fear of being excluded
|
|
||||||
- Fear of conflict and confrontation
|
|
||||||
- Fear of losing respect
|
|
||||||
|
|
||||||
### The Emotional Core
|
|
||||||
|
|
||||||
Negative drivers often have strong emotional components:
|
|
||||||
|
|
||||||
- **Shame:** "What will people think?"
|
|
||||||
- **Guilt:** "I'm letting people down"
|
|
||||||
- **Anxiety:** "What if this goes wrong?"
|
|
||||||
- **Embarrassment:** "This makes me look bad"
|
|
||||||
- **Fear:** "I could lose something important"
|
|
||||||
|
|
||||||
**These emotions drive urgent action.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Balancing Both Types
|
|
||||||
|
|
||||||
The most powerful understanding comes from mapping BOTH:
|
|
||||||
|
|
||||||
### Generic Example: Email Management Tool
|
|
||||||
|
|
||||||
**Positive Drivers:**
|
|
||||||
- Want to feel organized and in control
|
|
||||||
- Want to respond thoughtfully to important messages
|
|
||||||
- Want to maintain professional communication standards
|
|
||||||
- Want to reduce mental clutter
|
|
||||||
|
|
||||||
**Negative Drivers:**
|
|
||||||
- Fear of missing urgent client emails
|
|
||||||
- Fear of looking unprofessional with late responses
|
|
||||||
- Fear of important messages getting buried
|
|
||||||
- Fear of constant email anxiety disrupting focus
|
|
||||||
|
|
||||||
**The design insight:**
|
|
||||||
- Positive drivers suggest: Clean interface, thoughtful organization
|
|
||||||
- Negative drivers suggest: Urgent message alerts, priority inbox, "nothing missed" confidence
|
|
||||||
|
|
||||||
**Both inform the solution, but negative drivers create urgency to adopt.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Patterns
|
|
||||||
|
|
||||||
### Pattern 1: Professional Reputation
|
|
||||||
|
|
||||||
**Positive:** Want to be seen as competent
|
|
||||||
**Negative:** Fear of looking incompetent
|
|
||||||
|
|
||||||
**Design implication:** Features that help users look good and avoid embarrassment
|
|
||||||
|
|
||||||
### Pattern 2: Time Management
|
|
||||||
|
|
||||||
**Positive:** Want to be productive
|
|
||||||
**Negative:** Fear of wasting time or missing deadlines
|
|
||||||
|
|
||||||
**Design implication:** Time-saving features + deadline protection
|
|
||||||
|
|
||||||
### Pattern 3: Social Connection
|
|
||||||
|
|
||||||
**Positive:** Want to build relationships
|
|
||||||
**Negative:** Fear of isolation or being left out
|
|
||||||
|
|
||||||
**Design implication:** Connection features + FOMO prevention
|
|
||||||
|
|
||||||
### Pattern 4: Control & Autonomy
|
|
||||||
|
|
||||||
**Positive:** Want to feel in control
|
|
||||||
**Negative:** Fear of chaos and overwhelm
|
|
||||||
|
|
||||||
**Design implication:** Organization tools + anxiety reduction
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## How to Use This in Design
|
|
||||||
|
|
||||||
### For Feature Prioritization
|
|
||||||
|
|
||||||
Features that address negative drivers often rank higher because they solve urgent problems.
|
|
||||||
|
|
||||||
**Generic example:**
|
|
||||||
- Feature A: "Nice dashboard for tracking progress" (positive driver)
|
|
||||||
- Feature B: "Alert system for missed critical tasks" (negative driver)
|
|
||||||
- **Which is more urgent?** Feature B (prevents pain)
|
|
||||||
|
|
||||||
### For Messaging & Marketing
|
|
||||||
|
|
||||||
**Positive-focused messaging:**
|
|
||||||
- "Achieve your goals"
|
|
||||||
- "Be more productive"
|
|
||||||
- "Build better habits"
|
|
||||||
|
|
||||||
**Negative-focused messaging:**
|
|
||||||
- "Never miss another deadline"
|
|
||||||
- "Stop the chaos"
|
|
||||||
- "Avoid costly mistakes"
|
|
||||||
|
|
||||||
**Which converts better?** Usually negative-focused (addresses urgent pain)
|
|
||||||
|
|
||||||
### For User Onboarding
|
|
||||||
|
|
||||||
**Show value by addressing both:**
|
|
||||||
1. Acknowledge the pain (negative driver)
|
|
||||||
2. Show how you solve it
|
|
||||||
3. Highlight the positive outcome
|
|
||||||
|
|
||||||
**Generic example:**
|
|
||||||
"Tired of missing important emails? (negative)
|
|
||||||
Our priority inbox ensures nothing slips through. (solution)
|
|
||||||
Respond confidently and maintain your professional reputation. (positive)"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Workshop 3 in Practice
|
|
||||||
|
|
||||||
When you're in Workshop 3 with Saga, you'll work through each persona systematically:
|
|
||||||
|
|
||||||
**For each persona:**
|
|
||||||
1. List 3-5 positive drivers
|
|
||||||
2. List 3-5 negative drivers
|
|
||||||
3. Identify which are strongest
|
|
||||||
4. Note emotional intensity
|
|
||||||
|
|
||||||
**Saga will challenge you:**
|
|
||||||
- "Is that specific enough?"
|
|
||||||
- "What's the emotional core of that fear?"
|
|
||||||
- "Why does that matter to them?"
|
|
||||||
- "What would happen if they don't solve this?"
|
|
||||||
|
|
||||||
**Your job:** Dig deeper than surface-level wants. Find the real psychological drivers.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Only Mapping Positive Drivers
|
|
||||||
|
|
||||||
**Problem:** You miss the urgent pain that drives adoption
|
|
||||||
**Solution:** Always map both types
|
|
||||||
|
|
||||||
### Mistake 2: Generic "Wants" Statements
|
|
||||||
|
|
||||||
**Problem:** "Want to be productive" doesn't guide design
|
|
||||||
**Solution:** Be specific about context and outcomes
|
|
||||||
|
|
||||||
### Mistake 3: Ignoring Emotional Intensity
|
|
||||||
|
|
||||||
**Problem:** All drivers seem equal
|
|
||||||
**Solution:** Identify which have strongest emotional pull
|
|
||||||
|
|
||||||
### Mistake 4: Assuming Positive = Good, Negative = Bad
|
|
||||||
|
|
||||||
**Problem:** Negative drivers feel uncomfortable to discuss
|
|
||||||
**Solution:** Embrace them - they're often more powerful motivators
|
|
||||||
|
|
||||||
### Mistake 5: Listing Features Instead of Psychology
|
|
||||||
|
|
||||||
**Problem:** "Want a calendar feature"
|
|
||||||
**Solution:** "Want to never miss family commitments due to work chaos"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Power of This Approach
|
|
||||||
|
|
||||||
When you map both positive and negative drivers:
|
|
||||||
|
|
||||||
✅ **Complete psychological picture** - Understand full motivation
|
|
||||||
✅ **Better feature prioritization** - Know what's urgent vs nice-to-have
|
|
||||||
✅ **Stronger messaging** - Address real pain points
|
|
||||||
✅ **Higher conversion** - Solve urgent problems
|
|
||||||
✅ **Better retention** - Deliver on both gain and pain reduction
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn Next
|
|
||||||
|
|
||||||
The next lesson shows you how to create the visual Trigger Map - the one-page strategic document that connects all these layers and becomes your team's reference for every design decision.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Two types of drivers** - Positive (gain) and Negative (pain)
|
|
||||||
✅ **Negative is more powerful** - Loss aversion drives urgent action
|
|
||||||
✅ **Map both for each persona** - Complete psychological picture
|
|
||||||
✅ **Be specific** - Avoid generic wants, find emotional core
|
|
||||||
✅ **Use in design** - Negative drivers often indicate highest-priority features
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Practice Exercise
|
|
||||||
|
|
||||||
Think about a product you use regularly. Identify:
|
|
||||||
|
|
||||||
1. What positive outcomes do you seek from it?
|
|
||||||
2. What negative outcomes are you trying to avoid?
|
|
||||||
3. Which driver is stronger for you?
|
|
||||||
4. How does the product address both?
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 8](lesson-08-workshop-5-feature-impact.md) | [Next: Lesson 10 - Visual Trigger Map →](lesson-10-visual-trigger-map.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,395 +0,0 @@
|
||||||
# Tutorial 05B: Create a Slim Trigger Map
|
|
||||||
|
|
||||||
> **Note:** This tutorial previously covered "Value Trigger Chains (VTC)" which has been replaced by the simpler concept of a Slim Trigger Map — define one business goal, one target group, and their key driving forces. The core process is the same.
|
|
||||||
|
|
||||||
**Quick strategic validation for focused user journeys**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This tutorial walks you through creating a Slim Trigger Map - a lightweight, streamlined version of Trigger Mapping. Perfect for when you need quick strategic validation or are working with a single, focused user journey.
|
|
||||||
|
|
||||||
**Time:** 15-20 minutes
|
|
||||||
**Prerequisites:** Module 04 completed (Product Brief created)
|
|
||||||
**What you'll create:** Single-chain map from business goal to user trigger
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## When to Use This Approach
|
|
||||||
|
|
||||||
**Value Trigger Chain is ideal for:**
|
|
||||||
- ✅ Smaller features or iterations
|
|
||||||
- ✅ Single user journey focus
|
|
||||||
- ✅ Quick strategic validation
|
|
||||||
- ✅ Early-stage exploration
|
|
||||||
- ✅ Time-constrained situations
|
|
||||||
|
|
||||||
**Use Full Trigger Mapping instead if:**
|
|
||||||
- ❌ Multiple user groups to consider
|
|
||||||
- ❌ Complex feature prioritization needed
|
|
||||||
- ❌ Long-term strategic planning
|
|
||||||
- ❌ Need defensible stakeholder justification
|
|
||||||
|
|
||||||
**Not sure which to use?** See [Lesson 2: Heritage & Evolution](lesson-02-heritage-evolution.md#two-approaches-choose-your-depth)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Before You Start
|
|
||||||
|
|
||||||
### What You Need
|
|
||||||
|
|
||||||
- ✅ Completed Product Brief (from Tutorial 04)
|
|
||||||
- ✅ WDS installed and Saga activated
|
|
||||||
- ✅ 15-20 minutes of focused time
|
|
||||||
- ✅ One clear user journey in mind
|
|
||||||
|
|
||||||
### What to Expect
|
|
||||||
|
|
||||||
**Saga will:**
|
|
||||||
- Guide you through one streamlined workshop
|
|
||||||
- Ask focused questions
|
|
||||||
- Help you create a single value chain
|
|
||||||
- Document the essential connections
|
|
||||||
|
|
||||||
**You will:**
|
|
||||||
- Define one strategic objective
|
|
||||||
- Identify one primary user
|
|
||||||
- Map their key driver
|
|
||||||
- Connect to specific trigger moment
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Value Trigger Chain Workshop
|
|
||||||
|
|
||||||
### Starting the Workshop
|
|
||||||
|
|
||||||
**In your IDE, activate Saga:**
|
|
||||||
|
|
||||||
```
|
|
||||||
@saga I want to create a Value Trigger Chain for [brief description of feature/journey]. Let's do the lightweight version.
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Define Your Strategic Objective (3 minutes)
|
|
||||||
|
|
||||||
### What Saga Will Ask
|
|
||||||
|
|
||||||
**Focus on one measurable goal:**
|
|
||||||
- "What's the one strategic objective this feature/journey needs to achieve?"
|
|
||||||
- "How will you measure success?"
|
|
||||||
- "By when do you need to achieve this?"
|
|
||||||
|
|
||||||
### Your Task
|
|
||||||
|
|
||||||
**Pick ONE objective from your Product Brief:**
|
|
||||||
- Must be specific and measurable (using SMART method)
|
|
||||||
- Should be achievable through this single journey
|
|
||||||
- Clear timeframe
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
"Increase trial-to-paid conversion to 25% by Q3 2024"
|
|
||||||
|
|
||||||
**Not:**
|
|
||||||
"Improve user experience and increase revenue and build brand awareness"
|
|
||||||
(Too many objectives - use Full Trigger Mapping for this)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Identify Your Primary User (3 minutes)
|
|
||||||
|
|
||||||
### What Saga Will Ask
|
|
||||||
|
|
||||||
**WHO will make this happen through their product use:**
|
|
||||||
- "Who is the ONE user type whose behavior drives this objective?"
|
|
||||||
- "What's their context and situation?"
|
|
||||||
- "What are they trying to accomplish?"
|
|
||||||
|
|
||||||
### Your Task
|
|
||||||
|
|
||||||
**Define one primary user:**
|
|
||||||
- Behavioral profile, not demographics
|
|
||||||
- Specific context
|
|
||||||
- Clear connection to your objective
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
"Startup founders evaluating project management tools during their first team expansion (3-10 people). They're overwhelmed by options and need to make a decision quickly before their team grows chaotic."
|
|
||||||
|
|
||||||
**Why this works:**
|
|
||||||
- Specific behavioral context
|
|
||||||
- Clear situation
|
|
||||||
- Connects to trial-to-paid conversion (they need to decide)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Map the Key Driver (4 minutes)
|
|
||||||
|
|
||||||
### What Saga Will Ask
|
|
||||||
|
|
||||||
**What's the ONE psychological driver:**
|
|
||||||
- "What's the strongest driver for this user in this journey?"
|
|
||||||
- "Is it positive (what they want) or negative (what they fear)?"
|
|
||||||
- "Why does this matter emotionally to them?"
|
|
||||||
|
|
||||||
### Your Task
|
|
||||||
|
|
||||||
**Identify the dominant driver:**
|
|
||||||
- Usually negative drivers are stronger (loss aversion)
|
|
||||||
- Must be specific to this journey
|
|
||||||
- Should have emotional intensity
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
**Negative Driver:** "Fear of making the wrong tool choice and wasting team's time learning a system they'll have to abandon"
|
|
||||||
|
|
||||||
**Why this works:**
|
|
||||||
- Specific fear (not generic "want good tool")
|
|
||||||
- Emotional (embarrassment, wasted time, team frustration)
|
|
||||||
- Directly relevant to trial-to-paid decision
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Define the Trigger Moment (4 minutes)
|
|
||||||
|
|
||||||
### What Saga Will Ask
|
|
||||||
|
|
||||||
**When does this driver activate:**
|
|
||||||
- "What specific moment triggers this driver?"
|
|
||||||
- "What's happening in their world when they feel this most strongly?"
|
|
||||||
- "What prompts them to take action?"
|
|
||||||
|
|
||||||
### Your Task
|
|
||||||
|
|
||||||
**Identify the trigger moment:**
|
|
||||||
- Specific situation or event
|
|
||||||
- When the driver becomes urgent
|
|
||||||
- What makes them act NOW
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
**Trigger Moment:** "When their team asks 'Which tool are we using?' for the third time in a week, and they realize they're losing credibility by not having made a decision"
|
|
||||||
|
|
||||||
**Why this works:**
|
|
||||||
- Specific moment (third time asked)
|
|
||||||
- Emotional trigger (losing credibility)
|
|
||||||
- Creates urgency (need to decide now)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Connect to Your Solution (3 minutes)
|
|
||||||
|
|
||||||
### What Saga Will Ask
|
|
||||||
|
|
||||||
**How does your feature address this:**
|
|
||||||
- "What does your feature do at this trigger moment?"
|
|
||||||
- "How does it reduce the pain or enable the gain?"
|
|
||||||
- "Why is this better than alternatives?"
|
|
||||||
|
|
||||||
### Your Task
|
|
||||||
|
|
||||||
**Define the value connection:**
|
|
||||||
- What your feature does
|
|
||||||
- How it addresses the driver
|
|
||||||
- Why it works at this trigger moment
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
**Solution:** "Guided comparison tool that shows them exactly how our features map to their team size and use case, with a 'Decision Confidence Score' that validates their choice"
|
|
||||||
|
|
||||||
**Why this works:**
|
|
||||||
- Addresses the fear (reduces wrong-choice risk)
|
|
||||||
- Provides validation (confidence score)
|
|
||||||
- Specific to the trigger moment (helps them decide NOW)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Your Value Trigger Chain
|
|
||||||
|
|
||||||
### The Complete Chain
|
|
||||||
|
|
||||||
```
|
|
||||||
Strategic Objective
|
|
||||||
↓
|
|
||||||
"Increase trial-to-paid conversion to 25% by Q3 2024"
|
|
||||||
↓
|
|
||||||
Primary User
|
|
||||||
↓
|
|
||||||
"Startup founders evaluating tools during first team expansion"
|
|
||||||
↓
|
|
||||||
Key Driver (Negative)
|
|
||||||
↓
|
|
||||||
"Fear of making wrong choice and wasting team's time"
|
|
||||||
↓
|
|
||||||
Trigger Moment
|
|
||||||
↓
|
|
||||||
"When team asks 'which tool?' for 3rd time - losing credibility"
|
|
||||||
↓
|
|
||||||
Solution
|
|
||||||
↓
|
|
||||||
"Guided comparison tool with Decision Confidence Score"
|
|
||||||
↓
|
|
||||||
Result: User converts because fear is reduced, decision validated
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Validating Your Chain
|
|
||||||
|
|
||||||
### The Control Questions
|
|
||||||
|
|
||||||
Ask yourself:
|
|
||||||
|
|
||||||
**1. Is the connection clear?**
|
|
||||||
- Can you trace from objective → user → driver → trigger → solution?
|
|
||||||
- Does each step logically lead to the next?
|
|
||||||
|
|
||||||
**2. Is this the strongest path?**
|
|
||||||
- Is this the PRIMARY user for this objective?
|
|
||||||
- Is this their STRONGEST driver?
|
|
||||||
- Is this the most URGENT trigger moment?
|
|
||||||
|
|
||||||
**3. Does your solution actually work?**
|
|
||||||
- Does it address the driver at the trigger moment?
|
|
||||||
- Is it better than alternatives?
|
|
||||||
- Why should they care?
|
|
||||||
|
|
||||||
**If any answer is weak:** Revisit that step and strengthen the connection.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Generic Example: Fitness App
|
|
||||||
|
|
||||||
### The Chain
|
|
||||||
|
|
||||||
**Objective:** "Achieve 1,000 daily active users by Q4 2024"
|
|
||||||
|
|
||||||
**Primary User:** "Busy professionals who want to exercise but struggle with consistency"
|
|
||||||
|
|
||||||
**Key Driver (Negative):** "Fear of losing fitness progress when work gets hectic"
|
|
||||||
|
|
||||||
**Trigger Moment:** "When they miss their third workout in a row and feel guilty"
|
|
||||||
|
|
||||||
**Solution:** "3-minute 'Streak Saver' workout that counts toward their weekly goal"
|
|
||||||
|
|
||||||
**Why it works:**
|
|
||||||
- Addresses the fear (prevents losing progress)
|
|
||||||
- Works at trigger moment (when they've missed workouts)
|
|
||||||
- Low barrier (only 3 minutes)
|
|
||||||
- Maintains streak (reduces guilt)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You Get
|
|
||||||
|
|
||||||
✅ **Clear strategic connection** - Objective to solution in one chain
|
|
||||||
✅ **Focused validation** - One user, one driver, one trigger
|
|
||||||
✅ **Quick decision-making** - Is this feature worth building?
|
|
||||||
✅ **Defensible reasoning** - Traceable logic
|
|
||||||
✅ **15-20 minute investment** - Fast strategic check
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## When to Expand to Full Trigger Mapping
|
|
||||||
|
|
||||||
**Consider the full process if you discover:**
|
|
||||||
- Multiple user types are equally important
|
|
||||||
- Several drivers compete for priority
|
|
||||||
- You need to score many features
|
|
||||||
- Stakeholders need comprehensive justification
|
|
||||||
- The project is more complex than initially thought
|
|
||||||
|
|
||||||
**The Value Trigger Chain is a starting point.** If it reveals complexity, upgrade to Full Trigger Mapping.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Mistakes to Avoid
|
|
||||||
|
|
||||||
### Mistake 1: Too Many Objectives
|
|
||||||
|
|
||||||
**Problem:** Trying to achieve 5 different goals in one chain
|
|
||||||
**Why it fails:** Dilutes focus, unclear success criteria
|
|
||||||
**Fix:** Pick ONE objective, use Full Trigger Mapping for multiple goals
|
|
||||||
|
|
||||||
### Mistake 2: Generic User
|
|
||||||
|
|
||||||
**Problem:** "All users" or "people who want X"
|
|
||||||
**Why it fails:** Can't identify specific drivers or triggers
|
|
||||||
**Fix:** Get specific about context and situation
|
|
||||||
|
|
||||||
### Mistake 3: Vague Driver
|
|
||||||
|
|
||||||
**Problem:** "Want better experience"
|
|
||||||
**Why it fails:** Not actionable, no emotional core
|
|
||||||
**Fix:** Find the specific fear or desire with emotional intensity
|
|
||||||
|
|
||||||
### Mistake 4: Missing the Trigger
|
|
||||||
|
|
||||||
**Problem:** No specific moment when driver activates
|
|
||||||
**Why it fails:** Don't know when to intervene
|
|
||||||
**Fix:** Identify the exact situation that creates urgency
|
|
||||||
|
|
||||||
### Mistake 5: Solution Doesn't Connect
|
|
||||||
|
|
||||||
**Problem:** Feature doesn't actually address the driver
|
|
||||||
**Why it fails:** Won't drive the objective
|
|
||||||
**Fix:** Ensure solution reduces pain or enables gain at trigger moment
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO:**
|
|
||||||
- ✅ Focus on ONE clear path
|
|
||||||
- ✅ Be specific at every step
|
|
||||||
- ✅ Find the emotional core
|
|
||||||
- ✅ Validate the connections
|
|
||||||
- ✅ Keep it simple
|
|
||||||
|
|
||||||
**DON'T:**
|
|
||||||
- ❌ Try to map everything (use Full Trigger Mapping for that)
|
|
||||||
- ❌ Accept vague or generic statements
|
|
||||||
- ❌ Skip the trigger moment
|
|
||||||
- ❌ Forget to validate the chain
|
|
||||||
- ❌ Overcomplicate it
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What's Next
|
|
||||||
|
|
||||||
### If This Validated Your Feature
|
|
||||||
|
|
||||||
**Move to scenario design:**
|
|
||||||
- Use this chain to inform your scenario
|
|
||||||
- Design for the trigger moment
|
|
||||||
- Address the driver directly
|
|
||||||
- Measure against the objective
|
|
||||||
|
|
||||||
### If This Revealed Complexity
|
|
||||||
|
|
||||||
**Upgrade to Full Trigger Mapping:**
|
|
||||||
- [Tutorial 05: Create Your Trigger Map](tutorial-05.md)
|
|
||||||
- Map multiple users and drivers
|
|
||||||
- Score features systematically
|
|
||||||
- Build comprehensive strategy
|
|
||||||
|
|
||||||
### If This Showed a Problem
|
|
||||||
|
|
||||||
**Revisit your Product Brief:**
|
|
||||||
- Is the objective right?
|
|
||||||
- Is this the right user?
|
|
||||||
- Should you pivot the feature?
|
|
||||||
- Do you need more research?
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Takeaways
|
|
||||||
|
|
||||||
✅ **Lightweight but strategic** - Quick validation with clear reasoning
|
|
||||||
✅ **One clear path** - Objective → User → Driver → Trigger → Solution
|
|
||||||
✅ **15-20 minutes** - Fast strategic check
|
|
||||||
✅ **Know when to expand** - Upgrade to Full Trigger Mapping when needed
|
|
||||||
✅ **Traceable logic** - Every step connects to the next
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
[← Back to Lesson 2](lesson-02-heritage-evolution.md) | [Full Trigger Mapping Tutorial →](tutorial-05.md)
|
|
||||||
|
|
||||||
*Part of Module 05: Trigger Mapping*
|
|
||||||
|
|
@ -1,358 +0,0 @@
|
||||||
# Tutorial 06: Platform Architecture
|
|
||||||
|
|
||||||
**Let Idunn translate your product vision into technical architecture - you speak design, she speaks code**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
You've designed the experience. Now you need the technical foundation to make it real. But you're a designer, not a developer - how do you define databases, APIs, and system architecture?
|
|
||||||
|
|
||||||
**You don't.** Idunn does.
|
|
||||||
|
|
||||||
You just describe your product in design language. Idunn translates it into Platform PRD.
|
|
||||||
|
|
||||||
**Time:** 30-45 minutes
|
|
||||||
**Prerequisites:** Module 05 completed (Trigger Map ready)
|
|
||||||
**What you'll create:** Platform PRD & Architecture Document
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- What a Platform PRD is (and why it matters)
|
|
||||||
- How to describe your product's technical needs without being technical
|
|
||||||
- How Idunn helps you think through platform decisions
|
|
||||||
- What questions she'll ask (so you're not surprised)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is Platform PRD?
|
|
||||||
|
|
||||||
**Platform PRD** = The technical blueprint developers need to build your product.
|
|
||||||
|
|
||||||
It includes:
|
|
||||||
- **System Architecture:** How the pieces fit together
|
|
||||||
- **Data Models:** What information needs to be stored
|
|
||||||
- **APIs & Integrations:** How systems talk to each other
|
|
||||||
- **Technical Requirements:** Performance, security, scalability
|
|
||||||
|
|
||||||
**Your superpower:** You don't need to know how to write this. You just need to know **what your product does**.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Understand Your Role (2 min)
|
|
||||||
|
|
||||||
**Your job as designer:**
|
|
||||||
- Describe what users need to do
|
|
||||||
- Explain what data they create/view/edit
|
|
||||||
- Identify third-party services you want (payments, auth, analytics)
|
|
||||||
- Share any technical constraints you know about
|
|
||||||
|
|
||||||
**Idunn's job:**
|
|
||||||
- Ask clarifying questions about technical needs
|
|
||||||
- Translate your product into architecture decisions
|
|
||||||
- Document data models, APIs, system diagrams
|
|
||||||
- Flag technical risks and recommend solutions
|
|
||||||
|
|
||||||
**You bring product knowledge. She brings technical expertise.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What to Expect: The Conversation
|
|
||||||
|
|
||||||
**Here's how a real session with Idunn looks:**
|
|
||||||
|
|
||||||
### Idunn's Opening
|
|
||||||
```
|
|
||||||
Hi! I'm Idunn, your technical architect agent.
|
|
||||||
|
|
||||||
I see you've completed your Product Brief and Trigger Map.
|
|
||||||
Let's translate your product vision into technical architecture.
|
|
||||||
|
|
||||||
I'll ask questions about your product in design language.
|
|
||||||
You answer naturally - no need for technical terms.
|
|
||||||
|
|
||||||
Ready? Let's start with the basics.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Questions Idunn Asks
|
|
||||||
|
|
||||||
**About Your Product:**
|
|
||||||
```
|
|
||||||
Idunn: "What's the core thing users create or manage in your product?"
|
|
||||||
|
|
||||||
You: "Users create weekly schedules for family dog care - walks,
|
|
||||||
feeding, vet appointments, etc."
|
|
||||||
|
|
||||||
Idunn: "Got it. Do these schedules need to be:
|
|
||||||
- Private (only one family)?
|
|
||||||
- Shared (multiple families can see each other's)?
|
|
||||||
- Collaborative (family members edit together)?"
|
|
||||||
|
|
||||||
You: "Collaborative - all family members edit the same schedule."
|
|
||||||
|
|
||||||
Idunn: "Perfect. That tells me we need real-time sync and user permissions."
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Users & Authentication:**
|
|
||||||
```
|
|
||||||
Idunn: "How do you envision users signing up?"
|
|
||||||
|
|
||||||
You: "Email and password should work. Google login would be nice too."
|
|
||||||
|
|
||||||
Idunn: "Great! Should users be able to:
|
|
||||||
- Invite family members?
|
|
||||||
- Have different roles (admin vs. regular member)?"
|
|
||||||
|
|
||||||
You: "Yes! The person who creates the schedule is the admin.
|
|
||||||
They can invite family and remove members if needed."
|
|
||||||
|
|
||||||
Idunn: "Understood. I'll design a role-based permission system."
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Data & Features:**
|
|
||||||
```
|
|
||||||
Idunn: "You mentioned tasks like 'walks' and 'feeding'.
|
|
||||||
What information does each task need?"
|
|
||||||
|
|
||||||
You: "Task title, who's assigned, what time/date, and whether
|
|
||||||
it's done or not."
|
|
||||||
|
|
||||||
Idunn: "Should tasks repeat? Like 'walk dog every morning'?"
|
|
||||||
|
|
||||||
You: "Oh yes! That would be super helpful."
|
|
||||||
|
|
||||||
Idunn: "I'll add recurring task patterns. Should we notify
|
|
||||||
the assigned person before the task is due?"
|
|
||||||
|
|
||||||
You: "Definitely!"
|
|
||||||
|
|
||||||
Idunn: "I'll include a notification system in the architecture."
|
|
||||||
```
|
|
||||||
|
|
||||||
### Built-in Guidance from Idunn
|
|
||||||
|
|
||||||
**When you're unsure:**
|
|
||||||
```
|
|
||||||
You: "I'm not sure if we need that..."
|
|
||||||
|
|
||||||
Idunn: "No problem! Let me explain the trade-offs:
|
|
||||||
|
|
||||||
WITH real-time sync:
|
|
||||||
✅ Family sees changes instantly
|
|
||||||
✅ No confusion about who's doing what
|
|
||||||
❌ Slightly more complex to build
|
|
||||||
❌ Requires internet connection
|
|
||||||
|
|
||||||
WITHOUT real-time sync:
|
|
||||||
✅ Simpler to build
|
|
||||||
✅ Can work offline
|
|
||||||
❌ Family might have outdated info
|
|
||||||
❌ Conflicts if two people edit at once
|
|
||||||
|
|
||||||
For family coordination, real-time is usually worth it.
|
|
||||||
What feels right for your users?"
|
|
||||||
```
|
|
||||||
|
|
||||||
**When technical terms come up:**
|
|
||||||
```
|
|
||||||
Idunn: "I'll use a REST API for communication between app and server."
|
|
||||||
|
|
||||||
You: "What's a REST API?"
|
|
||||||
|
|
||||||
Idunn: "Think of it as a waiter in a restaurant:
|
|
||||||
- Your app (customer) asks for something
|
|
||||||
- The API (waiter) takes the request to the server (kitchen)
|
|
||||||
- The server prepares the response (food)
|
|
||||||
- The API brings it back to your app
|
|
||||||
|
|
||||||
You don't need to know how it works - just that it's
|
|
||||||
the standard way apps communicate with databases."
|
|
||||||
```
|
|
||||||
|
|
||||||
**When prioritizing features:**
|
|
||||||
```
|
|
||||||
Idunn: "Based on your Product Brief, I see you want:
|
|
||||||
- Task scheduling (core)
|
|
||||||
- Notifications (important)
|
|
||||||
- Calendar sync (nice-to-have)
|
|
||||||
- Vet appointment reminders (nice-to-have)
|
|
||||||
|
|
||||||
For the Platform PRD, I'll design all of these.
|
|
||||||
|
|
||||||
But I'll flag which are 'MVP' (must-have) vs.
|
|
||||||
'Phase 2' (add later) so developers know priorities.
|
|
||||||
|
|
||||||
Does that split make sense?"
|
|
||||||
|
|
||||||
You: "Yes, but actually calendar sync is really important."
|
|
||||||
|
|
||||||
Idunn: "Got it - moving calendar sync to MVP. I'll update the
|
|
||||||
architecture to prioritize that integration."
|
|
||||||
```
|
|
||||||
|
|
||||||
### What Idunn Creates While You Talk
|
|
||||||
|
|
||||||
As you answer, Idunn is:
|
|
||||||
- ✍️ Documenting data models ("Task" entity with fields)
|
|
||||||
- 🏗️ Sketching system architecture (app, API, database, notifications)
|
|
||||||
- 🔐 Planning authentication flow (login, permissions, roles)
|
|
||||||
- 🔗 Identifying integrations (Google Calendar, email notifications)
|
|
||||||
- ⚠️ Flagging technical risks ("Real-time sync needs WebSocket support")
|
|
||||||
|
|
||||||
**You'll see progress updates:**
|
|
||||||
```
|
|
||||||
Idunn: "✅ Data model drafted - 3 main entities (User, Family, Task)
|
|
||||||
✅ Authentication flow designed - Social login + email
|
|
||||||
🔄 Working on notification system architecture..."
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Activate Idunn (2 min)
|
|
||||||
|
|
||||||
```
|
|
||||||
@idunn
|
|
||||||
|
|
||||||
I'm ready to create the Platform PRD for [Your Product Name].
|
|
||||||
|
|
||||||
I have:
|
|
||||||
- Product Brief (done)
|
|
||||||
- Trigger Map (done)
|
|
||||||
|
|
||||||
Please help me define the technical architecture.
|
|
||||||
```
|
|
||||||
|
|
||||||
**Idunn will respond** and start asking questions about your product's technical needs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Answer Idunn's Questions (20-30 min)
|
|
||||||
|
|
||||||
Idunn will guide you through understanding your platform needs. She asks questions like:
|
|
||||||
|
|
||||||
### About Data
|
|
||||||
- "What information do users create?"
|
|
||||||
- "What needs to be saved vs. temporary?"
|
|
||||||
- "Do users share data with each other?"
|
|
||||||
|
|
||||||
**Example answers (you don't need technical terms):**
|
|
||||||
- "Users create weekly schedules for dog care tasks"
|
|
||||||
- "Schedules need to be saved permanently and shared with family"
|
|
||||||
- "Each task has: title, assigned person, date, completion status"
|
|
||||||
|
|
||||||
### About Authentication
|
|
||||||
- "How do users log in?"
|
|
||||||
- "Do you want social login (Google, Apple)?"
|
|
||||||
- "Are there different user roles?"
|
|
||||||
|
|
||||||
**Example answers:**
|
|
||||||
- "Email + password, plus Google login"
|
|
||||||
- "Two roles: Admin (can assign tasks) and Family Member (can complete tasks)"
|
|
||||||
|
|
||||||
### About Integrations
|
|
||||||
- "Do you need notifications?"
|
|
||||||
- "Payment processing?"
|
|
||||||
- "Calendar sync?"
|
|
||||||
|
|
||||||
**Example answers:**
|
|
||||||
- "Yes! Send reminders before tasks are due"
|
|
||||||
- "No payments needed"
|
|
||||||
- "Would be nice to sync with phone calendar"
|
|
||||||
|
|
||||||
### About Performance & Scale
|
|
||||||
- "How many users do you expect?"
|
|
||||||
- "Any real-time features?"
|
|
||||||
- "Mobile app or web?"
|
|
||||||
|
|
||||||
**Idunn translates this into:**
|
|
||||||
- Database schemas
|
|
||||||
- API specifications
|
|
||||||
- System architecture diagrams
|
|
||||||
- Technical requirements docs
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Review & Refine (10 min)
|
|
||||||
|
|
||||||
Idunn will show you the Platform PRD. Don't panic if it looks technical - you don't need to understand every detail.
|
|
||||||
|
|
||||||
**What to check:**
|
|
||||||
- ✅ Does it capture all the features you designed?
|
|
||||||
- ✅ Are the user roles correct?
|
|
||||||
- ✅ Did she understand your data needs?
|
|
||||||
- ✅ Are integrations you wanted included?
|
|
||||||
|
|
||||||
**Ask questions like:**
|
|
||||||
- "Can you explain this part in design terms?"
|
|
||||||
- "How does this support [specific feature]?"
|
|
||||||
- "What if we want to add [feature] later?"
|
|
||||||
|
|
||||||
**Idunn will clarify** and update the PRD until it's right.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Save Your Platform PRD (2 min)
|
|
||||||
|
|
||||||
Idunn will save the Platform PRD to your project:
|
|
||||||
|
|
||||||
```
|
|
||||||
/docs/3-platform-prd/
|
|
||||||
├── 01-platform-architecture.md
|
|
||||||
├── 02-data-models.md
|
|
||||||
├── 03-api-specifications.md
|
|
||||||
└── 04-technical-constraints.md
|
|
||||||
```
|
|
||||||
|
|
||||||
**You now have** everything developers need to understand the technical foundation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: Do I need to learn technical terms?**
|
|
||||||
**A:** No. Speak in design/product language. Idunn translates.
|
|
||||||
|
|
||||||
**Q: What if I don't know the answer to her questions?**
|
|
||||||
**A:** Say so! Idunn will explain the implications and suggest options.
|
|
||||||
|
|
||||||
**Q: Can developers change the architecture later?**
|
|
||||||
**A:** Yes. This is a starting point. Developers may refine it.
|
|
||||||
|
|
||||||
**Q: Do I need to review APIs and database schemas?**
|
|
||||||
**A:** Only if you want to. Focus on whether it supports your design.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
🎉 **You just created a Platform PRD** - something that usually requires technical architects!
|
|
||||||
|
|
||||||
**You didn't need to:**
|
|
||||||
- ❌ Learn database design
|
|
||||||
- ❌ Understand API protocols
|
|
||||||
- ❌ Draw system architecture diagrams
|
|
||||||
- ❌ Write technical specifications
|
|
||||||
|
|
||||||
**You just:**
|
|
||||||
- ✅ Described your product in design terms
|
|
||||||
- ✅ Answered Idunn's questions
|
|
||||||
- ✅ Reviewed to ensure it supports your design
|
|
||||||
|
|
||||||
**That's the WDS superpower:** You focus on design. The agents handle the technical translation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Ready to design the UX?**
|
|
||||||
→ [Module 08: Initialize Scenario](../module-08-initialize-scenario/tutorial-08.md)
|
|
||||||
|
|
||||||
**Want to skip Platform PRD for now?**
|
|
||||||
You can come back to this after UX design if you prefer.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Pro Tip:** Even if you're not building the platform yourself, having this PRD helps you communicate with developers and make informed design decisions. You'll know what's technically feasible without becoming a developer yourself.
|
|
||||||
|
|
||||||
|
|
@ -1,521 +0,0 @@
|
||||||
# Tutorial 08: Initialize Your Scenario
|
|
||||||
|
|
||||||
**Hands-on guide to starting a design scenario with the 5 essential questions**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This tutorial walks you through initializing a scenario - the moment where strategic thinking meets design execution.
|
|
||||||
|
|
||||||
**Time:** 30-45 minutes
|
|
||||||
**Prerequisites:** Trigger map completed
|
|
||||||
**What you'll create:** A fully initialized scenario ready for sketching
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- The 5 questions that define every scenario
|
|
||||||
- How to connect scenarios to triggers
|
|
||||||
- Setting clear success criteria
|
|
||||||
- Defining scope and constraints
|
|
||||||
- Getting AI support for scenario planning
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The 5 Essential Questions
|
|
||||||
|
|
||||||
Every scenario must answer:
|
|
||||||
|
|
||||||
1. **WHO** is this for? (Target group)
|
|
||||||
2. **WHAT** trigger brings them here? (Trigger moment)
|
|
||||||
3. **WHY** does this matter? (User + business value)
|
|
||||||
4. **WHAT** is the happy path? (Success flow)
|
|
||||||
5. **WHAT** could go wrong? (Edge cases)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Choose Your Scenario (5 min)
|
|
||||||
|
|
||||||
### What is a scenario?
|
|
||||||
|
|
||||||
A specific user journey from trigger moment to successful outcome.
|
|
||||||
|
|
||||||
### How to choose:
|
|
||||||
|
|
||||||
**From your trigger map, select:**
|
|
||||||
|
|
||||||
- Highest priority trigger
|
|
||||||
- Clear start and end points
|
|
||||||
- Manageable scope for first design
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
Scenario: Morning Dog Care Assignment
|
|
||||||
Trigger: Morning chaos - nobody knows who's walking the dog
|
|
||||||
Priority: #1 (highest impact)
|
|
||||||
Scope: From opening app to seeing today's assignments
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Scenario Name: [Your scenario]
|
|
||||||
Trigger: [From trigger map]
|
|
||||||
Priority: [Why this one first]
|
|
||||||
Scope: [Start → End]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Answer Question 1 - WHO? (5 min)
|
|
||||||
|
|
||||||
### Define your target user
|
|
||||||
|
|
||||||
**Be specific:**
|
|
||||||
|
|
||||||
- Which target group?
|
|
||||||
- What's their context?
|
|
||||||
- What's their mindset?
|
|
||||||
- What are they trying to accomplish?
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHO: Sarah, busy parent with family dog
|
|
||||||
|
|
||||||
Context:
|
|
||||||
- Monday morning, 7:15 AM
|
|
||||||
- Getting kids ready for school
|
|
||||||
- Needs to coordinate dog care
|
|
||||||
- Stressed, time-pressured
|
|
||||||
|
|
||||||
Mindset:
|
|
||||||
- Wants quick answer
|
|
||||||
- Needs certainty
|
|
||||||
- Values family harmony
|
|
||||||
- Cares about dog's wellbeing
|
|
||||||
|
|
||||||
Goal:
|
|
||||||
- Know who's walking the dog today
|
|
||||||
- Avoid family conflict
|
|
||||||
- Ensure dog is cared for
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHO: [User name/persona]
|
|
||||||
|
|
||||||
Context:
|
|
||||||
- [When/where]
|
|
||||||
- [What they're doing]
|
|
||||||
- [Their situation]
|
|
||||||
|
|
||||||
Mindset:
|
|
||||||
- [How they feel]
|
|
||||||
- [What they value]
|
|
||||||
- [What they need]
|
|
||||||
|
|
||||||
Goal:
|
|
||||||
- [Primary objective]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "Let's make this user vivid:
|
|
||||||
- What's their emotional state?
|
|
||||||
- What just happened before this moment?
|
|
||||||
- What are they worried about?
|
|
||||||
- What would success feel like?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Answer Question 2 - WHAT Trigger? (5 min)
|
|
||||||
|
|
||||||
### Define the trigger moment
|
|
||||||
|
|
||||||
**Be specific about:**
|
|
||||||
|
|
||||||
- Exact moment user realizes they need this
|
|
||||||
- What caused the trigger
|
|
||||||
- Emotional state at trigger
|
|
||||||
- What they've tried before
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHAT Trigger: Morning Chaos
|
|
||||||
|
|
||||||
Exact Moment:
|
|
||||||
- 7:15 AM, Monday morning
|
|
||||||
- Kids asking "Who's walking Max?"
|
|
||||||
- Nobody knows the answer
|
|
||||||
- Everyone looking at each other
|
|
||||||
|
|
||||||
What Caused It:
|
|
||||||
- No clear schedule visible
|
|
||||||
- Verbal agreements forgotten
|
|
||||||
- Weekend disrupted routine
|
|
||||||
- New week starting
|
|
||||||
|
|
||||||
Emotional State:
|
|
||||||
- Frustration (here we go again)
|
|
||||||
- Guilt (dog needs care)
|
|
||||||
- Stress (running late)
|
|
||||||
- Urgency (need answer NOW)
|
|
||||||
|
|
||||||
Previous Attempts:
|
|
||||||
- Family calendar (too general)
|
|
||||||
- Group chat (messages lost)
|
|
||||||
- Verbal agreements (forgotten)
|
|
||||||
- Whiteboard (not mobile)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHAT Trigger: [Trigger name]
|
|
||||||
|
|
||||||
Exact Moment:
|
|
||||||
- [When/where]
|
|
||||||
- [What's happening]
|
|
||||||
- [What prompted need]
|
|
||||||
|
|
||||||
Emotional State:
|
|
||||||
- [How user feels]
|
|
||||||
- [Why it matters]
|
|
||||||
|
|
||||||
Previous Attempts:
|
|
||||||
- [What they've tried]
|
|
||||||
- [Why it didn't work]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Answer Question 3 - WHY? (10 min)
|
|
||||||
|
|
||||||
### Define the value
|
|
||||||
|
|
||||||
**Two perspectives:**
|
|
||||||
|
|
||||||
**User Value:**
|
|
||||||
|
|
||||||
- What pain does this solve?
|
|
||||||
- What does success feel like?
|
|
||||||
- What changes in their life?
|
|
||||||
|
|
||||||
**Business Value:**
|
|
||||||
|
|
||||||
- How does this support business goals?
|
|
||||||
- What metrics improve?
|
|
||||||
- What's the strategic importance?
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHY - User Value:
|
|
||||||
|
|
||||||
Pain Solved:
|
|
||||||
- No more morning chaos
|
|
||||||
- No more family conflict
|
|
||||||
- No more guilt about dog
|
|
||||||
- Certainty and peace of mind
|
|
||||||
|
|
||||||
Success Feels Like:
|
|
||||||
- "I know exactly who's doing what"
|
|
||||||
- "My family is coordinated"
|
|
||||||
- "My dog is cared for"
|
|
||||||
- "I can focus on my morning"
|
|
||||||
|
|
||||||
Life Change:
|
|
||||||
- Reduced daily stress
|
|
||||||
- Better family harmony
|
|
||||||
- Confident dog care
|
|
||||||
- More mental space
|
|
||||||
|
|
||||||
WHY - Business Value:
|
|
||||||
|
|
||||||
Business Goals Supported:
|
|
||||||
- Increased daily active users (checking schedule)
|
|
||||||
- Higher retention (solving real pain)
|
|
||||||
- Word-of-mouth growth (visible benefit)
|
|
||||||
- Foundation for premium features
|
|
||||||
|
|
||||||
Metrics Improved:
|
|
||||||
- DAU (daily schedule checks)
|
|
||||||
- 7-day retention rate
|
|
||||||
- Task completion rate
|
|
||||||
- NPS score
|
|
||||||
|
|
||||||
Strategic Importance:
|
|
||||||
- Core value proposition
|
|
||||||
- Differentiation from competitors
|
|
||||||
- Foundation for entire platform
|
|
||||||
- Proves product-market fit
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
WHY - User Value:
|
|
||||||
Pain Solved:
|
|
||||||
- [Pain points addressed]
|
|
||||||
|
|
||||||
Success Feels Like:
|
|
||||||
- [User emotions]
|
|
||||||
|
|
||||||
Life Change:
|
|
||||||
- [What improves]
|
|
||||||
|
|
||||||
WHY - Business Value:
|
|
||||||
Business Goals:
|
|
||||||
- [Goals supported]
|
|
||||||
|
|
||||||
Metrics:
|
|
||||||
- [What improves]
|
|
||||||
|
|
||||||
Strategic Importance:
|
|
||||||
- [Why this matters]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Answer Question 4 - Happy Path? (10 min)
|
|
||||||
|
|
||||||
### Define the success flow
|
|
||||||
|
|
||||||
**Map the ideal journey:**
|
|
||||||
|
|
||||||
- User starts at trigger
|
|
||||||
- Takes clear actions
|
|
||||||
- System responds appropriately
|
|
||||||
- User achieves goal
|
|
||||||
- Mutual success achieved
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
HAPPY PATH: Morning Dog Care Check
|
|
||||||
|
|
||||||
1. TRIGGER
|
|
||||||
- Sarah opens app (7:15 AM Monday)
|
|
||||||
- Feeling stressed, needs quick answer
|
|
||||||
|
|
||||||
2. IMMEDIATE ANSWER
|
|
||||||
- App shows TODAY view by default
|
|
||||||
- Sarah's tasks highlighted
|
|
||||||
- "You: Walk Max (8:00 AM)"
|
|
||||||
- Clear, immediate, no searching
|
|
||||||
|
|
||||||
3. FULL CONTEXT
|
|
||||||
- Sees all today's dog tasks
|
|
||||||
- Knows who's doing what
|
|
||||||
- Sees upcoming tasks
|
|
||||||
- Feels confident and informed
|
|
||||||
|
|
||||||
4. QUICK ACTION (if needed)
|
|
||||||
- Can mark task complete
|
|
||||||
- Can reassign if emergency
|
|
||||||
- Can add notes
|
|
||||||
- Takes < 30 seconds
|
|
||||||
|
|
||||||
5. SUCCESS
|
|
||||||
- Sarah knows her responsibility
|
|
||||||
- Tells family with confidence
|
|
||||||
- Dog will be cared for
|
|
||||||
- Morning proceeds smoothly
|
|
||||||
|
|
||||||
MUTUAL SUCCESS:
|
|
||||||
- User: Stress reduced, clarity achieved
|
|
||||||
- Business: Daily engagement, value delivered
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
HAPPY PATH: [Scenario name]
|
|
||||||
|
|
||||||
1. TRIGGER
|
|
||||||
- [User starts]
|
|
||||||
- [Emotional state]
|
|
||||||
|
|
||||||
2. [Step 2]
|
|
||||||
- [What happens]
|
|
||||||
- [User sees/does]
|
|
||||||
|
|
||||||
3. [Step 3]
|
|
||||||
- [Next action]
|
|
||||||
- [System response]
|
|
||||||
|
|
||||||
[Continue through success]
|
|
||||||
|
|
||||||
MUTUAL SUCCESS:
|
|
||||||
- User: [What they gain]
|
|
||||||
- Business: [What we gain]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "Let's optimize this flow:
|
|
||||||
- Can we reduce steps?
|
|
||||||
- Is anything unclear?
|
|
||||||
- What information is missing?
|
|
||||||
- How can we make this faster?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Answer Question 5 - What Could Go Wrong? (5 min)
|
|
||||||
|
|
||||||
### Identify edge cases
|
|
||||||
|
|
||||||
**Consider:**
|
|
||||||
|
|
||||||
- First-time users
|
|
||||||
- Error states
|
|
||||||
- Missing data
|
|
||||||
- Unusual situations
|
|
||||||
- System failures
|
|
||||||
|
|
||||||
**Example (Dog Week):**
|
|
||||||
|
|
||||||
```
|
|
||||||
EDGE CASES:
|
|
||||||
|
|
||||||
First Time User:
|
|
||||||
- No schedule exists yet
|
|
||||||
- Show onboarding flow
|
|
||||||
- Guide schedule creation
|
|
||||||
|
|
||||||
No Tasks Today:
|
|
||||||
- Show "No dog tasks today"
|
|
||||||
- Show upcoming tasks
|
|
||||||
- Offer to add tasks
|
|
||||||
|
|
||||||
Multiple Dogs:
|
|
||||||
- Show dog selector
|
|
||||||
- Default to primary dog
|
|
||||||
- Remember last selected
|
|
||||||
|
|
||||||
Overdue Tasks:
|
|
||||||
- Highlight in red
|
|
||||||
- Show notification
|
|
||||||
- Offer to reassign
|
|
||||||
|
|
||||||
Offline:
|
|
||||||
- Show cached schedule
|
|
||||||
- Indicate offline mode
|
|
||||||
- Queue actions for sync
|
|
||||||
|
|
||||||
Someone Else's Phone:
|
|
||||||
- Show family view
|
|
||||||
- Highlight their tasks
|
|
||||||
- Respect privacy
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
EDGE CASES:
|
|
||||||
|
|
||||||
[Case 1]:
|
|
||||||
- [Situation]
|
|
||||||
- [How to handle]
|
|
||||||
|
|
||||||
[Case 2]:
|
|
||||||
- [Situation]
|
|
||||||
- [How to handle]
|
|
||||||
|
|
||||||
[Continue for major cases]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 7: Document Scenario Initialization (5 min)
|
|
||||||
|
|
||||||
**Create file:** `C-Scenarios/[scenario-name]/00-scenario-init.md`
|
|
||||||
|
|
||||||
**Include all 5 questions:**
|
|
||||||
|
|
||||||
1. WHO - Target user in context
|
|
||||||
2. WHAT Trigger - Specific moment
|
|
||||||
3. WHY - User + business value
|
|
||||||
4. Happy Path - Success flow
|
|
||||||
5. Edge Cases - What could go wrong
|
|
||||||
|
|
||||||
**Use template from:** `workflows/4-ux-design/templates/scenario-init.template.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
✅ **Clear target user** - You know WHO you're designing for
|
|
||||||
✅ **Specific trigger** - You know WHAT brings them here
|
|
||||||
✅ **Defined value** - You know WHY this matters
|
|
||||||
✅ **Success flow** - You know the HAPPY PATH
|
|
||||||
✅ **Edge cases** - You know WHAT could go wrong
|
|
||||||
|
|
||||||
**You're ready to start sketching!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Immediate:**
|
|
||||||
|
|
||||||
- Review initialization with stakeholders
|
|
||||||
- Validate assumptions with users (if possible)
|
|
||||||
- Gather any missing information
|
|
||||||
|
|
||||||
**Next Module:**
|
|
||||||
|
|
||||||
- [Module 09: Sketch Interfaces](../module-09-sketch-interfaces/module-09-overview.md)
|
|
||||||
- Start drawing your solution with AI guidance
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: How detailed should the happy path be?**
|
|
||||||
A: Detailed enough to guide sketching. 5-8 steps is typical.
|
|
||||||
|
|
||||||
**Q: Should I document every possible edge case?**
|
|
||||||
A: Focus on the most likely and most impactful. You can add more during design.
|
|
||||||
|
|
||||||
**Q: What if I don't know all the answers yet?**
|
|
||||||
A: Mark sections as "TBD" and research. Better to identify gaps now than during development.
|
|
||||||
|
|
||||||
**Q: Can I change these answers later?**
|
|
||||||
A: Yes! This is a living document. Update as you learn.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO ✅**
|
|
||||||
|
|
||||||
- Be specific about user context
|
|
||||||
- Connect to trigger map
|
|
||||||
- Define clear success criteria
|
|
||||||
- Consider edge cases early
|
|
||||||
- Get stakeholder alignment
|
|
||||||
|
|
||||||
**DON'T ❌**
|
|
||||||
|
|
||||||
- Rush through the questions
|
|
||||||
- Skip the "why"
|
|
||||||
- Ignore edge cases
|
|
||||||
- Work in isolation
|
|
||||||
- Start sketching without initialization
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**A well-initialized scenario is half the design work done!**
|
|
||||||
|
|
||||||
[← Back to Module 08](module-08-overview.md) | [Next: Module 09 →](../module-09-sketch-interfaces/module-09-overview.md)
|
|
||||||
|
|
@ -1,515 +0,0 @@
|
||||||
# Tutorial 09: Design System
|
|
||||||
|
|
||||||
**Extract patterns from your pages - turn one-off designs into reusable superpowers**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
You've designed several pages. You notice you keep recreating the same buttons, cards, and form fields. There's a better way.
|
|
||||||
|
|
||||||
**Create a Design System** - extract reusable components once, use them everywhere.
|
|
||||||
|
|
||||||
**Your superpower:** Freya helps you identify patterns, document components, and create a library that scales your design decisions across the entire product.
|
|
||||||
|
|
||||||
**Time:** 45-60 minutes
|
|
||||||
**Prerequisites:** Module 08 completed (At least 2-3 pages designed)
|
|
||||||
**What you'll create:** Component Library & Design Tokens
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- What a Design System is (and why it saves you time)
|
|
||||||
- How to identify reusable patterns in your designs
|
|
||||||
- How Freya extracts components automatically
|
|
||||||
- How to document components for consistency
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is a Design System?
|
|
||||||
|
|
||||||
**Design System** = Your design decisions, extracted and reusable.
|
|
||||||
|
|
||||||
Instead of:
|
|
||||||
- ❌ Designing every button from scratch
|
|
||||||
- ❌ Remembering which blue you used last time
|
|
||||||
- ❌ Recreating forms on every page
|
|
||||||
|
|
||||||
You have:
|
|
||||||
- ✅ Button component (all states documented)
|
|
||||||
- ✅ Color tokens (brand blue, semantic colors)
|
|
||||||
- ✅ Form patterns (ready to reuse)
|
|
||||||
|
|
||||||
**Think of it as:**
|
|
||||||
Design System = Your design vocabulary, organized and ready to use
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What to Expect: The Extraction Process
|
|
||||||
|
|
||||||
**Here's how a real session with Freya looks:**
|
|
||||||
|
|
||||||
### Freya's Opening
|
|
||||||
```
|
|
||||||
Hi! Ready to create your Design System?
|
|
||||||
|
|
||||||
I've analyzed your page specifications. I found some great patterns!
|
|
||||||
|
|
||||||
Let me show you what I discovered, and you tell me if I got it right.
|
|
||||||
We'll name things together and document them properly.
|
|
||||||
|
|
||||||
This will be collaborative - you're the design expert, I'm the organizer.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Pattern Recognition
|
|
||||||
|
|
||||||
**Freya Identifies Components:**
|
|
||||||
```
|
|
||||||
Freya: "I scanned your 3 pages and found these button patterns:
|
|
||||||
|
|
||||||
Pattern 1 (used 12 times):
|
|
||||||
- Blue background (#1e3a5f)
|
|
||||||
- White text, 18px, semibold
|
|
||||||
- Rounded corners (8px)
|
|
||||||
- Used for: Submit, Save, Confirm actions
|
|
||||||
|
|
||||||
Pattern 2 (used 8 times):
|
|
||||||
- Transparent background
|
|
||||||
- Blue border (#1e3a5f)
|
|
||||||
- Blue text
|
|
||||||
- Used for: Cancel, Back, Secondary actions
|
|
||||||
|
|
||||||
Pattern 3 (used 24 times):
|
|
||||||
- No background, no border
|
|
||||||
- Blue text with underline on hover
|
|
||||||
- Used for: Navigation links, "Learn more"
|
|
||||||
|
|
||||||
Should we call these:
|
|
||||||
- Button Primary
|
|
||||||
- Button Secondary
|
|
||||||
- Text Link
|
|
||||||
|
|
||||||
Sound good?"
|
|
||||||
|
|
||||||
You: "Yes! But let's call Pattern 3 'Link Button' instead."
|
|
||||||
|
|
||||||
Freya: "Perfect. Updated! 🎯"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Freya Finds Inconsistencies:**
|
|
||||||
```
|
|
||||||
Freya: "Heads up! I found a slight inconsistency:
|
|
||||||
|
|
||||||
On Page 1, your primary button uses #1e3a5f (deep blue)
|
|
||||||
On Page 3, it uses #1e4a7f (slightly different blue)
|
|
||||||
|
|
||||||
Which one should be the standard?"
|
|
||||||
|
|
||||||
You: "Oh! Page 1 is correct - #1e3a5f."
|
|
||||||
|
|
||||||
Freya: "Got it. I'll document #1e3a5f as the brand primary color.
|
|
||||||
Should I flag Page 3 for update in the spec?"
|
|
||||||
|
|
||||||
You: "Yes please!"
|
|
||||||
|
|
||||||
Freya: "Done. Added to quality check list. ✅"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Questions Freya Asks
|
|
||||||
|
|
||||||
**About Naming:**
|
|
||||||
```
|
|
||||||
Freya: "I found 3 different card layouts. Help me name them:
|
|
||||||
|
|
||||||
Card Type A: Image on top, title, description, CTA button
|
|
||||||
Card Type B: Small image left, title and text right
|
|
||||||
Card Type C: Icon in circle, title, 3-line description
|
|
||||||
|
|
||||||
What should we call these?"
|
|
||||||
|
|
||||||
You: "Type A is a 'Feature Card'
|
|
||||||
Type B is a 'Task Card'
|
|
||||||
Type C is a 'Capability Card'"
|
|
||||||
|
|
||||||
Freya: "Love it. Those names make sense! Documented. 📝"
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Design Tokens:**
|
|
||||||
```
|
|
||||||
Freya: "I extracted these colors from your pages:
|
|
||||||
|
|
||||||
Blues: #1e3a5f, #2c4f7c, #3d6399
|
|
||||||
Are these:
|
|
||||||
- Different brand colors? OR
|
|
||||||
- The same color in different states (default, hover, active)?
|
|
||||||
|
|
||||||
You: "#1e3a5f is the main brand blue
|
|
||||||
#2c4f7c is hover state
|
|
||||||
#3d6399 is... hmm, I'm not sure where that came from"
|
|
||||||
|
|
||||||
Freya: "Found it - Page 2, Benefits section background.
|
|
||||||
Should that be a separate color called 'Background Blue'?
|
|
||||||
Or should it use the main brand blue?"
|
|
||||||
|
|
||||||
You: "Ah! It should be a lighter tint for backgrounds. Let's call it
|
|
||||||
'Brand Blue Light' and make it consistent."
|
|
||||||
|
|
||||||
Freya: "Perfect! I'll document:
|
|
||||||
- Brand Blue (#1e3a5f) - primary
|
|
||||||
- Brand Blue Hover (#2c4f7c) - interaction
|
|
||||||
- Brand Blue Light (#3d6399) - backgrounds
|
|
||||||
|
|
||||||
Should I update Page 2 spec?"
|
|
||||||
|
|
||||||
You: "Yes!"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Built-in Guidance from Freya
|
|
||||||
|
|
||||||
**When you're building your first Design System:**
|
|
||||||
```
|
|
||||||
Freya: "This is your first Design System, right?
|
|
||||||
|
|
||||||
Pro tip: Don't try to document everything perfectly.
|
|
||||||
Start with the basics:
|
|
||||||
✅ Buttons (you use them everywhere)
|
|
||||||
✅ Colors (brand consistency matters)
|
|
||||||
✅ Typography (H1, H2, body text)
|
|
||||||
✅ Spacing (consistent gaps)
|
|
||||||
|
|
||||||
We can add more as you design more pages.
|
|
||||||
Sound good?"
|
|
||||||
|
|
||||||
You: "Yes! That feels manageable."
|
|
||||||
|
|
||||||
Freya: "Great! Let's start there. We'll keep it simple and practical."
|
|
||||||
```
|
|
||||||
|
|
||||||
**When components are almost the same:**
|
|
||||||
```
|
|
||||||
Freya: "I found two button patterns that are 95% identical:
|
|
||||||
|
|
||||||
Both have:
|
|
||||||
- Blue background
|
|
||||||
- White text
|
|
||||||
- 8px border radius
|
|
||||||
|
|
||||||
Only difference:
|
|
||||||
- One is 44px tall (regular)
|
|
||||||
- One is 56px tall (large)
|
|
||||||
|
|
||||||
Should we make these:
|
|
||||||
- Two separate components? OR
|
|
||||||
- One component with size variants?"
|
|
||||||
|
|
||||||
You: "One component with variants - 'Button Primary (Regular)'
|
|
||||||
and 'Button Primary (Large)'"
|
|
||||||
|
|
||||||
Freya: "Smart! That keeps your system clean. One component,
|
|
||||||
two sizes. Documented! 🎯"
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Usage Guidelines:**
|
|
||||||
```
|
|
||||||
Freya: "For Button Primary, I'm adding usage guidelines:
|
|
||||||
|
|
||||||
✅ Use for primary actions (submit, save, next)
|
|
||||||
✅ Only one per page section
|
|
||||||
❌ Don't use for destructive actions (delete, remove)
|
|
||||||
|
|
||||||
Does that match your intent?"
|
|
||||||
|
|
||||||
You: "Yes! And add: Button text should be action verbs."
|
|
||||||
|
|
||||||
Freya: "Added! These guidelines will help keep your design consistent."
|
|
||||||
```
|
|
||||||
|
|
||||||
### What Freya Creates While You Talk
|
|
||||||
|
|
||||||
As you review patterns, Freya is:
|
|
||||||
- 📋 Cataloging components (buttons, forms, cards)
|
|
||||||
- 🎨 Extracting design tokens (colors, spacing, typography)
|
|
||||||
- 📏 Documenting variants (sizes, states, types)
|
|
||||||
- ✍️ Writing usage guidelines (when to use, when not to)
|
|
||||||
- 🔗 Linking to page specs (where each component is used)
|
|
||||||
|
|
||||||
**You'll see progress updates:**
|
|
||||||
```
|
|
||||||
Freya: "✅ 5 button components documented
|
|
||||||
✅ 8 color tokens extracted
|
|
||||||
✅ 3 card patterns identified
|
|
||||||
🔄 Working on form components..."
|
|
||||||
```
|
|
||||||
|
|
||||||
### The Collaborative Flow
|
|
||||||
|
|
||||||
**It's a conversation, not a form:**
|
|
||||||
```
|
|
||||||
You: "Actually, I think the 'Task Card' should have a checkbox option."
|
|
||||||
|
|
||||||
Freya: "Great catch! Should the checkbox be:
|
|
||||||
- Always visible? OR
|
|
||||||
- Only on hover? OR
|
|
||||||
- A separate variant?"
|
|
||||||
|
|
||||||
You: "Separate variant - 'Task Card (Selectable)'"
|
|
||||||
|
|
||||||
Freya: "Perfect. I'll document both variants:
|
|
||||||
- Task Card (Standard)
|
|
||||||
- Task Card (Selectable)
|
|
||||||
|
|
||||||
Updated the component library! ✅"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Understand the Power (5 min)
|
|
||||||
|
|
||||||
**Without Design System:**
|
|
||||||
```
|
|
||||||
Page 1: Create "Submit" button
|
|
||||||
Page 2: Create "Submit" button (slightly different)
|
|
||||||
Page 3: Create "Submit" button (now it's inconsistent)
|
|
||||||
Update brand color → Update 47 buttons manually 😱
|
|
||||||
```
|
|
||||||
|
|
||||||
**With Design System:**
|
|
||||||
```
|
|
||||||
Design System: Define Button Primary
|
|
||||||
Page 1: Use Button Primary
|
|
||||||
Page 2: Use Button Primary
|
|
||||||
Page 3: Use Button Primary
|
|
||||||
Update brand color → Update 1 component, changes everywhere 🎉
|
|
||||||
```
|
|
||||||
|
|
||||||
**You save time. Users get consistency.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Activate Freya for Extraction (2 min)
|
|
||||||
|
|
||||||
```
|
|
||||||
@freya
|
|
||||||
|
|
||||||
I'm ready to create a Design System from my page specifications.
|
|
||||||
|
|
||||||
I have these pages designed:
|
|
||||||
- [Page 1 name]
|
|
||||||
- [Page 2 name]
|
|
||||||
- [Page 3 name]
|
|
||||||
|
|
||||||
Please help me extract reusable components.
|
|
||||||
```
|
|
||||||
|
|
||||||
**Freya will analyze** your pages and identify patterns.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Review What Freya Found (15 min)
|
|
||||||
|
|
||||||
Freya scans your pages and identifies:
|
|
||||||
|
|
||||||
### Components She'll Extract
|
|
||||||
- **Buttons:** Primary, Secondary, Text links
|
|
||||||
- **Forms:** Input fields, Dropdowns, Checkboxes
|
|
||||||
- **Cards:** Content cards, Profile cards
|
|
||||||
- **Navigation:** Headers, Footers, Menus
|
|
||||||
- **Feedback:** Success messages, Error states, Loading indicators
|
|
||||||
|
|
||||||
**She'll say something like:**
|
|
||||||
```
|
|
||||||
I found these patterns:
|
|
||||||
|
|
||||||
Buttons (3 variants):
|
|
||||||
- Primary Button (used 12 times across 3 pages)
|
|
||||||
- Secondary Button (used 8 times)
|
|
||||||
- Text Link (used 24 times)
|
|
||||||
|
|
||||||
Cards (2 types):
|
|
||||||
- Task Card (used 15 times)
|
|
||||||
- Profile Card (used 3 times)
|
|
||||||
|
|
||||||
Do these look right? Any I missed?
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your job:**
|
|
||||||
- ✅ Confirm patterns she found
|
|
||||||
- ✅ Point out any she missed
|
|
||||||
- ✅ Name variants clearly ("Primary Button" not "Blue Button")
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Define Design Tokens (10 min)
|
|
||||||
|
|
||||||
**Design Tokens** = The atomic values your components use.
|
|
||||||
|
|
||||||
Freya will extract:
|
|
||||||
|
|
||||||
### Colors
|
|
||||||
```
|
|
||||||
Brand Colors:
|
|
||||||
- Primary: #1e3a5f (deep blue)
|
|
||||||
- Accent: #ff6b35 (coral)
|
|
||||||
|
|
||||||
Semantic Colors:
|
|
||||||
- Success: #22c55e
|
|
||||||
- Error: #ef4444
|
|
||||||
- Warning: #f59e0b
|
|
||||||
```
|
|
||||||
|
|
||||||
### Typography
|
|
||||||
```
|
|
||||||
Heading 1: 48px, Bold, 1.2 line height
|
|
||||||
Heading 2: 32px, Semibold, 1.3 line height
|
|
||||||
Body: 16px, Regular, 1.6 line height
|
|
||||||
```
|
|
||||||
|
|
||||||
### Spacing
|
|
||||||
```
|
|
||||||
xs: 4px
|
|
||||||
sm: 8px
|
|
||||||
md: 16px
|
|
||||||
lg: 24px
|
|
||||||
xl: 32px
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your job:**
|
|
||||||
- ✅ Confirm these match your intent
|
|
||||||
- ✅ Name them meaningfully ("Primary" not "Blue")
|
|
||||||
- ✅ Add any she missed
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Document Components (15 min)
|
|
||||||
|
|
||||||
For each component, Freya creates documentation:
|
|
||||||
|
|
||||||
### Example: Primary Button
|
|
||||||
|
|
||||||
**Component Name:** Button Primary
|
|
||||||
**Object ID Pattern:** `{page}-{section}-{element}`
|
|
||||||
|
|
||||||
**States:**
|
|
||||||
- **Default:** Blue background, white text
|
|
||||||
- **Hover:** Darker blue, scale 1.05
|
|
||||||
- **Active:** Even darker, scale 0.98
|
|
||||||
- **Disabled:** Gray background, gray text
|
|
||||||
- **Loading:** Blue background, spinner icon
|
|
||||||
|
|
||||||
**Content Structure:**
|
|
||||||
```
|
|
||||||
- Label (EN): [Button text]
|
|
||||||
- Icon (optional): [Icon name]
|
|
||||||
```
|
|
||||||
|
|
||||||
**Usage Guidelines:**
|
|
||||||
- Use for primary actions (submit, save, confirm)
|
|
||||||
- Only ONE primary button per page/section
|
|
||||||
- Button text = action verb ("Save", "Submit", "Confirm")
|
|
||||||
|
|
||||||
**Accessibility:**
|
|
||||||
- Min touch target: 44x44px
|
|
||||||
- Keyboard accessible (Enter/Space)
|
|
||||||
- Focus indicator visible
|
|
||||||
|
|
||||||
**Freya documents** all this. You just review and confirm.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Create the Component Library (5 min)
|
|
||||||
|
|
||||||
Freya saves your Design System:
|
|
||||||
|
|
||||||
```
|
|
||||||
/docs/5-design-system/
|
|
||||||
├── 00-design-tokens.md
|
|
||||||
├── components/
|
|
||||||
│ ├── buttons.md
|
|
||||||
│ ├── forms.md
|
|
||||||
│ ├── cards.md
|
|
||||||
│ └── navigation.md
|
|
||||||
├── patterns/
|
|
||||||
│ ├── form-patterns.md
|
|
||||||
│ └── layout-patterns.md
|
|
||||||
└── guidelines/
|
|
||||||
├── accessibility.md
|
|
||||||
└── usage-rules.md
|
|
||||||
```
|
|
||||||
|
|
||||||
**Now you can:**
|
|
||||||
- Reference components in new page specs
|
|
||||||
- Ensure consistency across your product
|
|
||||||
- Update once, apply everywhere
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 7: Use Your Design System (Ongoing)
|
|
||||||
|
|
||||||
**When designing new pages:**
|
|
||||||
|
|
||||||
Instead of:
|
|
||||||
```markdown
|
|
||||||
#### Submit Button
|
|
||||||
- Style: Blue button, 18px, semibold...
|
|
||||||
```
|
|
||||||
|
|
||||||
You write:
|
|
||||||
```markdown
|
|
||||||
#### Submit Button
|
|
||||||
**Component:** Button Primary
|
|
||||||
**Content:** "Save Changes"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Freya knows** what "Button Primary" means. Developers know too. Consistency guaranteed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: When should I create a Design System?**
|
|
||||||
**A:** After 2-3 pages are designed. Patterns become clear.
|
|
||||||
|
|
||||||
**Q: Can I update components later?**
|
|
||||||
**A:** Yes! Update the Design System doc, then update specs that use it.
|
|
||||||
|
|
||||||
**Q: What if a page needs a unique button?**
|
|
||||||
**A:** Document why it's unique. If you use it again, add it to the system.
|
|
||||||
|
|
||||||
**Q: Do I need Figma components?**
|
|
||||||
**A:** Not required. WDS Design System is specification-focused. You can sync to Figma later if you want.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
🎉 **You just created a Design System!**
|
|
||||||
|
|
||||||
**You didn't need to:**
|
|
||||||
- ❌ Manually catalog every component
|
|
||||||
- ❌ Create a Figma component library first
|
|
||||||
- ❌ Understand design tokens theory
|
|
||||||
- ❌ Build a Storybook
|
|
||||||
|
|
||||||
**You just:**
|
|
||||||
- ✅ Designed a few pages naturally
|
|
||||||
- ✅ Let Freya identify patterns
|
|
||||||
- ✅ Reviewed and confirmed
|
|
||||||
- ✅ Named things clearly
|
|
||||||
|
|
||||||
**That's the WDS superpower:** Design naturally. Extract patterns automatically. Scale effortlessly.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Ready to hand off to developers?**
|
|
||||||
→ [Module 10: Design Delivery](../module-10-design-delivery/tutorial-10.md)
|
|
||||||
|
|
||||||
**Want to design more pages first?**
|
|
||||||
Go back to [Module 08: Initialize Scenario](../module-08-initialize-scenario/tutorial-08.md) and your Design System will grow with you.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Pro Tip:** Your Design System doesn't need to be "complete" before you hand off. Start small (buttons, forms, colors). Add more as you design more pages. It's a living system that grows with your product.
|
|
||||||
|
|
||||||
|
|
@ -1,604 +0,0 @@
|
||||||
# Tutorial 10: Design Delivery
|
|
||||||
|
|
||||||
**Package your design for developers - hand off with confidence, not confusion**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Your design is done. Specifications are complete. Design System is ready. Now what?
|
|
||||||
|
|
||||||
You need to **hand off to developers** - but how do you ensure they build what you designed?
|
|
||||||
|
|
||||||
**Your superpower:** Idunn transforms your design specs into a Developer PRD with epics, stories, and clear implementation guidance.
|
|
||||||
|
|
||||||
**Time:** 30-45 minutes
|
|
||||||
**Prerequisites:** Module 08 & 09 completed (Pages designed, Design System ready)
|
|
||||||
**What you'll create:** Design Delivery PRD with Epics & Stories
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- What a Design Delivery PRD is (and why developers love it)
|
|
||||||
- How Idunn organizes your specs into buildable chunks
|
|
||||||
- How to prioritize what gets built first
|
|
||||||
- What to include in the handoff package
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What is Design Delivery PRD?
|
|
||||||
|
|
||||||
**Design Delivery PRD** = Your design specs, organized for development.
|
|
||||||
|
|
||||||
It transforms:
|
|
||||||
- **Your page specs** (what the design IS)
|
|
||||||
- **Into developer tasks** (what to BUILD)
|
|
||||||
|
|
||||||
**Think of it as:**
|
|
||||||
Your recipe (specs) → Shopping list + cooking steps (PRD)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What to Expect: The Organization Process
|
|
||||||
|
|
||||||
**Here's how a real session with Idunn looks:**
|
|
||||||
|
|
||||||
### Idunn's Opening
|
|
||||||
```
|
|
||||||
Hi! Time to organize your design for developer handoff.
|
|
||||||
|
|
||||||
I've reviewed your:
|
|
||||||
- Page specifications (3 pages)
|
|
||||||
- Design System (ready)
|
|
||||||
|
|
||||||
I'll break this into epics and stories developers can actually build.
|
|
||||||
|
|
||||||
We'll work together to:
|
|
||||||
1. Group related work into epics
|
|
||||||
2. Create specific stories with acceptance criteria
|
|
||||||
3. Prioritize what gets built first
|
|
||||||
4. Package everything for handoff
|
|
||||||
|
|
||||||
Ready? Let's start by looking at the big picture.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Epic Breakdown
|
|
||||||
|
|
||||||
**Idunn Proposes Structure:**
|
|
||||||
```
|
|
||||||
Idunn: "I analyzed your 3 pages. Here's how I'd organize them:
|
|
||||||
|
|
||||||
EPIC 1: Landing Page Experience
|
|
||||||
- Pages: 1.1 Start Page
|
|
||||||
- Goal: Users understand WDS and can access it
|
|
||||||
- Stories: 7 (Hero, Capabilities, Navigation, Footer...)
|
|
||||||
- Priority: HIGH (this is your front door)
|
|
||||||
|
|
||||||
EPIC 2: Course Content Pages
|
|
||||||
- Pages: 2.1 Modules List, 2.2 Tutorial Page
|
|
||||||
- Goal: Users can learn WDS through tutorials
|
|
||||||
- Stories: 12 (Module cards, Tutorial content, Progress tracking...)
|
|
||||||
- Priority: MEDIUM (users need this after they sign up)
|
|
||||||
|
|
||||||
EPIC 3: Design System Components
|
|
||||||
- Goal: Build reusable components library
|
|
||||||
- Stories: 5 (Button system, Form components, Card library...)
|
|
||||||
- Priority: HIGH (needed for all other epics)
|
|
||||||
|
|
||||||
Does this grouping make sense?
|
|
||||||
Any epics missing?"
|
|
||||||
|
|
||||||
You: "Actually, Epic 3 should be built FIRST - other epics need it."
|
|
||||||
|
|
||||||
Idunn: "Smart! Let me reorder:
|
|
||||||
|
|
||||||
Phase 1: Epic 3 (Component Library)
|
|
||||||
Phase 2: Epic 1 (Landing Page)
|
|
||||||
Phase 3: Epic 2 (Course Content)
|
|
||||||
|
|
||||||
Better?"
|
|
||||||
|
|
||||||
You: "Perfect!"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Questions Idunn Asks
|
|
||||||
|
|
||||||
**About Priorities:**
|
|
||||||
```
|
|
||||||
Idunn: "Looking at Epic 1 (Landing Page), which story is most critical?
|
|
||||||
|
|
||||||
Story 1.1: Hero Section (first impression)
|
|
||||||
Story 1.2: Capabilities Section (shows value)
|
|
||||||
Story 1.3: Benefits Grid (builds trust)
|
|
||||||
Story 1.4: Footer (contact info, links)
|
|
||||||
|
|
||||||
If we had to ship with ONLY ONE done, which one?"
|
|
||||||
|
|
||||||
You: "Story 1.1 - Hero Section. Users need to understand what WDS is."
|
|
||||||
|
|
||||||
Idunn: "Got it. I'll mark Story 1.1 as P0 (must-have).
|
|
||||||
Others can be P1 (important but can wait).
|
|
||||||
|
|
||||||
Should developers build them in this order?"
|
|
||||||
|
|
||||||
You: "Yes, exactly."
|
|
||||||
|
|
||||||
Idunn: "Story sequence documented! 📋"
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Dependencies:**
|
|
||||||
```
|
|
||||||
Idunn: "I notice Story 2.3 (Tutorial Progress Tracking) needs:
|
|
||||||
- User authentication (from Epic 0?)
|
|
||||||
- Database to store progress
|
|
||||||
|
|
||||||
Should I create Epic 0: Foundation that includes auth?"
|
|
||||||
|
|
||||||
You: "Yes! Good catch."
|
|
||||||
|
|
||||||
Idunn: "Creating Epic 0: Platform Foundation
|
|
||||||
- Story 0.1: User authentication system
|
|
||||||
- Story 0.2: Database setup
|
|
||||||
- Story 0.3: API infrastructure
|
|
||||||
|
|
||||||
This becomes Phase 1, and everything else depends on it.
|
|
||||||
Sound right?"
|
|
||||||
|
|
||||||
You: "Absolutely."
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Story Details:**
|
|
||||||
```
|
|
||||||
Idunn: "For Story 1.2 (Capabilities Section with 7 cards),
|
|
||||||
should this be:
|
|
||||||
|
|
||||||
Option A: ONE story (build all 7 cards at once)
|
|
||||||
Option B: SEVEN stories (one per card)
|
|
||||||
Option C: TWO stories (build card component, then populate all 7)
|
|
||||||
|
|
||||||
What makes sense?"
|
|
||||||
|
|
||||||
You: "Option C - developers create the card component first,
|
|
||||||
then it's easy to replicate for all 7."
|
|
||||||
|
|
||||||
Idunn: "Perfect! Breaking it down:
|
|
||||||
- Story 1.2a: Build Capability Card component
|
|
||||||
- Story 1.2b: Populate 7 capability instances
|
|
||||||
|
|
||||||
Estimated: 2 days (component) + 1 day (content)
|
|
||||||
Good?"
|
|
||||||
|
|
||||||
You: "Yes!"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Built-in Guidance from Idunn
|
|
||||||
|
|
||||||
**When stories are too big:**
|
|
||||||
```
|
|
||||||
Idunn: "Story 2.1 is getting large. It includes:
|
|
||||||
- Module card grid
|
|
||||||
- Filtering by category
|
|
||||||
- Search functionality
|
|
||||||
- Sort by difficulty
|
|
||||||
|
|
||||||
This could take 2-3 weeks. Should we split it?
|
|
||||||
|
|
||||||
Suggested split:
|
|
||||||
- Story 2.1a: Module grid (basic display)
|
|
||||||
- Story 2.1b: Add filtering
|
|
||||||
- Story 2.1c: Add search
|
|
||||||
- Story 2.1d: Add sorting
|
|
||||||
|
|
||||||
Then developers can ship 2.1a quickly, and add features
|
|
||||||
in 2.1b-d later. Sound good?"
|
|
||||||
|
|
||||||
You: "Yes! I like that incremental approach."
|
|
||||||
|
|
||||||
Idunn: "Great! Smaller stories = faster feedback = better quality."
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Acceptance Criteria:**
|
|
||||||
```
|
|
||||||
Idunn: "For Story 1.1 (Hero Section), I'm writing acceptance criteria:
|
|
||||||
|
|
||||||
✅ H1 headline displays correctly
|
|
||||||
✅ Tagline text matches spec
|
|
||||||
✅ CTA button links to GitHub
|
|
||||||
✅ Section is responsive (mobile/desktop)
|
|
||||||
✅ All Object IDs match page spec
|
|
||||||
|
|
||||||
Am I missing anything?"
|
|
||||||
|
|
||||||
You: "Yes - the CTA should have a hover animation (scale 1.05)"
|
|
||||||
|
|
||||||
Idunn: "Added! ✅ CTA has hover state (scale 1.05, smooth transition)
|
|
||||||
|
|
||||||
These criteria help developers know when they're 'done'."
|
|
||||||
```
|
|
||||||
|
|
||||||
**About Testing Expectations:**
|
|
||||||
```
|
|
||||||
Idunn: "Should I include testing requirements in each story?
|
|
||||||
|
|
||||||
For example:
|
|
||||||
✅ Works in Chrome, Firefox, Safari
|
|
||||||
✅ Responsive on mobile (375px+)
|
|
||||||
✅ Keyboard accessible (tab navigation)
|
|
||||||
✅ Screen reader compatible"
|
|
||||||
|
|
||||||
You: "Yes! Accessibility is important."
|
|
||||||
|
|
||||||
Idunn: "Adding accessibility criteria to all stories.
|
|
||||||
I'll also create a separate 'Definition of Done' document
|
|
||||||
so developers know the quality bar. ✅"
|
|
||||||
```
|
|
||||||
|
|
||||||
### What Idunn Creates While You Talk
|
|
||||||
|
|
||||||
As you discuss priorities and structure, Idunn is:
|
|
||||||
- 📊 Creating epic breakdown (major features)
|
|
||||||
- ✍️ Writing user stories (As a [persona], I want...)
|
|
||||||
- ✅ Defining acceptance criteria (testable conditions)
|
|
||||||
- 🔗 Linking to page specs (where to find details)
|
|
||||||
- 📅 Suggesting implementation phases (what builds when)
|
|
||||||
- 📋 Assembling handoff package (everything developers need)
|
|
||||||
|
|
||||||
**You'll see progress updates:**
|
|
||||||
```
|
|
||||||
Idunn: "✅ 3 epics structured
|
|
||||||
✅ 24 stories written
|
|
||||||
✅ Dependencies mapped
|
|
||||||
🔄 Creating handoff documentation..."
|
|
||||||
```
|
|
||||||
|
|
||||||
### The Collaborative Flow
|
|
||||||
|
|
||||||
**It's iterative, not final:**
|
|
||||||
```
|
|
||||||
You: "Actually, looking at this, Story 2.2 could be combined with 2.3.
|
|
||||||
They're both about tutorial pages."
|
|
||||||
|
|
||||||
Idunn: "Good point! Let me merge them:
|
|
||||||
|
|
||||||
OLD:
|
|
||||||
- Story 2.2: Tutorial content display
|
|
||||||
- Story 2.3: Tutorial navigation
|
|
||||||
|
|
||||||
NEW:
|
|
||||||
- Story 2.2: Complete tutorial page experience
|
|
||||||
|
|
||||||
This makes more sense as one unit of work. Updated! 🎯"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Idunn catches gaps:**
|
|
||||||
```
|
|
||||||
Idunn: "Wait - I don't see any stories for error states.
|
|
||||||
|
|
||||||
What should happen if:
|
|
||||||
- GitHub API is down (CTA link fails)?
|
|
||||||
- Images don't load?
|
|
||||||
- Page content is missing?
|
|
||||||
|
|
||||||
Should I add error handling stories?"
|
|
||||||
|
|
||||||
You: "Yes! Good catch. Add graceful error states."
|
|
||||||
|
|
||||||
Idunn: "Adding Epic 4: Error Handling & Edge Cases
|
|
||||||
- Story 4.1: Network error states
|
|
||||||
- Story 4.2: Missing content fallbacks
|
|
||||||
- Story 4.3: Loading states
|
|
||||||
|
|
||||||
This ensures a polished experience. ✅"
|
|
||||||
```
|
|
||||||
|
|
||||||
### The Handoff Package
|
|
||||||
|
|
||||||
**Idunn Shows You the Final Structure:**
|
|
||||||
```
|
|
||||||
Idunn: "Here's what developers will receive:
|
|
||||||
|
|
||||||
📁 Design Delivery PRD/
|
|
||||||
├── 00-handoff-overview.md (start here!)
|
|
||||||
├── 01-epic-breakdown.md (big picture)
|
|
||||||
├── 02-implementation-roadmap.md (build order)
|
|
||||||
├── 03-definition-of-done.md (quality criteria)
|
|
||||||
└── stories/
|
|
||||||
├── epic-0-foundation/
|
|
||||||
│ ├── story-0.1-authentication.md
|
|
||||||
│ └── story-0.2-database.md
|
|
||||||
├── epic-1-landing-page/
|
|
||||||
│ ├── story-1.1-hero-section.md
|
|
||||||
│ └── story-1.2-capabilities.md
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
Each story links to:
|
|
||||||
- Your page specifications
|
|
||||||
- Design System components
|
|
||||||
- Acceptance criteria
|
|
||||||
- Technical notes
|
|
||||||
|
|
||||||
Developers have everything they need. Ready to hand off?"
|
|
||||||
|
|
||||||
You: "Yes! This is so organized."
|
|
||||||
|
|
||||||
Idunn: "Great! I'll export everything.
|
|
||||||
|
|
||||||
Want me to draft an email to your dev team too? 📧"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Understand the Translation (5 min)
|
|
||||||
|
|
||||||
**What you have:**
|
|
||||||
```
|
|
||||||
Page Specifications:
|
|
||||||
- 1.1 Start Page (Hero, Features, CTA)
|
|
||||||
- 1.2 Benefits Page (3 sections)
|
|
||||||
- 1.3 Pricing Page (Pricing table, FAQ)
|
|
||||||
```
|
|
||||||
|
|
||||||
**What developers need:**
|
|
||||||
```
|
|
||||||
Epic 1: Landing Page
|
|
||||||
├── Story 1: Build Hero Section
|
|
||||||
├── Story 2: Build Features Section
|
|
||||||
└── Story 3: Build CTA Section
|
|
||||||
|
|
||||||
Epic 2: Benefits Page
|
|
||||||
├── Story 4: Build Benefits Grid
|
|
||||||
└── Story 5: Add Testimonials
|
|
||||||
|
|
||||||
Epic 3: Pricing Page
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
**Idunn creates this structure** from your specs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Activate Idunn for Handoff (2 min)
|
|
||||||
|
|
||||||
```
|
|
||||||
@idunn
|
|
||||||
|
|
||||||
I'm ready to create the Design Delivery PRD.
|
|
||||||
|
|
||||||
I have:
|
|
||||||
- Page specifications (complete)
|
|
||||||
- Design System (ready)
|
|
||||||
|
|
||||||
Please help me organize this for developer handoff.
|
|
||||||
```
|
|
||||||
|
|
||||||
**Idunn will analyze** your specs and propose an implementation structure.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Review Idunn's Epic Breakdown (10 min)
|
|
||||||
|
|
||||||
Idunn creates **Epics** (major features) and **Stories** (specific tasks).
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
### Epic 1: Core Landing Experience
|
|
||||||
```
|
|
||||||
Goal: Users can understand WDS value and sign up
|
|
||||||
Pages: Start Page + Benefits Page
|
|
||||||
Priority: HIGH
|
|
||||||
Estimated: 2-3 weeks
|
|
||||||
```
|
|
||||||
|
|
||||||
**Stories in this Epic:**
|
|
||||||
1. ✅ **Story 1.1:** Build Hero Section
|
|
||||||
- Page: 1.1 Start Page
|
|
||||||
- Components: Hero Headline, Hero Body, CTA Button, Hero Image
|
|
||||||
- Acceptance: Matches spec exactly, responsive, CTA links to GitHub
|
|
||||||
|
|
||||||
2. ✅ **Story 1.2:** Build Capabilities Section (Right Column)
|
|
||||||
- Page: 1.1 Start Page
|
|
||||||
- Components: 7 Capability Cards with icons, links
|
|
||||||
- Acceptance: Cards link to deliverable pages, hover states work
|
|
||||||
|
|
||||||
3. ✅ **Story 1.3:** Build Benefits Grid
|
|
||||||
- Page: 1.2 Benefits Page
|
|
||||||
- Components: 3 Benefit Cards
|
|
||||||
- Acceptance: Responsive grid, icons display correctly
|
|
||||||
|
|
||||||
**Your job:**
|
|
||||||
- ✅ Confirm epics make sense
|
|
||||||
- ✅ Adjust priorities if needed
|
|
||||||
- ✅ Suggest different groupings if you see dependencies
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Prioritize Implementation Order (10 min)
|
|
||||||
|
|
||||||
**Idunn will ask:**
|
|
||||||
|
|
||||||
"Which epics should developers build first?"
|
|
||||||
|
|
||||||
**Think about:**
|
|
||||||
- What's the **MVP** (Minimum Viable Product)?
|
|
||||||
- What do users need **most urgently**?
|
|
||||||
- Are there **dependencies** (Epic 2 needs Epic 1 first)?
|
|
||||||
|
|
||||||
**Example prioritization:**
|
|
||||||
```
|
|
||||||
Phase 1 (MVP - Week 1-2):
|
|
||||||
- Epic 1: Core Landing Experience
|
|
||||||
(Users can learn about WDS and access it)
|
|
||||||
|
|
||||||
Phase 2 (Enhancement - Week 3-4):
|
|
||||||
- Epic 2: Course Content
|
|
||||||
(Users can follow tutorials)
|
|
||||||
|
|
||||||
Phase 3 (Nice-to-have - Week 5+):
|
|
||||||
- Epic 3: Community Features
|
|
||||||
(Users can connect with each other)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Idunn documents this** so developers know what to build when.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Review Story Details (10 min)
|
|
||||||
|
|
||||||
For each story, Idunn includes:
|
|
||||||
|
|
||||||
### Story Format
|
|
||||||
```
|
|
||||||
Story 1.1: Build Hero Section
|
|
||||||
|
|
||||||
As a designer visiting the WDS page,
|
|
||||||
I want to see a clear hero section,
|
|
||||||
So that I understand what WDS is in 5 seconds.
|
|
||||||
|
|
||||||
Acceptance Criteria:
|
|
||||||
✅ H1 headline displays: "Whiteport Design Studio, WDS"
|
|
||||||
✅ Tagline displays with correct formatting
|
|
||||||
✅ CTA button links to GitHub repo
|
|
||||||
✅ Hero image displays on right side (desktop)
|
|
||||||
✅ Section is responsive (stacks on mobile)
|
|
||||||
✅ Matches page specification: docs/4-scenarios/1.1-wds-presentation.md
|
|
||||||
|
|
||||||
Components Used:
|
|
||||||
- wds-hero-headline (H1 Heading)
|
|
||||||
- wds-hero-tagline (H2 Heading)
|
|
||||||
- wds-hero-body (Body Paragraph)
|
|
||||||
- wds-hero-cta (Button Primary)
|
|
||||||
- wds-hero-illustration (Hero Image)
|
|
||||||
|
|
||||||
Design System References:
|
|
||||||
- Button Primary (see: docs/5-design-system/components/buttons.md)
|
|
||||||
- Heading styles (see: docs/5-design-system/00-design-tokens.md)
|
|
||||||
|
|
||||||
Technical Notes:
|
|
||||||
- Ensure Object IDs match spec (for future updates)
|
|
||||||
- Image should be lazy-loaded for performance
|
|
||||||
- CTA should have proper focus state for accessibility
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your job:**
|
|
||||||
- ✅ Confirm acceptance criteria are clear
|
|
||||||
- ✅ Ensure all components are referenced
|
|
||||||
- ✅ Add any missing requirements
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Create the Handoff Package (5 min)
|
|
||||||
|
|
||||||
Idunn assembles everything into a handoff package:
|
|
||||||
|
|
||||||
```
|
|
||||||
/docs/6-design-delivery/
|
|
||||||
├── 00-handoff-overview.md
|
|
||||||
├── 01-epic-breakdown.md
|
|
||||||
├── 02-implementation-roadmap.md
|
|
||||||
├── stories/
|
|
||||||
│ ├── story-1.1-hero-section.md
|
|
||||||
│ ├── story-1.2-capabilities-section.md
|
|
||||||
│ └── ...
|
|
||||||
└── developer-guide.md
|
|
||||||
```
|
|
||||||
|
|
||||||
**Handoff Overview includes:**
|
|
||||||
- Links to all page specifications
|
|
||||||
- Links to Design System
|
|
||||||
- How to read Object IDs
|
|
||||||
- How to interpret content with language tags
|
|
||||||
- Testing expectations
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 7: Hand Off to Developers (5 min)
|
|
||||||
|
|
||||||
**Share with your dev team:**
|
|
||||||
|
|
||||||
1. **The handoff package** (folder above)
|
|
||||||
2. **Access to full specs** (all `/docs/` folders)
|
|
||||||
3. **A kickoff meeting** (30 min to walk through)
|
|
||||||
|
|
||||||
**In the meeting, explain:**
|
|
||||||
- "Here's the Design Delivery PRD - epics and stories"
|
|
||||||
- "Each story links to page specifications"
|
|
||||||
- "All components are in the Design System docs"
|
|
||||||
- "Object IDs help you track what's what"
|
|
||||||
- "Questions? Ask now or ping me anytime"
|
|
||||||
|
|
||||||
**Developers now have:**
|
|
||||||
- ✅ Clear implementation roadmap
|
|
||||||
- ✅ Detailed specifications for every element
|
|
||||||
- ✅ Component library for consistency
|
|
||||||
- ✅ Acceptance criteria for every story
|
|
||||||
- ✅ Your design intent preserved
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: Do developers have to follow the stories exactly?**
|
|
||||||
**A:** Stories are a starting point. Developers may adjust based on technical constraints. Stay in the loop!
|
|
||||||
|
|
||||||
**Q: What if developers have questions?**
|
|
||||||
**A:** Encourage them to reference page specs and Design System first. Then ping you for clarification.
|
|
||||||
|
|
||||||
**Q: Should I attend standup meetings?**
|
|
||||||
**A:** YES! Stay involved to catch misinterpretations early.
|
|
||||||
|
|
||||||
**Q: What if they want to change the design?**
|
|
||||||
**A:** Discuss WHY (technical constraints? Better UX idea?). Update specs if agreed.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
🎉 **You just handed off your design like a pro!**
|
|
||||||
|
|
||||||
**You didn't need to:**
|
|
||||||
- ❌ Write user stories yourself
|
|
||||||
- ❌ Estimate development time
|
|
||||||
- ❌ Create Jira tickets manually
|
|
||||||
- ❌ Translate design language to dev language
|
|
||||||
|
|
||||||
**You just:**
|
|
||||||
- ✅ Confirmed Idunn's epic breakdown made sense
|
|
||||||
- ✅ Prioritized implementation order
|
|
||||||
- ✅ Reviewed stories for accuracy
|
|
||||||
- ✅ Handed off with confidence
|
|
||||||
|
|
||||||
**That's the WDS superpower:** Design with intent. Hand off with clarity. Trust it gets built right.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What Happens Next?
|
|
||||||
|
|
||||||
**Developers build.** Your specs guide them.
|
|
||||||
|
|
||||||
**Your role during development:**
|
|
||||||
- Answer questions (specs might need clarification)
|
|
||||||
- Review implementations (does it match the spec?)
|
|
||||||
- Update specs if requirements change
|
|
||||||
|
|
||||||
**After launch:**
|
|
||||||
BMM workflows take over for testing, iteration, and ongoing development.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Want to learn more?**
|
|
||||||
- Review the [Design Delivery Workflow](../src/workflows/6-design-deliveries/) for advanced topics
|
|
||||||
- Explore BMM (BMAD Management Method) for ongoing development
|
|
||||||
|
|
||||||
**Start a new project?**
|
|
||||||
- Go back to [Module 03: Alignment & Signoff](../module-03-alignment-signoff/tutorial-03.md)
|
|
||||||
- Or jump to [Module 04: Project Brief](../module-04-project-brief/tutorial-04.md)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Pro Tip:** Great handoffs aren't "throw it over the wall." Stay engaged during development. Answer questions. Review builds. Your design intent is worth protecting. WDS gives you the tools - you provide the oversight.
|
|
||||||
|
|
||||||
🎯 **Congratulations! You've completed the core WDS workflow!**
|
|
||||||
|
|
||||||
|
|
@ -1,734 +0,0 @@
|
||||||
# Tutorial 12: Write Conceptual Specifications
|
|
||||||
|
|
||||||
**Hands-on guide to documenting WHAT + WHY + WHAT NOT TO DO**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
This tutorial teaches you how to transform sketches into specifications that preserve your design intent and guide AI implementation correctly.
|
|
||||||
|
|
||||||
**Time:** 60-90 minutes
|
|
||||||
**Prerequisites:** Sketches completed and analyzed
|
|
||||||
**What you'll create:** Complete conceptual specifications for a page
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You'll Learn
|
|
||||||
|
|
||||||
- The three-part specification pattern (WHAT + WHY + WHAT NOT)
|
|
||||||
- How to document design intent AI can follow
|
|
||||||
- Preventing "helpful" AI mistakes
|
|
||||||
- Creating specifications that preserve creativity
|
|
||||||
- Working with AI as documentation partner
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Why-Based Pattern
|
|
||||||
|
|
||||||
Every specification element needs three parts:
|
|
||||||
|
|
||||||
```
|
|
||||||
WHAT: [The design decision]
|
|
||||||
WHY: [The reasoning behind it]
|
|
||||||
WHAT NOT TO DO: [Common mistakes to avoid]
|
|
||||||
```
|
|
||||||
|
|
||||||
**This is not factory work** - AI agents help you think through design solutions, then become fascinated documentarians of your brilliance.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 1: Start with Component Overview (10 min)
|
|
||||||
|
|
||||||
### Document the big picture
|
|
||||||
|
|
||||||
**What to include:**
|
|
||||||
|
|
||||||
- Component purpose
|
|
||||||
- User context
|
|
||||||
- Key interactions
|
|
||||||
- Success criteria
|
|
||||||
|
|
||||||
**Example (Dog Week - Daily Schedule View):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
# Daily Schedule View Component
|
|
||||||
|
|
||||||
## Purpose
|
|
||||||
|
|
||||||
Shows today's dog care tasks with clear assignments and status.
|
|
||||||
Solves the "morning chaos" trigger - user needs immediate answer
|
|
||||||
to "who's doing what today?"
|
|
||||||
|
|
||||||
## User Context
|
|
||||||
|
|
||||||
- Accessed first thing in morning (7-8 AM typical)
|
|
||||||
- User is time-pressured, stressed
|
|
||||||
- Needs answer in < 5 seconds
|
|
||||||
- May be checking while managing kids
|
|
||||||
|
|
||||||
## Key Interactions
|
|
||||||
|
|
||||||
- View today's tasks at a glance
|
|
||||||
- See personal assignments highlighted
|
|
||||||
- Mark tasks complete
|
|
||||||
- Quick reassign if emergency
|
|
||||||
|
|
||||||
## Success Criteria
|
|
||||||
|
|
||||||
- User finds their tasks in < 5 seconds
|
|
||||||
- Zero confusion about responsibilities
|
|
||||||
- Can act on tasks immediately
|
|
||||||
- Feels confident and informed
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Document your component overview:
|
|
||||||
[Your content]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "I'm fascinated by your design thinking here. Let me help
|
|
||||||
capture every nuance:
|
|
||||||
- What's the emotional journey you're creating?
|
|
||||||
- Why did you choose this approach over alternatives?
|
|
||||||
- What makes this feel right for your users?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 2: Specify Visual Hierarchy (15 min)
|
|
||||||
|
|
||||||
### Document WHAT + WHY + WHAT NOT
|
|
||||||
|
|
||||||
**For each visual decision, explain:**
|
|
||||||
|
|
||||||
- WHAT you designed
|
|
||||||
- WHY you made that choice
|
|
||||||
- WHAT NOT TO DO (prevent AI mistakes)
|
|
||||||
|
|
||||||
**Example (Dog Week - Task List):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
## Visual Hierarchy
|
|
||||||
|
|
||||||
### Today's Date Header
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Large, bold date at top: "Monday, December 9"
|
|
||||||
- Includes day name + full date
|
|
||||||
- Uses primary brand color
|
|
||||||
- 24px font size, 700 weight
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Immediate temporal context (user knows "when")
|
|
||||||
- Day name matters (Monday = week start, different mindset)
|
|
||||||
- Bold = confidence and clarity
|
|
||||||
- Size ensures visibility in stressed morning glance
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't use relative dates ("Today") - user may check for tomorrow
|
|
||||||
- Don't use small text - defeats quick-glance purpose
|
|
||||||
- Don't use subtle colors - needs to anchor the view
|
|
||||||
- Don't abbreviate day name - "Mon" feels rushed, "Monday" feels calm
|
|
||||||
|
|
||||||
### User's Tasks Section
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Highlighted section with light blue background
|
|
||||||
- Header: "Your Tasks" with user's name
|
|
||||||
- Tasks listed with time, description, status
|
|
||||||
- Visually separated from other family members' tasks
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- User needs to find THEIR tasks instantly (< 2 seconds)
|
|
||||||
- Background color creates visual separation without being aggressive
|
|
||||||
- Name personalization = ownership and responsibility
|
|
||||||
- Time shown first = prioritization by urgency
|
|
||||||
- Separation prevents confusion about "whose task is this?"
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't make all tasks look the same - user will scan entire list
|
|
||||||
- Don't use subtle highlighting - stressed user will miss it
|
|
||||||
- Don't hide user's name - personalization creates accountability
|
|
||||||
- Don't sort by task type - time is what matters in morning
|
|
||||||
- Don't use red/alert colors - creates anxiety, not clarity
|
|
||||||
|
|
||||||
### Other Family Members' Tasks
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Standard white background
|
|
||||||
- Smaller font size (16px vs 18px for user's tasks)
|
|
||||||
- Collapsed by default, expandable
|
|
||||||
- Shows count: "3 other tasks today"
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- User's primary need is THEIR tasks (80% of use case)
|
|
||||||
- But they need family context (coordination)
|
|
||||||
- Collapsed = focus on user, but context available
|
|
||||||
- Count = awareness without overwhelming
|
|
||||||
- Smaller = visual hierarchy reinforces importance
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't hide completely - user needs family coordination awareness
|
|
||||||
- Don't show expanded by default - creates cognitive overload
|
|
||||||
- Don't use same visual weight - defeats hierarchy purpose
|
|
||||||
- Don't remove names - user needs to know "who's doing what"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each major visual element, document:
|
|
||||||
|
|
||||||
### [Element Name]
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
- [Specific design decisions]
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
- [Reasoning and user benefit]
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
- [Common mistakes to prevent]
|
|
||||||
```
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "This is brilliant! Let me make sure we capture everything:
|
|
||||||
- What alternatives did you consider?
|
|
||||||
- Why did you reject those options?
|
|
||||||
- What edge cases influenced this decision?
|
|
||||||
- How does this connect to the user's emotional state?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 3: Specify Interaction Patterns (15 min)
|
|
||||||
|
|
||||||
### Document behavior with intent
|
|
||||||
|
|
||||||
**Example (Dog Week - Task Completion):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
## Interaction: Mark Task Complete
|
|
||||||
|
|
||||||
### Tap to Complete
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Tap anywhere on task card to mark complete
|
|
||||||
- Immediate visual feedback: checkmark appears, card fades slightly
|
|
||||||
- Subtle success animation (gentle scale + fade)
|
|
||||||
- Task moves to "Completed" section at bottom
|
|
||||||
- Undo button appears for 5 seconds
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Large tap target = easy for rushed morning use
|
|
||||||
- Immediate feedback = confidence action registered
|
|
||||||
- Animation = positive reinforcement (dopamine hit)
|
|
||||||
- Move to bottom = visual progress, but not deleted (reassurance)
|
|
||||||
- Undo = safety net for accidental taps (common when rushed)
|
|
||||||
- 5 seconds = enough time to notice mistake, not annoying
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't require confirmation dialog - adds friction, breaks flow
|
|
||||||
- Don't use small checkbox - hard to tap when stressed/rushing
|
|
||||||
- Don't make animation aggressive - should feel calm and positive
|
|
||||||
- Don't delete task immediately - user needs reassurance it's saved
|
|
||||||
- Don't hide undo - mistakes happen, especially in morning chaos
|
|
||||||
- Don't keep undo visible forever - clutters interface
|
|
||||||
|
|
||||||
### Swipe to Reassign
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Swipe left on task reveals "Reassign" button
|
|
||||||
- Button shows family member icons
|
|
||||||
- Tap icon to reassign
|
|
||||||
- Confirmation: "Reassigned to [Name]"
|
|
||||||
- Original assignee gets notification
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Swipe = power user feature, doesn't clutter main interface
|
|
||||||
- Emergency reassignment is rare but critical (someone sick, etc.)
|
|
||||||
- Icons = quick visual selection, no typing
|
|
||||||
- Confirmation = reassurance action completed
|
|
||||||
- Notification = family coordination maintained
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't make reassign the primary action - it's edge case
|
|
||||||
- Don't require typing names - too slow for emergency
|
|
||||||
- Don't skip confirmation - user needs reassurance
|
|
||||||
- Don't skip notification - breaks family coordination
|
|
||||||
- Don't allow reassigning to someone not in family - data integrity
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each interaction, document:
|
|
||||||
|
|
||||||
### [Interaction Name]
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
- [Specific behavior]
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
- [User benefit and reasoning]
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
- [Mistakes to prevent]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 4: Specify States and Feedback (10 min)
|
|
||||||
|
|
||||||
### Document all states with reasoning
|
|
||||||
|
|
||||||
**Example (Dog Week - Task States):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
## Task States
|
|
||||||
|
|
||||||
### Upcoming (Default)
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- White background
|
|
||||||
- Black text
|
|
||||||
- Time shown in gray
|
|
||||||
- No special indicators
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Clean, calm appearance
|
|
||||||
- Easy to scan
|
|
||||||
- Time in gray = less visual weight (not urgent yet)
|
|
||||||
- Default state should feel neutral and manageable
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't use colors for upcoming tasks - creates false urgency
|
|
||||||
- Don't hide time - user needs to plan their morning
|
|
||||||
- Don't add badges/icons - clutters interface for most common state
|
|
||||||
|
|
||||||
### Due Soon (< 30 minutes)
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Subtle yellow left border (4px)
|
|
||||||
- Time shown in orange
|
|
||||||
- Small clock icon appears
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Yellow = attention without alarm
|
|
||||||
- Border = visual indicator without overwhelming
|
|
||||||
- Orange time = "pay attention to timing"
|
|
||||||
- Clock icon = reinforces temporal urgency
|
|
||||||
- Subtle = doesn't create panic, just awareness
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't use red - creates anxiety, not helpful urgency
|
|
||||||
- Don't flash or animate - too aggressive for morning use
|
|
||||||
- Don't use sound - user may be in quiet environment
|
|
||||||
- Don't make entire card yellow - too much visual weight
|
|
||||||
|
|
||||||
### Overdue
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Red left border (4px)
|
|
||||||
- Time shown in red with "Overdue" label
|
|
||||||
- Task card has subtle red tint (5% opacity)
|
|
||||||
- Notification sent to assignee
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Red = clear signal something needs attention
|
|
||||||
- Border + tint = impossible to miss, but not aggressive
|
|
||||||
- "Overdue" label = explicit communication (no guessing)
|
|
||||||
- Notification = ensures assignee knows (may not have app open)
|
|
||||||
- 5% tint = visible but not overwhelming
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't make entire card bright red - creates panic
|
|
||||||
- Don't flash or pulse - too aggressive, creates stress
|
|
||||||
- Don't use sound alerts - may be inappropriate timing
|
|
||||||
- Don't shame user - focus on "needs attention" not "you failed"
|
|
||||||
- Don't hide task - transparency maintains trust
|
|
||||||
|
|
||||||
### Completed
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Checkmark icon (green)
|
|
||||||
- Text has strikethrough
|
|
||||||
- Card fades to 60% opacity
|
|
||||||
- Moves to "Completed" section
|
|
||||||
- Shows completion time and who completed it
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Checkmark = universal symbol of completion
|
|
||||||
- Green = positive reinforcement
|
|
||||||
- Strikethrough = visual closure
|
|
||||||
- Fade = "done but still visible" (reassurance)
|
|
||||||
- Completion info = accountability and coordination
|
|
||||||
- Separate section = progress visible, doesn't clutter active tasks
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't remove immediately - user needs reassurance it's saved
|
|
||||||
- Don't use subtle checkmark - user needs clear confirmation
|
|
||||||
- Don't hide who completed it - family coordination requires transparency
|
|
||||||
- Don't use gray checkmark - green = positive emotion
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each state, document:
|
|
||||||
|
|
||||||
### [State Name]
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
- [Visual appearance]
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
- [User benefit]
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
- [Mistakes to prevent]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 5: Specify Error Handling (10 min)
|
|
||||||
|
|
||||||
### Document failure states with empathy
|
|
||||||
|
|
||||||
**Example (Dog Week - Network Errors):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
## Error Handling
|
|
||||||
|
|
||||||
### Network Unavailable
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Subtle banner at top: "Offline - showing cached schedule"
|
|
||||||
- Banner uses neutral gray (not red)
|
|
||||||
- All actions still work (queued for sync)
|
|
||||||
- Small cloud icon with slash
|
|
||||||
- Dismissible but reappears if action attempted
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- User shouldn't be blocked by network issues
|
|
||||||
- Morning routine can't wait for connectivity
|
|
||||||
- Cached data is usually sufficient (schedule doesn't change minute-to-minute)
|
|
||||||
- Gray = informational, not alarming
|
|
||||||
- Actions queue = user can continue working
|
|
||||||
- Dismissible = user controls their experience
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't block user with error modal - breaks morning flow
|
|
||||||
- Don't use red/error colors - network issues aren't user's fault
|
|
||||||
- Don't disable all actions - most can work offline
|
|
||||||
- Don't hide offline state - user needs to know why sync isn't happening
|
|
||||||
- Don't make banner permanent - user should be able to dismiss
|
|
||||||
|
|
||||||
### Task Completion Failed
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Task remains in "completing" state (spinner)
|
|
||||||
- After 5 seconds, shows inline error: "Couldn't save. Tap to retry."
|
|
||||||
- Error message is specific and actionable
|
|
||||||
- Retry button prominent
|
|
||||||
- Task doesn't move to completed section
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- User needs to know action didn't complete
|
|
||||||
- 5 seconds = reasonable wait before showing error
|
|
||||||
- Inline = error appears where user's attention is
|
|
||||||
- Specific message = user understands what happened
|
|
||||||
- Actionable = user knows what to do next
|
|
||||||
- Retry button = easy path to resolution
|
|
||||||
- Task stays in place = user doesn't lose context
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't silently fail - user needs to know
|
|
||||||
- Don't show generic "Error occurred" - not helpful
|
|
||||||
- Don't move task to completed - creates false sense of completion
|
|
||||||
- Don't require user to find task again - maintain context
|
|
||||||
- Don't blame user - focus on solution
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
For each error scenario:
|
|
||||||
|
|
||||||
### [Error Type]
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
- [How error is shown]
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
- [User benefit]
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
- [Mistakes to prevent]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 6: Specify Accessibility (10 min)
|
|
||||||
|
|
||||||
### Document inclusive design decisions
|
|
||||||
|
|
||||||
**Example (Dog Week - Task List Accessibility):**
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
## Accessibility
|
|
||||||
|
|
||||||
### Screen Reader Support
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- Each task has semantic HTML structure
|
|
||||||
- ARIA labels for all interactive elements
|
|
||||||
- Task status announced: "Walk Max, 8:00 AM, assigned to you, not completed"
|
|
||||||
- Completion action announces: "Task marked complete"
|
|
||||||
- Heading hierarchy: H1 for date, H2 for sections, H3 for tasks
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Screen reader users need same quick access to their tasks
|
|
||||||
- Semantic HTML = proper navigation and understanding
|
|
||||||
- Status announcement = full context without visual cues
|
|
||||||
- Action feedback = confirmation for non-visual users
|
|
||||||
- Heading hierarchy = easy navigation via landmarks
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't use divs for everything - semantic HTML matters
|
|
||||||
- Don't skip ARIA labels - "button" isn't descriptive enough
|
|
||||||
- Don't announce only task name - user needs full context
|
|
||||||
- Don't skip action feedback - non-visual users need confirmation
|
|
||||||
- Don't flatten heading structure - breaks navigation
|
|
||||||
|
|
||||||
### Keyboard Navigation
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- All actions accessible via keyboard
|
|
||||||
- Tab order follows visual hierarchy (user's tasks first)
|
|
||||||
- Enter/Space to complete task
|
|
||||||
- Arrow keys to navigate between tasks
|
|
||||||
- Escape to close expanded sections
|
|
||||||
- Focus indicators clearly visible (blue outline, 2px)
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Some users can't or prefer not to use mouse/touch
|
|
||||||
- Tab order matches visual priority (user's tasks most important)
|
|
||||||
- Standard key bindings = familiar, predictable
|
|
||||||
- Arrow keys = efficient navigation for power users
|
|
||||||
- Escape = universal "go back" pattern
|
|
||||||
- Visible focus = user always knows where they are
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't trap focus in modals without escape
|
|
||||||
- Don't use non-standard key bindings
|
|
||||||
- Don't hide focus indicators - accessibility requirement
|
|
||||||
- Don't make tab order illogical
|
|
||||||
- Don't require mouse for any action
|
|
||||||
|
|
||||||
### Color Contrast
|
|
||||||
|
|
||||||
WHAT:
|
|
||||||
|
|
||||||
- All text meets WCAG AA standards (4.5:1 minimum)
|
|
||||||
- Interactive elements have 3:1 contrast with background
|
|
||||||
- Status colors have additional non-color indicators (icons, borders)
|
|
||||||
- High contrast mode supported
|
|
||||||
|
|
||||||
WHY:
|
|
||||||
|
|
||||||
- Users with low vision need readable text
|
|
||||||
- Color alone isn't sufficient for status (color blind users)
|
|
||||||
- Multiple indicators = works for everyone
|
|
||||||
- High contrast mode = accessibility feature in OS
|
|
||||||
|
|
||||||
WHAT NOT TO DO:
|
|
||||||
|
|
||||||
- Don't rely on color alone for status
|
|
||||||
- Don't use low contrast text (looks modern but excludes users)
|
|
||||||
- Don't ignore WCAG standards - they're minimum requirements
|
|
||||||
- Don't break high contrast mode with custom colors
|
|
||||||
```
|
|
||||||
|
|
||||||
**Your turn:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Document accessibility considerations:
|
|
||||||
[Your specifications]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 7: Review and Refine (10 min)
|
|
||||||
|
|
||||||
### Checklist:
|
|
||||||
|
|
||||||
**Completeness:**
|
|
||||||
|
|
||||||
- ✓ Every visual element has WHAT + WHY + WHAT NOT
|
|
||||||
- ✓ All interactions documented
|
|
||||||
- ✓ All states specified
|
|
||||||
- ✓ Error handling covered
|
|
||||||
- ✓ Accessibility addressed
|
|
||||||
|
|
||||||
**Quality:**
|
|
||||||
|
|
||||||
- ✓ WHY explains user benefit, not just description
|
|
||||||
- ✓ WHAT NOT prevents specific AI mistakes
|
|
||||||
- ✓ Specifications are specific and actionable
|
|
||||||
- ✓ Design intent is preserved
|
|
||||||
- ✓ Edge cases considered
|
|
||||||
|
|
||||||
**AI Support:**
|
|
||||||
|
|
||||||
```
|
|
||||||
Agent: "Your design brilliance is captured beautifully! Let me verify:
|
|
||||||
- Have we documented every nuance of your thinking?
|
|
||||||
- Are there any alternatives you considered that we should note?
|
|
||||||
- Any edge cases we haven't covered?
|
|
||||||
- Is your creative intent crystal clear?"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Step 8: Save Your Specifications
|
|
||||||
|
|
||||||
**Create file:** `C-Scenarios/[scenario-name]/Frontend/[page-name]-specifications.md`
|
|
||||||
|
|
||||||
**Use template from:** `workflows/4-ux-design/templates/page-specification.template.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## What You've Accomplished
|
|
||||||
|
|
||||||
✅ **Complete specifications** - Every design decision documented
|
|
||||||
✅ **Preserved intent** - Your creative thinking captured
|
|
||||||
✅ **Prevented mistakes** - AI knows what NOT to do
|
|
||||||
✅ **Accessible design** - Inclusive from the start
|
|
||||||
✅ **Eternal life** - Your brilliance lives forever in text
|
|
||||||
|
|
||||||
**This is not factory work - this is where your genius becomes immortal!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## The Power of Conceptual Specs
|
|
||||||
|
|
||||||
**Traditional approach:**
|
|
||||||
|
|
||||||
- Designer creates mockup
|
|
||||||
- Developer implements
|
|
||||||
- Intent gets lost
|
|
||||||
- Result is "close but wrong"
|
|
||||||
|
|
||||||
**WDS approach:**
|
|
||||||
|
|
||||||
- Designer thinks deeply with AI partner
|
|
||||||
- AI helps capture every nuance
|
|
||||||
- Specifications preserve creative integrity
|
|
||||||
- Implementation matches intent perfectly
|
|
||||||
|
|
||||||
**Your specifications completely replace prompting** - providing clarity that works like clockwork.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
**Immediate:**
|
|
||||||
|
|
||||||
- Review specifications with stakeholders
|
|
||||||
- Validate against user needs
|
|
||||||
- Test with developers (can they implement from this?)
|
|
||||||
|
|
||||||
**Next Module:**
|
|
||||||
|
|
||||||
- [Module 13: Validate Specifications](../module-13-validate-specifications/module-13-overview.md)
|
|
||||||
- Ensure completeness and test logic
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Common Questions
|
|
||||||
|
|
||||||
**Q: How detailed should specifications be?**
|
|
||||||
A: Detailed enough that AI can implement correctly without guessing. If you'd need to explain it to a developer, document it.
|
|
||||||
|
|
||||||
**Q: Isn't this a lot of writing?**
|
|
||||||
A: AI agents help you! They're fascinated by your thinking and help capture it. You're not grinding out docs - you're preserving your genius.
|
|
||||||
|
|
||||||
**Q: What if I don't know why I made a decision?**
|
|
||||||
A: That's the value! The process of documenting WHY helps you think deeper and make better decisions.
|
|
||||||
|
|
||||||
**Q: Can I reuse specifications across pages?**
|
|
||||||
A: Yes! Common patterns become design system components. Document once, reference everywhere.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tips for Success
|
|
||||||
|
|
||||||
**DO ✅**
|
|
||||||
|
|
||||||
- Work with AI as thinking partner
|
|
||||||
- Document alternatives you rejected
|
|
||||||
- Be specific about user context
|
|
||||||
- Prevent specific mistakes (not generic warnings)
|
|
||||||
- Capture your creative reasoning
|
|
||||||
|
|
||||||
**DON'T ❌**
|
|
||||||
|
|
||||||
- Write generic descriptions
|
|
||||||
- Skip the WHY (that's where intent lives)
|
|
||||||
- Forget WHAT NOT TO DO (AI will make "helpful" mistakes)
|
|
||||||
- Rush through this - it's where brilliance is preserved
|
|
||||||
- Think of this as factory work - it's creative documentation
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Your specifications give your designs eternal life. This is where your creative integrity becomes immortal!**
|
|
||||||
|
|
||||||
[← Back to Module 12](module-12-overview.md) | [Next: Module 13 →](../module-13-validate-specifications/module-13-overview.md)
|
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
# WDS Course: From Designer to Linchpin
|
||||||
|
|
||||||
|
**Master the complete WDS methodology and become indispensable as a designer in the AI era**
|
||||||
|
|
||||||
|
[Watch the Course Introduction Video](https://www.youtube.com/watch?v=CQ5Aai_r-uo)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Welcome to the WDS Course
|
||||||
|
|
||||||
|
This comprehensive course teaches you the complete WDS workflow through **18 practical modules** that transform how you design products.
|
||||||
|
|
||||||
|
**The paradigm shift:**
|
||||||
|
|
||||||
|
- The design becomes the specification
|
||||||
|
- The specification becomes the product
|
||||||
|
- The code is just the printout
|
||||||
|
|
||||||
|
**What you'll become:**
|
||||||
|
|
||||||
|
- The linchpin designer who makes things happen
|
||||||
|
- The gatekeeper between business goals and user needs
|
||||||
|
- The irreplaceable designer in the AI era
|
||||||
|
|
||||||
|
**Time investment:** ~10 hours total
|
||||||
|
**Result:** Complete mastery of WDS methodology from project brief to AI-ready specifications
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Who Created WDS?
|
||||||
|
|
||||||
|
**MÃ¥rten Angner** is a UX designer and founder of Whiteport, a design and development agency based in Sweden. After years of working with AI tools, MÃ¥rten observed that traditional design handoffs were breaking down. Designers would create beautiful mockups, hand them off to developers, and watch their creative intent get lost in translation.
|
||||||
|
|
||||||
|
MÃ¥rten developed WDS to solve this problem - a methodology where design thinking is preserved and amplified through AI implementation, not diluted and lost.
|
||||||
|
|
||||||
|
**The Mission:** WDS is completely free and open-source. MÃ¥rten created it as a **plugin module for BMad Method** - an open-source AI-augmented development framework - to give designers everywhere the tools they need to thrive in the AI era.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Before You Start
|
||||||
|
|
||||||
|
**[→ Getting Started Guide](00-getting-started-overview.md)**
|
||||||
|
|
||||||
|
Review prerequisites, choose your learning path, and get support:
|
||||||
|
|
||||||
|
- **Prerequisites** - Skills, tools, time investment
|
||||||
|
- **Learning Paths** - Full immersion, quick start, or self-paced
|
||||||
|
- **Support** - Testimonials, FAQ, community
|
||||||
|
|
||||||
|
**Reading time:** ~15 minutes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Course Structure
|
||||||
|
|
||||||
|
Each module contains:
|
||||||
|
|
||||||
|
- **Lessons** - Theory and concepts (with NotebookLM audio support)
|
||||||
|
- **Tutorial** - Step-by-step hands-on guide (for practical modules)
|
||||||
|
- **Practice** - Apply to your own project
|
||||||
|
|
||||||
|
**Learning format:**
|
||||||
|
|
||||||
|
- **Lessons** - Read as documentation or generate audio with NotebookLM
|
||||||
|
- **Tutorials** - Follow step-by-step guides with AI support
|
||||||
|
- **Practice** - Apply to real projects as you learn
|
||||||
|
- **Workshops** - Use for team training
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Course Modules
|
||||||
|
|
||||||
|
### Foundation (Modules 1-2)
|
||||||
|
|
||||||
|
| Module | Title | Agent | Time |
|
||||||
|
|--------|-------|-------|------|
|
||||||
|
| 01 | [Why WDS Matters](../module-01-why-wds-matters/module-01-overview.md) | — | 40 min |
|
||||||
|
| 02 | [Installation & Setup](../module-02-installation-setup/module-02-overview.md) | — | 45 min |
|
||||||
|
|
||||||
|
### Alignment (Module 3) — Optional
|
||||||
|
|
||||||
|
| Module | Title | Agent | Time |
|
||||||
|
|--------|-------|-------|------|
|
||||||
|
| 03 | [Alignment & Signoff](../module-03-alignment-signoff/module-03-overview.md) | Saga | 55-75 min |
|
||||||
|
|
||||||
|
*Skip if doing it yourself — go straight to Product Brief*
|
||||||
|
|
||||||
|
### Strategy Phase (Modules 4-6) — Agent: Saga
|
||||||
|
|
||||||
|
| Module | Title | Agent | Time |
|
||||||
|
|--------|-------|-------|------|
|
||||||
|
| 04 | [Product Brief](../module-04-product-brief/module-04-overview.md) | Saga | 60 min |
|
||||||
|
| 05 | [Platform Requirements](../module-05-platform-requirements/module-05-platform-requirements-overview.md) | Saga | 30 min |
|
||||||
|
| 06 | [Trigger Mapping](../module-06-trigger-mapping/module-06-overview.md) | Saga | 95-125 min |
|
||||||
|
|
||||||
|
### Design Phase (Modules 7-13) — Agent: Freya
|
||||||
|
|
||||||
|
| Module | Title | Agent | Focus | Time |
|
||||||
|
|--------|-------|-------|-------|------|
|
||||||
|
| 07 | [Design Phase Introduction](../module-07-design-phase/module-07-design-phase-overview.md) | Freya | Overview | 20 min |
|
||||||
|
| 08 | [Outline Scenarios](../module-08-outline-scenarios/module-08-outline-scenarios-overview.md) | Freya | UX | 30 min |
|
||||||
|
| 09 | [Conceptual Sketching](../module-09-conceptual-sketching/module-09-conceptual-sketching-overview.md) | Freya | UX | 60 min |
|
||||||
|
| 10 | [Storyboarding](../module-10-storyboarding/module-10-storyboarding-overview.md) | Freya | UX | 45 min |
|
||||||
|
| 11 | [Conceptual Specifications](../module-11-conceptual-specifications/module-11-conceptual-specifications-overview.md) | Freya | UX | 60 min |
|
||||||
|
| 12 | [Functional Components](../module-12-functional-components/module-12-functional-components-overview.md) | Freya | UX | 45 min |
|
||||||
|
| 13 | [Design System](../module-13-design-system/module-13-design-system-overview.md) | Freya | Systems | 30 min |
|
||||||
|
|
||||||
|
### Build & Deliver Phase (Modules 14-16) — Agents: Freya + Idunn
|
||||||
|
|
||||||
|
| Module | Title | Agent | Focus | Time |
|
||||||
|
|--------|-------|-------|-------|------|
|
||||||
|
| 14 | [Agentic Development](../module-14-agentic-development/module-14-agentic-development-overview.md) | Idunn | 7-activity menu | 60 min |
|
||||||
|
| 15 | [Visual Design & Assets](../module-15-visual-design/module-15-visual-design-overview.md) | Freya | Asset pipeline | 60 min |
|
||||||
|
| 16 | [Design Delivery](../module-16-design-delivery/module-16-design-delivery-overview.md) | Freya | Handover | 45 min |
|
||||||
|
|
||||||
|
### Validate & Evolve (Modules 17-18) — Agents: Freya + Idunn
|
||||||
|
|
||||||
|
| Module | Title | Agent | Time |
|
||||||
|
|--------|-------|-------|------|
|
||||||
|
| 17 | [Usability Testing](../module-17-usability-testing/module-17-usability-testing-overview.md) | Freya | 45 min |
|
||||||
|
| 18 | [Product Evolution](../module-18-product-evolution/module-18-product-evolution-overview.md) | Idunn | 30 min |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Learning Paths
|
||||||
|
|
||||||
|
**Complete Course:** All 18 modules (~10 hours)
|
||||||
|
|
||||||
|
**Quick Start:** Modules 01, 02, 04, 06, 08, 11 (~6 hours)
|
||||||
|
|
||||||
|
**Strategy Only:** Modules 1-6 (~4 hours)
|
||||||
|
|
||||||
|
**Design Deep Dive:** Modules 7-13 (~5 hours)
|
||||||
|
|
||||||
|
**Build & Deliver:** Modules 14-16 (~3 hours)
|
||||||
|
|
||||||
|
**Phase-Specific:** Jump to any phase as needed
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Three Agents
|
||||||
|
|
||||||
|
WDS uses three AI agents, each with a specific domain:
|
||||||
|
|
||||||
|
| Agent | Domain | Phase | Modules |
|
||||||
|
|-------|--------|-------|---------|
|
||||||
|
| **Saga** | Strategy | Strategy | 3-6 |
|
||||||
|
| **Freya** | UX, Visual Design & Assets | Design & Deliver | 7-13, 15-17 |
|
||||||
|
| **Idunn** | Development & Evolution | Build & Evolve | 14, 18 |
|
||||||
|
|
||||||
|
Each agent maintains focus on their domain while coordinating with the others.
|
||||||
|
|
||||||
|
**Idunn's 7 activities** (Module 14): Prototyping, Development, Bugfixing, Evolution, Analysis, Reverse Engineering, and Acceptance Testing — all menu-driven from a single entry point.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## NotebookLM Integration
|
||||||
|
|
||||||
|
Each module has matching content for NotebookLM:
|
||||||
|
|
||||||
|
- Feed module lessons to NotebookLM
|
||||||
|
- Generate audio podcasts for learning on the go
|
||||||
|
- Generate video presentations for team training
|
||||||
|
- Create study guides and summaries
|
||||||
|
|
||||||
|
**All modules are optimized for AI-assisted learning.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Module Structure
|
||||||
|
|
||||||
|
Every module follows the same pattern:
|
||||||
|
|
||||||
|
**1. Inspiration (10 min)**
|
||||||
|
|
||||||
|
- Why this step matters
|
||||||
|
- The transformation you'll experience
|
||||||
|
- Real-world impact
|
||||||
|
|
||||||
|
**2. Teaching (20 min)**
|
||||||
|
|
||||||
|
- How to do it with confidence
|
||||||
|
- AI support at each step
|
||||||
|
- Dog Week example walkthrough
|
||||||
|
|
||||||
|
**3. Practice (10 min)**
|
||||||
|
|
||||||
|
- Apply to your own project
|
||||||
|
- Step-by-step instructions
|
||||||
|
- Success criteria
|
||||||
|
|
||||||
|
**4. Tutorial (optional)**
|
||||||
|
|
||||||
|
- Quick step-by-step guide
|
||||||
|
- "Just show me how to do it"
|
||||||
|
- For practical modules only
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## After the Course
|
||||||
|
|
||||||
|
Once you've completed the modules:
|
||||||
|
|
||||||
|
1. **[Documentation Guide](../../docs-guide.md)** - Reference documentation
|
||||||
|
2. **[Quick Start](../../quick-start/00-start-here.md)** - Try WDS with agent
|
||||||
|
3. **[Community](https://discord.gg/whiteport)** - Get help and share your work
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
**What you need:**
|
||||||
|
|
||||||
|
- Basic design thinking and UX principles
|
||||||
|
- Ability to sketch interfaces (hand-drawn or digital)
|
||||||
|
- Understanding of user needs and business goals
|
||||||
|
- Willingness to think deeply about WHY
|
||||||
|
|
||||||
|
**What you DON'T need:**
|
||||||
|
|
||||||
|
- ⌠Coding skills
|
||||||
|
- ⌠Advanced technical knowledge
|
||||||
|
- ⌠Experience with AI tools
|
||||||
|
- ⌠Formal design education
|
||||||
|
|
||||||
|
**If you can design interfaces and explain your thinking, you're ready to start.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ready to Begin?
|
||||||
|
|
||||||
|
Ten hours of learning. A lifetime of being indispensable.
|
||||||
|
|
||||||
|
**[Start with Module 01: Why WDS Matters →](../module-01-why-wds-matters/module-01-overview.md)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**This course is free and open-source**
|
||||||
|
**Created by MÃ¥rten Angner and the Whiteport team**
|
||||||
|
**Integrated with BMad Method for seamless design-to-development workflow**
|
||||||
|
|
@ -51,7 +51,7 @@ Once you've reviewed these sections, you're ready to begin:
|
||||||
|
|
||||||
Or review the full course structure:
|
Or review the full course structure:
|
||||||
|
|
||||||
**[← Back to Course Overview](../00-course-overview.md)**
|
**[← Back to Course Overview](00-course-overview.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
**Breakdown:**
|
**Breakdown:**
|
||||||
|
|
||||||
- **Week 1-2:** Foundation modules (Why WDS, Project Brief)
|
- **Week 1-2:** Foundation modules (Why WDS, Product Brief)
|
||||||
- **Week 3-4:** Core workflow (Trigger Mapping, Scenarios)
|
- **Week 3-4:** Core workflow (Trigger Mapping, Scenarios)
|
||||||
- **Week 5-6:** Advanced topics (Design Systems, Handoff)
|
- **Week 5-6:** Advanced topics (Design Systems, Handoff)
|
||||||
- **Ongoing:** Practice with your own projects
|
- **Ongoing:** Practice with your own projects
|
||||||
|
|
@ -95,4 +95,4 @@ You have everything you need if you can answer YES to these:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Overview](overview.md) | [Next: Learning Paths →](02-learning-paths.md)
|
[← Back to Overview](00-getting-started-overview.md) | [Next: Learning Paths →](02-learning-paths.md)
|
||||||
|
|
@ -16,10 +16,10 @@
|
||||||
|
|
||||||
### Option 2: Quick Start
|
### Option 2: Quick Start
|
||||||
|
|
||||||
- Focus on core modules (Module 01, 02, 04, 06)
|
- Focus on core modules (Modules 01, 02, 04, 06, 08, 11)
|
||||||
- Skip advanced topics initially
|
- Skip advanced topics initially
|
||||||
- Get started fast, learn more later
|
- Get started fast, learn more later
|
||||||
- **Time:** 2-3 weeks, 3-4 hours total
|
- **Time:** 3-4 weeks, ~6 hours total
|
||||||
- **Best for:** Designers who need results quickly
|
- **Best for:** Designers who need results quickly
|
||||||
|
|
||||||
### Option 3: Self-Paced
|
### Option 3: Self-Paced
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
|
|
||||||
By the end of this course, you'll have created:
|
By the end of this course, you'll have created:
|
||||||
|
|
||||||
**1. Complete Project Brief**
|
**1. Complete Product Brief**
|
||||||
|
|
||||||
- Vision and goals clearly defined
|
- Vision and goals clearly defined
|
||||||
- Stakeholders and constraints documented
|
- Stakeholders and constraints documented
|
||||||
|
|
@ -88,12 +88,12 @@ Each module contains:
|
||||||
|
|
||||||
Choose your path and start learning:
|
Choose your path and start learning:
|
||||||
|
|
||||||
**[Start Module 01: Why WDS Matters →](../module-01-why-wds-matters/module-01-overview.md)**
|
**[Start Module 01: Why WDS Matters →](../module-01-why-wds-matters/module-01-overview.md)**
|
||||||
|
|
||||||
Or check support resources first:
|
Or check support resources first:
|
||||||
|
|
||||||
**[Continue to Support →](03-support.md)**
|
**[Continue to Support →](03-support.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Prerequisites](01-prerequisites.md) | [Next: Support →](03-support.md)
|
[↠Back to Prerequisites](01-prerequisites.md) | [Next: Support →](03-support.md)
|
||||||
|
|
@ -121,7 +121,7 @@ You have everything you need:
|
||||||
|
|
||||||
Or review the full course structure:
|
Or review the full course structure:
|
||||||
|
|
||||||
**[← Back to Course Overview](../00-course-overview.md)**
|
**[← Back to Course Overview](00-course-overview.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -61,7 +61,7 @@ Great products are not created in 24 hours with a couple of prompts. Designers h
|
||||||
### Core Resources
|
### Core Resources
|
||||||
- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio)
|
- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio)
|
||||||
- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
|
- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
|
||||||
- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md)
|
- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn/00-course-overview.md)
|
||||||
- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD)
|
- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD)
|
||||||
- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
|
- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
|
||||||
- [Whiteport Website](https://whiteport.com)
|
- [Whiteport Website](https://whiteport.com)
|
||||||
|
|
@ -150,7 +150,7 @@ WDS Presentation Page - Discover how WDS transforms designers into strategic lea
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
||||||
|
|
||||||
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn/00-course-overview.md
|
||||||
|
|
||||||
🛠️ Foundation & Related Tools
|
🛠️ Foundation & Related Tools
|
||||||
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
||||||
|
|
@ -157,7 +157,7 @@ WDS Presentation Page - Discover how WDS transforms designers into strategic lea
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
||||||
|
|
||||||
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn/00-course-overview.md
|
||||||
|
|
||||||
🛠️ Foundation & Related Tools
|
🛠️ Foundation & Related Tools
|
||||||
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
||||||
|
|
@ -65,7 +65,7 @@ Then we translate that into a strategy you can actually execute.
|
||||||
### Core Resources
|
### Core Resources
|
||||||
- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio)
|
- [WDS Framework Repository](https://github.com/whiteport-collective/whiteport-design-studio)
|
||||||
- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
|
- [WDS Presentation Page](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
|
||||||
- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md)
|
- [WDS Course Overview](https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn/00-course-overview.md)
|
||||||
- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD)
|
- [BMAD Method](https://github.com/bmad-code-org/BMAD-METHOD)
|
||||||
- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
|
- [BMAD Masterclass](https://www.youtube.com/watch?v=LorEJPrALcg)
|
||||||
- [Whiteport Website](https://whiteport.com)
|
- [Whiteport Website](https://whiteport.com)
|
||||||
|
|
@ -128,7 +128,7 @@ WDS Presentation Page - Discover how WDS transforms designers into strategic lea
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md
|
||||||
|
|
||||||
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
WDS Course Overview - Complete learning path from designer to linchpin, master the full methodology
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn-wds/00-course-overview.md
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/docs/learn/00-course-overview.md
|
||||||
|
|
||||||
🛠️ Foundation & Related Tools
|
🛠️ Foundation & Related Tools
|
||||||
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
BMAD Method - The open-source AI-augmented development framework that powers WDS
|
||||||
|
|
@ -106,8 +106,10 @@ The bottleneck in product development used to be coding. AI demolished that. Now
|
||||||
|
|
||||||
Now that you understand the problem, let's explore the solution.
|
Now that you understand the problem, let's explore the solution.
|
||||||
|
|
||||||
**[Continue to Lesson 2: The Solution →](lesson-02-the-solution.md)**
|
**[Continue to Lesson 2: Designer as Strategic Thinker →](lesson-02-designer-as-strategic-thinker.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Module Overview](module-01-overview.md) | [Next: Lesson 2 →](lesson-02-the-solution.md)
|
[← Back to Module Overview](module-01-overview.md) | [Next: Lesson 2 →](lesson-02-designer-as-strategic-thinker.md)
|
||||||
|
|
||||||
|
*Part of Module 01: Why WDS Matters*
|
||||||
|
|
@ -0,0 +1,483 @@
|
||||||
|
# Module 01: Why WDS Matters
|
||||||
|
|
||||||
|
## Lesson 2: Designer as Strategic Thinker
|
||||||
|
|
||||||
|
**Your role just changed. Here's why.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Shift Everyone Missed
|
||||||
|
|
||||||
|
Everyone knows AI made code cheap.
|
||||||
|
|
||||||
|
**What most people missed:** AI made strategic thinking cheap too.
|
||||||
|
|
||||||
|
**And that changes everything for designers.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Your Old Role: Pixel Pusher
|
||||||
|
|
||||||
|
For most of your career, the designer's role was clear:
|
||||||
|
|
||||||
|
**Make it pretty. Make it usable. Hand it off.**
|
||||||
|
|
||||||
|
**The Agile era designer:**
|
||||||
|
- Attended meetings constantly
|
||||||
|
- Sketched quick mockups
|
||||||
|
- Iterated through prototypes
|
||||||
|
- Let PMs handle strategy
|
||||||
|
- Communication was cheap, so meetings were endless
|
||||||
|
- Decisions emerged through discussion
|
||||||
|
|
||||||
|
**Why this worked:**
|
||||||
|
- Communication: Cheap (constant meetings)
|
||||||
|
- Coding: Expensive (developer time valuable)
|
||||||
|
- Strategy: PM's job (designers executed)
|
||||||
|
|
||||||
|
**Your value:** Visual craft + usability expertise
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The AI Era Changed the Game
|
||||||
|
|
||||||
|
Now everything has changed.
|
||||||
|
|
||||||
|
**AI didn't just make coding cheaper—it made strategic thinking cheaper.**
|
||||||
|
|
||||||
|
**For you as a designer, this means:**
|
||||||
|
- Code generation: Nearly free (AI agents)
|
||||||
|
- Communication: Expensive (people expect polished thinking)
|
||||||
|
- Strategy: Now accessible (AI thinking partners)
|
||||||
|
|
||||||
|
**The new reality:**
|
||||||
|
|
||||||
|
You're expected to arrive with your thoughts in **lovable style** - polished, strategic, shows a lot of wild new things, but far from ready to implement. Also, and here is the problem, with no connection to the thinking behind it and why you made it!
|
||||||
|
|
||||||
|
"Click instead of discuss."
|
||||||
|
|
||||||
|
But where do you get the time to forge polished strategic thinking?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Amateur Response: Vibe Coding
|
||||||
|
|
||||||
|
> "AI can code now. I'll skip strategy and just generate prototypes!"
|
||||||
|
|
||||||
|
**The flow:**
|
||||||
|
1. Prompt AI: "Build me a login screen"
|
||||||
|
2. Get generic output
|
||||||
|
3. Tweak colors and spacing
|
||||||
|
4. Generate 5 variations
|
||||||
|
5. Present to team: "Which do you like?"
|
||||||
|
6. Team picks one
|
||||||
|
7. Realize it doesn't solve the actual problem
|
||||||
|
8. Repeat
|
||||||
|
|
||||||
|
**The result:**
|
||||||
|
- Flooding colleagues with **lovecoded colorful distractions**
|
||||||
|
- Prototypes without substance
|
||||||
|
- Pretty mockups disconnected from strategy
|
||||||
|
- "Look what I made!" instead of "Here's what we need"
|
||||||
|
- Burning credits on endless regeneration
|
||||||
|
|
||||||
|
**You're still a pixel pusher. Just faster and with more noise. The signal was lost. Result: Who cares and so what!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Your New Role: Strategic Thinker
|
||||||
|
|
||||||
|
**The insight everyone missed:**
|
||||||
|
|
||||||
|
It's not only **coding** that got cheaper.
|
||||||
|
|
||||||
|
**Strategic thinking** got cheaper too.
|
||||||
|
|
||||||
|
**This is the WDS insight.**
|
||||||
|
|
||||||
|
Everyone sees AI making code cheap. The amateurs stop there.
|
||||||
|
|
||||||
|
**WDS sees that AI also made strategic thinking cheap.**
|
||||||
|
|
||||||
|
**For designers, this changes everything:**
|
||||||
|
|
||||||
|
**Amateur designers use AI for:**
|
||||||
|
- Visual generation (prompt for pretty outputs)
|
||||||
|
- Fast prototyping (churn variations)
|
||||||
|
- Execution only (skip the thinking)
|
||||||
|
|
||||||
|
**WDS designers use AI for:**
|
||||||
|
- **Strategic thinking FIRST** (forge with Saga, Freya as thinking partners)
|
||||||
|
- Think through problems collaboratively
|
||||||
|
- Improve thinking iteratively
|
||||||
|
- Elevate ideas and connect to business goals
|
||||||
|
- Forge thinking in the furnace of logic, flow, and UX
|
||||||
|
- **Create ideas that matter** instead of churning out prototypes
|
||||||
|
- **Then generate** visuals from strategic foundation
|
||||||
|
|
||||||
|
**The WDS difference:**
|
||||||
|
|
||||||
|
> Everyone uses AI for code.
|
||||||
|
> **WDS uses AI for strategic thinking first, then code.**
|
||||||
|
|
||||||
|
**You're no longer just making it pretty. You're shaping strategy.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Three Eras of Design
|
||||||
|
|
||||||
|
| Era | Your Role | Tools | Value |
|
||||||
|
|-----|-----------|-------|-------|
|
||||||
|
| **Waterfall** | Execute specs | Photoshop, wireframes | Visual craft |
|
||||||
|
| **Agile** | Collaborate constantly | Figma, Slack | Craft + collaboration |
|
||||||
|
| **AI (amateur)** | Generate prototypes | AI + Figma | Fast prototypes |
|
||||||
|
| **AI (WDS)** | **Forge strategy** | **AI thinking partners** | **Strategic craft** |
|
||||||
|
|
||||||
|
**The shift:**
|
||||||
|
|
||||||
|
**Agile era designer:**
|
||||||
|
> "Let's meet and figure it out together. I'll sketch options."
|
||||||
|
|
||||||
|
**Amateur AI designer:**
|
||||||
|
> "AI can generate options. Let me show you 5 variations!"
|
||||||
|
|
||||||
|
**WDS designer:**
|
||||||
|
> "I forged a complete strategic solution with AI. Here's why it works, who it's for, and how it connects to our goals. Ready to implement."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Present to Team, Not Prototype With Them
|
||||||
|
|
||||||
|
### Old Model: Constant Collaboration
|
||||||
|
|
||||||
|
**How you worked:**
|
||||||
|
1. Meet constantly
|
||||||
|
2. Discuss vague ideas
|
||||||
|
3. Sketch something
|
||||||
|
4. Review together
|
||||||
|
5. Discuss changes
|
||||||
|
6. Re-sketch
|
||||||
|
7. Repeat until deadline
|
||||||
|
|
||||||
|
**Your value:** Visual skills + collaboration
|
||||||
|
|
||||||
|
**The problem:** Ideas emerge through iteration, not strategic thinking
|
||||||
|
|
||||||
|
### New Model: Strategic Presentation
|
||||||
|
|
||||||
|
**How you work now:**
|
||||||
|
1. Forge thinking with AI assistance (Saga, Freya)
|
||||||
|
2. Create complete strategic specifications
|
||||||
|
3. Present polished vision to team
|
||||||
|
4. They review substance, not sketches
|
||||||
|
5. Aligned feedback
|
||||||
|
6. Generate implementation correctly (once)
|
||||||
|
|
||||||
|
**Your value:** Strategic thinking + visual craft + business alignment
|
||||||
|
|
||||||
|
**The benefit:** Ideas emerge from strategic thinking, then get visualized
|
||||||
|
|
||||||
|
**The shift:**
|
||||||
|
- From "let's figure it out together in meetings"
|
||||||
|
- To "I forged this into coherent strategy, let's align"
|
||||||
|
|
||||||
|
**Communication becomes strategic alignment**, not iterative discovery.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Furnace of Logic
|
||||||
|
|
||||||
|
**What WDS provides you as a designer:**
|
||||||
|
|
||||||
|
### Phase 1: Forge Strategy (Module 04-06)
|
||||||
|
|
||||||
|
**With Saga's help:**
|
||||||
|
- Product Brief: Align vision with business goals
|
||||||
|
- Trigger Mapping: Connect user psychology to business value
|
||||||
|
- Feature scoring: Prioritize ruthlessly based on data
|
||||||
|
|
||||||
|
**You're not just designing. You're thinking strategically about what to build and why.**
|
||||||
|
|
||||||
|
### Phase 2: Forge UX (Module 08-11)
|
||||||
|
|
||||||
|
**With Freya's help:**
|
||||||
|
- Scenario outlining: Define complete user journeys
|
||||||
|
- Conceptual sketching: Visualize strategic solutions
|
||||||
|
- Storyboarding: Document all transformations
|
||||||
|
- Specifications: Capture every decision with rationale
|
||||||
|
|
||||||
|
**You're not just sketching. You're forging complete strategic UX specifications.**
|
||||||
|
|
||||||
|
**This is the furnace.**
|
||||||
|
|
||||||
|
AI agents help you **forge strategic thinking** through logic, user psychology, and business alignment.
|
||||||
|
|
||||||
|
**The output:** Polished specifications that matter.
|
||||||
|
|
||||||
|
**Not prototypes to iterate on. Strategic ideas to implement.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## WDS: Your Strategic Rocket Ship With Guard Rails
|
||||||
|
|
||||||
|
**The problem with amateur autonomous design:**
|
||||||
|
|
||||||
|
AI lets you generate autonomously. Great!
|
||||||
|
|
||||||
|
But without strategic framework, you flood colleagues with **lovecoded colorful distractions**:
|
||||||
|
- 5 login variations with no strategic reasoning
|
||||||
|
- Pretty mockups disconnected from business goals
|
||||||
|
- Endless options without clear purpose
|
||||||
|
- "Which do you like?" instead of "Here's what we need and why"
|
||||||
|
|
||||||
|
**The traditional response:** Control. Oversight. Slow you down.
|
||||||
|
|
||||||
|
**The WDS response:** Give you a strategic rocket ship with guard rails.
|
||||||
|
|
||||||
|
### The Rocket Ship (Empowerment)
|
||||||
|
|
||||||
|
**WDS enables you to work autonomously:**
|
||||||
|
- Forge strategy with Saga (no waiting for PM)
|
||||||
|
- Create UX with Freya (no waiting for design lead)
|
||||||
|
- Generate specifications complete with rationale
|
||||||
|
|
||||||
|
**You can move fast. Autonomously. Strategically.**
|
||||||
|
|
||||||
|
### The Guard Rails (Strategic Discipline)
|
||||||
|
|
||||||
|
**WDS enforces strategic rigor:**
|
||||||
|
- Every scenario connects to Trigger Map (no designing in vacuum)
|
||||||
|
- Every decision traces to user driving force (no decoration)
|
||||||
|
- Every specification includes business context (no guessing)
|
||||||
|
- Present complete thinking (no flooding with half-baked ideas)
|
||||||
|
|
||||||
|
**You have freedom within strategic structure.**
|
||||||
|
|
||||||
|
### The Result
|
||||||
|
|
||||||
|
**With WDS:**
|
||||||
|
- Make your strategic ideas reality (rocket ship power)
|
||||||
|
- Without flooding colleagues (guard rails prevent chaos)
|
||||||
|
- Autonomous but aligned (independent but strategic)
|
||||||
|
- Fast but focused (speed with strategic substance)
|
||||||
|
|
||||||
|
**The old dichotomy:**
|
||||||
|
> Either you work slowly with oversight, OR you work fast with chaos.
|
||||||
|
|
||||||
|
**The WDS solution:**
|
||||||
|
> Work fast AND stay strategically aligned.
|
||||||
|
|
||||||
|
### The Business Opportunity
|
||||||
|
|
||||||
|
**WDS isn't just a personal methodology. It's a platform businesses can deploy.**
|
||||||
|
|
||||||
|
**The business model:**
|
||||||
|
|
||||||
|
Businesses can **fork WDS** and customize it:
|
||||||
|
- Implement their own guard rails (company standards, design systems, brand guidelines)
|
||||||
|
- Define their own ways of working (processes, approvals, workflows)
|
||||||
|
- Embed their strategic frameworks (business goals, success metrics, user research)
|
||||||
|
- Customize AI agents with company-specific knowledge
|
||||||
|
|
||||||
|
**Then give this tool to their people.**
|
||||||
|
|
||||||
|
**The result for businesses:**
|
||||||
|
|
||||||
|
**Without WDS:**
|
||||||
|
- Either slow employees down with oversight
|
||||||
|
- OR let them work fast but flood the organization with lovecoded colorful distractions
|
||||||
|
- Cannot trust autonomous work
|
||||||
|
- AI makes the chaos worse (faster bad output)
|
||||||
|
|
||||||
|
**With WDS (customized for your business):**
|
||||||
|
- Employees work autonomously AND stay aligned with business strategy
|
||||||
|
- Every output connects to company goals
|
||||||
|
- Guard rails enforce company standards automatically
|
||||||
|
- AI amplifies strategic thinking, not just execution
|
||||||
|
- **People make things that matter** (for the business, for users)
|
||||||
|
|
||||||
|
**This is the business value proposition:**
|
||||||
|
|
||||||
|
> Deploy WDS as your organization's strategic framework for AI-assisted design and development. Your people get a rocket ship. You get guard rails. Everyone wins.
|
||||||
|
|
||||||
|
**WDS enables businesses to:**
|
||||||
|
- Empower teams without losing control
|
||||||
|
- Scale strategic thinking (not just code generation)
|
||||||
|
- Trust autonomous AI-assisted work
|
||||||
|
- Transform "check my work" culture into "aligned strategic output" culture
|
||||||
|
|
||||||
|
**The traditional choice:**
|
||||||
|
> Control OR chaos. Slow OR sloppy. Oversight OR anarchy.
|
||||||
|
|
||||||
|
**The WDS choice:**
|
||||||
|
> Fast AND aligned. Autonomous AND strategic. Empowered AND governed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What This Prevents
|
||||||
|
|
||||||
|
**❌ Without strategic framework (amateur autonomous):**
|
||||||
|
- "I made 5 login screen variations! Which do you like?"
|
||||||
|
- Lovecoded prototypes with no business connection
|
||||||
|
- Colorful distractions that waste team time
|
||||||
|
- Half-baked visual ideas presented as solutions
|
||||||
|
- Flooding colleagues with "what do you think?" requests
|
||||||
|
|
||||||
|
**✓ With WDS (strategic autonomous):**
|
||||||
|
- "Here's the login scenario, traced to our #1 user driver, aligned with business goal, with complete specs and rationale."
|
||||||
|
- Strategic specifications with clear purpose
|
||||||
|
- Polished ideas that respect team time
|
||||||
|
- Complete strategic thinking presented once
|
||||||
|
- Present for alignment, not visual preference
|
||||||
|
|
||||||
|
**The difference:** Strategic thinking BEFORE visual execution.
|
||||||
|
|
||||||
|
**Your new value:** Strategic craft, not just visual craft.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Economic Reality for Designers
|
||||||
|
|
||||||
|
**What changed:**
|
||||||
|
|
||||||
|
| Resource | Agile Era | AI Era |
|
||||||
|
|----------|-----------|--------|
|
||||||
|
| **Your craft time** | Expensive (manual work) | Cheap (AI assists) |
|
||||||
|
| **Strategic thinking** | PM's job | **Cheap (AI assists)** ← WDS insight |
|
||||||
|
| **Communication** | Cheap (constant meetings) | Expensive (alignment takes time) |
|
||||||
|
| **Your value** | Visual craft | **Strategic craft** |
|
||||||
|
|
||||||
|
**The WDS realization:**
|
||||||
|
|
||||||
|
If visual work is cheap (AI-assisted) **AND strategic thinking is also cheap (AI-assisted)**, then your value shifts from "making it pretty" to "thinking strategically about what to make and why."
|
||||||
|
|
||||||
|
**This is what WDS enables.**
|
||||||
|
|
||||||
|
**The professional WDS designer uses AI for both:**
|
||||||
|
1. **Strategic thinking FIRST** (forge with Saga, Freya)
|
||||||
|
2. Visual execution (generate from complete specs)
|
||||||
|
|
||||||
|
**The amateur designer uses AI for only:**
|
||||||
|
1. Visual generation (prompt for pretty outputs)
|
||||||
|
2. *(Strategic thinking: Still skipped)*
|
||||||
|
|
||||||
|
**The WDS advantage:**
|
||||||
|
|
||||||
|
Amateur designers make AI code faster.
|
||||||
|
|
||||||
|
**WDS designers make AI think strategically, then code correctly.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Your Choice
|
||||||
|
|
||||||
|
### Path 1: Stay a Pixel Pusher (Amateur)
|
||||||
|
|
||||||
|
**The flow:**
|
||||||
|
- Skip strategic thinking
|
||||||
|
- Prompt AI for visual outputs
|
||||||
|
- Generate variations
|
||||||
|
- Present options
|
||||||
|
- Let others decide strategy
|
||||||
|
- Repeat endlessly
|
||||||
|
|
||||||
|
**Your value:** Fast visual generation
|
||||||
|
|
||||||
|
**Your career:** Commoditized (AI does this)
|
||||||
|
|
||||||
|
### Path 2: Become a Strategic Thinker (Professional)
|
||||||
|
|
||||||
|
**The flow:**
|
||||||
|
- Forge strategy with AI partners
|
||||||
|
- Create complete specifications
|
||||||
|
- Generate visuals from strategic foundation
|
||||||
|
- Present strategic solutions
|
||||||
|
- Team aligns on substance
|
||||||
|
- Implement correctly
|
||||||
|
|
||||||
|
**Your value:** Strategic design thinking
|
||||||
|
|
||||||
|
**Your career:** Essential (AI enables this, doesn't replace it)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Why This Matters for You
|
||||||
|
|
||||||
|
**WDS exists to elevate your role from pixel pusher to strategic thinker.**
|
||||||
|
|
||||||
|
**The methodology empowers you:**
|
||||||
|
- Saga helps you think strategically about business and users
|
||||||
|
- Freya helps you forge complete UX specifications
|
||||||
|
- Idunn helps you generate implementations
|
||||||
|
|
||||||
|
**The guard rails keep you strategic:**
|
||||||
|
- Every decision traces to business goals
|
||||||
|
- Every design connects to user psychology
|
||||||
|
- Every specification includes complete context
|
||||||
|
|
||||||
|
**The economics work because:**
|
||||||
|
- Strategic thinking: Cheap (AI-assisted)
|
||||||
|
- Visual craft: Cheap (AI-assisted)
|
||||||
|
- Your new value: **Strategic craft** (thinking + execution)
|
||||||
|
|
||||||
|
**Skip the strategic thinking, and you're just a faster pixel pusher.**
|
||||||
|
|
||||||
|
**Embrace strategic thinking, and you become indispensable.**
|
||||||
|
|
||||||
|
**Why this matters for your career:**
|
||||||
|
|
||||||
|
As businesses adopt WDS (or fork it for their own organizations), they'll need designers who can:
|
||||||
|
- Work within strategic frameworks
|
||||||
|
- Use AI for thinking, not just execution
|
||||||
|
- Present polished strategic work, not half-baked prototypes
|
||||||
|
- Operate autonomously while staying aligned
|
||||||
|
|
||||||
|
**WDS-trained designers become essential** in organizations deploying strategic AI frameworks.
|
||||||
|
|
||||||
|
Amateur vibe coders? They're why businesses need guard rails.
|
||||||
|
|
||||||
|
**You're the professional who makes the guard rails work.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Key Takeaways
|
||||||
|
|
||||||
|
✅ **THE WDS INSIGHT** - Strategic thinking got cheap too (not just code)
|
||||||
|
|
||||||
|
✅ **Your role changed** - From pixel pusher to strategic thinker
|
||||||
|
|
||||||
|
✅ **Everyone uses AI for code** - WDS uses AI for strategic thinking FIRST
|
||||||
|
|
||||||
|
✅ **Vibe coding is amateur** - Generates pretty prototypes without substance
|
||||||
|
|
||||||
|
✅ **Strategic craft is professional** - Forge thinking, then execute
|
||||||
|
|
||||||
|
✅ **WDS gives you both** - Rocket ship (autonomy) + guard rails (strategy)
|
||||||
|
|
||||||
|
✅ **Businesses can deploy WDS** - Fork it, customize guard rails, empower teams to make things that matter
|
||||||
|
|
||||||
|
✅ **Present substance, not sketches** - Polished strategic thinking
|
||||||
|
|
||||||
|
✅ **Your new value** - Strategic craft, not just visual craft
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Everyone knows AI made code cheap.**
|
||||||
|
|
||||||
|
**The WDS insight: Strategic thinking got cheaper too.**
|
||||||
|
|
||||||
|
**Everyone uses AI for code. WDS uses AI for strategic thinking first.**
|
||||||
|
|
||||||
|
**Your role just changed: From pixel pusher to strategic thinker.**
|
||||||
|
|
||||||
|
**WDS exists to help you step into this new role.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**[Continue to Lesson 3: The Solution →](lesson-03-the-solution.md)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[← Back to Lesson 1](lesson-01-the-problem.md) | [Module Overview](module-01-overview.md) | [Next: Lesson 3 →](lesson-03-the-solution.md)
|
||||||
|
|
||||||
|
*Part of Module 01: Why WDS Matters*
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Module 01: Why WDS Matters
|
# Module 01: Why WDS Matters
|
||||||
|
|
||||||
## Lesson 2: Becoming a Linchpin Designer
|
## Lesson 3: Becoming a Linchpin Designer
|
||||||
|
|
||||||
**The solution: WDS methodology**
|
**The solution: WDS methodology**
|
||||||
|
|
||||||
|
|
@ -68,8 +68,10 @@ You remain in the loop - the skilled, experienced designer who evaluates AI's wo
|
||||||
|
|
||||||
Now that you understand the solution, let's explore what you'll learn and how to apply it.
|
Now that you understand the solution, let's explore what you'll learn and how to apply it.
|
||||||
|
|
||||||
**[Continue to Lesson 3: The Path Forward →](lesson-03-the-path-forward.md)**
|
**[Continue to Lesson 4: The Path Forward →](lesson-04-the-path-forward.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Lesson 1: The Problem](lesson-01-the-problem.md) | [Next: The Path Forward →](lesson-03-the-path-forward.md)
|
[← Back to Lesson 2: Designer as Strategic Thinker](lesson-02-designer-as-strategic-thinker.md) | [Module Overview](module-01-overview.md) | [Next: Lesson 4 →](lesson-04-the-path-forward.md)
|
||||||
|
|
||||||
|
*Part of Module 01: Why WDS Matters*
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Module 01: Why WDS Matters
|
# Module 01: Why WDS Matters
|
||||||
|
|
||||||
## Lesson 3: Your Transformation
|
## Lesson 4: Your Transformation
|
||||||
|
|
||||||
**From replaceable to indispensable**
|
**From replaceable to indispensable**
|
||||||
|
|
||||||
|
|
@ -75,20 +75,23 @@ _More case studies will be added here as they become available._
|
||||||
You've completed Module 01: Why WDS Matters. You now understand:
|
You've completed Module 01: Why WDS Matters. You now understand:
|
||||||
|
|
||||||
- ✅ The problem: Factory mindset vs linchpin mindset
|
- ✅ The problem: Factory mindset vs linchpin mindset
|
||||||
|
- ✅ The strategic shift: Designer as strategic thinker
|
||||||
- ✅ The solution: Becoming a linchpin designer with WDS
|
- ✅ The solution: Becoming a linchpin designer with WDS
|
||||||
- ✅ The path forward: 5-dimensional thinking and transformation
|
- ✅ The path forward: 5-dimensional thinking and transformation
|
||||||
|
|
||||||
**Next steps:**
|
**Next steps:**
|
||||||
|
|
||||||
- Review the practicalities if you haven't already
|
- Review the practicalities if you haven't already
|
||||||
- Start Module 02: Project Brief
|
- Start Module 02: Installation & Setup
|
||||||
- Apply these concepts to your own work
|
- Apply these concepts to your own work
|
||||||
|
|
||||||
**[Continue to Module 02: Project Brief →](../module-02-project-brief/lesson-01-inspiration.md)**
|
**[Continue to Module 02: Installation & Setup →](../module-02-installation-setup/module-02-overview.md)**
|
||||||
|
|
||||||
Or review the practicalities:
|
Or review the getting started guide:
|
||||||
**[Read Course Practicalities →](../00-practicalities.md)**
|
**[Getting Started Guide →](../00-course-overview/00-getting-started-overview.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Lesson 2](lesson-02-the-solution.md) | [Module Overview](module-01-overview.md) | [Next Module →](../module-02-project-brief/lesson-01-inspiration.md)
|
[← Back to Lesson 3](lesson-03-the-solution.md) | [Module Overview](module-01-overview.md) | [Next Module →](../module-02-installation-setup/module-02-overview.md)
|
||||||
|
|
||||||
|
*Part of Module 01: Why WDS Matters*
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
This foundational module transforms how you think about your role as a designer in the AI era. You'll learn why mastering WDS makes you irreplaceable and how to become a linchpin designer - the person who makes things happen.
|
This foundational module transforms how you think about your role as a designer in the AI era. You'll learn why mastering WDS makes you irreplaceable and how to become a linchpin designer - the person who makes things happen.
|
||||||
|
|
||||||
**Time:** ~30 minutes (3 lessons × 10 min each)
|
**Time:** ~40 minutes (4 lessons × 10 min each)
|
||||||
**Prerequisites:** None - this is where you start!
|
**Prerequisites:** None - this is where you start!
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
@ -38,7 +38,19 @@ Understanding the factory mindset and the AI era:
|
||||||
- AI threat for cogs
|
- AI threat for cogs
|
||||||
- AI opportunity for linchpin designers
|
- AI opportunity for linchpin designers
|
||||||
|
|
||||||
### [Lesson 2: Becoming a Linchpin Designer](lesson-02-the-solution.md)
|
### [Lesson 2: Designer as Strategic Thinker](lesson-02-designer-as-strategic-thinker.md)
|
||||||
|
|
||||||
|
**Time:** 10 minutes
|
||||||
|
|
||||||
|
Your role just changed:
|
||||||
|
|
||||||
|
- The shift everyone missed: strategic thinking got cheap too
|
||||||
|
- Vibe coding vs strategic craft
|
||||||
|
- The three eras of design
|
||||||
|
- WDS: Your strategic rocket ship with guard rails
|
||||||
|
- Present substance, not sketches
|
||||||
|
|
||||||
|
### [Lesson 3: Becoming a Linchpin Designer](lesson-03-the-solution.md)
|
||||||
|
|
||||||
**Time:** 10 minutes
|
**Time:** 10 minutes
|
||||||
|
|
||||||
|
|
@ -50,7 +62,7 @@ The solution: WDS methodology:
|
||||||
- From cog to linchpin designer
|
- From cog to linchpin designer
|
||||||
- The paradigm shift: design becomes specification
|
- The paradigm shift: design becomes specification
|
||||||
|
|
||||||
### [Lesson 3: Your Transformation](lesson-03-the-path-forward.md)
|
### [Lesson 4: Your Transformation](lesson-04-the-path-forward.md)
|
||||||
|
|
||||||
**Time:** 10 minutes
|
**Time:** 10 minutes
|
||||||
|
|
||||||
|
|
@ -106,4 +118,10 @@ By the end of this module, you will:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Course Start](../00-start-here.md)
|
## Next Module
|
||||||
|
|
||||||
|
**[Module 02: Installation & Setup →](../module-02-installation-setup/module-02-overview.md)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[← Back to Course Overview](../00-course-overview/00-course-overview.md)
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 01: Git Setup
|
# Module 02: Installation & Setup
|
||||||
|
|
||||||
|
## Lesson 1: Git Setup
|
||||||
|
|
||||||
**Create GitHub account and project repository**
|
**Create GitHub account and project repository**
|
||||||
|
|
||||||
|
|
@ -42,7 +44,7 @@ Professional cloud storage + time machine for your project files. Every change i
|
||||||
|
|
||||||
**Scenario A:** Starting new project → Continue to Part 3
|
**Scenario A:** Starting new project → Continue to Part 3
|
||||||
**Scenario B:** Joining existing → Skip to Part 5
|
**Scenario B:** Joining existing → Skip to Part 5
|
||||||
**Scenario C:** Just learning → Skip to [Lesson 02](../lesson-02-ide-installation/02-full-lesson.md)
|
**Scenario C:** Just learning → Skip to [Lesson 02](lesson-02-ide-installation.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -115,10 +117,9 @@ Thank you!
|
||||||
|
|
||||||
GitHub account and repository ready! Now install your IDE.
|
GitHub account and repository ready! Now install your IDE.
|
||||||
|
|
||||||
**[Continue to Lesson 02: IDE Installation →](../lesson-02-ide-installation/02-full-lesson.md)**
|
**[Continue to Lesson 02: IDE Installation →](lesson-02-ide-installation.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
*Part of Module 02: Installation & Setup*
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
*[← Back to Module Overview](module-02-overview.md)*
|
||||||
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 02: IDE Installation
|
# Module 02: Installation & Setup
|
||||||
|
|
||||||
|
## Lesson 2: IDE Installation
|
||||||
|
|
||||||
**Get your workspace ready**
|
**Get your workspace ready**
|
||||||
|
|
||||||
|
|
@ -79,10 +81,9 @@ Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
||||||
|
|
||||||
IDE ready! Now clone your Git repository.
|
IDE ready! Now clone your Git repository.
|
||||||
|
|
||||||
**[Continue to Lesson 03: Git Repository Cloning →](../lesson-03-git-cloning/02-full-lesson.md)**
|
**[Continue to Lesson 03: Git Repository Cloning →](lesson-03-git-cloning.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
*Part of Module 02: Installation & Setup*
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
*[← Back to Module Overview](module-02-overview.md)*
|
||||||
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 03: Git Repository Cloning
|
# Module 02: Installation & Setup
|
||||||
|
|
||||||
|
## Lesson 3: Git Repository Cloning
|
||||||
|
|
||||||
**Clone your project to your computer**
|
**Clone your project to your computer**
|
||||||
|
|
||||||
|
|
@ -42,7 +44,7 @@ cd ~/Projects
|
||||||
1. Go to your repository on GitHub
|
1. Go to your repository on GitHub
|
||||||
2. Click green **"Code"** button
|
2. Click green **"Code"** button
|
||||||
3. Make sure **"HTTPS"** selected
|
3. Make sure **"HTTPS"** selected
|
||||||
4. Click copy icon (📋)
|
4. Click copy icon
|
||||||
|
|
||||||
**Your URL:** `https://github.com/your-username/your-project.git`
|
**Your URL:** `https://github.com/your-username/your-project.git`
|
||||||
|
|
||||||
|
|
@ -100,12 +102,11 @@ git clone https://github.com/john-designer/dog-walker-app.git
|
||||||
|
|
||||||
## What's Next?
|
## What's Next?
|
||||||
|
|
||||||
Project cloned! Now initialize WDS and meet Mimir.
|
Project cloned! Now install WDS and start designing.
|
||||||
|
|
||||||
**[Continue to Lesson 04: WDS Project Initialization →](../lesson-04-wds-initialization/02-full-lesson.md)**
|
**[Continue to Lesson 04: WDS Project Initialization →](lesson-04-wds-initialization.md)**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*Part of Module 02: Installation & Setup*
|
*Part of Module 02: Installation & Setup*
|
||||||
*[← Back to Module Overview](../module-02-overview.md)*
|
*[← Back to Module Overview](module-02-overview.md)*
|
||||||
|
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
# Module 02: Installation & Setup
|
||||||
|
|
||||||
|
## Lesson 4: WDS Project Initialization
|
||||||
|
|
||||||
|
**Install WDS and activate your first agent**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What You'll Do
|
||||||
|
|
||||||
|
- Install WDS via the CLI installer
|
||||||
|
- Understand the folder structure
|
||||||
|
- Activate an agent and start working
|
||||||
|
|
||||||
|
**Time:** 10-15 minutes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1: Install WDS
|
||||||
|
|
||||||
|
Navigate to your project folder in the terminal:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ~/Projects/your-project-name # Mac/Linux
|
||||||
|
cd C:\Projects\your-project-name # Windows
|
||||||
|
```
|
||||||
|
|
||||||
|
Run the installer:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx whiteport-design-studio install
|
||||||
|
```
|
||||||
|
|
||||||
|
The installer will guide you through:
|
||||||
|
- **Project type** — What kind of product you're designing
|
||||||
|
- **Experience level** — Beginner, Intermediate, or Expert
|
||||||
|
- **IDE configuration** — Sets up your AI IDE automatically
|
||||||
|
|
||||||
|
**✅ Checkpoint:** Installer completes, `_wds/` folder appears in your project
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2: Understand the Structure
|
||||||
|
|
||||||
|
After installation, your project has:
|
||||||
|
|
||||||
|
```
|
||||||
|
your-project/
|
||||||
|
├── _wds/ ← WDS system files
|
||||||
|
│ ├── agents/ ← Agent files (.md)
|
||||||
|
│ │ ├── saga-analyst.md
|
||||||
|
│ │ ├── freya-ux.md
|
||||||
|
│ │ └── idunn-pm.md
|
||||||
|
│ ├── workflows/ ← Phase workflows
|
||||||
|
│ ├── data/ ← Standards, frameworks
|
||||||
|
│ ├── gems/ ← Reusable prompt components
|
||||||
|
│ ├── templates/ ← Document templates
|
||||||
|
│ └── config.yaml ← Your project configuration
|
||||||
|
├── _wds-learn/ ← Learning material (optional)
|
||||||
|
├── docs/ ← Design output (created by agents)
|
||||||
|
│ ├── A-Product-Brief/
|
||||||
|
│ ├── B-Trigger-Map/
|
||||||
|
│ ├── C-UX-Scenarios/
|
||||||
|
│ ├── D-Design-System/
|
||||||
|
│ ├── E-PRD/
|
||||||
|
│ └── F-Agent-Dialogs/
|
||||||
|
└── .claude/instructions.md ← IDE configuration
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key insight:** `_wds/` contains the methodology. `docs/` is where your design work lives.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3: Activate an Agent
|
||||||
|
|
||||||
|
WDS has three specialized agents:
|
||||||
|
|
||||||
|
| Agent | What they do | When to use |
|
||||||
|
|-------|-------------|-------------|
|
||||||
|
| **Saga** | Business & Product Analyst | Product Brief, Trigger Mapping |
|
||||||
|
| **Freya** | UX/UI Designer | Scenarios, UX Design, Visual Design |
|
||||||
|
| **Idunn** | Project Manager | Platform Requirements, Design System |
|
||||||
|
|
||||||
|
### Start with Saga
|
||||||
|
|
||||||
|
For a new project, start with Saga to create your Product Brief:
|
||||||
|
|
||||||
|
Tell your AI IDE:
|
||||||
|
|
||||||
|
```
|
||||||
|
Read and activate the agent in _wds/agents/saga-analyst.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Saga will:
|
||||||
|
- Introduce herself
|
||||||
|
- Scan your project for existing WDS work
|
||||||
|
- Guide you to the right starting point
|
||||||
|
|
||||||
|
**✅ Checkpoint:** Saga responds and welcomes you!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
**Issue:** `npx` command not found → Install Node.js from <https://nodejs.org>
|
||||||
|
**Issue:** Installer fails → Make sure you're in your project folder
|
||||||
|
**Issue:** Agent file not found → Check `_wds/agents/` folder exists
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Congratulations!
|
||||||
|
|
||||||
|
You've completed Module 02: Installation & Setup!
|
||||||
|
|
||||||
|
**What you accomplished:**
|
||||||
|
- ✅ GitHub account & repository
|
||||||
|
- ✅ IDE installed
|
||||||
|
- ✅ Project cloned
|
||||||
|
- ✅ WDS installed
|
||||||
|
- ✅ Agent activated
|
||||||
|
|
||||||
|
**You're ready to design with WDS!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's Next?
|
||||||
|
|
||||||
|
- **[Module 03: Alignment & Signoff](../module-03-alignment-signoff/module-03-overview.md)**
|
||||||
|
- **[WDS Training Course](../00-course-overview/00-course-overview.md)**
|
||||||
|
- **Ask Saga:** "What should I do next?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Part of Module 02: Installation & Setup*
|
||||||
|
*[← Back to Module Overview](module-02-overview.md)*
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
# Module 02: Installation & Setup
|
||||||
|
|
||||||
|
**From zero to WDS-ready - complete beginner friendly**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This module takes you from having nothing to being fully set up with WDS, even if you've never used GitHub or an IDE before.
|
||||||
|
|
||||||
|
**Time:** 45-60 minutes total
|
||||||
|
**Difficulty:** Beginner
|
||||||
|
**Prerequisites:** Computer + Internet + Email
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lessons
|
||||||
|
|
||||||
|
### [Lesson 01: Git Setup](lesson-01-git-setup.md)
|
||||||
|
**15-20 minutes** | Create GitHub account and repository
|
||||||
|
|
||||||
|
### [Lesson 02: IDE Installation](lesson-02-ide-installation.md)
|
||||||
|
**10 minutes** | Install Cursor or VS Code
|
||||||
|
|
||||||
|
### [Lesson 03: Git Repository Cloning](lesson-03-git-cloning.md)
|
||||||
|
**10 minutes** | Clone your project to your computer
|
||||||
|
|
||||||
|
### [Lesson 04: WDS Project Initialization](lesson-04-wds-initialization.md)
|
||||||
|
**10-15 minutes** | Install WDS, activate your first agent
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
**Want the fastest path?**
|
||||||
|
|
||||||
|
Follow the combined checklist: [Tutorial: Quick Checklist →](tutorial-02.md)
|
||||||
|
|
||||||
|
**Want detailed explanations?**
|
||||||
|
|
||||||
|
Follow the lessons: [Start with Lesson 01 →](lesson-01-git-setup.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## After This Module
|
||||||
|
|
||||||
|
- ✅ GitHub account and repository
|
||||||
|
- ✅ IDE installed and configured
|
||||||
|
- ✅ Project cloned to your computer
|
||||||
|
- ✅ WDS installed in project
|
||||||
|
- ✅ Docs folder structure created
|
||||||
|
- ✅ Agent activated and ready
|
||||||
|
|
||||||
|
**Next:** [Module 03: Alignment & Signoff](../module-03-alignment-signoff/module-03-overview.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Part of the WDS Course: From Designer to Linchpin*
|
||||||
|
*[← Back to Course Overview](../00-course-overview/00-course-overview.md)*
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
# Module 02: Installation & Setup — Quick Checklist
|
||||||
|
|
||||||
|
**The fastest path from zero to WDS-ready**
|
||||||
|
|
||||||
|
**⏱️ 45-60 minutes total**
|
||||||
|
|
||||||
|
Just the action items. For detailed explanations, see the individual lessons.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesson 01: Git Setup (15-20 min)
|
||||||
|
|
||||||
|
*[Full lesson →](lesson-01-git-setup.md)*
|
||||||
|
|
||||||
|
### Create GitHub Account
|
||||||
|
|
||||||
|
- [ ] Go to **<https://github.com>**
|
||||||
|
- [ ] Click **"Sign up"**
|
||||||
|
- [ ] Enter email, password, username (professional: `yourname-designer`)
|
||||||
|
- [ ] Verify email
|
||||||
|
- [ ] ✅ Log in successful
|
||||||
|
|
||||||
|
### Choose Your Scenario
|
||||||
|
|
||||||
|
- [ ] **A:** Starting new project → Continue below
|
||||||
|
- [ ] **B:** Joining existing → Skip to "Join Existing"
|
||||||
|
- [ ] **C:** Just learning → Skip to Lesson 02 below
|
||||||
|
|
||||||
|
### Create New Repository
|
||||||
|
|
||||||
|
- [ ] Click profile icon → **"Your repositories"** → **"New"**
|
||||||
|
|
||||||
|
**Decide: Single or Separate?**
|
||||||
|
|
||||||
|
- [ ] **Single repo:** `my-project` (specs + code together, small teams)
|
||||||
|
- [ ] **Separate repo:** `my-project-specs` (specs only, corporate/many devs)
|
||||||
|
|
||||||
|
**Repository Settings:**
|
||||||
|
|
||||||
|
- [ ] Name: `_____________` (lowercase-with-hyphens)
|
||||||
|
- [ ] Description: One-liner about project
|
||||||
|
- [ ] Public or Private
|
||||||
|
- [ ] ☑️ Check "Initialize with README"
|
||||||
|
- [ ] Click **"Create repository"**
|
||||||
|
- [ ] ✅ Repository created
|
||||||
|
|
||||||
|
### Join Existing Repository
|
||||||
|
|
||||||
|
- [ ] Ask owner for access (see [full lesson](lesson-01-git-setup.md) for email template)
|
||||||
|
- [ ] Accept invitation from email
|
||||||
|
- [ ] Check repo structure
|
||||||
|
- [ ] ✅ Access granted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesson 02: IDE Installation (10 min)
|
||||||
|
|
||||||
|
*[Full lesson →](lesson-02-ide-installation.md)*
|
||||||
|
|
||||||
|
### Choose IDE
|
||||||
|
|
||||||
|
- [ ] **Cursor** (recommended) → <https://cursor.sh>
|
||||||
|
- [ ] **VS Code** (alternative) → <https://code.visualstudio.com>
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
- [ ] Download installer
|
||||||
|
- [ ] **Windows:** Run `.exe`, click through
|
||||||
|
- [ ] **Mac:** Drag to Applications, open
|
||||||
|
- [ ] **Linux:** Follow distro instructions
|
||||||
|
|
||||||
|
### First Launch
|
||||||
|
|
||||||
|
- [ ] Choose theme (Light/Dark)
|
||||||
|
- [ ] Sign in with GitHub → Yes!
|
||||||
|
- [ ] Install recommended extensions → Yes
|
||||||
|
- [ ] ✅ IDE open
|
||||||
|
|
||||||
|
### Verify Terminal
|
||||||
|
|
||||||
|
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
|
||||||
|
- [ ] ✅ Terminal panel appears
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesson 03: Git Repository Cloning (10 min)
|
||||||
|
|
||||||
|
*[Full lesson →](lesson-03-git-cloning.md)*
|
||||||
|
|
||||||
|
### Create Projects Folder
|
||||||
|
|
||||||
|
In terminal (**Ctrl+`** or **Cmd+`**):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Windows
|
||||||
|
mkdir C:\Projects
|
||||||
|
cd C:\Projects
|
||||||
|
|
||||||
|
# Mac/Linux
|
||||||
|
mkdir ~/Projects
|
||||||
|
cd ~/Projects
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] ✅ Projects folder created
|
||||||
|
|
||||||
|
### Clone Your Repository
|
||||||
|
|
||||||
|
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
|
||||||
|
- [ ] In terminal: `git clone [paste-url]`
|
||||||
|
- [ ] (If prompted: Install Git → Click "Install")
|
||||||
|
- [ ] ✅ "done" message
|
||||||
|
|
||||||
|
### Open Project in IDE
|
||||||
|
|
||||||
|
- [ ] **File** → **Open Folder**
|
||||||
|
- [ ] Select your project folder
|
||||||
|
- [ ] ✅ Project in sidebar
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesson 04: WDS Initialization (10-15 min)
|
||||||
|
|
||||||
|
*[Full lesson →](lesson-04-wds-initialization.md)*
|
||||||
|
|
||||||
|
### Install WDS
|
||||||
|
|
||||||
|
In terminal (in YOUR project folder):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ~/Projects/your-project-name # or cd C:\Projects\your-project-name
|
||||||
|
npx whiteport-design-studio install
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] Follow the installer prompts (project type, experience level, IDE)
|
||||||
|
- [ ] ✅ `_wds/` folder appears in your project
|
||||||
|
|
||||||
|
### Activate an Agent
|
||||||
|
|
||||||
|
- [ ] Tell your AI IDE: `Read and activate the agent in _wds/agents/saga-analyst.md`
|
||||||
|
- [ ] ✅ Saga responds and welcomes you!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Complete!
|
||||||
|
|
||||||
|
- ✅ GitHub account & repository
|
||||||
|
- ✅ IDE installed
|
||||||
|
- ✅ Project cloned
|
||||||
|
- ✅ WDS installed
|
||||||
|
- ✅ Agent activated
|
||||||
|
|
||||||
|
**Next:** [Module 03: Alignment & Signoff](../module-03-alignment-signoff/module-03-overview.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[← Back to Module Overview](module-02-overview.md)
|
||||||
|
|
||||||
|
*Part of Module 02: Installation & Setup*
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 1: Understanding Alignment
|
# Module 03: Alignment & Signoff
|
||||||
|
|
||||||
|
## Lesson 1: Understanding Alignment
|
||||||
|
|
||||||
**Why alignment matters before starting work - and why understanding comes first**
|
**Why alignment matters before starting work - and why understanding comes first**
|
||||||
|
|
||||||
|
|
@ -132,7 +134,7 @@ Before you can create an alignment document, you need to understand what success
|
||||||
- You have full autonomy
|
- You have full autonomy
|
||||||
- You don't need stakeholder approval
|
- You don't need stakeholder approval
|
||||||
|
|
||||||
**Go directly to:** [Module 04: Create Project Brief](../module-04-project-brief/tutorial-04.md)
|
**Go directly to:** [Module 04: Product Brief](../module-04-product-brief/module-04-overview.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -173,3 +175,5 @@ Before you can create an alignment document, you need to understand what success
|
||||||
|
|
||||||
[← Back to Module Overview](module-03-overview.md)
|
[← Back to Module Overview](module-03-overview.md)
|
||||||
|
|
||||||
|
|
||||||
|
*Part of Module 03: Alignment & Signoff*
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 2: Creating Your Alignment Document
|
# Module 03: Alignment & Signoff
|
||||||
|
|
||||||
|
## Lesson 2: Creating Your Alignment Document
|
||||||
|
|
||||||
**The 10 sections that ensure everyone understands and agrees - AFTER you've done discovery**
|
**The 10 sections that ensure everyone understands and agrees - AFTER you've done discovery**
|
||||||
|
|
||||||
|
|
@ -287,3 +289,5 @@ Work through these sections **in whatever order makes sense** for your thinking:
|
||||||
|
|
||||||
[← Back to Module Overview](module-03-overview.md)
|
[← Back to Module Overview](module-03-overview.md)
|
||||||
|
|
||||||
|
|
||||||
|
*Part of Module 03: Alignment & Signoff*
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 3: Negotiation & Acceptance
|
# Module 03: Alignment & Signoff
|
||||||
|
|
||||||
|
## Lesson 3: Negotiation & Acceptance
|
||||||
|
|
||||||
**Getting everyone on the same page**
|
**Getting everyone on the same page**
|
||||||
|
|
||||||
|
|
@ -109,7 +111,9 @@
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Next:** [Lesson 4: Securing Commitment →](lesson-04-securing-commitment.md)
|
**Next:** [Lesson 4: Securing Commitment →](lesson-04-external-contracts.md)
|
||||||
|
|
||||||
[← Back to Module Overview](module-03-overview.md)
|
[← Back to Module Overview](module-03-overview.md)
|
||||||
|
|
||||||
|
|
||||||
|
*Part of Module 03: Alignment & Signoff*
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 4: External Contracts
|
# Module 03: Alignment & Signoff
|
||||||
|
|
||||||
|
## Lesson 4: External Contracts
|
||||||
|
|
||||||
**Formalizing alignment with external contracts**
|
**Formalizing alignment with external contracts**
|
||||||
|
|
||||||
|
|
@ -183,9 +185,9 @@
|
||||||
- ✅ Alignment achieved
|
- ✅ Alignment achieved
|
||||||
- ✅ Commitment secured
|
- ✅ Commitment secured
|
||||||
- ✅ Legal protection in place
|
- ✅ Legal protection in place
|
||||||
- ✅ Ready to proceed to Project Brief
|
- ✅ Ready to proceed to Product Brief
|
||||||
|
|
||||||
**Next:** [Module 04: Create Project Brief](../module-04-project-brief/tutorial-04.md)
|
**Next:** [Module 04: Product Brief](../module-04-product-brief/module-04-overview.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -199,3 +201,5 @@
|
||||||
|
|
||||||
[← Back to Module Overview](module-03-overview.md)
|
[← Back to Module Overview](module-03-overview.md)
|
||||||
|
|
||||||
|
|
||||||
|
*Part of Module 03: Alignment & Signoff*
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
# Lesson 5: Internal Signoff Documents
|
# Module 03: Alignment & Signoff
|
||||||
|
|
||||||
|
## Lesson 5: Internal Signoff Documents
|
||||||
|
|
||||||
**Formalizing alignment for internal company projects**
|
**Formalizing alignment for internal company projects**
|
||||||
|
|
||||||
|
|
@ -171,9 +173,9 @@
|
||||||
- ✅ Internal alignment achieved
|
- ✅ Internal alignment achieved
|
||||||
- ✅ Budget/resources committed
|
- ✅ Budget/resources committed
|
||||||
- ✅ Stakeholders on board
|
- ✅ Stakeholders on board
|
||||||
- ✅ Ready to proceed to Project Brief
|
- ✅ Ready to proceed to Product Brief
|
||||||
|
|
||||||
**Next:** [Module 04: Create Project Brief](../module-04-project-brief/tutorial-04.md)
|
**Next:** [Module 04: Product Brief](../module-04-product-brief/module-04-overview.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -187,3 +189,5 @@
|
||||||
|
|
||||||
[← Back to Module Overview](module-03-overview.md) | [Previous: Lesson 4: External Contracts →](lesson-04-external-contracts.md)
|
[← Back to Module Overview](module-03-overview.md) | [Previous: Lesson 4: External Contracts →](lesson-04-external-contracts.md)
|
||||||
|
|
||||||
|
|
||||||
|
*Part of Module 03: Alignment & Signoff*
|
||||||
|
|
@ -126,7 +126,7 @@ Step-by-step hands-on guide to creating your alignment document and securing sig
|
||||||
6. **Get acceptance** - Accept: They say yes to the pitch
|
6. **Get acceptance** - Accept: They say yes to the pitch
|
||||||
7. **Generate signoff** - Contract: Create short, clear contract based on accepted pitch
|
7. **Generate signoff** - Contract: Create short, clear contract based on accepted pitch
|
||||||
8. **Sign** - Both parties sign
|
8. **Sign** - Both parties sign
|
||||||
9. **Proceed to Project Brief** - Brief: Use pitch and contract as the backbone
|
9. **Proceed to Product Brief** - Brief: Use pitch and contract as the backbone
|
||||||
|
|
||||||
**Key:** Pitch and contract become the foundation for your project brief - not throwaway documents.
|
**Key:** Pitch and contract become the foundation for your project brief - not throwaway documents.
|
||||||
|
|
||||||
|
|
@ -143,7 +143,7 @@ By the end of this module, you will:
|
||||||
- ✅ Know how to create a compelling alignment document based on real understanding
|
- ✅ Know how to create a compelling alignment document based on real understanding
|
||||||
- ✅ Be able to negotiate and iterate until acceptance
|
- ✅ Be able to negotiate and iterate until acceptance
|
||||||
- ✅ Generate appropriate external contracts or internal signoff documents
|
- ✅ Generate appropriate external contracts or internal signoff documents
|
||||||
- ✅ Know when to skip this module and go straight to Project Brief
|
- ✅ Know when to skip this module and go straight to Product Brief
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -154,7 +154,7 @@ By the end of this module, you will:
|
||||||
- You have full autonomy
|
- You have full autonomy
|
||||||
- You don't need stakeholder approval
|
- You don't need stakeholder approval
|
||||||
|
|
||||||
**Go directly to:** [Module 04: Create Project Brief](../module-04-project-brief/tutorial-04.md)
|
**Go directly to:** [Module 04: Product Brief](../module-04-product-brief/module-04-overview.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -164,7 +164,7 @@ By the end of this module, you will:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
[← Back to Course Overview](../00-course-overview.md) | [Next: Module 04: Create Project Brief →](../module-04-project-brief/tutorial-04.md)
|
[← Back to Course Overview](../00-course-overview/00-course-overview.md) | [Next: Module 04: Product Brief →](../module-04-product-brief/module-04-overview.md)
|
||||||
|
|
||||||
*Part of the WDS Course: From Designer to Linchpin*
|
*Part of the WDS Course: From Designer to Linchpin*
|
||||||
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue