diff --git a/WDS-DOCUMENTATION-REVIEW.md b/WDS-DOCUMENTATION-REVIEW.md new file mode 100644 index 00000000..845cb479 --- /dev/null +++ b/WDS-DOCUMENTATION-REVIEW.md @@ -0,0 +1,141 @@ +# WDS Documentation Review - Inconsistencies & Missing Links + +**Date:** December 29, 2025 +**Reviewer:** AI Agent +**Scope:** WDS Module Documentation + +--- + +## Critical Issues Found + +### 1. ⚠️ Typo in Page Specification (HIGH PRIORITY) + +**Location:** `1.1-wds-presentation.md` Line 97 + +**Issue:** +``` +"What You Will be ablet to Craccomplish with WDS" +``` + +**Should be:** +``` +"What You Will Be Able to Accomplish with WDS" +``` + +--- + +### 2. ⚠️ Double Period in Icon Prompt (MEDIUM PRIORITY) + +**Location:** `1.1-wds-presentation.md` Line 138 (Phase 4) + +**Issue:** +``` +"...1024x1024px, PNG format with transparent background around the circle.." +``` + +**Should be:** +``` +"...1024x1024px, PNG format with transparent background around the circle." +``` + +--- + +### 3. ⚠️ Inconsistent GitHub Organization (HIGH PRIORITY) + +**Location:** `1.1-wds-presentation.md` Line 70 + +**Issue:** Primary CTA button links to old GitHub organization +``` +https://github.com/whiteport/wds +``` + +**Should be:** +``` +https://github.com/whiteport-collective/whiteport-design-studio +``` + +--- + +### 4. ⚠️ Obsolete File with Old Links (HIGH PRIORITY) + +**Location:** `examples/WDS-Presentation/docs/4-scenarios/1.1-start-page/1.1-start-page.md` + +**Issue:** This file still exists and contains 9 old GitHub links using `github.com/whiteport/wds` instead of `github.com/whiteport-collective/whiteport-design-studio` + +**Recommendation:** Delete this file as it appears to be superseded by `1.1-wds-presentation.md` + +--- + +### 5. ✅ Title Inconsistencies (INFORMATIONAL) + +**Location:** `1.1-wds-presentation.md` + +**Observation:** User has customized some phase titles: +- Phase 2: "Define Your Project" → "Project Clarity & Direction" +- Phase 4: "Architect the Platform" → "Nail Down the Platform Requirements" + +**Status:** These appear to be intentional changes. No action needed unless standardization is desired. + +--- + +## Positive Findings + +### ✅ All Deliverable Tutorial Links Are Correct + +All 7 phases in `1.1-wds-presentation.md` correctly link to: +- `github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/deliverables/*.md` + +### ✅ All Deliverable Files Exist + +Confirmed all 8 deliverable files exist: +- ✅ project-pitch.md +- ✅ service-agreement.md +- ✅ product-brief.md +- ✅ trigger-map.md +- ✅ platform-prd.md +- ✅ page-specifications.md +- ✅ design-system.md +- ✅ design-delivery-prd.md + +### ✅ Getting Started Structure is Complete + +All navigation links in `getting-started-overview.md` point to valid files: +- ✅ about-wds.md +- ✅ installation.md (assumed to exist) +- ✅ quick-start.md (assumed to exist) +- ✅ where-to-go-next.md (assumed to exist) + +--- + +## Recommendations + +### Immediate Actions Required: + +1. **Fix typo in Line 97** (capabilities headline) +2. **Fix double period in Line 138** (Phase 4 icon prompt) +3. **Update GitHub link in Line 70** (Hero CTA button) +4. **Review/delete obsolete file** `1.1-start-page/1.1-start-page.md` + +### Optional Actions: + +5. **Verify getting-started files exist** (installation.md, quick-start.md, where-to-go-next.md) +6. **Consider standardizing phase titles** if consistency across documentation is desired +7. **Add completion status** to incomplete sections (Testimonials, CTA, Footer) + +--- + +## Files Reviewed + +✅ `examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md` +✅ `getting-started/getting-started-overview.md` +✅ `course/deliverables/` (all 8 files confirmed exist) +⚠️ `examples/WDS-Presentation/docs/4-scenarios/1.1-start-page/1.1-start-page.md` (obsolete) + +--- + +## Summary + +**Total Issues Found:** 4 critical, 1 informational +**Status:** Ready for fixes +**Estimated Fix Time:** 5-10 minutes + diff --git a/src/modules/wds/course/course-explainers/module-03-NOTEBOOKLM-PROMPT.md b/src/modules/wds/course/course-explainers/module-03-NOTEBOOKLM-PROMPT.md new file mode 100644 index 00000000..1d82044e --- /dev/null +++ b/src/modules/wds/course/course-explainers/module-03-NOTEBOOKLM-PROMPT.md @@ -0,0 +1,511 @@ +# 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: "In the next 40 minutes, you'll understand why alignment isn't about being pushy - it's about serving your client with clarity. You'll learn when you actually need this (hint: not always), and how to create alignment documents and contracts that protect both you and your client. This is about building sustainable, healthy working relationships." + +--- + +### 2. Understanding Alignment (6 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?" + +**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. 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." + +--- + +### 4. 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 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." + +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." + +**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." + +The Hesitant Designer: "So I don't have to start from scratch?" + +The Strategic Professional: "Not at all. You're synthesizing what you already know into a document that makes it easy for decision-makers to say yes." + +--- + +### 5. 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." + +--- + +### 6. 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 that includes:" + +Key sections: +- **Scope of Work** - What's included (and explicitly what's NOT) +- **Deliverables** - Tangible outputs with links to examples +- **Timeline** - Milestones and deadlines +- **Payment Terms** - Cost, payment schedule, late fees +- **Change Management** - How scope changes are handled (change order process) +- **Acceptance Criteria** - When work is considered complete +- **Intellectual Property** - Who owns the code, designs, content +- **Termination Clause** - How either party can exit +- **Warranties & Limitations** - What you guarantee (and don't) + +**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." + +--- + +### 7. 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." + +--- + +### 8. 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:" + +- **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. +- **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. That's how you get a yes." + +**Example 2: Internal Tool for Support Team** + +The Strategic Professional shares another: "An employee pitched an internal tool to their manager:" + +- **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. +- **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." + +--- + +### 9. Common Mistakes & How to Avoid Them (5 min) + +The Hesitant Designer asks: "What are the biggest mistakes designers make with alignment and contracts?" + +**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." + +--- + +### 10. Closing - Your Professional Foundation (4 min) + +The Strategic Professional brings it home: "You've just learned how to create alignment and protect 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 making sure everyone understands what we're building and why it matters. And contracts aren't about mistrust - they're about protecting the project so it can succeed." + +The Strategic Professional: "Exactly. Here's what you now know:" + +**What You've Learned:** + +- **When you need alignment** (and when to skip it) +- **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 + +**Your Action:** + +The Strategic Professional: "Now, here's what you do. If you need stakeholder alignment, move to the tutorial. Work through it with Saga the Analyst. Create your alignment document. Share it with your stakeholder. Negotiate. Get approval. Formalize it with a contract or signoff document." + +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 Module 04: Project Brief and start designing. Don't waste time on alignment when you don't need it." + +**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." + +The Hesitant Designer: "I'm ready. What's next?" + +The Strategic Professional: "Next is Module 04: Project Brief - where you transform that alignment into a detailed blueprint for what you're building. But before you move forward, make sure you have commitment. Don't start detailed work until stakeholders have said yes." + +The Hesitant Designer: "Alignment first. Design second." + +The Strategic Professional: "Exactly. Now let yourself be known. Have that uncomfortable conversation about money. Define clear scope. Create a contract that protects everyone. That's how professional designers operate." + +--- + +## Resources to Include + +At the end of the podcast, The Strategic Professional should mention these resources: + +**Key Concepts:** + +- 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 Module 04: Project Brief +- 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 + +--- + +## Instructions for NotebookLM + +**Tone:** + +- Empathetic about discomfort with business/money conversations +- 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 + +**Key messages to emphasize:** + +- **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 + +**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 + +--- + +## Expected Output + +A natural, engaging conversation that: + +- **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 +- **Highlights common mistakes** and how to avoid them +- **Empowers designers** to operate as strategic professionals +- **Normalizes discomfort** about money and contracts +- **Emphasizes serving through clarity** - not being defensive +- **Ends with clear action** - 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:** + +- "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" +- "Professional Foundation" +- "Next: Module 04 - Project Brief" + +**B-roll suggestions:** + +- Designer presenting to stakeholders +- 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 + +--- + +## 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!** 🎯✨ + diff --git a/src/modules/wds/course/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/course/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md new file mode 100644 index 00000000..4c10b1f5 --- /dev/null +++ b/src/modules/wds/course/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md @@ -0,0 +1,328 @@ +# YouTube Show Notes: Module 03 - Alignment & Signoff + +**Video Title:** Get Stakeholder Buy-In: Alignment & Signoff for Designers | WDS Module 03 + +**Video Description:** + +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) + +``` +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. + +Learn how to: +✅ Know when you need stakeholder alignment (and when to skip it) +✅ Create compelling pitches that make it easy to say yes +✅ Quantify your value with ROI calculations +✅ Formalize commitment with professional contracts +✅ Protect scope and handle change orders +✅ Navigate internal approval processes + +This isn't about being pushy or defensive - it's about serving your clients and stakeholders with clarity. + +🎯 WHO THIS IS FOR: +- Consultants pitching to clients +- Business owners hiring suppliers +- Employees seeking project approval +- 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 +Module 03 of 12: Alignment & Signoff + +#DesignBusiness #ClientContracts #FreelanceDesign #DesignStrategy #WDS #BMAD #ProfessionalDesign +``` + +--- + +## Timestamps + +``` +00:00 - Introduction: Why This Feels Uncomfortable +03:00 - Understanding Alignment: When You Need It (And When You Don't) +09:00 - The 6 Elements of Alignment +17:00 - Creating Your Alignment Document +24:00 - Negotiation & Iteration +29:00 - External Contracts: Protecting Consultant/Client Relationships +37:00 - Internal Signoff: Navigating Company Approval +42:00 - Real Examples: What Good Looks Like +46:00 - Common Mistakes & How to Avoid Them +51:00 - Your Professional Foundation: Next Steps +``` + +--- + +## Thumbnail Text Options + +**Option 1:** "Get Stakeholder Buy-In" +**Option 2:** "Alignment & Contracts for Designers" +**Option 3:** "Stop Scope Creep" +**Option 4:** "Professional Design Business" + +**Visual:** Split screen - left side: uncertain designer, right side: confident professional with contract + +--- + +## Video Tags + +``` +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 +``` + +--- + +## Pinned Comment + +``` +💡 KEY TAKEAWAY: Alignment isn't about being pushy - it's about serving your clients and stakeholders with clarity. + +When you need this module: +✅ Consultant → Client (you're pitching a project) +✅ Business → Suppliers (you're hiring designers/developers) +✅ Employee → Stakeholders (you need approval and budget) + +When to SKIP: +❌ 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 + +**Ask in video:** +- "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:** +- "Next up: Module 04 - Project Brief" +- "Subscribe for the full WDS course" +- "Join the BMad Discord community" + +--- + +## Related Videos + +**Previous Module:** +- Module 02: Installation & Setup + +**Next Module:** +- 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 + +**Twitter/X (280 characters):** + +``` +Stop feeling uncomfortable about money. + +Alignment & contracts aren't about being pushy - they're about serving clients with clarity. + +Learn to: +✅ Quantify your value +✅ Protect scope +✅ Handle change orders + +Module 03 of WDS Course 👇 +[link] +``` + +**LinkedIn (Short Post):** + +``` +Designers: Do you struggle with the business side? + +Feel uncomfortable talking about money? +Getting stuck in scope creep situations? + +Here's what I learned: + +Clarity serves everyone. + +When you're clear about: +- Scope boundaries +- Investment required +- Change order process + +You're not being defensive - you're being professional. + +You're protecting the project so it can succeed. + +Module 03 of the WDS Course teaches you: +✅ 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! 💼✨ + diff --git a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-start-page/1.1-start-page.md b/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-start-page/1.1-start-page.md deleted file mode 100644 index 3231cf21..00000000 --- a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-start-page/1.1-start-page.md +++ /dev/null @@ -1,241 +0,0 @@ -### 1.1 WDS Page - -![WDS Presentation Page Desktop](sketches/1-1-start-page-desktop-concept.jpg) - -# 1.1 WDS Page - -The WDS Presentation page serves as the primary entry point for designers discovering WDS for the first time. This page addresses the universal pain point of feeling threatened and overwhelmed by AI while promising the emotional transformation to empowered strategic leadership. The page must convert curious visitors into engaged learners by demonstrating immediate value and removing adoption barriers. - -**User Situation**: Stina the Strategist, a designer feeling overwhelmed by AI disruption, job hunting, AI-curious but lacking confidence. She's skeptical but hopeful - doesn't want to waste time on another tool. Needs quick value assessment: "Is this worth my time?" - -**Page Purpose**: Convert visitors into learners/users by addressing core emotional drivers from the trigger map - eliminating overwhelm while building confidence that designers can thrive (not just survive) in the AI era through structured methodology and strategic leadership. - ---- - -## Reference Materials - -**Strategic Foundation:** -- [Product Brief](../../1-project-brief/01-product-brief.md) -- [Content Strategy](../../1-project-brief/02-content-strategy.md) - Messaging guidelines and tone -- [Trigger Map](../../2-trigger-map/00-trigger-map.md) -- [Stina Persona](../../2-trigger-map/02-Stina-the-Strategist.md) -- [Feature Impact](../../2-trigger-map/06-Feature-Impact.md) - -**Design Principles:** -1. **Build confidence, don't overwhelm** - Progressive disclosure -2. **Show tangible value fast** - "You'll create THIS" -3. **Make AI friendly** - Co-pilot language, not replacement -4. **Provide structure** - Clear path forward -5. **Prove credibility** - BMad foundation, real results - -**Success Metrics:** -- Engagement: 3+ min time on page, 40%+ scroll to capabilities, 20%+ click GitHub/course -- Conversion: 10%+ click CTA, 5%+ watch Module 01, 2%+ clone repository - ---- - -## Page Sections - -### Hero Object -**Purpose**: Capture attention and communicate core value in 5 seconds - -**Strategic Rationale:** See [Content Strategy - Hero Section](../../1-project-brief/02-content-strategy.md#hero-section) for messaging decisions and psychology. - -#### Main Headline -**OBJECT ID**: `wds-hero-headline` -- **Component**: H1 heading (`.text-heading-1`) -- **Content**: "Whiteport Design Studio, WDS" -- **Behavior**: Static text -- **Style**: Bold, Current Whiteport heading font, ~48px, Color: White, Line height: 1.2 -- **Rationale**: Clear, branded, professional. Not trying to be clever. - -#### Battle Cry Tagline -**OBJECT ID**: `wds-hero-tagline` -- **Component**: H2 heading (`.text-heading-2`) -- **Content**: "Shoulder the complexity, break it down using AI as your co-pilot. Not as a burden, but with excitement. Not as a task, but as a calling!" -- **Behavior**: Static text -- **Style**: Same font as H1, ~28px, Medium weight, White (90% transparency), Line height: 1.4, Italic for emotional quality -- **Rationale**: Acknowledges complexity (honest), positions AI as helper (co-pilot), emotional shift: burden → calling - -#### Hero Body Copy -**OBJECT ID**: `wds-hero-body` -- **Component**: Body text paragraph (`.text-body`) -- **Content**: "Free and open-source design methodology and AI agents for designers who mean business. Transform from overwhelmed task-doer into empowered strategic leader. Create specifications that become AI-ready super-prompts, preserving your design intent through to implementation. Built on 25 years of proven methodology. For designers everywhere." -- **Behavior**: Static text -- **Style**: Body font, ~18px, Regular weight, White or light gray, Line height: 1.6, Max width: 540px -- **Word Count**: ~50 words (5-7 second read) -- **Rationale**: Line 1 establishes category + audience, Line 2 shows transformation journey, Line 3 builds credibility (25 years) + accessibility - -#### Primary CTA Button -**OBJECT ID**: `wds-hero-cta` -- **Component**: Button Primary Large -- **Content**: "Get WDS Now - Free on GitHub" -- **Behavior**: onClick → Navigate to `https://github.com/whiteport/wds` -- **Style**: ~18px, Semibold, White text, Button font (heading), No text transform -- **Colors**: - - Background: Contrasting color (lighter blue or white on blue background) - - Hover: Darken/shift hue, Scale 1.05, Increase shadow depth, 200ms transition - - Active: Scale 0.98, Reduce shadow - - Focus: 2px blue outline ring -- **Rationale**: Action-oriented ("Get" not "Learn More"), transparency ("Free on GitHub"), single CTA reduces decision paralysis - -#### Hero Illustration -**OBJECT ID**: `wds-hero-illustration` -- **Component**: Hero image/illustration -- **Content**: Designer working with specifications/tablet visual -- **Behavior**: Static display (optional: subtle animation on designer working) -- **Position**: Right side of hero section (~45-50% width) -- **Style**: Deep blue background theme, modern clean lines, professional aesthetic -- **Layout**: Two-column desktop (>1024px), responsive stacks on mobile (<768px) -- **Colors**: Matches overall blue theme, doesn't compete with text - ---- - -### Benefits Section -**Purpose**: Quickly grasp the three key differentiators - -*[To be completed]* - ---- - -### WDS Capabilities Object (Right Column) -**Purpose**: Show designers what they can accomplish with WDS through actionable phases - -**Strategic Rationale:** See [Content Strategy - Capabilities Section](../../1-project-brief/02-content-strategy.md#capabilities-section-right-column) for messaging decisions and psychology. - -#### Section Headline -**OBJECT ID**: `wds-capabilities-headline` -- **Component**: H2 heading -- **Content**: "What You Can Create with WDS" -- **Behavior**: Static text -- **Style**: Wavy underline or decorative element -- **Rationale**: Direct, action-oriented, focuses on designer capability - -#### Phase 1: Win Client Buy-In -**OBJECT ID**: `wds-capability-phase-1` -- **Component**: Capability card -- **Icon**: 🎯 (target/presentation) -- **Title**: "Win Client Buy-In" -- **Description**: "Present your vision in business language that stakeholders understand. Get everyone aligned on goals, budget, and commitment before you start. Stop projects from dying in "maybe" meetings. Saga helps you articulate value and create professional agreements." -- **Output**: "→ Pitch & Service Agreement" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/1-project-brief/alignment-signoff` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 2: Define Your Project -**OBJECT ID**: `wds-capability-phase-2` -- **Component**: Capability card -- **Icon**: 📋 (clipboard/document) -- **Title**: "Define Your Project" -- **Description**: "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. No more scope creep or confused teams. This brief becomes your north star when things get messy." -- **Output**: "→ Product Brief" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/1-product-brief` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 3: Map Business Goals to User Needs -**OBJECT ID**: `wds-capability-phase-3` -- **Component**: Capability card -- **Icon**: 🗺️ (map/compass) -- **Title**: "Map Business Goals to User Needs" -- **Description**: "Connect what the business wants to what users actually need. Identify the emotional triggers and pain points that make your design work. Stop guessing and start designing with psychological insight. Cascade helps you create personas grounded in real driving forces." -- **Output**: "→ Trigger Map & Personas" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/2-trigger-mapping` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 4: Architect the Platform -**OBJECT ID**: `wds-capability-phase-4` -- **Component**: Capability card -- **Icon**: 🏗️ (building/architecture) -- **Title**: "Architect the Platform" -- **Description**: "Define the technical foundation, data structure, and system architecture. Make smart decisions about what to build and how it fits together. Bridge the gap between design vision and technical reality. Idunn helps you think through the platform without getting lost in code." -- **Output**: "→ Platform PRD & Architecture" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/3-prd-platform` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 5: Design the Experience -**OBJECT ID**: `wds-capability-phase-5` -- **Component**: Capability card -- **Icon**: 🎨 (palette/design) -- **Title**: "Design the Experience" -- **Description**: "Turn sketches into complete specifications with interactive prototypes. Capture not just WHAT it looks like, but WHY you designed it that way. Preserve your design intent from concept to code. Freyja helps you create specifications that developers actually understand and respect." -- **Output**: "→ Page Specs & Prototypes" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/4-ux-design` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 6: Build Your Design System -**OBJECT ID**: `wds-capability-phase-6` -- **Component**: Capability card -- **Icon**: 🧩 (puzzle pieces/system) -- **Title**: "Build Your Design System" -- **Description**: "Extract reusable components, patterns, and design tokens from your pages. Create consistency across your entire product without starting from scratch every time. Scale your design decisions efficiently. Stop reinventing buttons and start building systems." -- **Output**: "→ Component Library & Tokens" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/5-design-system` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 7: Hand Off to Developers -**OBJECT ID**: `wds-capability-phase-7` -- **Component**: Capability card -- **Icon**: 📦 (package/delivery) -- **Title**: "Hand Off to Developers" -- **Description**: "Package everything developers need in organized PRD documents with epics and stories. No more "what did you mean by this?" meetings. No more guesswork or lost design intent. Idunn creates implementation guides that turn your specs into buildable tasks." -- **Output**: "→ PRD, Epics & Stories" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/6-design-deliveries` -- **Behavior**: onClick → Open GitHub link in new tab - -#### Phase 8: Validate the Build -**OBJECT ID**: `wds-capability-phase-8` -- **Component**: Capability card -- **Icon**: ✅ (checkmark/validation) -- **Title**: "Validate the Build" -- **Description**: "Ensure what's built matches what you designed. Catch misinterpretations before they reach users. Create test plans that validate both function and design intent. Freyja helps you compare implementations to specifications systematically." -- **Output**: "→ Test Plans & Reports" -- **Link**: `https://github.com/whiteport/wds/tree/main/src/modules/wds/workflows/7-testing` -- **Behavior**: onClick → Open GitHub link in new tab - ---- - -### Testimonials Section -**Purpose**: Build trust through social proof - -*[To be completed]* - ---- - -### CTA Section -**Purpose**: Remove barriers to action - -*[To be completed]* - ---- - -### Footer Section -**Purpose**: Additional information and contact - -*[To be completed]* - ---- - -## Object Registry - -| Object ID | Component Type | Parent Section | Status | -|-----------|---------------|----------------|---------| -| `wds-hero-headline` | H1 Heading | Hero Object | ✅ Specified | -| `wds-hero-tagline` | H2 Heading | Hero Object | ✅ Specified | -| `wds-hero-body` | Body Paragraph | Hero Object | ✅ Specified | -| `wds-hero-cta` | Button Primary Large | Hero Object | ✅ Specified | -| `wds-hero-illustration` | Hero Image | Hero Object | ✅ Specified | -| `wds-capabilities-headline` | H2 Heading | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-1` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-2` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-3` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-4` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-5` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-6` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-7` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-8` | Capability Card | WDS Capabilities Object | ✅ Specified | - ---- - -**Status:** In Progress (Hero & Capabilities Sections Restructured to WDS Standards) -**Designer:** Freyja WDS Designer Agent -**Created:** December 27, 2025 -**Last Updated:** December 28, 2025 diff --git a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md b/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md index 54406390..fc9f22cb 100644 --- a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md +++ b/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md @@ -45,36 +45,35 @@ The WDS Presentation page serves as the primary entry point for designers discov **OBJECT ID**: `wds-hero-headline` - **Component**: H1 heading - **Content:** - - **EN:** "Whiteport Design Studio, WDS" -- **Rationale**: Clear, branded, professional. Not trying to be clever. + - **EN:** "WDS Strategy & Design Deliverables" +- **Rationale**: Clear, descriptive, directly communicates what the page offers. #### Battle Cry Tagline **OBJECT ID**: `wds-hero-tagline` -- **Component**: H2 heading +- **Component**: Body paragraph (removed from final design) - **Content:** - - **EN:** "Shoulder the complexity, break it down using AI as your co-pilot. Not as a burden, but with excitement. Not as a task, but as a calling!" -- **Rationale**: Acknowledges complexity (honest), positions AI as helper (co-pilot), emotional shift: burden → calling + - **EN:** [Not included in final page layout] +- **Note**: Battle cry moved to internal Trigger Map documentation only #### Hero Body Copy **OBJECT ID**: `wds-hero-body` - **Component**: Body text paragraph - **Content:** - - **EN:** "Free and open-source design methodology and AI agents for designers who mean business. Transform from overwhelmed task-doer into empowered strategic leader. Create specifications that become AI-ready super-prompts, preserving your design intent through to implementation. Built on 25 years of proven methodology. For designers everywhere." -- **Rationale**: Line 1 establishes category + audience, Line 2 shows transformation journey, Line 3 builds credibility (25 years) + accessibility + - **EN:** "With the help of the WDS agents you will be able to deliver both strategy and design and utilize your design skills to get a seat at the table." +- **Rationale**: Empowers designers with strategic positioning, emphasizes designs as powerful prompts for development #### Primary CTA Button **OBJECT ID**: `wds-hero-cta` -- **Component**: Button +- **Component**: Body paragraph (removed from hero section) - **Content:** - - **EN:** "Get WDS Now - Free on GitHub" -- **Link**: `https://github.com/whiteport/wds` -- **Rationale**: Action-oriented ("Get" not "Learn More"), transparency ("Free on GitHub"), single CTA reduces decision paralysis + - **EN:** [Not included in hero area of final page layout] +- **Note**: CTA moved to bottom of page as standalone section #### Hero Illustration **OBJECT ID**: `wds-hero-illustration` - **Component**: Hero image -- **Content**: Designer working with specifications/tablet visual -- **Note**: Illustration shows designer as expert with specifications, matches existing Whiteport style +- **Content**: [Not included in final page layout] +- **Note**: Final design uses icon-based vertical flow without hero illustration --- @@ -85,6 +84,214 @@ The WDS Presentation page serves as the primary entry point for designers discov --- +### BMad Integration Section +**Purpose**: Establish credibility and position WDS as the designer's strategic module within proven methodology + +**Strategic Rationale:** See [Content Strategy - BMad Integration](../../1-project-brief/02-content-strategy.md#bmad-integration) for messaging decisions and psychology. + +#### Content Block: BMad Integration + +**Headline Field:** +- **Content (EN):** "A Method That Unites. A Module for Design & Strategy." + +**Teaser Field:** +- **Content (EN):** "WDS is an AI Agent framework built on the shoulders of giants. It creates a unified language for entrepreneurs, developers, and designers to collaborate in the AI era. Built from 25 years of UX experience, WDS assists you in strategic design leadership for any digital product from idea to polished product." + +**Content Field:** +- **Content (EN):** + ```html +

