```
fix(wds): Update documentation paths from course/ to learn-wds/ and docs/ structure Updated all internal documentation links in WDS presentation and YouTube show notes to reflect the new repository structure. Changed paths from src/modules/wds/course/ to src/modules/wds/docs/learn-wds/ and src/modules/wds/docs/ for deliverables and getting-started content. Also updated video links in YouTube show notes to actual published URLs and enhanced formatting with emoji sections for improved readability. ```
This commit is contained in:
Mårten Angner
parent
ec41745a83
commit
1226532a87
|
|
@ -226,22 +226,22 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
<h3>Saga the Analyst — Your Strategic Foundation</h3>
|
<h3>Saga the Analyst — Your Strategic Foundation</h3>
|
||||||
|
|
||||||
<p>Saga guides you through discovery and strategy. Together, you'll create the Product Brief that defines your vision, business goals, and success criteria. Then Saga helps you build the Trigger Map - connecting what your business needs to what users actually want. Saga asks the right questions so you think deeply about psychology and motivation, not just features.<br>
|
<p>Saga guides you through discovery and strategy. Together, you'll create the Product Brief that defines your vision, business goals, and success criteria. Then Saga helps you build the Trigger Map - connecting what your business needs to what users actually want. Saga asks the right questions so you think deeply about psychology and motivation, not just features.<br>
|
||||||
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/getting-started/agent-activation/wds-saga-analyst.md">Learn more about Saga →</a></p>
|
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/agent-activation/wds-saga-analyst.md">Learn more about Saga →</a></p>
|
||||||
|
|
||||||
<h3>Freya the UX Designer — Your Design Partner</h3>
|
<h3>Freya the UX Designer — Your Design Partner</h3>
|
||||||
|
|
||||||
<p>Freya transforms your strategy into tangible user experiences. She guides you through scenario mapping, page specifications, and conceptual design decisions. Freya helps you articulate not just what the interface looks like, but why you designed it that way. Your design thinking becomes crystal-clear specifications that preserve your strategic intent.<br>
|
<p>Freya transforms your strategy into tangible user experiences. She guides you through scenario mapping, page specifications, and conceptual design decisions. Freya helps you articulate not just what the interface looks like, but why you designed it that way. Your design thinking becomes crystal-clear specifications that preserve your strategic intent.<br>
|
||||||
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/getting-started/agent-activation/wds-freya-ux.md">Learn more about Freya</a></p>
|
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/agent-activation/wds-freya-ux.md">Learn more about Freya</a></p>
|
||||||
|
|
||||||
<h3>Idunn the Technical Architect — Your Implementation Bridge</h3>
|
<h3>Idunn the Technical Architect — Your Implementation Bridge</h3>
|
||||||
|
|
||||||
<p>Idunn translates your design vision into technical reality. She guides you through platform architecture, data structures, and system decisions. Idunn ensures your design specifications become actionable PRDs that developers (human or AI) can execute flawlessly. No more lost intent between design and development.<br>
|
<p>Idunn translates your design vision into technical reality. She guides you through platform architecture, data structures, and system decisions. Idunn ensures your design specifications become actionable PRDs that developers (human or AI) can execute flawlessly. No more lost intent between design and development.<br>
|
||||||
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/getting-started/agent-activation/wds-idunn-pm.md">Learn more about Idunn →</a></p>
|
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/agent-activation/wds-idunn-pm.md">Learn more about Idunn →</a></p>
|
||||||
|
|
||||||
<h3>Mimir the Orchestrator — Your Wise Guide</h3>
|
<h3>Mimir the Orchestrator — Your Wise Guide</h3>
|
||||||
|
|
||||||
<p>Mimir sees the big picture. He coordinates your entire journey, ensuring each phase builds on the previous one. When you need perspective on where you are and what comes next, Mimir provides the wisdom. He's your safety net - making sure nothing falls through the cracks as you move from idea to polished product.<br>
|
<p>Mimir sees the big picture. He coordinates your entire journey, ensuring each phase builds on the previous one. When you need perspective on where you are and what comes next, Mimir provides the wisdom. He's your safety net - making sure nothing falls through the cracks as you move from idea to polished product.<br>
|
||||||
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/getting-started/agent-activation/wds-mimir.md">Learn more about Mimir →</a></p>
|
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/agent-activation/wds-mimir.md">Learn more about Mimir →</a></p>
|
||||||
|
|
||||||
<h3>Just call their names</h3>
|
<h3>Just call their names</h3>
|
||||||
|
|
||||||
|
|
@ -283,7 +283,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
|
|
||||||
<p>The specifications interact closely with your design system to create a coherent experience that grows without limitations. Want to change something? Update the specifications. AI regenerates the code - clean, consistent, and aligned with your design intent. No spaghetti code. No lost reasoning. No painful refactoring. Your design work IS the product.<br>
|
<p>The specifications interact closely with your design system to create a coherent experience that grows without limitations. Want to change something? Update the specifications. AI regenerates the code - clean, consistent, and aligned with your design intent. No spaghetti code. No lost reasoning. No painful refactoring. Your design work IS the product.<br>
|
||||||
|
|
||||||
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/page-specifications.md">Learn more about Conceptual Specifications →</a></p>
|
<a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/page-specifications.md">Learn more about Conceptual Specifications →</a></p>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Rationale:** Addresses the pain point of vibe coding tools and spaghetti code, positions conceptual specifications as the solution for production-ready products, emphasizes coherent growth and maintainability
|
**Rationale:** Addresses the pain point of vibe coding tools and spaghetti code, positions conceptual specifications as the solution for production-ready products, emphasizes coherent growth and maintainability
|
||||||
|
|
@ -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/course/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/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/course/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/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/course/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/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/course/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-wds/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/course/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/module-01-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/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-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/course/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-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/course/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-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>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -361,9 +361,9 @@ 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/course/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-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/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/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>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -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/course/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/module-03-overview.md">Module Introduction</a></li>
|
||||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/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-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/course/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-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/course/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-wds/module-03-alignment-signoff/lesson-03-negotiation-acceptance.md">Lesson 03: Negotiation & Acceptance</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -459,7 +459,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized presentation board. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized presentation board. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Win Client Buy-In"
|
- **Title (EN):** "Win Client Buy-In"
|
||||||
- **Description (EN):** "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/project-pitch.md">More about the Project Pitch</a></b><br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/service-agreement.md">More about the Service Agreement</a></b>"
|
- **Description (EN):** "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/project-pitch.md">More about the Project Pitch</a></b><br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/service-agreement.md">More about the Service Agreement</a></b>"
|
||||||
|
|
||||||
#### Phase 2: Project Clarity & Direction
|
#### Phase 2: Project Clarity & Direction
|
||||||
**OBJECT ID**: `wds-capability-phase-2`
|
**OBJECT ID**: `wds-capability-phase-2`
|
||||||
|
|
@ -468,7 +468,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Project Clarity & Direction"
|
- **Title (EN):** "Project Clarity & Direction"
|
||||||
- **Description (EN):** "Get crystal clear on what you're building, who it's for, and why it matters. Create a strategic foundation that guides every design decision.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/product-brief.md">More about the Product Brief</a></b>"
|
- **Description (EN):** "Get crystal clear on what you're building, who it's for, and why it matters. Create a strategic foundation that guides every design decision.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/product-brief.md">More about the Product Brief</a></b>"
|
||||||
|
|
||||||
#### Phase 3: Map Business Goals & User Needs
|
#### Phase 3: Map Business Goals & User Needs
|
||||||
**OBJECT ID**: `wds-capability-phase-3`
|
**OBJECT ID**: `wds-capability-phase-3`
|
||||||
|
|
@ -477,7 +477,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized network of connected nodes or a bridge connecting two points, representing mapping and connection. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized network of connected nodes or a bridge connecting two points, representing mapping and connection. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Map Business Goals & User Needs"
|
- **Title (EN):** "Map Business Goals & User Needs"
|
||||||
- **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that drive behavior and design with psychological insight.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/trigger-map.md">More about the Trigger Map & Personas</a></b>"
|
- **Description (EN):** "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that drive behavior and design with psychological insight.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/trigger-map.md">More about the Trigger Map & Personas</a></b>"
|
||||||
|
|
||||||
#### Phase 4: Architect the Platform
|
#### Phase 4: Architect the Platform
|
||||||
**OBJECT ID**: `wds-capability-phase-4`
|
**OBJECT ID**: `wds-capability-phase-4`
|
||||||
|
|
@ -486,7 +486,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized foundation or building blocks representing technical foundation. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized foundation or building blocks representing technical foundation. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Nail Down the Platform Requirements"
|
- **Title (EN):** "Nail Down the Platform Requirements"
|
||||||
- **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it all fits together seamlessly.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/platform-prd.md">More about the Platform PRD & Architecture</a></b>"
|
- **Description (EN):** "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it all fits together seamlessly.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/platform-prd.md">More about the Platform PRD & Architecture</a></b>"
|
||||||
|
|
||||||
#### Phase 5: Design the Experience
|
#### Phase 5: Design the Experience
|
||||||
**OBJECT ID**: `wds-capability-phase-5`
|
**OBJECT ID**: `wds-capability-phase-5`
|
||||||
|
|
@ -495,7 +495,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Design the Experience"
|
- **Title (EN):** "Design the Experience"
|
||||||
- **Description (EN):** "Turn sketches into complete specifications with interactive prototypes. Capture not just what it looks like, but why you designed it that way and preserve your intent.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/page-specifications.md">More about Page Specifications & Prototypes</a></b>"
|
- **Description (EN):** "Turn sketches into complete specifications with interactive prototypes. Capture not just what it looks like, but why you designed it that way and preserve your intent.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/page-specifications.md">More about Page Specifications & Prototypes</a></b>"
|
||||||
|
|
||||||
#### Phase 6: Create Your Design System
|
#### Phase 6: Create Your Design System
|
||||||
**OBJECT ID**: `wds-capability-phase-6`
|
**OBJECT ID**: `wds-capability-phase-6`
|
||||||
|
|
@ -504,7 +504,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows stylized modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows stylized modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Create Your Design System"
|
- **Title (EN):** "Create Your Design System"
|
||||||
- **Description (EN):** "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-system.md">More about the Component Library & Design Tokens</a></b>"
|
- **Description (EN):** "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/design-system.md">More about the Component Library & Design Tokens</a></b>"
|
||||||
|
|
||||||
#### Phase 7: Hand Off to Development
|
#### Phase 7: Hand Off to Development
|
||||||
**OBJECT ID**: `wds-capability-phase-7`
|
**OBJECT ID**: `wds-capability-phase-7`
|
||||||
|
|
@ -513,7 +513,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
||||||
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
- **Icon Generation Prompt**: "Create a minimalist icon with a red (#EA345D) circular background and a white geometric icon in the center. The icon shows a stylized package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic (white icon on red circle). 1024x1024px, PNG format with transparent background around the circle."
|
||||||
- **Content:**
|
- **Content:**
|
||||||
- **Title (EN):** "Hand Off to Development"
|
- **Title (EN):** "Hand Off to Development"
|
||||||
- **Description (EN):** "Package organized PRD documents with epics and stories. No more guesswork or lost design intent during implementation with AI or human developers.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/design-delivery-prd.md">More about the Design Delivery PRD</a></b>"
|
- **Description (EN):** "Package organized PRD documents with epics and stories. No more guesswork or lost design intent during implementation with AI or human developers.<br><b><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/design-delivery-prd.md">More about the Design Delivery PRD</a></b>"
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,43 @@
|
||||||
# YouTube Show Notes: Getting Started with WDS
|
# YouTube Show Notes: Module 00 - Getting Started with WDS
|
||||||
|
|
||||||
**Video Link:**
|
**Video Link:**
|
||||||
https://youtu.be/CQ5Aai_r-uo
|
https://youtu.be/qYPYx01YLUc
|
||||||
|
|
||||||
**Title:**
|
**Video Title:**
|
||||||
Getting Started with Whiteport Design Studio - Your Path to Becoming a Linchpin Designer
|
Getting Started with Whiteport Design Studio - Your Path to Becoming a Linchpin Designer
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## 📺 Video Description
|
||||||
|
|
||||||
Standing at a crossroads? Feeling the pressure of AI changing everything about design? You're not alone.
|
Standing at a crossroads? Feeling the pressure of AI changing everything about design? You're not alone.
|
||||||
|
|
||||||
This 15-minute conversation explores the most important choice you'll make as a designer in the AI era: Will you be a factory worker doing predictable outputs, or a linchpin designer who creates strategic value?
|
This 15-minute conversation explores the most important choice you'll make as a designer in the AI era: Will you be a factory worker doing predictable outputs, or a linchpin designer who creates strategic value?
|
||||||
|
|
||||||
You'll discover:
|
**In this module you'll discover:**
|
||||||
✅ The paradigm shift: Design becomes specification
|
✅ The paradigm shift: Design becomes specification
|
||||||
✅ The four deliverables that transform your work
|
✅ The four core deliverables that transform your work
|
||||||
✅ Why specifications preserve your creative brilliance for eternity
|
✅ Why specifications preserve your creative brilliance for eternity
|
||||||
✅ The simple path to get started (about 10 hours to learn)
|
✅ The simple path to get started (about 10 hours to learn)
|
||||||
✅ How AI becomes your creative partner, not your replacement
|
✅ How AI becomes your creative partner, not your replacement
|
||||||
|
|
||||||
This isn't about learning new tools. This is about choosing your future as a designer.
|
This isn't about learning new tools. This is about choosing your future as a designer.
|
||||||
|
|
||||||
**Created by:** Mårten Angner, UX designer and founder of Whiteport (Sweden)
|
**Time:** ~15 minutes
|
||||||
**Framework:** Open-source plugin for BMad Method
|
**Prerequisites:** None - perfect starting point
|
||||||
|
**Created by:** Mårten Angner, UX designer and founder of Whiteport (Sweden)
|
||||||
|
**Framework:** Open-source module for BMad Method
|
||||||
**Cost:** Free and open-source
|
**Cost:** Free and open-source
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Timestamps
|
## ⏱️ Timestamps
|
||||||
|
|
||||||
0:00 - Introduction: Another Design Methodology?
|
_To be added after video production based on transcript_
|
||||||
2:00 - The Designer's Crossroads: Factory Worker or Linchpin?
|
|
||||||
6:00 - The Four Deliverables: Where Your Brilliance Becomes Immortal
|
|
||||||
12:00 - The AI Era Reality Check: Why This Matters NOW
|
|
||||||
14:00 - The Simple Path Forward: How to Begin
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Key Concepts
|
## 🎯 Key Concepts
|
||||||
|
|
||||||
🔹 **The Paradigm Shift** - Design becomes specification, code is just the printout
|
🔹 **The Paradigm Shift** - Design becomes specification, code is just the printout
|
||||||
|
|
||||||
|
|
@ -47,9 +45,8 @@ This isn't about learning new tools. This is about choosing your future as a des
|
||||||
|
|
||||||
🔹 **Linchpin Designer Path** - Strategic thinking, walking into chaos and creating order, indispensable
|
🔹 **Linchpin Designer Path** - Strategic thinking, walking into chaos and creating order, indispensable
|
||||||
|
|
||||||
🔹 **Four Deliverables:**
|
🔹 **Four Core Deliverables:**
|
||||||
|
- Product Brief (strategic foundation)
|
||||||
- Project Brief (strategic foundation)
|
|
||||||
- Trigger Map (user psychology + business impact)
|
- Trigger Map (user psychology + business impact)
|
||||||
- Scenario Specifications (your thinking captured for eternity)
|
- Scenario Specifications (your thinking captured for eternity)
|
||||||
- Design System Foundation (scaling your decisions)
|
- Design System Foundation (scaling your decisions)
|
||||||
|
|
@ -60,58 +57,84 @@ This isn't about learning new tools. This is about choosing your future as a des
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Resources
|
## 📚 Course Resources
|
||||||
|
|
||||||
🎓 **WDS Course:** Getting Started Guide
|
### **This Module**
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD
|
📖 **Module 00 Overview:** Getting Started Guide
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md
|
||||||
|
|
||||||
🛠️ **Get Started:** Download IDE, Install BMad, Select WDS
|
### **Get Started with WDS**
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD
|
🌊 **WDS Presentation Page:** Learn about the methodology
|
||||||
|
https://whiteport.com/whiteport-design-studio/
|
||||||
|
|
||||||
💬 **Community:** BMad Discord - Real designers helping each other
|
🛠️ **Installation Guide:** Download IDE, Install WDS
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md
|
||||||
|
|
||||||
|
📖 **Quick Start:** Get up and running fast
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md
|
||||||
|
|
||||||
|
📖 **About WDS:** Philosophy and approach
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md
|
||||||
|
|
||||||
|
### **Community & Support**
|
||||||
|
💬 **BMad Discord:** Real designers helping each other
|
||||||
[Discord invite link]
|
[Discord invite link]
|
||||||
|
|
||||||
📖 **GitHub Discussions:** Ask questions, share your journey
|
📖 **GitHub Discussions:** Ask questions, share your journey
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD/discussions
|
https://github.com/whiteport-collective/whiteport-design-studio/discussions
|
||||||
|
|
||||||
📚 **Next:** Module 01 - Why WDS Matters (deep dive into linchpin concept)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Next Steps
|
## 🎓 Course Navigation
|
||||||
|
|
||||||
1. Download an IDE (VS Code, Cursor, Windsurf, etc.)
|
**◀️ Previous Module:** _This is the first module_
|
||||||
2. Install BMad Method
|
|
||||||
3. Select WDS in the installation
|
|
||||||
4. Complete Module 01: Why WDS Matters
|
|
||||||
5. Start creating your four deliverables
|
|
||||||
6. Join the BMad Discord community
|
|
||||||
|
|
||||||
**Time Investment:** About 10 hours to learn the methodology
|
**▶️ Next Module:** Module 01 - Why WDS Matters
|
||||||
|
📺 Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw
|
||||||
|
📖 Documentation: 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
|
||||||
|
|
||||||
|
**📚 Full Course Overview:**
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## About Whiteport Design Studio (WDS)
|
## ✅ Next Steps
|
||||||
|
|
||||||
WDS is an AI-augmented design methodology created by Mårten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a plugin module for the BMad Method - an open-source AI-augmented development framework.
|
1. ✅ Watch Module 01: Why WDS Matters
|
||||||
|
2. ✅ Download an IDE (Cursor, VS Code, Windsurf)
|
||||||
|
3. ✅ Review the prerequisites and choose your learning path
|
||||||
|
4. ✅ Install WDS following the installation guide
|
||||||
|
5. ✅ Join the BMad Discord community
|
||||||
|
6. ✅ Start creating your four deliverables
|
||||||
|
|
||||||
|
**Time Investment:** About 10 hours to learn the methodology
|
||||||
|
**Payoff:** A lifetime of being indispensable
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 About Whiteport Design Studio (WDS)
|
||||||
|
|
||||||
|
WDS is an AI-augmented design methodology created by Mårten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework.
|
||||||
|
|
||||||
**The Mission:** Give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications.
|
**The Mission:** Give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications.
|
||||||
|
|
||||||
**The Reality:** Traditional design handoffs are breaking down. Designers need a methodology where their thinking can be preserved and amplified through AI implementation, not lost in translation.
|
**The Reality:** Traditional design handoffs are breaking down. Designers need a methodology where their thinking can be preserved and amplified through AI implementation, not lost in translation.
|
||||||
|
|
||||||
---
|
**The Transformation:** Designers become 5x more productive while maintaining creative control and strategic leadership.
|
||||||
|
|
||||||
## Tags
|
|
||||||
|
|
||||||
#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #GettingStarted #DesignSpecification #AIEra #DesignTransformation #CreativeIntegrity #ConceptualSpecifications
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## The Choice
|
## 🏷️ Tags
|
||||||
|
|
||||||
|
#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #GettingStarted #DesignSpecification #AIEra #DesignTransformation #CreativeIntegrity #ConceptualSpecifications #DesignCourse #LearnDesign
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 The Choice
|
||||||
|
|
||||||
You're standing at the most important moment in design history.
|
You're standing at the most important moment in design history.
|
||||||
|
|
||||||
**Factory work** - comfortable, familiar, but AI is getting better every day
|
**Factory work** - comfortable, familiar, but AI is getting better every day
|
||||||
**Linchpin work** - strategic, irreplaceable, where your brilliance becomes immortal
|
**Linchpin work** - strategic, irreplaceable, where your brilliance becomes immortal
|
||||||
|
|
||||||
The question isn't whether AI will change design - it already has.
|
The question isn't whether AI will change design - it already has.
|
||||||
|
|
@ -120,4 +143,9 @@ The question is: **Which side of the line are you on?**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
**Remember:**
|
||||||
|
- The design becomes the specification
|
||||||
|
- The specification becomes the product
|
||||||
|
- The code is just the printout
|
||||||
|
|
||||||
**Ready to begin your transformation? Start with Module 01! 🚀**
|
**Ready to begin your transformation? Start with Module 01! 🚀**
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
# YouTube Show Notes: Module 01 - Why WDS Matters
|
# YouTube Show Notes: Module 01 - Why WDS Matters
|
||||||
|
|
||||||
**Video Link:**
|
**Video Link:**
|
||||||
[To be published]
|
https://www.youtube.com/watch?v=Xhw5JB7mpxw
|
||||||
|
|
||||||
**Title:**
|
**Video Title:**
|
||||||
Module 01: Why WDS Matters - Are You a Factory Worker or a Linchpin Designer?
|
Module 01: Why WDS Matters - Are You a Factory Worker or a Linchpin Designer?
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## 📺 Video Description
|
||||||
|
|
||||||
The AI era is here. 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?
|
The AI era is here. 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?**
|
||||||
|
|
||||||
In this 30-minute deep dive, we explore why designers are irreplaceable in the AI era - not because of tools or aesthetic taste, but because of emotional labor, user-centric creativity, and the ability to walk into chaos and create order.
|
In this 30-minute deep dive, we explore why designers are irreplaceable in the AI era - not because of tools or aesthetic taste, but because of emotional labor, user-centric creativity, and the ability to walk into chaos and create order.
|
||||||
|
|
||||||
You'll learn:
|
**You'll learn:**
|
||||||
✅ Seth Godin's Linchpin concept and why it matters for designers RIGHT NOW
|
✅ Seth Godin's Linchpin concept and why it matters for designers RIGHT NOW
|
||||||
✅ The three irreplaceable gifts only human designers can provide
|
✅ The three irreplaceable gifts only human designers can provide
|
||||||
✅ 5-dimensional thinking - the practical skill that makes you indispensable
|
✅ 5-dimensional thinking - the practical skill that makes you indispensable
|
||||||
|
|
@ -23,22 +23,19 @@ You'll learn:
|
||||||
|
|
||||||
This isn't about learning new tools. This is about choosing who you are as a designer.
|
This isn't about learning new tools. This is about choosing who you are as a designer.
|
||||||
|
|
||||||
---
|
**Time:** ~30 minutes (3 lessons × 10 min each)
|
||||||
|
**Prerequisites:** None - this is where you start!
|
||||||
## Timestamps
|
**Format:** Video explainer + detailed written lessons
|
||||||
|
|
||||||
0:00 - Introduction: The Linchpin Question
|
|
||||||
3:00 - Seth Godin's Framework: Factory Worker vs Linchpin Designer
|
|
||||||
7:00 - Emotional Labor: What Linchpins Provide
|
|
||||||
11:00 - User-Centric Creativity: The Designer's Irreplaceable Gift
|
|
||||||
15:00 - 5-Dimensional Thinking: Navigating Complexity AI Cannot Handle
|
|
||||||
20:00 - The Three-Part Transformation: How WDS Guides You
|
|
||||||
25:00 - The Call to Action: No More Hiding
|
|
||||||
28:00 - I Can. I Do. I Will. - Your Next Steps
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Key Concepts
|
## ⏱️ Timestamps
|
||||||
|
|
||||||
|
_To be added after video production based on transcript_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Key Concepts
|
||||||
|
|
||||||
🔹 **Linchpin Designer** - The person who walks into chaos and creates order (Seth Godin, 2010)
|
🔹 **Linchpin Designer** - The person who walks into chaos and creates order (Seth Godin, 2010)
|
||||||
|
|
||||||
|
|
@ -54,37 +51,62 @@ This isn't about learning new tools. This is about choosing who you are as a des
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Resources
|
## 📚 Course Resources
|
||||||
|
|
||||||
📚 **Book:** "Linchpin: Are You Indispensable?" by Seth Godin (2010)
|
### **This Module**
|
||||||
|
📖 **Module 01 Overview:** Complete lesson structure
|
||||||
|
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
|
||||||
|
|
||||||
|
### **Get Started with WDS**
|
||||||
|
🌊 **WDS Presentation Page:** Learn about the methodology
|
||||||
|
https://whiteport.com/whiteport-design-studio/
|
||||||
|
|
||||||
|
🛠️ **Installation Guide:** Download IDE, Install WDS
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md
|
||||||
|
|
||||||
|
📖 **About WDS:** Philosophy and approach
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md
|
||||||
|
|
||||||
|
### **Recommended Reading**
|
||||||
|
📚 **Book:** "Linchpin: Are You Indispensable?" by Seth Godin (2010)
|
||||||
https://www.amazon.com/Linchpin-Are-You-Indispensable-ebook/dp/B00354Y9ZU
|
https://www.amazon.com/Linchpin-Are-You-Indispensable-ebook/dp/B00354Y9ZU
|
||||||
|
|
||||||
🎓 **WDS Course:** Module 01 - Why WDS Matters
|
### **Community & Support**
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD
|
💬 **BMad Discord:** Join other linchpin designers
|
||||||
|
|
||||||
🛠️ **Get Started:** Download IDE, Install BMad, Select WDS
|
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD
|
|
||||||
|
|
||||||
💬 **Community:** BMad Discord - Join other linchpin designers
|
|
||||||
[Discord invite link]
|
[Discord invite link]
|
||||||
|
|
||||||
📖 **GitHub Discussions:** Ask questions, share your journey
|
📖 **GitHub Discussions:** Ask questions, share your journey
|
||||||
https://github.com/bmad-code-org/BMAD-METHOD/discussions
|
https://github.com/whiteport-collective/whiteport-design-studio/discussions
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Next Steps
|
## 🎓 Course Navigation
|
||||||
|
|
||||||
1. Download an IDE (VS Code, Cursor, Windsurf, etc.)
|
**◀️ Previous Module:** Module 00 - Getting Started
|
||||||
2. Install BMad Method
|
📺 Video: https://youtu.be/qYPYx01YLUc
|
||||||
3. Select WDS in the installation
|
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md
|
||||||
4. Start Module 02: Project Brief
|
|
||||||
5. Build something - it doesn't matter what
|
**▶️ Next Module:** Module 02 - Installation & Setup
|
||||||
6. Join the BMad Discord community
|
📺 Video: https://www.youtube.com/watch?v=tYifpxFVVks
|
||||||
|
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md
|
||||||
|
|
||||||
|
**📚 Full Course Overview:**
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## The Mindset
|
## ✅ Next Steps
|
||||||
|
|
||||||
|
1. ✅ Complete the three written lessons (30 min total reading)
|
||||||
|
2. ✅ Download an IDE (Cursor, VS Code, Windsurf)
|
||||||
|
3. ✅ Start Module 02: Installation & Setup
|
||||||
|
4. ✅ Build something - it doesn't matter what
|
||||||
|
5. ✅ Join the BMad Discord community
|
||||||
|
6. ✅ Let yourself be known
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💪 The Mindset
|
||||||
|
|
||||||
**I Can. I Do. I Will.**
|
**I Can. I Do. I Will.**
|
||||||
**No matter what. No matter when. No matter how.**
|
**No matter what. No matter when. No matter how.**
|
||||||
|
|
@ -96,19 +118,23 @@ Now it's your turn.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## About Whiteport Design Studio (WDS)
|
## 🎨 About Whiteport Design Studio (WDS)
|
||||||
|
|
||||||
WDS is an AI-augmented design methodology created by Mårten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a plugin module for the BMad Method - an open-source AI-augmented development framework. The goal: give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications.
|
WDS is an AI-augmented design methodology created by Mårten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework.
|
||||||
|
|
||||||
|
**The Goal:** Give designers everywhere free access to AI agents specifically tailored for design work, while preserving and amplifying their creative thinking through specifications.
|
||||||
|
|
||||||
|
**The Transformation:** From task-doer to strategic leader. From replaceable to indispensable. From factory worker to linchpin designer.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tags
|
## 🏷️ Tags
|
||||||
|
|
||||||
#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #UserCentricDesign #EmotionalLabor #DesignSpecification #AIEra #DesignTransformation #SethGodin #Linchpin
|
#UXDesign #AIDesign #LinchpinDesigner #WhiteportDesignStudio #WDS #BMadMethod #DesignThinking #UserCentricDesign #EmotionalLabor #DesignSpecification #AIEra #DesignTransformation #SethGodin #Linchpin #DesignCourse #LearnDesign #DesignStrategy #ProfessionalDesign
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## IMPORTANT
|
## 🔥 IMPORTANT
|
||||||
|
|
||||||
**This is not the time to hide or go into hibernation hoping it all goes away.**
|
**This is not the time to hide or go into hibernation hoping it all goes away.**
|
||||||
|
|
||||||
|
|
@ -122,4 +148,4 @@ The transformation continues, together. But it starts with you choosing to act.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Ready to copy/paste into YouTube! 🚀**
|
**Ready to become indispensable? Watch the full module and then move to Module 02! 🚀**
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
# YouTube Show Notes: Module 02 - Installation & Setup
|
# YouTube Show Notes: Module 02 - Installation & Setup
|
||||||
|
|
||||||
**Video Link:**
|
**Video Link:**
|
||||||
[To be published]
|
https://www.youtube.com/watch?v=tYifpxFVVks
|
||||||
|
|
||||||
**Title:**
|
**Video Title:**
|
||||||
Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour
|
Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## 📺 Video Description
|
||||||
|
|
||||||
"I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up."
|
"I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up."
|
||||||
|
|
||||||
|
|
@ -16,7 +16,7 @@ Sound familiar? You're not alone. Every designer was once exactly where you are
|
||||||
|
|
||||||
In this 30-minute guided walkthrough, we take you from complete beginner to fully set up with Whiteport Design Studio - even if you've never touched GitHub, Git, or an IDE before.
|
In this 30-minute guided walkthrough, we take you from complete beginner to fully set up with Whiteport Design Studio - even if you've never touched GitHub, Git, or an IDE before.
|
||||||
|
|
||||||
You'll learn:
|
**You'll learn:**
|
||||||
✅ How to create a GitHub account and repository (it's easier than you think!)
|
✅ How to create a GitHub account and repository (it's easier than you think!)
|
||||||
✅ Installing your IDE workspace (Cursor or VS Code)
|
✅ Installing your IDE workspace (Cursor or VS Code)
|
||||||
✅ Cloning your project to your computer
|
✅ Cloning your project to your computer
|
||||||
|
|
@ -27,22 +27,18 @@ This isn't about becoming technical. This is about getting your professional env
|
||||||
|
|
||||||
**Total setup time:** 45-60 minutes
|
**Total setup time:** 45-60 minutes
|
||||||
**Prerequisites:** Computer + Internet + Email
|
**Prerequisites:** Computer + Internet + Email
|
||||||
**Technical experience required:** None
|
**Technical experience required:** None
|
||||||
|
**Format:** Video walkthrough + detailed written lessons with checklists
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Timestamps
|
## ⏱️ Timestamps
|
||||||
|
|
||||||
0:00 - Introduction: You Can Do This
|
_To be added after video production based on transcript_
|
||||||
3:00 - Lesson 01: Git Setup - GitHub Account & Repository
|
|
||||||
11:00 - Lesson 02: IDE Installation - Your Workspace
|
|
||||||
17:00 - Lesson 03: Git Repository Cloning - Getting Your Project
|
|
||||||
22:00 - Lesson 04: WDS Project Initialization - The Magic Happens
|
|
||||||
28:00 - Celebration: Look What You Just Did!
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Key Concepts
|
## 🎯 Key Concepts
|
||||||
|
|
||||||
🔹 **GitHub** - Professional cloud storage with time machine (version history)
|
🔹 **GitHub** - Professional cloud storage with time machine (version history)
|
||||||
|
|
||||||
|
|
@ -62,27 +58,26 @@ This isn't about becoming technical. This is about getting your professional env
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## The 4 Lessons
|
## 📚 The 4 Lessons
|
||||||
|
|
||||||
|
This module includes 4 hands-on lessons with both quick checklists and full explanations:
|
||||||
|
|
||||||
### Lesson 01: Git Setup (15-20 min)
|
### Lesson 01: Git Setup (15-20 min)
|
||||||
- Create GitHub account with professional username
|
- Create GitHub account with professional username
|
||||||
- Understand repository structure
|
- Understand repository structure
|
||||||
- Single repo vs separate specs repo decision
|
- Single repo vs separate specs repo decision
|
||||||
- Create your first repository
|
- Create your first repository
|
||||||
- Or join an existing project
|
|
||||||
|
|
||||||
### Lesson 02: IDE Installation (10 min)
|
### Lesson 02: IDE Installation (10 min)
|
||||||
- Choose Cursor (recommended) or VS Code
|
- Choose Cursor (recommended) or VS Code
|
||||||
- Download and install
|
- Download and install
|
||||||
- First launch setup
|
- First launch setup
|
||||||
- Sign in with GitHub
|
- Sign in with GitHub
|
||||||
- Verify terminal works
|
|
||||||
|
|
||||||
### Lesson 03: Git Repository Cloning (10 min)
|
### Lesson 03: Git Repository Cloning (10 min)
|
||||||
- Create organized Projects folder
|
- Create organized Projects folder
|
||||||
- Get repository URL from GitHub
|
- Get repository URL from GitHub
|
||||||
- Clone with simple terminal command
|
- Clone with simple terminal command
|
||||||
- Let IDE auto-install Git
|
|
||||||
- Open project in workspace
|
- Open project in workspace
|
||||||
|
|
||||||
### Lesson 04: WDS Project Initialization (15-20 min)
|
### Lesson 04: WDS Project Initialization (15-20 min)
|
||||||
|
|
@ -90,7 +85,6 @@ This isn't about becoming technical. This is about getting your professional env
|
||||||
- Add WDS to workspace (dual folder setup)
|
- Add WDS to workspace (dual folder setup)
|
||||||
- Create 8-phase docs structure
|
- Create 8-phase docs structure
|
||||||
- Find and activate Mimir
|
- Find and activate Mimir
|
||||||
- First conversation with your guide
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -123,33 +117,51 @@ Your 8-phase WDS methodology folders:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Resources
|
## 📚 Course Resources
|
||||||
|
|
||||||
🎓 **WDS Course:** Module 02 - Installation & Setup
|
### **This Module**
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio
|
📖 **Module 02 Overview:** Complete lesson structure
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md
|
||||||
|
|
||||||
📝 **Lesson 01 Checklist:** Git Setup Quick Reference
|
### **Get Started with WDS**
|
||||||
[Link to lesson-01-git-setup/01-quick-checklist.md]
|
🌊 **WDS Presentation Page:** Learn about the methodology
|
||||||
|
https://whiteport.com/whiteport-design-studio/
|
||||||
|
|
||||||
📝 **Lesson 02 Checklist:** IDE Installation Quick Reference
|
🛠️ **Installation Guide:** Download IDE, Install WDS
|
||||||
[Link to lesson-02-ide-installation/02-quick-checklist.md]
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md
|
||||||
|
|
||||||
📝 **Lesson 03 Checklist:** Repository Cloning Quick Reference
|
📖 **Quick Start:** Get up and running fast
|
||||||
[Link to lesson-03-git-cloning/03-quick-checklist.md]
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md
|
||||||
|
|
||||||
📝 **Lesson 04 Checklist:** WDS Initialization Quick Reference
|
|
||||||
[Link to lesson-04-wds-initialization/04-quick-checklist.md]
|
|
||||||
|
|
||||||
|
### **Download Links**
|
||||||
📥 **Download Cursor:** https://cursor.sh
|
📥 **Download Cursor:** https://cursor.sh
|
||||||
📥 **Download VS Code:** https://code.visualstudio.com
|
📥 **Download VS Code:** https://code.visualstudio.com
|
||||||
📥 **GitHub:** https://github.com
|
📥 **GitHub:** https://github.com
|
||||||
|
|
||||||
💬 **WDS Community:** [Discord invite link]
|
### **Community & Support**
|
||||||
|
💬 **BMad Discord:** Real designers helping each other
|
||||||
|
[Discord invite link]
|
||||||
|
|
||||||
📖 **GitHub Discussions:** Ask questions, share your setup
|
📖 **GitHub Discussions:** Ask questions, share your setup
|
||||||
https://github.com/whiteport-collective/whiteport-design-studio/discussions
|
https://github.com/whiteport-collective/whiteport-design-studio/discussions
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 🎓 Course Navigation
|
||||||
|
|
||||||
|
**◀️ Previous Module:** Module 01 - Why WDS Matters
|
||||||
|
📺 Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw
|
||||||
|
📖 Documentation: 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
|
||||||
|
|
||||||
|
**▶️ Next Module:** Module 03 - Alignment & Signoff
|
||||||
|
📺 Video: https://www.youtube.com/watch?v=TKjOLlU8UCE
|
||||||
|
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md
|
||||||
|
|
||||||
|
**📚 Full Course Overview:**
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Common Questions
|
## Common Questions
|
||||||
|
|
||||||
**Q: Do I need to know how to code?**
|
**Q: Do I need to know how to code?**
|
||||||
|
|
@ -172,17 +184,25 @@ A: Most beginners should use single repo. It's simpler and you can always split
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Next Steps
|
## ✅ Next Steps
|
||||||
|
|
||||||
1. ✅ Complete the 4-lesson setup (follow along with this video!)
|
1. ✅ Complete the 4-lesson setup (follow along with this video!)
|
||||||
2. ✅ Activate Mimir and have your first conversation
|
2. ✅ Activate Mimir and have your first conversation
|
||||||
3. ✅ Check your setup is complete
|
3. ✅ Check your setup is complete
|
||||||
4. ✅ Start Module 03: Create Project Brief
|
4. ✅ Start Module 03: Alignment & Signoff
|
||||||
5. ✅ Join the WDS community
|
5. ✅ Join the WDS community
|
||||||
|
|
||||||
|
**What You'll Have After:**
|
||||||
|
- ✅ GitHub account and repository
|
||||||
|
- ✅ Professional IDE installed
|
||||||
|
- ✅ Project cloned locally
|
||||||
|
- ✅ WDS integrated in workspace
|
||||||
|
- ✅ 8-phase docs structure created
|
||||||
|
- ✅ Mimir activated and ready
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## The Power of Belief
|
## 💪 The Power of Belief
|
||||||
|
|
||||||
**"You can do this. I believe in you."** - Mimir
|
**"You can do this. I believe in you."** - Mimir
|
||||||
|
|
||||||
|
|
@ -197,24 +217,7 @@ This isn't empty encouragement. It's based on truth:
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## About Module 02
|
## 🎨 About Whiteport Design Studio (WDS)
|
||||||
|
|
||||||
**Target Audience:** Complete beginners to GitHub/Git/IDEs
|
|
||||||
**Time Required:** 45-60 minutes total
|
|
||||||
**Difficulty:** Beginner (everything explained simply)
|
|
||||||
**Format:** Dual learning paths (quick checklists + full lessons)
|
|
||||||
|
|
||||||
**What You'll Have After:**
|
|
||||||
- ✅ GitHub account and repository
|
|
||||||
- ✅ Professional IDE installed
|
|
||||||
- ✅ Project cloned locally
|
|
||||||
- ✅ WDS integrated in workspace
|
|
||||||
- ✅ 8-phase docs structure created
|
|
||||||
- ✅ Mimir activated and ready
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## About Whiteport Design Studio (WDS)
|
|
||||||
|
|
||||||
Whiteport Design Studio is a comprehensive methodology that transforms designers from tool users into indispensable linchpins - the person who walks into chaos and creates order.
|
Whiteport Design Studio is a comprehensive methodology that transforms designers from tool users into indispensable linchpins - the person who walks into chaos and creates order.
|
||||||
|
|
||||||
|
|
@ -224,7 +227,7 @@ WDS isn't about learning new design tools. It's about becoming the strategic min
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## About Mimir
|
## 👤 About Mimir
|
||||||
|
|
||||||
Mimir is your WDS orchestrator - a wise advisor who:
|
Mimir is your WDS orchestrator - a wise advisor who:
|
||||||
- Assesses your skill level and adapts to you
|
- Assesses your skill level and adapts to you
|
||||||
|
|
@ -239,30 +242,11 @@ He's named after the Norse god of wisdom and knowledge - the advisor who sees pa
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Credits
|
## 🏷️ Tags
|
||||||
|
|
||||||
**Methodology:** Whiteport Design Studio
|
|
||||||
**Training Course:** From Designer to Linchpin
|
|
||||||
**Orchestrator:** Mimir (WDS Guide)
|
|
||||||
**Community:** BMad Method + Whiteport Collective
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tags
|
|
||||||
|
|
||||||
#WebDesign #DesignSystem #GitHub #GitSetup #IDESetup #Cursor #VSCode #DesignerTools #WDS #WhiteportDesignStudio #DesignMethodology #BeginnerFriendly #TutorialSeries #DesignWorkflow #ProfessionalSetup #Mimir #DesignCourse #LearnDesign #GitHubForDesigners #DesignSpecifications
|
#WebDesign #DesignSystem #GitHub #GitSetup #IDESetup #Cursor #VSCode #DesignerTools #WDS #WhiteportDesignStudio #DesignMethodology #BeginnerFriendly #TutorialSeries #DesignWorkflow #ProfessionalSetup #Mimir #DesignCourse #LearnDesign #GitHubForDesigners #DesignSpecifications
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Comments Pinned
|
**Ready to start? Let's get you set up! Follow along with the video and you'll be WDS-ready in under an hour. 🚀**
|
||||||
|
|
||||||
**First time setting up GitHub?** Drop a comment below! We're here to help. Every expert was once exactly where you are now. You've got this! 🌊
|
|
||||||
|
|
||||||
**Just completed setup?** Celebrate with us! What was the most surprising part? What felt easier than you expected?
|
|
||||||
|
|
||||||
**Stuck on something?** Describe your issue and we'll help troubleshoot. Remember: `@wds-mimir` is also always available in your IDE!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Ready to start? Let's get you set up! Press play and follow along. ▶️**
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,329 +1,203 @@
|
||||||
# YouTube Show Notes: Module 03 - Alignment & Signoff
|
# YouTube Show Notes: Module 03 - Alignment & Signoff
|
||||||
|
|
||||||
**Video Title:** Get Stakeholder Buy-In: Alignment & Signoff for Designers | WDS Module 03
|
**Video Link:**
|
||||||
|
https://www.youtube.com/watch?v=TKjOLlU8UCE
|
||||||
|
|
||||||
**Video Description:**
|
**Video Title:**
|
||||||
|
Module 03: Alignment & Signoff - Get Stakeholder Buy-In for Your Design Projects
|
||||||
Learn how to get stakeholder buy-in and protect your projects with clear agreements. This module teaches you when you need alignment (and when to skip it), how to create compelling pitches with quantified ROI, and how to formalize commitment with professional contracts and signoff documents.
|
|
||||||
|
|
||||||
**Perfect for:** Designers who struggle with the business side, feel uncomfortable talking about money, or get stuck in scope creep situations.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Video Description (Full)
|
## 📺 Video Description
|
||||||
|
|
||||||
```
|
|
||||||
Get Stakeholder Buy-In: Alignment & Signoff for Designers | WDS Module 03
|
|
||||||
|
|
||||||
Struggling with the business side of design? Feel uncomfortable talking about money or negotiating contracts? Getting stuck in scope creep situations? This module is for you.
|
Struggling with the business side of design? Feel uncomfortable talking about money or negotiating contracts? Getting stuck in scope creep situations? This module is for you.
|
||||||
|
|
||||||
Learn how to:
|
Learn how to get stakeholder buy-in and protect your projects with clear agreements. Master the discovery discipline, create compelling pitches with quantified ROI, and formalize commitment with professional contracts and signoff documents.
|
||||||
✅ Know when you need stakeholder alignment (and when to skip it)
|
|
||||||
✅ Create compelling pitches that make it easy to say yes
|
**You'll learn:**
|
||||||
✅ Quantify your value with ROI calculations
|
✅ The discovery discipline: Understanding before solving
|
||||||
✅ Formalize commitment with professional contracts
|
✅ When you need stakeholder alignment (and when to skip it)
|
||||||
✅ Protect scope and handle change orders
|
✅ How to create compelling alignment documents that make it easy to say yes
|
||||||
✅ Navigate internal approval processes
|
✅ The 6 elements of alignment (Idea, Why, What, How, Budget, Commitment)
|
||||||
|
✅ How to formalize commitment with professional contracts
|
||||||
|
✅ How to protect scope and handle change orders professionally
|
||||||
|
✅ Navigating internal approval processes
|
||||||
|
|
||||||
This isn't about being pushy or defensive - it's about serving your clients and stakeholders with clarity.
|
This isn't about being pushy or defensive - it's about serving your clients and stakeholders with clarity.
|
||||||
|
|
||||||
🎯 WHO THIS IS FOR:
|
**Time:** 55-75 minutes
|
||||||
- Consultants pitching to clients
|
**Prerequisites:** Module 02 completed (WDS installed)
|
||||||
- Business owners hiring suppliers
|
**When to use:** Optional - Use when you need stakeholder alignment
|
||||||
- Employees seeking project approval
|
**When to skip:** If you're building something yourself with full autonomy
|
||||||
- Designers who struggle with business conversations
|
|
||||||
|
|
||||||
⏱️ WHEN TO SKIP:
|
|
||||||
If you're building something yourself with full autonomy, skip this module and go straight to Module 04: Project Brief.
|
|
||||||
|
|
||||||
📚 MODULE CONTENTS:
|
|
||||||
1. Understanding Alignment (When You Need It)
|
|
||||||
2. The 6 Elements of Alignment
|
|
||||||
3. Creating Your Alignment Document
|
|
||||||
4. Negotiation & Iteration
|
|
||||||
5. External Contracts (Consultant → Client)
|
|
||||||
6. Internal Signoff (Employee → Stakeholders)
|
|
||||||
7. Common Mistakes & How to Avoid Them
|
|
||||||
|
|
||||||
💡 KEY CONCEPTS:
|
|
||||||
- The 6 elements: Idea, Why, What, How, Budget, Commitment
|
|
||||||
- Quantifying value with ROI calculations
|
|
||||||
- Scope protection strategies
|
|
||||||
- Change order process
|
|
||||||
- Business models (fixed-price, hourly, retainer)
|
|
||||||
- Professional boundaries that serve everyone
|
|
||||||
|
|
||||||
🔗 RESOURCES:
|
|
||||||
📖 Module 03 Tutorial: [link]
|
|
||||||
📖 Project Pitch Deliverable: [link]
|
|
||||||
📖 Service Agreement Deliverable: [link]
|
|
||||||
📖 Alignment & Signoff Workflow: [link]
|
|
||||||
|
|
||||||
🚀 GET STARTED:
|
|
||||||
Download WDS and start creating professional alignment documents with Saga the Analyst as your guide.
|
|
||||||
👉 Installation Guide: [link]
|
|
||||||
|
|
||||||
💬 COMMUNITY:
|
|
||||||
Join the BMad Discord to share your alignment documents, ask questions about contracts and pricing, and connect with other professional designers.
|
|
||||||
👉 BMad Discord: [link]
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
Part of the WDS Course: From Designer to Linchpin
|
## ⏱️ Timestamps
|
||||||
Module 03 of 12: Alignment & Signoff
|
|
||||||
|
|
||||||
#DesignBusiness #ClientContracts #FreelanceDesign #DesignStrategy #WDS #BMAD #ProfessionalDesign
|
_To be added after video production based on transcript_
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Timestamps
|
## 🎯 Key Concepts
|
||||||
|
|
||||||
```
|
🔹 **The Discovery Discipline** - Understand before you solve (the carpenter measures twice, the doctor diagnoses first)
|
||||||
00:00 - Introduction: Why This Feels Uncomfortable
|
|
||||||
03:00 - Understanding Alignment: When You Need It (And When You Don't)
|
🔹 **The 6 Elements of Alignment** - Idea, Why, What, How, Budget, Commitment
|
||||||
09:00 - The 6 Elements of Alignment
|
|
||||||
17:00 - Creating Your Alignment Document
|
🔹 **Alignment Document (Pitch)** - Makes the case for why the project matters, gets everyone on the same page
|
||||||
24:00 - Negotiation & Iteration
|
|
||||||
29:00 - External Contracts: Protecting Consultant/Client Relationships
|
🔹 **Professional Patience** - Separate discovery from solution, take notes and come back with a thoughtful proposal
|
||||||
37:00 - Internal Signoff: Navigating Company Approval
|
|
||||||
42:00 - Real Examples: What Good Looks Like
|
🔹 **Signoff Documents** - External contracts (consultant → client) or internal signoff (employee → stakeholders)
|
||||||
46:00 - Common Mistakes & How to Avoid Them
|
|
||||||
51:00 - Your Professional Foundation: Next Steps
|
🔹 **Scope Protection** - Clear boundaries, change order process, professional contracts that serve everyone
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Thumbnail Text Options
|
## 📚 Course Resources
|
||||||
|
|
||||||
**Option 1:** "Get Stakeholder Buy-In"
|
### **This Module**
|
||||||
**Option 2:** "Alignment & Contracts for Designers"
|
📖 **Module 03 Overview:** Complete lesson structure
|
||||||
**Option 3:** "Stop Scope Creep"
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md
|
||||||
**Option 4:** "Professional Design Business"
|
|
||||||
|
|
||||||
**Visual:** Split screen - left side: uncertain designer, right side: confident professional with contract
|
📖 **Tutorial 03:** Step-by-step hands-on guide
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/tutorial-03.md
|
||||||
|
|
||||||
|
### **Deliverable Documentation**
|
||||||
|
📖 **Project Pitch:** What it is and how to create it
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/project-pitch.md
|
||||||
|
|
||||||
|
📖 **Service Agreement:** Contract templates and guidance
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/service-agreement.md
|
||||||
|
|
||||||
|
### **WDS Workflows**
|
||||||
|
📖 **Alignment & Signoff Workflow:** Complete process guide
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/workflows/1-project-brief/alignment-signoff/workflow.md
|
||||||
|
|
||||||
|
### **Get Started with WDS**
|
||||||
|
🌊 **WDS Presentation Page:** Learn about the methodology
|
||||||
|
https://whiteport.com/whiteport-design-studio/
|
||||||
|
|
||||||
|
🛠️ **Installation Guide:** Download IDE, Install WDS
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md
|
||||||
|
|
||||||
|
### **Community & Support**
|
||||||
|
💬 **BMad Discord:** Share alignment documents, ask questions about contracts
|
||||||
|
[Discord invite link]
|
||||||
|
|
||||||
|
📖 **GitHub Discussions:** Ask questions, share your journey
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/discussions
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Video Tags
|
## 🎓 Course Navigation
|
||||||
|
|
||||||
```
|
**◀️ Previous Module:** Module 02 - Installation & Setup
|
||||||
design business, client contracts, freelance design, design proposals, design pricing, scope creep, change orders, design strategy, professional design, whiteport design studio, wds, bmad method, design workflow, client alignment, stakeholder buy-in, design ROI, project pitch, service agreement, design career, design professional, design consultant
|
📺 Video: https://www.youtube.com/watch?v=tYifpxFVVks
|
||||||
```
|
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md
|
||||||
|
|
||||||
|
**▶️ Next Module:** Module 04 - Product Brief (Coming Soon)
|
||||||
|
📖 Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-04-product-brief/tutorial-04.md
|
||||||
|
|
||||||
|
**📚 Full Course Overview:**
|
||||||
|
https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Pinned Comment
|
## 🎯 Who This Module Is For
|
||||||
|
|
||||||
```
|
**Use this module when:**
|
||||||
💡 KEY TAKEAWAY: Alignment isn't about being pushy - it's about serving your clients and stakeholders with clarity.
|
✅ Consultant → Client (you're pitching a project)
|
||||||
|
✅ Business → Suppliers (you're hiring designers/developers)
|
||||||
|
✅ Employee → Stakeholders (you need approval and budget)
|
||||||
|
✅ You struggle with business conversations
|
||||||
|
✅ You feel uncomfortable talking about money
|
||||||
|
✅ You've been stuck in scope creep situations
|
||||||
|
|
||||||
When you need this module:
|
**Skip this module when:**
|
||||||
✅ Consultant → Client (you're pitching a project)
|
❌ You're building it yourself with full autonomy
|
||||||
✅ Business → Suppliers (you're hiring designers/developers)
|
❌ You don't need stakeholder approval
|
||||||
✅ Employee → Stakeholders (you need approval and budget)
|
❌ You have complete decision-making power
|
||||||
|
|
||||||
When to SKIP:
|
**Go directly to:** Module 04 - Product Brief
|
||||||
❌ You're building it yourself with full autonomy
|
|
||||||
|
|
||||||
🎯 ACTION: Create your alignment document with quantified ROI. Share it with stakeholders. Negotiate until everyone agrees. Formalize with a contract or signoff document.
|
|
||||||
|
|
||||||
Then move to Module 04: Project Brief to start the detailed design work.
|
|
||||||
|
|
||||||
💬 What's your biggest challenge with the business side of design? Share below! 👇
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Community Engagement Prompts
|
## 📋 What You'll Create
|
||||||
|
|
||||||
**Ask in video:**
|
After completing this module, you'll have:
|
||||||
- "Do you feel uncomfortable talking about money with clients?"
|
|
||||||
- "Have you been stuck in a scope creep situation?"
|
|
||||||
- "What's your biggest challenge with contracts and negotiations?"
|
|
||||||
- "Drop a comment if you've learned this the hard way!"
|
|
||||||
|
|
||||||
**End screen CTA:**
|
- ✅ **Alignment Document (Pitch)** - Compelling case for why the project matters
|
||||||
- "Next up: Module 04 - Project Brief"
|
- ✅ **Signoff Document** - External contract or internal approval document
|
||||||
- "Subscribe for the full WDS course"
|
- ✅ **ROI Calculations** - Quantified value for stakeholders
|
||||||
- "Join the BMad Discord community"
|
- ✅ **Scope Boundaries** - Clear definition of what's included/excluded
|
||||||
|
- ✅ **Change Order Process** - Professional way to handle scope changes
|
||||||
|
- ✅ **Professional Confidence** - Ability to have business conversations with clarity
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Related Videos
|
## 💡 The Discovery Discipline
|
||||||
|
|
||||||
**Previous Module:**
|
**The Flow:**
|
||||||
- Module 02: Installation & Setup
|
1. **Discovery meeting** - Ask questions, understand their goals
|
||||||
|
2. **Stop & reflect** - "Let me come back with a thoughtful proposal"
|
||||||
|
3. **Create alignment document** - Build pitch based on what they told you
|
||||||
|
4. **Presentation meeting** - Share proposal showing you understood them
|
||||||
|
5. **Iterate** - Negotiate and refine together
|
||||||
|
6. **Get acceptance** - They say yes to the pitch
|
||||||
|
7. **Generate signoff** - Create contract based on accepted pitch
|
||||||
|
8. **Sign** - Both parties commit
|
||||||
|
9. **Proceed to Project Brief** - Use pitch and contract as the backbone
|
||||||
|
|
||||||
**Next Module:**
|
**Key principle:** The carpenter measures twice, the doctor diagnoses first.
|
||||||
- Module 04: Project Brief (Coming Soon)
|
|
||||||
|
|
||||||
**Related Content:**
|
|
||||||
- Module 00: Getting Started
|
|
||||||
- Module 01: Why WDS Matters
|
|
||||||
- How to Price Design Work (Future video idea)
|
|
||||||
- Scope Creep: How to Avoid It (Future video idea)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Social Media Snippets
|
## ✅ Next Steps
|
||||||
|
|
||||||
**Twitter/X (280 characters):**
|
1. ✅ Complete the 5 lessons (read through the written content)
|
||||||
|
2. ✅ Follow Tutorial 03 to create your alignment document
|
||||||
|
3. ✅ Review the deliverable documentation (Project Pitch & Service Agreement)
|
||||||
|
4. ✅ Practice with a real or hypothetical project
|
||||||
|
5. ✅ Start Module 04: Product Brief (or skip to it if you don't need alignment)
|
||||||
|
6. ✅ Join the community to share your alignment documents
|
||||||
|
|
||||||
```
|
**Time Investment:** 55-75 minutes for lessons + tutorial
|
||||||
Stop feeling uncomfortable about money.
|
**Payoff:** Professional confidence and protected projects
|
||||||
|
|
||||||
Alignment & contracts aren't about being pushy - they're about serving clients with clarity.
|
---
|
||||||
|
|
||||||
Learn to:
|
## 🎨 About Whiteport Design Studio (WDS)
|
||||||
✅ Quantify your value
|
|
||||||
✅ Protect scope
|
|
||||||
✅ Handle change orders
|
|
||||||
|
|
||||||
Module 03 of WDS Course 👇
|
WDS is an AI-augmented design methodology created by Mårten Angner, UX designer and founder of Whiteport, a design and development agency from Sweden. WDS is a module for the BMad Method - an open-source AI-augmented development framework.
|
||||||
[link]
|
|
||||||
```
|
|
||||||
|
|
||||||
**LinkedIn (Short Post):**
|
**The Mission:** Transform designers from task-doers into strategic leaders who can confidently navigate business conversations, protect their projects, and deliver measurable value.
|
||||||
|
|
||||||
```
|
**This Module:** Teaches the often-uncomfortable business side of design - not because you're defensive, but because clarity serves everyone.
|
||||||
Designers: Do you struggle with the business side?
|
|
||||||
|
|
||||||
Feel uncomfortable talking about money?
|
---
|
||||||
Getting stuck in scope creep situations?
|
|
||||||
|
|
||||||
Here's what I learned:
|
## 🏷️ Tags
|
||||||
|
|
||||||
Clarity serves everyone.
|
#DesignBusiness #ClientContracts #FreelanceDesign #DesignProposals #DesignPricing #ScopeCreep #ChangeOrders #DesignStrategy #ProfessionalDesign #WhiteportDesignStudio #WDS #BMadMethod #DesignWorkflow #ClientAlignment #StakeholderBuyIn #DesignROI #ProjectPitch #ServiceAgreement #DesignCareer #DesignConsultant
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💼 Professional Boundaries Serve Everyone
|
||||||
|
|
||||||
|
**Remember:**
|
||||||
|
|
||||||
|
Alignment isn't about being pushy.
|
||||||
|
Contracts aren't about being defensive.
|
||||||
|
Scope boundaries aren't about being rigid.
|
||||||
|
|
||||||
|
**They're about serving your clients and stakeholders with clarity.**
|
||||||
|
|
||||||
When you're clear about:
|
When you're clear about:
|
||||||
- Scope boundaries
|
- Scope boundaries
|
||||||
- Investment required
|
- Investment required
|
||||||
- Change order process
|
- Change order process
|
||||||
|
|
||||||
You're not being defensive - you're being professional.
|
|
||||||
|
|
||||||
You're protecting the project so it can succeed.
|
You're protecting the project so it can succeed.
|
||||||
|
|
||||||
Module 03 of the WDS Course teaches you:
|
**Ready to master the business side of design? Watch the full module and complete the tutorial! 💼**
|
||||||
✅ How to create compelling pitches with quantified ROI
|
|
||||||
✅ How to formalize commitment with professional contracts
|
|
||||||
✅ How to handle scope changes without conflict
|
|
||||||
|
|
||||||
Learn to operate as a strategic professional, not just a designer who executes orders.
|
|
||||||
|
|
||||||
🎯 Watch Module 03: Alignment & Signoff
|
|
||||||
[link]
|
|
||||||
|
|
||||||
#DesignBusiness #ProfessionalDesign #FreelanceDesign
|
|
||||||
```
|
|
||||||
|
|
||||||
**Instagram Caption:**
|
|
||||||
|
|
||||||
```
|
|
||||||
The uncomfortable truth about design business 👇
|
|
||||||
|
|
||||||
You need to talk about money. You need clear contracts. You need scope boundaries.
|
|
||||||
|
|
||||||
Not because you're greedy.
|
|
||||||
Because clarity serves everyone.
|
|
||||||
|
|
||||||
Module 03 teaches you:
|
|
||||||
✅ When you need alignment (and when to skip it)
|
|
||||||
✅ How to quantify your value with ROI
|
|
||||||
✅ How to create contracts that protect everyone
|
|
||||||
✅ How to handle scope changes professionally
|
|
||||||
|
|
||||||
Stop avoiding the business side.
|
|
||||||
Start operating as a strategic professional.
|
|
||||||
|
|
||||||
🎯 Link in bio to watch full module
|
|
||||||
|
|
||||||
#DesignBusiness #FreelanceDesign #DesignStrategy #ProfessionalDesign #WDS #BMAD #DesignCareer #ClientContracts
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Comments to Monitor & Respond To
|
|
||||||
|
|
||||||
**Expected viewer questions:**
|
|
||||||
|
|
||||||
1. **"What if my client refuses to sign a contract?"**
|
|
||||||
- Response: "That's a red flag. Professional clients expect contracts - they protect both parties. If they refuse, reconsider if you want to work with them. No contract = no project."
|
|
||||||
|
|
||||||
2. **"How do I price my work?"**
|
|
||||||
- Response: "Three approaches: 1) Fixed-price based on deliverables 2) Hourly/daily rate based on time 3) Value-based on impact. Calculate your costs + desired profit. Justify with ROI. The tutorial walks through this!"
|
|
||||||
|
|
||||||
3. **"What if they ask for changes mid-project?"**
|
|
||||||
- Response: "That's when you use change orders. 'That's outside our current scope. I can provide a change order with the additional cost and timeline impact.' It's professional, not defensive."
|
|
||||||
|
|
||||||
4. **"I'm too junior to ask for contracts."**
|
|
||||||
- Response: "Being junior doesn't mean you work without protection. Professional clients respect contracts regardless of your experience level. Start building these habits now."
|
|
||||||
|
|
||||||
5. **"What if I'm just doing a small project?"**
|
|
||||||
- Response: "Small projects still need scope clarity. Use a simplified version - 1-page agreement with scope, deliverables, timeline, payment. Protect yourself."
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Video Production Notes
|
|
||||||
|
|
||||||
**Key moments to emphasize visually:**
|
|
||||||
|
|
||||||
- The 6 elements of alignment (animated list)
|
|
||||||
- ROI calculation examples (on-screen math)
|
|
||||||
- Contract sections (visual breakdown)
|
|
||||||
- Change order process (step-by-step visual)
|
|
||||||
- Before/After examples (vague vs. clear scope)
|
|
||||||
|
|
||||||
**Tone:**
|
|
||||||
|
|
||||||
- Empathetic about business discomfort
|
|
||||||
- Practical with real numbers and examples
|
|
||||||
- Empowering about professional boundaries
|
|
||||||
- Direct about scope protection importance
|
|
||||||
|
|
||||||
**Graphics to create:**
|
|
||||||
|
|
||||||
- "The 6 Elements" infographic
|
|
||||||
- "When to Skip This Module" flowchart
|
|
||||||
- "Change Order Process" diagram
|
|
||||||
- "Scope Protection Checklist"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Follow-Up Content Ideas
|
|
||||||
|
|
||||||
**Future videos based on this module:**
|
|
||||||
|
|
||||||
1. "How to Price Design Work: 3 Proven Methods"
|
|
||||||
2. "Scope Creep: How to Avoid It & Handle It Professionally"
|
|
||||||
3. "Contract Templates for Designers (Free Download)"
|
|
||||||
4. "How to Negotiate with Clients Without Feeling Pushy"
|
|
||||||
5. "Internal Signoff: Getting Project Approval at Your Company"
|
|
||||||
6. "Real Client Pitch Examples: What Worked & What Didn't"
|
|
||||||
7. "The ROI Calculator for Design Projects"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Analytics to Track
|
|
||||||
|
|
||||||
**Key metrics:**
|
|
||||||
|
|
||||||
- Audience retention at timestamps (identify drop-off points)
|
|
||||||
- CTR on Module 04 end screen
|
|
||||||
- Discord join rate from video description
|
|
||||||
- Tutorial download rate
|
|
||||||
- Comment sentiment (comfortable vs. uncomfortable with topic)
|
|
||||||
|
|
||||||
**Success indicators:**
|
|
||||||
|
|
||||||
- High retention through "External Contracts" section
|
|
||||||
- Comments sharing scope creep stories
|
|
||||||
- Requests for contract templates
|
|
||||||
- Questions about pricing and ROI
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
This module helps designers overcome their discomfort with the business side and operate as confident, strategic professionals! 💼✨
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue