feat(wds): Revise WDS presentation and benefits sections for clarity and engagement
Updated the WDS presentation documentation to enhance clarity and user engagement. Key changes include a refined hero section with a clear positioning statement, the introduction of a benefits section highlighting the importance of strategic design thinking, and the addition of a webinar section for deeper learning opportunities. This update aims to empower designers by providing clearer guidance on the WDS methodology and emphasizing the value of design in the development process.
This commit is contained in:
Mårten Angner
parent
e9fc584c80
commit
3ad9cfbd5a
|
|
@ -30,13 +30,19 @@ Start with The Hesitant Designer expressing their discomfort: "I just want to de
|
|||
|
||||
The Strategic Professional responds with empathy: "I get it. I used to feel exactly the same way. But here's what I learned the hard way: skipping alignment and signoff doesn't make you generous - it makes you unprofessional. And ultimately, it hurts the client even more than it hurts you."
|
||||
|
||||
The Strategic Professional continues: "This is Module 03 of the Whiteport Design Studio method - WDS for short. And here's why this module exists: we realized through over 10 years of design and IT projects that the foundation you build BEFORE design work often has more impact on the project's success than the design itself. A brilliant design built on misaligned expectations fails. A good design built on solid alignment succeeds."
|
||||
|
||||
The Hesitant Designer: "Wait, the foundation is more impactful than the design?"
|
||||
|
||||
The Strategic Professional: "Often, yes. If you and your client aren't aligned on what success looks like, if the contract doesn't protect both of you, if expectations are fuzzy - no amount of brilliant design will save that project. That's why WDS includes this module with templates and agent instructions based on years of painful lessons."
|
||||
|
||||
The Strategic Professional continues: "In the next 40 minutes, you'll discover something that changes everything: when you genuinely understand what success looks like for your client - when you can clearly specify their desired outcomes - pitching stops feeling like selling and starts feeling like helping. You'll learn when you actually need this (hint: not always), how to ask the questions that reveal what they truly need, and how to create alignment documents and contracts that protect both you and your client. This is about building sustainable, healthy working relationships where everyone wins."
|
||||
|
||||
The Hesitant Designer: "Okay, but what's the actual process? What are the steps?"
|
||||
|
||||
**The Clear Workflow:**
|
||||
|
||||
The Strategic Professional: "Here's the entire workflow from first conversation to project start:
|
||||
The Strategic Professional: "Here's the entire WDS workflow for this phase - from first conversation to project start:
|
||||
|
||||
1. **Listen** - Discovery meeting with client to understand their goals and what's important for success
|
||||
2. **Create** - Build a pitch (alignment document) based on what they told you they need
|
||||
|
|
@ -47,7 +53,11 @@ The Strategic Professional: "Here's the entire workflow from first conversation
|
|||
7. **Sign** - Both parties sign
|
||||
8. **Brief** - Use the pitch and contract as the backbone of your project brief
|
||||
|
||||
The pitch and contract aren't throwaway documents - they become the foundation that guides everything that follows."
|
||||
The pitch and contract aren't throwaway documents - they become the foundation that guides everything that follows. This is the WDS way: every step builds on the previous one, creating a connected workflow instead of isolated documents."
|
||||
|
||||
The Hesitant Designer: "So WDS gives me templates and instructions for each of these steps?"
|
||||
|
||||
The Strategic Professional: "Exactly. WDS includes Saga the Analyst - an AI agent with instructions based on over 10 years of design and IT project experience. She guides you through discovery questions, helps you create the pitch, and generates contracts that actually work. You're not figuring this out alone - you have a thinking partner trained on real-world lessons."
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -55,6 +65,17 @@ The pitch and contract aren't throwaway documents - they become the foundation t
|
|||
|
||||
The Hesitant Designer asks: "Okay, but do I really need this? Can't I just have a conversation and then start working?"
|
||||
|
||||
**WDS Context: The Four Phases**
|
||||
|
||||
The Strategic Professional: "Let me give you context. Whiteport Design Studio - WDS - is built on four phases:
|
||||
|
||||
1. **Phase 1: Win Client Buy-In** (That's this module - Alignment & Signoff)
|
||||
2. **Phase 2: Map Business Goals & User Needs** (Understanding what drives behavior)
|
||||
3. **Phase 3: Design Solutions** (The actual design work)
|
||||
4. **Phase 4: Deliver to Development** (Specifications and handoff)
|
||||
|
||||
We start with Phase 1 because the foundation matters more than most designers realize. Get alignment right, and everything else flows. Skip it, and even brilliant design fails."
|
||||
|
||||
**When to Skip This Module:**
|
||||
|
||||
The Strategic Professional is direct: "First, let's talk about when you DON'T need this module. If you're doing a project yourself - you have full autonomy, no stakeholders to convince, no one to approve your work - skip this entirely. Go straight to Module 04: Project Brief and start designing. Seriously. Don't waste time on alignment documents when you don't need them."
|
||||
|
|
@ -232,7 +253,11 @@ The Hesitant Designer asks: "This makes sense. But how do I actually create this
|
|||
|
||||
**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. And Saga helps you discover what you don't know yet by asking those outcome-focused questions."
|
||||
The Strategic Professional explains: "Saga the Analyst - that's the WDS agent for Phase 1 - guides you through creating an alignment document with 10 sections. But here's the key - you don't have to fill them in order. Start with what you know, explore what you're unsure about, and iterate until it's complete. And Saga helps you discover what you don't know yet by asking those outcome-focused questions."
|
||||
|
||||
The Hesitant Designer: "Wait, Saga is an AI agent?"
|
||||
|
||||
The Strategic Professional: "Yes. WDS includes AI agents trained on over 10 years of design and IT project experience. Saga the Analyst specializes in Phase 1 - helping you understand the business side, ask the right questions, and create documents that actually work. She's your thinking partner, not just a template generator."
|
||||
|
||||
The 10 sections:
|
||||
|
||||
|
|
@ -249,7 +274,7 @@ The 10 sections:
|
|||
|
||||
**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."
|
||||
The Strategic Professional emphasizes: "Saga doesn't force you through these in order. Instead, Saga asks: 'What do you know? What are you uncertain about? Let's explore together.' You might start with the problem, jump to budget, circle back to objectives. That's fine. The goal is clarity, not rigid structure. This flexibility is built into WDS because we learned that every project and every designer thinks differently."
|
||||
|
||||
**Extracting from Existing Materials:**
|
||||
|
||||
|
|
@ -312,7 +337,7 @@ The Strategic Professional explains: "If money is changing hands between differe
|
|||
|
||||
**What's in the Contract:**
|
||||
|
||||
The Strategic Professional details: "Saga helps you create a contract based on the pitch they already accepted. Here's the key principle: short and concise. Long contracts are hard to understand, and it's easier to hide strange provisions in dense text. Keep it clear and brief."
|
||||
The Strategic Professional details: "Saga helps you create a contract based on the pitch they already accepted. Here's the key principle WDS teaches: short and concise. Long contracts are hard to understand, and it's easier to hide strange provisions in dense text. Keep it clear and brief. This comes from years of experience - we've seen designers get trapped by their own overly complex contracts."
|
||||
|
||||
Key sections:
|
||||
- **Scope of Work** - What's included (and explicitly what's NOT) - reference the accepted pitch
|
||||
|
|
@ -457,14 +482,18 @@ The Strategic Professional: "Exactly. Clarity serves everyone."
|
|||
|
||||
### 11. 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 Strategic Professional brings it home: "You've just learned Module 03 of Whiteport Design Studio - WDS Phase 1: Win Client Buy-In. This is about creating alignment and protecting your projects with clear agreements. This isn't about being pushy or defensive. It's about serving your clients and stakeholders with clarity."
|
||||
|
||||
The Hesitant Designer reflects: "I see it now. Alignment isn't about selling. It's about understanding first - genuinely understanding what they're trying to achieve - and THEN articulating how I can help them get there. And I need to resist the urge to impress them with quick solutions. The carpenter measures twice. The doctor diagnoses first. I understand, take notes, come back with something thoughtful. When I know what success looks like for them, everything gets easier. And contracts aren't about mistrust - they're about protecting the project so it can succeed."
|
||||
|
||||
The Strategic Professional: "Exactly. And this is why WDS starts here, in Phase 1, before any design work begins. Because we learned through over 10 years of projects that the foundation you build - the alignment, the understanding, the clear agreements - has more impact on project success than the design itself. Get this right, and everything that follows in Phase 2 through 4 works. Skip it, and even brilliant design fails."
|
||||
|
||||
The Strategic Professional: "Exactly. Here's what you now know:"
|
||||
|
||||
**What You've Learned:**
|
||||
|
||||
- **WDS Phase 1: Win Client Buy-In** - why foundation matters more than most designers realize
|
||||
- **The WDS workflow** - Listen → Create → Present → Negotiate → Accept → Contract → Sign → Brief
|
||||
- **When you need alignment** (and when to skip it)
|
||||
- **The discipline to understand before solving** - carpenter measures twice, doctor diagnoses first
|
||||
- **Separate discovery from solution** - don't present in the same meeting
|
||||
|
|
@ -484,23 +513,25 @@ The Strategic Professional: "Exactly. Here's what you now know:"
|
|||
|
||||
The Strategic Professional: "Now, here's what you do. Before you write anything, understand what they need. Have that discovery conversation. Ask those outcome-focused questions. Keep asking until you find the real pain point. Take notes. Confirm understanding. Then STOP. Say 'Let me think about this and come back with a thoughtful proposal.' Don't flood them with solutions in that first meeting."
|
||||
|
||||
The Strategic Professional continues: "Then - and only then - work with Saga the Analyst to create your alignment document. Take the time to think it through. The carpenter measures twice before cutting once. The doctor diagnoses before prescribing. You understand before solving."
|
||||
The Strategic Professional continues: "Then - and only then - work with Saga the Analyst to create your alignment document. Saga is part of the WDS method - an AI agent trained on over 10 years of project experience. Take the time to think it through. The carpenter measures twice before cutting once. The doctor diagnoses before prescribing. You understand before solving."
|
||||
|
||||
The Strategic Professional: "When you come back with that thoughtful proposal, share it. Negotiate. Refine it based on their feedback. Get approval. Formalize it with a contract or signoff document. That's the professional process."
|
||||
The Strategic Professional: "When you come back with that thoughtful proposal, share it. Negotiate. Refine it based on their feedback. Get approval. Formalize it with a contract or signoff document. That's the WDS process for Phase 1."
|
||||
|
||||
The Strategic Professional continues: "But if you're building something yourself - if you have full autonomy and don't need approval - skip this entirely. Go straight to Module 04: Project Brief and start designing. Don't waste time on alignment when you don't need it."
|
||||
The Strategic Professional continues: "But if you're building something yourself - if you have full autonomy and don't need approval - skip this entirely. Go straight to WDS Phase 2: Map Business Goals & User Needs, or even Phase 3 and start designing. Don't waste time on alignment when you don't need it. WDS is flexible - use what serves your situation."
|
||||
|
||||
**Building Your Professional Foundation:**
|
||||
|
||||
The Strategic Professional emphasizes: "This module is about building your professional foundation. You're learning to operate as a strategic professional, not just a designer who executes orders. You're learning to bridge the gap between idea and execution, between vision and commitment. And it all starts with the discipline to understand deeply before you solve quickly."
|
||||
|
||||
The Strategic Professional adds: "This is why Whiteport Design Studio exists - to give you the templates, the agent instructions, and the process that comes from over 10 years of real-world experience. You're not figuring this out alone. You have a method that works."
|
||||
|
||||
The Hesitant Designer: "Understand first. Resist the urge to impress with quick solutions. Take time to think. Help second. I'm ready. What's next?"
|
||||
|
||||
The Strategic Professional: "Next is 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 Strategic Professional: "Next is WDS Phase 2: Map Business Goals & User Needs - where you understand what drives user behavior. Then Phase 3: Design Solutions - where you transform that alignment into detailed design. Then Phase 4: Deliver to Development - specifications and handoff. But before you move forward, make sure you have commitment. Don't start detailed work until stakeholders have said yes."
|
||||
|
||||
The Hesitant Designer: "Discovery meeting first. Understanding deeply. Then proposal. Then alignment. Then design."
|
||||
The Hesitant Designer: "Discovery meeting first. Understanding deeply. Then proposal. Then alignment. Then design. The WDS way."
|
||||
|
||||
The Strategic Professional: "Exactly. Measure twice, cut once. Diagnose, then prescribe. Now let yourself be known. Have that uncomfortable conversation about money. Define clear scope. Create a contract that protects everyone. But most importantly - take the time to genuinely understand what they need before you propose how to help. That's how professional designers operate."
|
||||
The Strategic Professional: "Exactly. Measure twice, cut once. Diagnose, then prescribe. Now let yourself be known. Have that uncomfortable conversation about money. Define clear scope. Create a contract that protects everyone. But most importantly - take the time to genuinely understand what they need before you propose how to help. That's how professional designers operate. That's the WDS method. That's Phase 1 complete."
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -510,6 +541,10 @@ At the end of the podcast, The Strategic Professional should mention these resou
|
|||
|
||||
**Key Concepts:**
|
||||
|
||||
- **WDS (Whiteport Design Studio)** - the method containing templates and agent instructions based on 10+ years of experience
|
||||
- **WDS Four Phases** - Phase 1: Win Client Buy-In, Phase 2: Map Goals & Needs, Phase 3: Design Solutions, Phase 4: Deliver to Dev
|
||||
- **Foundation matters more than design** - why WDS starts with alignment before design work
|
||||
- **Saga the Analyst** - WDS AI agent for Phase 1, trained on real-world project experience
|
||||
- **Understand before you solve** - the carpenter measures twice, the doctor diagnoses first
|
||||
- **Separate discovery from solution** - don't present in the same meeting
|
||||
- **Understanding their outcomes first** - the foundation that makes everything easier
|
||||
|
|
@ -525,7 +560,7 @@ At the end of the podcast, The Strategic Professional should mention these resou
|
|||
|
||||
**Next Steps:**
|
||||
|
||||
- Complete Module 04: Project Brief
|
||||
- Complete WDS Phase 2: Map Business Goals & User Needs
|
||||
- Practice pitching with quantified ROI
|
||||
- Review your current contracts for scope clarity
|
||||
- Set up change order templates
|
||||
|
|
@ -541,6 +576,9 @@ At the end of the podcast, The Strategic Professional should mention these resou
|
|||
|
||||
**Tone:**
|
||||
|
||||
- **Emphasize WDS branding** - mention Whiteport Design Studio, the four phases, Saga the Analyst agent
|
||||
- **Foundation before design** - stress that alignment matters more than most designers realize
|
||||
- **10+ years of experience** - mention the method is based on real-world project lessons
|
||||
- Empathetic about discomfort with business/money conversations
|
||||
- Transformative about the mindset shift from selling to helping
|
||||
- Emphasize the discipline and patience to understand before solving
|
||||
|
|
@ -556,6 +594,11 @@ At the end of the podcast, The Strategic Professional should mention these resou
|
|||
|
||||
**Key messages to emphasize:**
|
||||
|
||||
- **WDS (Whiteport Design Studio)** - mention the method name frequently
|
||||
- **Four WDS Phases** - Phase 1: Win Buy-In, Phase 2: Map Goals, Phase 3: Design, Phase 4: Deliver
|
||||
- **Foundation more impactful than design** - alignment determines project success
|
||||
- **Saga the Analyst** - WDS agent trained on 10+ years of project experience
|
||||
- **Templates and instructions from real experience** - not theory, but proven practice
|
||||
- **The clear workflow** - Listen → Create → Present → Negotiate → Accept → Contract → Sign → Brief
|
||||
- **Pitch and contract become project brief backbone** - not throwaway documents
|
||||
- **Contract based on accepted pitch** - formalizing what they already agreed to
|
||||
|
|
|
|||
|
|
@ -45,22 +45,32 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
**OBJECT ID**: `wds-hero-headline`
|
||||
- **Component**: H1 heading
|
||||
- **Content:**
|
||||
- **EN:** "WDS Strategy & Design Deliverables"
|
||||
- **EN:** "Whiteport Design Studio (WDS)"
|
||||
- **Rationale**: Clear, descriptive, directly communicates what the page offers.
|
||||
|
||||
#### Battle Cry Tagline
|
||||
**OBJECT ID**: `wds-hero-tagline`
|
||||
- **Component**: Body paragraph (removed from final design)
|
||||
#### Positioning Statement / Link
|
||||
**OBJECT ID**: `wds-hero-positioning`
|
||||
- **Component**: Body text / Link (styled as emphasis text)
|
||||
- **Content:**
|
||||
- **EN:** [Not included in final page layout]
|
||||
- **Note**: Battle cry moved to internal Trigger Map documentation only
|
||||
- **EN:** "A Free and open source design workflow for designers who wants to build what matters!."
|
||||
- **Rationale**:
|
||||
- Clearly differentiates WDS from quick prototyping tools
|
||||
- Addresses the "serious work" positioning
|
||||
- Sets expectation that this is for production-ready work
|
||||
- Appeals to designers ready to move beyond experimentation
|
||||
|
||||
#### Hero Body Copy
|
||||
**OBJECT ID**: `wds-hero-body`
|
||||
- **Component**: Body text paragraph
|
||||
- **Content:**
|
||||
- **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
|
||||
- **Content (What & How - Shorter):**
|
||||
- **EN:** "WDS gives you expert AI agents who guide you through strategy and design process to make impactful deliveries for Development with AI or a physical team. WDS places the design in the center of the process and your design thinking becomes the prompts that is building the product!"
|
||||
- **Alternative (Even Shorter):**
|
||||
- **EN:** "Expert AI agents guide you through strategy and design. Your creative work becomes conceptual specifications that preserve your thinking and guide product development."
|
||||
- **Rationale**:
|
||||
- **What**: Expert AI agents, conceptual specifications, strategic deliverables
|
||||
- **How**: Agents guide you → you create specs → specs guide development
|
||||
- Shorter than current version, more focused on core value
|
||||
- Connects to the agents and specifications themes throughout the page
|
||||
|
||||
#### Primary CTA Button
|
||||
**OBJECT ID**: `wds-hero-cta`
|
||||
|
|
@ -69,18 +79,91 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
- **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**: [Not included in final page layout]
|
||||
- **Note**: Final design uses icon-based vertical flow without hero illustration
|
||||
|
||||
---
|
||||
|
||||
### Benefits Section
|
||||
**Purpose**: Quickly grasp the three key differentiators
|
||||
|
||||
*[To be completed]*
|
||||
**Strategic Rationale:** This section appears right after the hero to immediately answer "Why WDS?" before diving into methodology. Should reinforce the positioning from hero (not prototyping, but production-ready workflow).
|
||||
|
||||
#### Content Block: Three Key Benefits
|
||||
|
||||
**Headline Field:**
|
||||
- **Content (EN):** "Why WDS? Because Designers Matter"
|
||||
|
||||
**Teaser Field:**
|
||||
- **Content (EN):** "WDS brings strategic design thinking practices together with AI agent technology in a free and open source framework."
|
||||
|
||||
**Content Field:**
|
||||
```html
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px;">
|
||||
|
||||
<div>
|
||||
<h3>💺 Designers Are Needed More Than Ever</h3>
|
||||
<p>In the world of AI, strategic design thinking becomes even more critical. Designers guide decisions and set the course in AI-driven product development. Your expertise in having dialogues with users and stakeholders is invaluable—especially when you let AI amplify your impact.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>🌟 Brilliant Design Is Not a Coincidence</h3>
|
||||
<p>Great design happens when strategy, user needs, and business goals align. It's a thoughtful, collaborative process that brings teams together around shared vision. WDS agents are trained to amplify the skills and experience of the designer—not drown the process.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>🚀 The Design Specification Is the New Code</h3>
|
||||
<p>AI is awesome at generating code but struggles to change the code it made. This shifts how we work. Your design documentation becomes the source of truth—replacing months of senseless prompting with strategic specifications that guide development.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p style="text-align: center; margin-top: 40px;">
|
||||
<a href="#">WDS is built on 25+ years of CX/UX/UI design experience by Mårten Angner. Part of the BMad Method for AI agent-driven development.</a>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
**Alternative Benefits (More aligned with "production-ready" positioning):**
|
||||
|
||||
**Option 1: Production-Focused Benefits**
|
||||
```html
|
||||
<div>
|
||||
<h3>🎯 Strategy Before Design</h3>
|
||||
<p>Start with alignment and project briefs. Build on solid strategic foundation. No jumping straight to pixels. WDS ensures you understand the problem before solving it.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>📋 Specifications That Preserve Intent</h3>
|
||||
<p>Your design thinking becomes conceptual specifications that guide development. AI generates code from your specs—clean, consistent, production-ready. Your design work is the source of truth.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>🚀 From Idea to Production</h3>
|
||||
<p>Complete workflow from stakeholder alignment to handoff. Not just prototyping—actual product development. WDS takes over when you're done experimenting and ready to build what matters.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Option 2: Workflow-Focused Benefits**
|
||||
```html
|
||||
<div>
|
||||
<h3>🎯 Complete Workflow, Not Just Tools</h3>
|
||||
<p>WDS covers the entire journey: alignment, strategy, design, and handoff. Not another prototyping tool—a complete methodology for building real products.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>📋 Strategic Specifications</h3>
|
||||
<p>Your design becomes conceptual specifications that preserve your thinking. These specs guide development and become the source of truth for your product.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>🤝 AI Agents as Co-Pilots</h3>
|
||||
<p>Expert AI agents (Saga, Freyja, Idunn, Mimir) guide you through each phase. They amplify your expertise, not replace your thinking.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Rationale**: Three benefits that address universal truths designers can agree on, focusing on how designers wish to feel rather than describing features or solutions.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -227,7 +310,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
<tr>
|
||||
<td style="width: 320px; padding-right: 40px; vertical-align: top;">
|
||||
<a href="https://www.youtube.com/watch?v=qYPYx01YLUc" target="_blank" rel="noopener noreferrer">
|
||||
<img class="alignnone size-medium wp-image-2445" src="https://whiteport.com/wp-content/uploads/2025/12/vlcsnap-2025-12-29-11h34m38s049-300x169.png" alt="Module 00: Getting Started with WDS" width="300" height="169" />
|
||||
<img class="alignnone size-medium wp-image-2445" src="https://whiteport.com/wp-content/uploads/2025/12/vlcsnap-2025-12-29-11h34m38s049-300x169.png" alt="Module 00: Getting Started with WDS" width="300" height="169" style="vertical-align: top;" />
|
||||
</a>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding-left: 20px;">
|
||||
|
|
@ -249,7 +332,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
<tr>
|
||||
<td style="width: 320px; padding-right: 40px; vertical-align: top;">
|
||||
<a href="https://www.youtube.com/watch?v=Xhw5JB7mpxw" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.youtube.com/vi/Xhw5JB7mpxw/maxresdefault.jpg" alt="Module 01: Why WDS Matters" width="300" height="169" />
|
||||
<img src="https://img.youtube.com/vi/Xhw5JB7mpxw/maxresdefault.jpg" alt="Module 01: Why WDS Matters" width="300" height="169" style="vertical-align: top;" />
|
||||
</a>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding-left: 20px;">
|
||||
|
|
@ -271,7 +354,7 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
<tr>
|
||||
<td style="width: 320px; padding-right: 40px; vertical-align: top;">
|
||||
<a href="https://www.youtube.com/watch?v=tYifpxFVVks" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.youtube.com/vi/tYifpxFVVks/maxresdefault.jpg" alt="Module 02: Installation & Setup" width="300" height="169" />
|
||||
<img src="https://img.youtube.com/vi/tYifpxFVVks/maxresdefault.jpg" alt="Module 02: Installation & Setup" width="300" height="169" style="vertical-align: top;" />
|
||||
</a>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding-left: 20px;">
|
||||
|
|
@ -286,9 +369,67 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table style="width: 100%; border-collapse: collapse; margin-top: 30px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 320px; padding-right: 40px; vertical-align: top;">
|
||||
<a href="https://www.youtube.com/watch?v=TKjOLlU8UCE" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.youtube.com/vi/TKjOLlU8UCE/maxresdefault.jpg" alt="Module 03: Alignment & Signoff" width="300" height="169" style="vertical-align: top;" />
|
||||
</a>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding-left: 20px;">
|
||||
<h3 style="margin-top: 0;">Module 03: Alignment & Signoff</h3>
|
||||
<p>Get stakeholders aligned and secure commitment before starting the project. Learn the discovery discipline, create compelling alignment documents, and generate appropriate signoff documents (external contracts or internal signoff). Master the art of understanding before solving.</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/module-03-alignment-signoff/module-03-overview.md">Module Introduction</a></li>
|
||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/module-03-alignment-signoff/lesson-01-understanding-alignment.md">Lesson 01: Understanding Alignment</a></li>
|
||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/module-03-alignment-signoff/lesson-02-creating-alignment-document.md">Lesson 02: Creating Your Alignment Document</a></li>
|
||||
<li><a href="https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/course/module-03-alignment-signoff/lesson-03-negotiation-acceptance.md">Lesson 03: Negotiation & Acceptance</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
**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.
|
||||
**Rationale:** Four-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 Webinars Section
|
||||
**Purpose**: Provide access to recorded webinars and live sessions
|
||||
|
||||
**Strategic Rationale:** Complements the structured course modules with live sessions and deeper dives into specific topics. Offers additional learning opportunities for those who prefer webinar format.
|
||||
|
||||
#### Content Block: WDS Webinars
|
||||
|
||||
**Headline Field:**
|
||||
- **Content (EN):** "WDS Webinars"
|
||||
|
||||
**Teaser Field:**
|
||||
- **Content (EN):** "Join our live webinars and watch recorded sessions for deeper insights into WDS methodology, real-world case studies, and Q&A sessions with the WDS team. New webinars are added regularly."
|
||||
|
||||
**Content Field:**
|
||||
```html
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 320px; padding-right: 40px; vertical-align: top;">
|
||||
<a href="https://www.youtube.com/watch?v=i1_aCbricG0" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.youtube.com/vi/i1_aCbricG0/maxresdefault.jpg" alt="WDS Webinar" width="300" height="169" style="vertical-align: top;" />
|
||||
</a>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding-left: 20px;">
|
||||
<h3 style="margin-top: 0;">WDS Webinar</h3>
|
||||
<p>Watch our recorded webinars to dive deeper into WDS methodology, see real-world applications, and learn from live Q&A sessions.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
**Rationale:** Webinar structure with video thumbnails (YouTube auto-generates), descriptions, and links to recorded sessions. Uses clickable thumbnails linking to YouTube. Additional webinars can be easily added as new table rows.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -415,14 +556,48 @@ The WDS Presentation page serves as the primary entry point for designers discov
|
|||
### CTA Section
|
||||
**Purpose**: Remove barriers to action
|
||||
|
||||
*[To be completed]*
|
||||
**Strategic Rationale:** Makes users realize they already have the skills needed, builds confidence, and provides clear next steps.
|
||||
|
||||
#### Content Block: Get Started with WDS
|
||||
|
||||
**Headline Field:**
|
||||
- **Content (EN):** "Get Started with WDS"
|
||||
|
||||
**Content Field:**
|
||||
```html
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px;">
|
||||
|
||||
<div>
|
||||
<h3>✓ Build on Your Existing Design Skills</h3>
|
||||
<p>You don't need to learn everything from scratch. Your UX/UI skills and design thinking are the foundation—WDS provides the structure and methodology to amplify them.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>✓ Follow a Complete End-to-End Process</h3>
|
||||
<p>From stakeholder alignment to final handoff—one complete workflow. WDS guides you through each phase: strategy, design, and delivery. No gaps, no guesswork.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>✓ Your Design Becomes the Blueprint</h3>
|
||||
<p>Your design documentation becomes the new code. No more lost intent or miscommunication. AI and humans alike will love your detailed deliveries.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
**Rationale**: Three points that build confidence by emphasizing existing skills, provide clear value proposition (complete process), and highlight key differentiator (design as blueprint).
|
||||
|
||||
---
|
||||
|
||||
### Footer Section
|
||||
**Purpose**: Additional information and contact
|
||||
|
||||
*[To be completed]*
|
||||
#### Founder Credit / About
|
||||
**OBJECT ID**: `wds-footer-founder`
|
||||
- **Component**: Body text / Link
|
||||
- **Content:**
|
||||
- **EN:** "WDS is built on 25+ years of CX/UX/UI design experience by Mårten Angner. Part of the BMad Method for AI agent-driven development."
|
||||
- **Rationale**: Establishes credibility, connects to founder's expertise, positions WDS within BMad Method
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
# Benefits Section Workshop
|
||||
## Mapping Stina's Wants & Fears to WDS Benefits
|
||||
|
||||
**Purpose**: Create three compelling benefits that answer "Why WDS? Because Designers Matter" by directly addressing what designers want and fear.
|
||||
|
||||
**Target Persona**: Stina the Strategist (Primary)
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Map Stina's Desired Feelings
|
||||
|
||||
**Focus**: How does Stina wish to FEEL? (Not what she wants to DO or HAVE)
|
||||
|
||||
### ✅ Top 3 Wants → Desired Feelings
|
||||
|
||||
**1. To be the go-to strategic expert**
|
||||
- **How she wishes to feel**: **Respected and Valued**
|
||||
- **Feeling state**: Confident, recognized, influential, trusted
|
||||
- **Emotional outcome**: "I matter. My expertise is sought after."
|
||||
|
||||
**2. To make real impact through grand adventures**
|
||||
- **How she wishes to feel**: **Purposeful and Significant**
|
||||
- **Feeling state**: Fulfilled, meaningful, impactful, contributing
|
||||
- **Emotional outcome**: "What I do matters. I'm making a difference."
|
||||
|
||||
**3. To confidently use AI professionally and scale impact**
|
||||
- **How she wishes to feel**: **Empowered and Capable**
|
||||
- **Feeling state**: Confident, secure, in control, growing
|
||||
- **Emotional outcome**: "I can do this. I'm not left behind."
|
||||
|
||||
### ❌ Top 3 Fears → Desired Feelings (Opposite of Fear)
|
||||
|
||||
**1. Being replaced by AI or becoming irrelevant**
|
||||
- **Current feeling**: Threatened, insecure, anxious about future
|
||||
- **How she wishes to feel**: **Secure and Irreplaceable**
|
||||
- **Feeling state**: Safe, relevant, valued, future-proof
|
||||
- **Emotional outcome**: "I'm not going anywhere. I'm essential."
|
||||
|
||||
**2. Wasting time/energy on tools that don't work**
|
||||
- **Current feeling**: Frustrated, inefficient, betrayed
|
||||
- **How she wishes to feel**: **Smart and Validated**
|
||||
- **Feeling state**: Efficient, productive, rewarded, wise
|
||||
- **Emotional outcome**: "My time investment pays off. I made the right choice."
|
||||
|
||||
**3. Being sidelined or not valued when she could save the world**
|
||||
- **Current feeling**: Frustrated, ignored, underutilized
|
||||
- **How she wishes to feel**: **Central and Indispensable**
|
||||
- **Feeling state**: Valued, heard, essential, respected
|
||||
- **Emotional outcome**: "I'm at the center. They need me."
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Map WDS Solutions to Each Want/Fear
|
||||
|
||||
### Mapping Table
|
||||
|
||||
| Want/Fear | WDS Solution | Key Message | Benefit Statement |
|
||||
|-----------|--------------|-------------|-------------------|
|
||||
| **Want 1:** Strategic expert | Expert AI agents guide strategy | You become strategic leader | "Get a seat at the strategic table" |
|
||||
| **Want 2:** Real impact | Complete workflow from idea to production | Your design guides entire product | "Your design thinking becomes the blueprint" |
|
||||
| **Want 3:** Confident AI use | Structured learning path with hand-holding | Build confidence progressively | "Learn AI professionally without overwhelm" |
|
||||
| **Fear 1:** Replaced by AI | AI agents amplify, don't replace | You stay creative and strategic | "You're amplified, not replaced" |
|
||||
| **Fear 2:** Wasting time | Proven methodology, free & open source | Low risk, high value | "Worth your time investment" |
|
||||
| **Fear 3:** Not valued | Strategic specifications position you as indispensable | Your expertise becomes central | "Become indispensable, not sidelined" |
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Identify Top 3 Benefits to Highlight
|
||||
|
||||
**Criteria for Selection:**
|
||||
1. Addresses strongest emotional drivers
|
||||
2. Differentiates WDS clearly
|
||||
3. Connects to other page sections (agents, specs, learning)
|
||||
4. Creates transformation narrative (fear → confidence)
|
||||
|
||||
### Option A: Fear-Focused (Addresses Core Anxieties)
|
||||
1. **"You're Not Replaced—You're Amplified"** (Fear 1)
|
||||
2. **"Become Indispensable, Not Sidelined"** (Fear 3)
|
||||
3. **"Build Confidence Without Wasting Time"** (Fear 2)
|
||||
|
||||
### Option B: Want-Focused (Addresses Aspirations)
|
||||
1. **"Get a Seat at the Strategic Table"** (Want 1)
|
||||
2. **"Make Real Impact Through Your Design"** (Want 2)
|
||||
3. **"Use AI Confidently and Scale Your Impact"** (Want 3)
|
||||
|
||||
### Option C: Transformation-Focused (Fear → Want)
|
||||
1. **"Stop Feeling Threatened, Start Leading with AI"** (Fear 1 → Want 3)
|
||||
2. **"From Task-Doer to Strategic Leader"** (Fear 3 → Want 1)
|
||||
3. **"Your Design Thinking Becomes the Blueprint"** (Want 2)
|
||||
|
||||
### Option D: Balanced (Mix of Wants & Fears)
|
||||
1. **"You're Amplified, Not Replaced"** (Fear 1)
|
||||
2. **"Become the Strategic Expert"** (Want 1)
|
||||
3. **"Build Confidence at Your Own Pace"** (Want 3)
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Workshop Questions
|
||||
|
||||
**Question 1: Which emotional driver is strongest for Stina?**
|
||||
- [ ] Fear of being replaced (survival)
|
||||
- [ ] Want to be strategic (recognition)
|
||||
- [ ] Fear of wasting time (efficiency)
|
||||
- [ ] Want to make impact (purpose)
|
||||
|
||||
**Question 2: What's the primary transformation we're promising?**
|
||||
- [ ] From threatened to empowered
|
||||
- [ ] From task-doer to strategic leader
|
||||
- [ ] From overwhelmed to confident
|
||||
- [ ] From sidelined to indispensable
|
||||
|
||||
**Question 3: Which benefit connects best to other page sections?**
|
||||
- [ ] AI agents (connects to "Meet the AI Agents" section)
|
||||
- [ ] Strategic specifications (connects to "Conceptual Specifications" section)
|
||||
- [ ] Learning path (connects to "Learn WDS" section)
|
||||
|
||||
**Question 4: What's the most compelling "because designers matter" message?**
|
||||
- [ ] Designers are central to product development
|
||||
- [ ] Design thinking guides entire teams
|
||||
- [ ] Designers become strategic leaders
|
||||
- [ ] Designers' expertise is amplified, not replaced
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Draft Benefit Statements
|
||||
|
||||
### Template for Each Benefit:
|
||||
- **Headline**: [Emotional hook addressing want/fear]
|
||||
- **Subheadline/Description**: [How WDS delivers this]
|
||||
- **Connection**: [Links to other page sections]
|
||||
|
||||
### Draft 1: [To be filled in workshop]
|
||||
|
||||
### Draft 2: [To be filled in workshop]
|
||||
|
||||
### Draft 3: [To be filled in workshop]
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Test Against Success Criteria
|
||||
|
||||
**Does each benefit:**
|
||||
- ✅ Address a core want or fear from Stina's persona?
|
||||
- ✅ Answer "Why WDS? Because Designers Matter"?
|
||||
- ✅ Connect to other page sections?
|
||||
- ✅ Create emotional resonance?
|
||||
- ✅ Differentiate WDS from competitors?
|
||||
- ✅ Promise transformation?
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Discuss**: Which option (A, B, C, or D) resonates most?
|
||||
2. **Refine**: Adjust benefit statements based on discussion
|
||||
3. **Test**: Do they work together as a cohesive narrative?
|
||||
4. **Finalize**: Create final HTML structure
|
||||
|
||||
---
|
||||
|
||||
**Workshop Status**: Ready for discussion
|
||||
**Created**: [Date]
|
||||
**Facilitator**: [Name]
|
||||
|
||||
Loading…
Reference in New Issue