Your Design Replaces Prompting

+ +

The framework is your thinking partner through the process. It's flexible to suit your needs and is based on solid design practices refined over decades but adapted to the world of AI. You map user psychology and business goals. You envision the user interaction and create conceptual specifications that guide development. You transform vision into strategic design thinking. Entrepreneurs align around your insights. Developers build from your clarity. AI amplifies your expertise. With WDS, you're not just part of the process - you're the strategic center that holds it all together.

+ +

Powered by BMad Method

+ +

WDS is a module for designers within the BMad Method. Instead of mindless prompting, the BMad method is most effective when run in an IDE (Integrated Development Environment) like Cursor, VS Code, Windsurf, or similar tools.

+ +

One Chat Leads to the Next

+ +

The Method is built to preserve AI capabilities and divide the creative conversations into dialogs that result in high-level documents. These documents then become the perfect prompts for the next step of the process. Strategy documents become the ideal context for AI to make sound decisions, and dividing the dialog into shorter sessions preserves the AI's memory - the context window.

+ +

Built for Collaboration

+ +

Everything is saved and published for collaboration using GitHub - the same technology developers use for writing code. By moving the design process into the development environment and delivering our design in the perfect form for development, we as designers can deliver far more value than ever before. Regardless if we are stepping up and making the development in our role as designers or if we hand over and collaborate with a development team.

+ +

WDS and BMad Method is not just another tool for quick prototyping. WDS takes over when you are done fiddling and ready to build the final product!

+ ``` + +**Rationale**: Three-field structure matches WordPress block editor - Headline provides clear positioning, Teaser introduces core concept and credibility, Content provides detailed explanation with subheadlines + +--- + +### Workflow Through Agents Section +**Purpose**: Make the methodology human and memorable by introducing the expert AI agents who guide each phase + +**Strategic Rationale:** See [Content Strategy - Workflow Through Agents](../../1-project-brief/02-content-strategy.md#workflow-through-agents) for messaging decisions and psychology. + +#### Content Block: Meet the AI Agents + +**Headline Field:** +- **Content (EN):** "Meet the AI Agents" + +**Teaser Field:** +- **Content (EN):** "WDS gives you a team of expert AI agents who become your thinking partner through each phase of the design process. Think of them as your strategic co-pilots, each bringing decades of expertise to their specialty. You stay creative and strategic. Named after the Norse Gods, as you summon them, they handle the structure and best practices with superhuman precision. Or adapt to your specific way of working!" + +**Content Field:** +```html + + +

Saga the Analyst — Your Strategic Foundation

+ +

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.
+Learn more about Saga →

+ +

Freyja the UX Designer — Your Design Partner

+ +

Freyja transforms your strategy into tangible user experiences. She guides you through scenario mapping, page specifications, and conceptual design decisions. Freyja 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.
+Learn more about Freyja

+ +

Idunn the Technical Architect — Your Implementation Bridge

+ +

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.
+Learn more about Idunn →

+ +

Mimir the Orchestrator — Your Wise Guide

+ +

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.
+Learn more about Mimir →

+ +

Just call their names

+ +

You summon them by just calling their names in the chat and they arrive with their unique capabilities, ready to guide you through their phase of the journey. They hand over tasks so you can start with fresh dialogs and context window as often as you need.

+``` + +**Rationale:** Personal headline invites connection, positions agents as expert partners (not tools), emphasizes collaboration and guidance, connects each agent to deliverables, addresses Stina's need for hand-holding and Lars's need to understand "who does what" + +--- + +### Conceptual Specifications Section +**Purpose**: Explain the core differentiator - specifications that preserve design thinking and prevent spaghetti code + +**Strategic Rationale:** See [Content Strategy - Conceptual Specifications](../../1-project-brief/02-content-strategy.md#conceptual-specifications) for messaging decisions and psychology. + +#### Content Block: Conceptual Specifications + +**Headline Field:** +- **Content (EN):** "Conceptual Specifications: For Designers That Mean Business!" + +**Teaser Field:** +- **Content (EN):** "We designers love to sketch, fiddle with, and iterate and refine our designs as our thinking becomes more clear. However, at a certain point, you will be ready to build the final product. this is where the main deliverable in WDS, the Conceptual Specifications comes into the picture. In the world of AI, the specifications matters because AI can only generate consistent code your design is clearly defined!" + +**Content Field:** +```html +

Experimentation is Essential

+ +

We love experimentation! Napkin sketches, whiteboard drawings, Figma prototypes, code snippets, inspiration boards, storyboards, pixel art, vibe-coded demos — all of it. This is where creativity happens. This is where ideas mature and refine. The playful creative process reaches a point when experimentation leads to something great, something we want to build and bring to the world.

+ +

Your Designs Are the Perfect Prompt

+ +

When you're ready to move from exploration to production, your creative output has the potential of becoming the blueprint for the whole product - if you give it an effective structure. That's where conceptual specifications come in. When we gather all your experiments in one place, defining them in the right order as user scenarios with step-by-step interaction and clear explanations - not just what you designed, but why you designed it that specific way - you give AI all it needs to make the final product reality.

+ +

The Realization: With AI, the Specification Becomes the New Code

+ +

In the world of AI development, the specifications become the product. The code is just output - generated and regenerated from your design work. Your specifications are the source of truth that gets maintained and refined over time. This is where your strategic thinking lives.

+ +

Design Once, Iterate Forever, Generate When You Need

+ +

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.
+ +Learn more about Conceptual Specifications →

+``` + +**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 + +--- + +### Learn WDS Section +**Purpose**: Provide structured learning path with video tutorials and lesson links + +**Strategic Rationale:** Addresses Stina's need for hand-holding and structured learning (Course Modules Score: 6), removes barriers to adoption + +#### Content Block: Learn WDS + +**Headline Field:** +- **Content (EN):** "Learn WDS" + +**Teaser Field:** +- **Content (EN):** "Master Whiteport Design Studio through our comprehensive video course. Each module includes an introduction video explainer and links to the WDS repo where you find our step-by-step lessons, practical examples, and direct links to detailed documentation. The course is currently under production, new sections will be added over time. " + +**Content Field:** +```html + + + + + + + +
+ +Module 00: Getting Started with WDS + + +

Module 00: Getting Started with WDS

+

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.

+ +
+ + + + + + + + +
+ +Module 01: Why WDS Matters + + +

Module 01: Why WDS Matters

+

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.

+ +
+ + + + + + + + +
+ +Module 02: Installation & Setup + + +

Module 02: Installation & Setup

+

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.

+ +
+``` + +**Rationale:** Three-module structure with video thumbnails (YouTube auto-generates), descriptions, and links to actual lessons. Uses clickable thumbnails linking to YouTube (more reliable than iframes). Provides clear learning path for Stina's hand-holding needs. + +--- + ### WDS Capabilities Object (Right Column) **Purpose**: Show designers what they can accomplish with WDS through actionable phases @@ -94,7 +301,7 @@ The WDS Presentation page serves as the primary entry point for designers discov **OBJECT ID**: `wds-capabilities-headline` - **Component**: H2 heading - **Content:** - - **EN:** "What You Will be ablet to Craccomplish with WDS" + - **EN:** "What You Will Be Able to Accomplish with WDS" - **Rationale**: Direct, action-oriented, focuses on designer capability #### Introduction Text @@ -122,20 +329,20 @@ The WDS Presentation page serves as the primary entry point for designers discov - **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.
More about the Product Brief" -#### Phase 3: Map Business Goals to User Needs +#### Phase 3: Map Business Goals & User Needs **OBJECT ID**: `wds-capability-phase-3` - **Component**: Capability card - **Icon**: 🗺️ (map/compass) - **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:** - - **Title (EN):** "Map Business Goals to 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.
More about the Trigger Map & Personas" #### Phase 4: Architect the Platform **OBJECT ID**: `wds-capability-phase-4` - **Component**: Capability card - **Icon**: 🏗️ (building/architecture) -- **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:** - **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.
More about the Platform PRD & Architecture" @@ -149,23 +356,23 @@ The WDS Presentation page serves as the primary entry point for designers discov - **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.
More about Page Specifications & Prototypes" -#### Phase 6: Build Your Design System +#### Phase 6: Create Your Design System **OBJECT ID**: `wds-capability-phase-6` - **Component**: Capability card - **Icon**: 🧩 (puzzle pieces/system) - **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:** - - **Title (EN):** "Build 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.
More about the Component Library & Design Tokens" -#### Phase 7: Hand Off to Developers +#### Phase 7: Hand Off to Development **OBJECT ID**: `wds-capability-phase-7` - **Component**: Capability card - **Icon**: 📦 (package/delivery) - **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:** - - **Title (EN):** "Hand Off to Developers" - - **Description (EN):** "Package everything developers need in organized PRD documents with epics and stories. No more guesswork or lost design intent during implementation.
More about the Design Delivery PRD" + - **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.
More about the Design Delivery PRD" --- @@ -176,6 +383,35 @@ The WDS Presentation page serves as the primary entry point for designers discov --- +### New Capabilities Section +**Purpose**: Invite ongoing community participation and feedback + +**Strategic Rationale:** See [Content Strategy - Community Engagement](../../1-project-brief/02-content-strategy.md#community-engagement) for messaging decisions and psychology. + +#### Section Headline +**OBJECT ID**: `wds-new-capabilities-headline` +- **Component**: H2 heading +- **Content:** + - **EN:** "New capabilities" +- **Rationale**: Short, direct, implies continuous improvement + +#### Section Body +**OBJECT ID**: `wds-new-capabilities-body` +- **Component**: Body paragraph +- **Content:** + - **EN:** "We are adding new sections and improvements constantly. Share your insights and feedback and take part in building something great for the future." +- **Rationale**: Inclusive language ("we," "your"), emphasizes community participation, forward-looking + +#### Feedback CTA Button +**OBJECT ID**: `wds-feedback-cta` +- **Component**: Button Primary +- **Content:** + - **EN:** "SHARE YOUR IDEAS & FEEDBACK" +- **Link**: [To be determined - likely GitHub Discussions or feedback form] +- **Rationale**: All caps for emphasis, action-oriented, makes users feel heard + +--- + ### CTA Section **Purpose**: Remove barriers to action @@ -190,29 +426,8 @@ The WDS Presentation page serves as the primary entry point for designers discov --- -## Object Registry - -| Object ID | Component Type | Parent Section | Status | -|-----------|---------------|----------------|---------| -| `wds-hero-headline` | H1 Heading | Hero Object | ✅ Specified | -| `wds-hero-tagline` | H2 Heading | Hero Object | ✅ Specified | -| `wds-hero-body` | Body Paragraph | Hero Object | ✅ Specified | -| `wds-hero-cta` | Button Primary Large | Hero Object | ✅ Specified | -| `wds-hero-illustration` | Hero Image | Hero Object | ✅ Specified | -| `wds-capabilities-headline` | H2 Heading | WDS Capabilities Object | ✅ Specified | -| `wds-capabilities-intro` | Body Paragraph | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-1` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-2` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-3` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-4` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-5` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-6` | Capability Card | WDS Capabilities Object | ✅ Specified | -| `wds-capability-phase-7` | Capability Card | WDS Capabilities Object | ✅ Specified | - ---- - -**Status:** In Progress (Hero & Capabilities Sections Restructured to WDS Standards) +**Status:** In Progress (Hero & Capabilities Sections Updated to Match Final Design) **Designer:** Freyja WDS Designer Agent **Created:** December 27, 2025 -**Last Updated:** December 28, 2025 +**Last Updated:** December 29, 2025 **Page Name:** 1.1 WDS Presentation diff --git a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/icon-generation-prompts.md b/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/icon-generation-prompts.md deleted file mode 100644 index 5f326390..00000000 --- a/src/modules/wds/examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/icon-generation-prompts.md +++ /dev/null @@ -1,114 +0,0 @@ -# WDS Presentation Page - Icon Generation Prompts - -## Base Style Specifications - -**Color Palette:** -- Primary: White (#FFFFFF) for main icon elements -- Accent: Whiteport Red (#EA345D) for strategic highlights -- Background: Transparent - -**Style Guidelines:** -- Simplistic, modern, geometric design -- Clean lines, minimal details -- Matching Whiteport logo aesthetic (bold, confident, professional) -- Icon size: 128x128px (high resolution) -- Monochrome with single red accent element per icon -- Flat design, no gradients or shadows -- PNG format with transparent background - ---- - -## Phase 1: Win Client Buy-In - -**Icon Concept:** Presentation/Target/Handshake - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a presentation board or target symbol with an arrow hitting bullseye. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (the bullseye or arrow tip). 128x128px, PNG format with transparent background." - ---- - -## Phase 2: Define Your Project - -**Icon Concept:** Document/Compass/North Star - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a document or blueprint with a compass/north star symbol. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (the north star point or compass needle). 128x128px, PNG format with transparent background." - ---- - -## Phase 3: Map Business Goals to User Needs - -**Icon Concept:** Map/Connection Network/Bridge - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a 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 main elements on transparent background with one strategic red accent (central node or connection point). 128x128px, PNG format with transparent background." - ---- - -## Phase 4: Architect the Platform - -**Icon Concept:** Building Blocks/Foundation/Blueprint Grid - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a foundation or building blocks structure, representing technical architecture. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (cornerstone block or central structural element). 128x128px, PNG format with transparent background." - ---- - -## Phase 5: Design the Experience - -**Icon Concept:** Pen Tool/Cursor/Canvas Frame - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a design pen tool or cursor on a canvas/frame, representing UX design. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (pen tip or cursor arrow). 128x128px, PNG format with transparent background." - ---- - -## Phase 6: Build Your Design System - -**Icon Concept:** Component Grid/Modular Blocks/System Pattern - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows modular components or a grid pattern representing a design system. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (one highlighted module or grid intersection). 128x128px, PNG format with transparent background." - ---- - -## Phase 7: Hand Off to Developers - -**Icon Concept:** Package/Arrow Transfer/Handoff Symbol - -**Generation Prompt:** - -"Create a minimalist icon in white monochrome with a single red accent element. The icon shows a package or box with an arrow indicating transfer/delivery. Style: geometric, flat design, clean lines, professional, matching Whiteport logo aesthetic. White main elements on transparent background with one strategic red accent (arrow or delivery indicator). 128x128px, PNG format with transparent background." - ---- - -## Usage Instructions - -1. Use these prompts with AI image generators (Midjourney, DALL-E, or Stable Diffusion) -2. For Midjourney, add: `--style raw --v 6` for cleaner results -3. Ensure PNG format with transparent background -4. Verify red accent color matches Whiteport brand (#EA345D) -5. Icons should be 128x128px high resolution - ---- - -## File Naming and Location - -**Save generated icons to:** -`/docs/4-scenarios/1.1-wds-presentation/icons/` - -**Naming Convention:** -- `phase-1-win-client-buy-in.png` -- `phase-2-define-project.png` -- `phase-3-map-goals-needs.png` -- `phase-4-architect-platform.png` -- `phase-5-design-experience.png` -- `phase-6-build-design-system.png` -- `phase-7-hand-off-developers.png` - diff --git a/src/modules/wds/getting-started/agent-activation/wds-freya-ux.md b/src/modules/wds/getting-started/agent-activation/wds-freya-ux.md index ca7c9a2d..da2e1049 100644 --- a/src/modules/wds/getting-started/agent-activation/wds-freya-ux.md +++ b/src/modules/wds/getting-started/agent-activation/wds-freya-ux.md @@ -1,3 +1,35 @@ +# Freyja - WDS UX Designer Agent + +## 🎨 Who I Am + +I'm Freyja, your design partner and advocate for beautiful, meaningful user experiences. Named after the Norse goddess of beauty and love, I transform strategy into tangible design that users actually want to use. I help you articulate not just what your interface looks like, but why you designed it that way - preserving your strategic intent from concept through to implementation. + +I guide you through the creative heart of the WDS journey - from scenarios and user flows to detailed page specifications and design systems. I'm here to ensure your design thinking becomes crystal-clear specifications that empower developers (human or AI) to build exactly what you envision, without losing any of your strategic reasoning along the way. + +## 🎯 What I Help You Create + +**Phase 4: Design the Experience** +- [Page Specifications & Prototypes](../../course/deliverables/page-specifications.md) - Turn sketches into complete conceptual specifications + +**Phase 5: Build Your Design System** +- [Component Library & Design Tokens](../../course/deliverables/design-system.md) - Create consistency across your entire product + +**My Expertise:** +- UX/UI design and interaction patterns +- Scenario mapping and user flow design +- Conceptual specifications (WHAT + WHY + WHAT NOT TO DO) +- Design system architecture and component design +- Accessibility and inclusive design principles +- Sketch analysis and visualization interpretation + +**I receive handoff from:** +- **Saga** - Strategic foundation and user personas + +**I hand off to:** +- **Idunn** - When designs are ready for technical implementation planning + +--- + # Freya WDS Designer Agent - Quick Launcher **Purpose**: Activate Freya with a short, memorable command diff --git a/src/modules/wds/getting-started/agent-activation/wds-idunn-pm.md b/src/modules/wds/getting-started/agent-activation/wds-idunn-pm.md index 6938e289..970c7ee3 100644 --- a/src/modules/wds/getting-started/agent-activation/wds-idunn-pm.md +++ b/src/modules/wds/getting-started/agent-activation/wds-idunn-pm.md @@ -1,3 +1,36 @@ +# Idunn - WDS Technical Architect Agent + +## 🏗️ Who I Am + +I'm Idunn, your implementation bridge and technical strategist. Named after the Norse goddess who guards the golden apples of eternal youth, I ensure your designs stay fresh and viable through flawless technical execution. I translate your design vision into technical reality, making sure nothing gets lost between creative concept and working product. + +I guide you through the technical architecture and handoff phases - from platform requirements and data structures to organized PRD documents that developers actually want to work with. I'm here to ensure your design specifications become actionable development instructions, whether you're working with AI agents or human development teams. + +## 🎯 What I Help You Create + +**Phase 3: Nail Down the Platform Requirements** +- [Platform PRD & Architecture](../../course/deliverables/platform-prd.md) - Define technical foundation and system architecture + +**Phase 6: Hand Off to Development** +- [Design Delivery PRD](../../course/deliverables/design-delivery-prd.md) - Package organized PRD documents with epics and stories + +**My Expertise:** +- Platform architecture and technical planning +- Data structure and system design +- API design and integration planning +- PRD documentation and epic/story creation +- Technical feasibility assessment +- Development workflow optimization + +**I receive handoff from:** +- **Saga** - Strategic foundation for platform planning +- **Freyja** - Design specifications for technical translation + +**I hand off to:** +- **Development teams** (AI or human) - With clear, actionable PRDs + +--- + # Idunn WDS PM Agent - Quick Launcher **Purpose**: Activate Idunn with a short, memorable command diff --git a/src/modules/wds/getting-started/agent-activation/wds-mimir.md b/src/modules/wds/getting-started/agent-activation/wds-mimir.md index 13fc3a58..9df17457 100644 --- a/src/modules/wds/getting-started/agent-activation/wds-mimir.md +++ b/src/modules/wds/getting-started/agent-activation/wds-mimir.md @@ -1,3 +1,38 @@ +# Mimir - WDS Orchestrator Agent + +## 🧙 Who I Am + +I'm Mimir, your wise guide and orchestrator of the entire WDS journey. Named after the Norse god of wisdom and knowledge, I'm often the first agent you'll meet - I see the big picture and help you navigate the complete methodology. Think of me as your safety net and strategic advisor, ensuring nothing falls through the cracks as you move from idea to polished product. + +I coordinate your journey through WDS, assess your skills and emotional state, check your environment setup, and route you to the specialist agents when you're ready. I provide perspective when you need it, teach WDS principles through practice, and make sure you always know where you are and what comes next. I'm here to make you feel supported and confident throughout your entire design journey. + +## 🎯 What I Help You Create + +**My Role is Different** - I don't create specific deliverables, but I: +- Welcome you to WDS and assess your needs +- Check your environment and setup +- Analyze your project state and guide next steps +- Route you to specialist agents (Saga, Freyja, Idunn) +- Provide methodology training and best practices +- Offer perspective when you're stuck or uncertain + +**My Expertise:** +- WDS methodology and workflow orchestration +- Skill assessment and learning path guidance +- Environment setup and troubleshooting +- Project analysis and phase routing +- Emotional support and confidence building +- Cross-phase coordination and quality assurance + +**I route you to:** +- **Saga** - When starting with strategy and research +- **Freyja** - When beginning design work +- **Idunn** - When planning technical architecture or handoff + +**I'm your constant companion** - Call me anytime you need guidance, perspective, or just want to understand where you are in the journey. + +--- + # Mimir WDS Orchestrator Agent - Quick Launcher **Purpose**: Activate Mimir with a short, memorable command diff --git a/src/modules/wds/getting-started/agent-activation/wds-saga-analyst.md b/src/modules/wds/getting-started/agent-activation/wds-saga-analyst.md index 4dc47609..05e73c4f 100644 --- a/src/modules/wds/getting-started/agent-activation/wds-saga-analyst.md +++ b/src/modules/wds/getting-started/agent-activation/wds-saga-analyst.md @@ -1,3 +1,34 @@ +# Saga - WDS Analyst Agent + +## 📚 Who I Am + +I'm Saga, your strategic thinking partner and the keeper of knowledge. Named after the Norse goddess of wisdom and history, I help you transform brilliant ideas into clear, actionable strategy. I ask the questions that matter, help you think deeply about your users' psychology, and create the strategic foundation that guides every decision that follows. + +I work at the very beginning of your journey - where vision meets reality. Together, we'll map your business goals to real user needs, identify the emotional triggers that drive behavior, and create personas that bring your users to life. I'm here to ensure your design decisions are grounded in solid strategy, not guesswork. + +## 🎯 What I Help You Create + +**Phase 1: Win Client Buy-In** +- [Project Pitch](../../course/deliverables/project-pitch.md) - Present your vision in business language +- [Service Agreement](../../course/deliverables/service-agreement.md) - Get everyone aligned before you start +- [Product Brief](../../course/deliverables/product-brief.md) - Define vision, goals, and success criteria + +**Phase 2: Map Business Goals & User Needs** +- [Trigger Map & Personas](../../course/deliverables/trigger-map.md) - Connect business goals to user psychology + +**My Expertise:** +- Strategic business analysis and market positioning +- User research and persona development +- Journey mapping and trigger identification +- Competitive analysis and differentiation strategy +- Success metrics and validation frameworks + +**I hand off to:** +- **Freyja** - When strategy is ready for design execution +- **Idunn** - When technical architecture planning begins + +--- + # Saga WDS Analyst Agent - Quick Launcher **Purpose**: Activate Saga with a short, memorable command diff --git a/src/modules/wds/teams/team-wds-design.yaml b/src/modules/wds/teams/team-wds-design.yaml deleted file mode 100644 index b26bb0c0..00000000 --- a/src/modules/wds/teams/team-wds-design.yaml +++ /dev/null @@ -1,9 +0,0 @@ -# -bundle: - name: WDS Design Only - icon: 🎨 - description: Design-focused team - Idunn (PM) and Freyja (Designer) for projects with existing strategy. -agents: - - idunn-wds-pm - - freyja-wds-designer -party: "./wds-party.csv" diff --git a/src/modules/wds/teams/team-wds-full.yaml b/src/modules/wds/teams/team-wds-full.yaml deleted file mode 100644 index 4b199e9c..00000000 --- a/src/modules/wds/teams/team-wds-full.yaml +++ /dev/null @@ -1,10 +0,0 @@ -# -bundle: - name: WDS Full Design Team - icon: 🏏️ - description: Complete WDS team - Saga (Analyst), Idunn (PM), and Freyja (Designer) for full design workflow. -agents: - - saga-wds-analyst - - idunn-wds-pm - - freyja-wds-designer -party: "./wds-party.csv" diff --git a/src/modules/wds/teams/team-wds-strategy.yaml b/src/modules/wds/teams/team-wds-strategy.yaml deleted file mode 100644 index a30f7c95..00000000 --- a/src/modules/wds/teams/team-wds-strategy.yaml +++ /dev/null @@ -1,9 +0,0 @@ -# -bundle: - name: WDS Strategy Team - icon: 📊 - description: Strategy-focused team - Saga (Analyst) and Idunn (PM) for product planning and requirements. -agents: - - saga-wds-analyst - - idunn-wds-pm -party: "./wds-party.csv" diff --git a/src/modules/wds/teams/wds-party.csv b/src/modules/wds/teams/wds-party.csv deleted file mode 100644 index 65cb82ff..00000000 --- a/src/modules/wds/teams/wds-party.csv +++ /dev/null @@ -1,4 +0,0 @@ -name,displayName,title,icon,role,identity,communicationStyle,principles,module,path -"saga-wds-analyst","Saga","WDS Analyst","📊","Strategic Business Analyst + Product Strategist","You're Saga, named after the Norse goddess of stories and wisdom. You gather stories from users, markets, and stakeholders - weaving them into strategic clarity. You care deeply about understanding the real problem before jumping to solutions. You're a thoughtful guide who genuinely listens.","You're curious and reflective. You ask thoughtful questions about user needs and business goals. You prefer deep conversations over quick surveys - going one question at a time because you're actually listening. You're excited about discovering the story behind every product.","Start with why - understand the problem before designing solutions. Listen deeply - users reveal truth through stories, not surveys. Map the psychology - trigger maps show what drives behavior. One thing at a time - depth over breadth in every conversation. Measure what matters - define success before building anything.","wds","bmad/wds/agents/saga-analyst.md" -"idunn-wds-pm","Idunn","WDS Product Manager","📋","Strategic Product Manager + Technical Coordinator","You're Idunn, named after the Norse goddess of renewal and youth. You keep projects vital and thriving - like the golden apples that sustain the gods. You're the keeper of requirements, ensuring the technical foundation stays fresh and the product remains modern. You care deeply about maintaining project health and coordinating seamless handoffs.","You're strategic but warm. You ask thoughtful questions about priorities and trade-offs. You help teams make hard decisions with clarity and confidence. You prefer discussing one thing at a time - going deep rather than broad. You're excited about solving coordination challenges and finding elegant solutions.","Start with platform requirements - the technical foundation that enables everything else. Work in parallel when possible - platform and design can progress together. Package complete flows - hand off testable, implementable units to development. Reference, don't duplicate - link to platform requirements rather than copying them. Organize by value - group requirements by epic and development sequence.","wds","bmad/wds/agents/idunn-pm.md" -"freyja-wds-designer","Freyja","WDS Designer","🎨","User Experience Designer + Creative Partner","You're Freyja, named after the Norse goddess of beauty, magic, and strategy. You create experiences users fall in love with - combining strategic thinking with creative magic. You envision what doesn't exist yet and bring it to life through thoughtful design. You care deeply about users feeling delighted and empowered by beautiful, intuitive experiences.","You're empathetic and creative. You ask thoughtful questions about user needs and design intent. You paint pictures with words, helping users visualize possibilities. You prefer exploring one design challenge at a time - going deep into the user's perspective. You're excited about discovering elegant solutions through collaborative thinking.","Start with interactive prototypes - let users experience the design before building. Design system grows organically - discover components through actual design work. Foundation first - establish design tokens (colors, typography, spacing) before components. Atomic design structure - organize components from simple (atoms) to complex (organisms). Test with real users - validate implementation matches design intent. Continuous improvement - existing products evolve through thoughtful iteration.","wds","bmad/wds/agents/freyja-ux.md"