whiteport-design-studio 0.1.0

package/src/workflows/1-project-brief/project-brief/complete/steps-c/step-11-tone-of-voice.md

@@ -0,0 +1,233 @@
+# Step 11: Define Tone of Voice
+
+## Purpose
+
+Establish the product's communication personality and style for consistent UI microcopy and system messages throughout the product.
+
+## Context for Agent
+
+Now that you understand the product, users, positioning, and competitive landscape, you can suggest an appropriate Tone of Voice that aligns with the brand and resonates with target users.
+
+**Important:** Tone of Voice is for **UI microcopy** (buttons, labels, errors, system messages), NOT strategic content (headlines, feature descriptions, value propositions).
+
+## Key Elements
+
+### What is Tone of Voice?
+
+Tone of Voice defines:
+- **Brand personality:** Who are we as a company?
+- **Communication style:** How do we speak to users?
+- **Emotional tone:** What feeling do we create?
+- **Voice attributes:** Friendly, professional, quirky, authoritative, empathetic, technical, casual, formal, playful, serious, etc.
+
+### Tone of Voice vs Strategic Content
+
+**Tone of Voice applies to:**
+- ✅ Form field labels ("Email" vs "Email address" vs "Your email")
+- ✅ Button text ("Submit" vs "Continue" vs "Let's go")
+- ✅ Error messages ("Invalid email" vs "Hmm, that doesn't look like an email")
+- ✅ System messages ("Loading..." vs "Hang tight..." vs "Processing your request")
+- ✅ Empty states ("No items" vs "Nothing here yet" vs "Your list is empty")
+- ✅ Tooltips and instructions
+
+**Strategic Content uses:**
+- ❌ Content Creation Workshop (purpose-driven, context-specific)
+- ❌ Headlines, hero sections, feature descriptions
+- ❌ Value propositions, testimonials, case studies
+
+## Instructions
+
+### 1. Analyze Product Context
+
+Review what you've learned:
+- Vision & positioning
+- Target users and their characteristics
+- Business model and customers
+- Competitive landscape
+- Product category and context
+
+### 2. Suggest Tone of Voice Attributes
+
+Based on the product context, suggest 3-5 tone attributes:
+
+**Present in this format:**
+
+```
+Based on [brief reasoning from product context], I suggest this Tone of Voice:
+
+Tone Attributes:
+1. [Attribute 1]: [Brief explanation why]
+2. [Attribute 2]: [Brief explanation why]
+3. [Attribute 3]: [Brief explanation why]
+4. [Attribute 4]: [Brief explanation why]
+
+Does this feel aligned with your brand vision?
+```
+
+**Example attributes:**
+- Friendly & approachable (for consumer products)
+- Professional & authoritative (for B2B/enterprise)
+- Empathetic & supportive (for healthcare, education)
+- Playful & quirky (for creative/youth products)
+- Technical & precise (for developer tools)
+- Casual & conversational (for social apps)
+- Warm & personal (for services)
+
+### 3. Provide Examples
+
+Show the tone in action with side-by-side comparisons:
+
+**Format:**
+
+```
+Example UI Microcopy:
+
+Error Message:
+❌ Generic: "Error: Invalid input"
+✅ Our Tone: [Rewritten in proposed tone]
+
+Button Text:
+❌ Generic: "Submit"
+✅ Our Tone: [Rewritten in proposed tone]
+
+Empty State:
+❌ Generic: "No results found"
+✅ Our Tone: [Rewritten in proposed tone]
+
+Form Label:
+❌ Generic: "Email address"
+✅ Our Tone: [Rewritten in proposed tone]
+
+Success Message:
+❌ Generic: "Operation successful"
+✅ Our Tone: [Rewritten in proposed tone]
+```
+
+### 4. Refine Based on Feedback
+
+**Ask:**
+- "Does this tone feel right for your brand?"
+- "Should we adjust any attributes? (more/less formal, friendly, technical, etc.)"
+- "Are the examples aligned with how you want to communicate?"
+
+**Iterate until confirmed.**
+
+### 5. Document Final Tone of Voice
+
+Once confirmed, document:
+- Tone attributes (3-5 clear characteristics)
+- Example microcopy showing tone in action
+- Do's and Don'ts (brief guidelines)
+
+## Questions to Ask
+
+### If User Needs Guidance:
+
+**"Let me ask a few questions to help define the tone:"**
+
+1. **Relationship:** "How do you want users to feel about your brand? Like a trusted advisor? A helpful friend? An expert authority? A fun companion?"
+
+2. **Formality:** "Should communication be more formal and professional, or casual and conversational?"
+
+3. **Personality:** "If your product were a person, how would they speak? (serious, playful, quirky, straightforward, warm, technical)"
+
+4. **User Context:** "Are users typically stressed/frustrated when using your product, or excited/curious? How should tone respond to their state?"
+
+5. **Differentiation:** "How do competitors communicate? Should you match industry standards or stand out with a different voice?"
+
+## Validation
+
+Before proceeding:
+
+- [ ] Tone attributes are clearly defined (3-5 specific characteristics)
+- [ ] Attributes align with target users and positioning
+- [ ] Examples demonstrate the tone clearly
+- [ ] User confirms this feels right for their brand
+- [ ] Tone is documented for reference
+
+## Output Format
+
+Document in Product Brief:
+
+```markdown
+## Tone of Voice
+
+**For UI Microcopy & System Messages**
+
+### Tone Attributes
+
+1. **[Attribute 1]**: [Brief description]
+2. **[Attribute 2]**: [Brief description]
+3. **[Attribute 3]**: [Brief description]
+
+### Examples
+
+**Error Messages:**
+- ✅ "Hmm, that doesn't look like an email. Check for typos?"
+- ❌ "Error: Invalid email format"
+
+**Button Text:**
+- ✅ "Let's get started"
+- ❌ "Submit"
+
+**Empty States:**
+- ✅ "Nothing here yet. Ready to add your first item?"
+- ❌ "No results found"
+
+**Success Messages:**
+- ✅ "You're all set! We've sent a confirmation to your email."
+- ❌ "Operation completed successfully"
+
+### Guidelines
+
+**Do:**
+- [Tone-appropriate practice 1]
+- [Tone-appropriate practice 2]
+- [Tone-appropriate practice 3]
+
+**Don't:**
+- [Tone-inappropriate practice 1]
+- [Tone-inappropriate practice 2]
+
+---
+
+*Note: Tone of Voice applies to UI microcopy. Strategic content (headlines, feature descriptions, value propositions) uses the Content Creation Workshop based on page-specific purpose and context.*
+```
+
+## Next Step
+
+**→ Proceed to [Step 12: Synthesize and Create Brief](step-12-synthesize.md)**
+
+## State Update
+
+Update frontmatter of output file:
+
+```yaml
+stepsCompleted:
+  [
+    'step-01-init.md',
+    'step-02-vision.md',
+    'step-03-positioning.md',
+    'step-04-create-vtc.md',
+    'step-05-business-model.md',
+    'step-06-business-customers.md',
+    'step-07-target-users.md',
+    'step-08-success-criteria.md',
+    'step-09-competitive-landscape.md',
+    'step-10-constraints.md',
+    'step-11-tone-of-voice.md',
+  ]
+```
+
+---
+
+## Example
+
+**See:** [substeps/11-tone-of-voice-example.md](substeps/11-tone-of-voice-example.md)
+
+This shows a complete Tone of Voice definition for a B2B SaaS onboarding tool, demonstrating how to define attributes based on user context (stressed HR managers) and provide clear before/after examples.
+
+---
+
+**⚠️ ALPHA:** This is a new addition to the Product Brief workflow. Feedback welcome on placement, questions, and output format.
+

package/src/workflows/1-project-brief/project-brief/complete/steps-c/step-12-synthesize.md

@@ -0,0 +1,44 @@
+# Step 12: Synthesize and Create Brief
+
+## Purpose
+
+Synthesize all captured information into a complete project brief document.
+
+## Context for Agent
+
+You are bringing together all the strategic elements into a comprehensive brief that will guide all design decisions.
+
+## Key Elements
+
+This step compiles all strategic foundation elements into a cohesive document.
+
+## Instructions
+
+Present all captured information (vision, positioning, business model, business customers, target users, success criteria, competitive landscape, unfair advantage, constraints, tone of voice, and additional context). Ask for confirmation and make any requested adjustments. Generate final document using the template.
+
+## Next Step
+
+Workflow complete. User can proceed to Phase 2: Trigger Mapping
+
+## State Update
+
+Update frontmatter of output file:
+
+```yaml
+stepsCompleted:
+  [
+    'step-01-init.md',
+    'step-02-vision.md',
+    'step-03-positioning.md',
+    'step-04-create-vtc.md',
+    'step-05-business-model.md',
+    'step-06-business-customers.md',
+    'step-07-target-users.md',
+    'step-08-success-criteria.md',
+    'step-09-competitive-landscape.md',
+    'step-10-constraints.md',
+    'step-11-tone-of-voice.md',
+    'step-12-synthesize.md',
+  ]
+status: 'complete'
+```

package/src/workflows/1-project-brief/project-brief/complete/steps-c/substeps/11-tone-of-voice-example.md

@@ -0,0 +1,52 @@
+# Tone of Voice Example: SaaS Onboarding Tool
+
+**Context:** B2B SaaS for employee onboarding, target users are HR managers (stressed, overwhelmed, want to feel capable)
+
+---
+
+## Suggested Tone of Voice
+
+### Tone Attributes
+
+1. **Supportive & Reassuring**: HR managers are stressed about onboarding. Our tone should reduce anxiety, not add to it.
+2. **Professional but Warm**: B2B context requires professionalism, but warmth builds trust.
+3. **Clear & Concise**: Busy users need straightforward communication, no fluff.
+4. **Empowering**: Frame actions around user capability, not system features.
+
+### Examples
+
+**Error Message:**
+- ✅ "We couldn't find that email. Double-check for typos?"
+- ❌ "Error 404: User not found"
+
+**Button Text:**
+- ✅ "Add your first employee"
+- ❌ "Create new record"
+
+**Empty State:**
+- ✅ "Your onboarding dashboard is ready. Let's add your first employee to get started."
+- ❌ "No employees added yet"
+
+**Success Message:**
+- ✅ "Perfect! Sarah's onboarding is set up. We'll send her the welcome email tomorrow at 9 AM."
+- ❌ "Employee record created successfully"
+
+---
+
+## Analysis
+
+**Why This Tone Works:**
+- **Supportive**: "We couldn't find" (collaborative) vs "Error" (blaming)
+- **Professional but Warm**: Uses proper grammar but friendly language
+- **Clear**: Specific, actionable messages without jargon
+- **Empowering**: "Add your first employee" (user action) vs "Create new record" (system function)
+
+**Alignment with User State:**
+- HR managers are stressed → Reassuring tone reduces anxiety
+- Want to feel capable → Empowering language focuses on their actions
+- Need efficiency → Clear, concise messaging respects their time
+- Professional context → Maintains appropriate formality with warmth
+
+---
+
+_Example demonstrating Tone of Voice definition for B2B SaaS product_

package/src/workflows/1-project-brief/project-brief/complete/workflow.md

@@ -0,0 +1,60 @@
+---
+name: Product Brief Workflow
+description: Create comprehensive product briefs through collaborative step-by-step discovery
+web_bundle: true
+---
+
+# Product Brief Workflow
+
+**Goal:** Create comprehensive product briefs through collaborative step-by-step discovery
+
+**Your Role:** Work as equals with the user - you bring structured thinking and facilitation skills, they bring domain expertise and product vision.
+
+---
+
+## WORKFLOW ARCHITECTURE
+
+This uses **step-file architecture** for disciplined execution:
+
+### Core Principles
+
+- **Micro-file Design**: Each step is a self contained instruction file that is a part of an overall workflow that must be followed exactly
+- **Just-In-Time Loading**: Only current step file is in memory - never load future step files until told to do so
+- **Sequential Enforcement**: Sequence within step files must be completed in order, no skipping or optimization allowed
+- **State Tracking**: Document progress in output file frontmatter using `stepsCompleted` array when a workflow produces a document
+- **Append-Only Building**: Build documents by appending content as directed to output file
+
+### Step Processing Rules
+
+1. **READ COMPLETELY**: Always read entire step file before taking any action
+2. **FOLLOW SEQUENCE**: Execute all numbered sections in order, never deviate
+3. **WAIT FOR INPUT**: If a menu is presented, halt and wait for user selection
+4. **CHECK CONTINUATION**: If step has a menu with Continue as an option, only proceed to next step when user selects 'C' (Continue)
+5. **SAVE STATE**: Update `stepsCompleted` in frontmatter before loading next step
+6. **LOAD NEXT**: When directed, load, read entire file, then execute next step file
+
+### Critical Rules (NO EXCEPTIONS)
+
+- 🛑 **NEVER** load multiple step files simultaneously
+- 📖 **ALWAYS** read entire step file before execution
+- 🚫 **NEVER** skip steps or optimize the sequence
+- 💾 **ALWAYS** update frontmatter of output files when writing final output for a specific step
+- 🎯 **ALWAYS** follow the exact instructions in step file
+- ⏸️ **ALWAYS** halt at menus and wait for user input
+- 📋 **NEVER** create mental todo lists from future steps
+
+---
+
+## INITIALIZATION SEQUENCE
+
+### 1. Configuration Loading
+
+Load and read full config from {project-root}/{bmad_folder}/wds/config.yaml and resolve:
+
+- `project_name`, `output_folder`, `user_name`, `communication_language`, `document_output_language`, `user_skill_level`
+
+### 2. First Step EXECUTION
+
+Load, read full file and then execute `{project-root}/{bmad_folder}/wds/workflows/1-project-brief/project-brief/complete/steps-c/step-01-init.md` to begin workflow.
+
+**Note:** Alignment & Signoff is now a separate, optional workflow. If you need stakeholder approval before starting, use the alignment & signoff workflow first: `{project-root}/{bmad_folder}/wds/workflows/1-project-brief/alignment-signoff/workflow.md`

package/src/workflows/1-project-brief/project-brief/simplified/instructions.md

@@ -0,0 +1,126 @@
+# Simplified Project Brief - Instructions
+
+<critical>Communicate in {communication_language} with {user_name}</critical>
+<critical>You are Saga the Analyst - curious, insightful, and focused on understanding</critical>
+
+<workflow>
+
+<step n="1" goal="Welcome and set the stage">
+<output>Hi {user_name}! I'm Saga, and I'll help you capture the essential context for your project.
+
+This is a **Simplified Project Brief** - we'll cover the key points in about 5-10 minutes:
+
+- What you're building (scope)
+- The challenge or opportunity
+- Your design goals
+
+Let's dive in! 🎯</output>
+</step>
+
+<step n="2" goal="Understand the scope">
+<ask>**What are you designing?**
+
+Describe the project in a few sentences. What will users see and interact with?</ask>
+
+<action>Listen for:
+
+- Type of project (app, website, feature, page)
+- Target platform (web, mobile, both)
+- Key functionality or purpose
+  </action>
+
+<action>If unclear, ask one clarifying question</action>
+
+<template-output>project_scope</template-output>
+</step>
+
+<step n="3" goal="Identify the challenge or opportunity">
+<ask>**What's the challenge or opportunity here?**
+
+Why does this project exist? What problem are you solving, or what opportunity are you pursuing?</ask>
+
+<action>Listen for:
+
+- Pain points being addressed
+- Market opportunity
+- User needs not being met
+- Business drivers
+  </action>
+
+<action>Reflect back what you heard to confirm understanding</action>
+
+<template-output>challenge_opportunity</template-output>
+</step>
+
+<step n="4" goal="Define design goals">
+<ask>**What should the design achieve?**
+
+When this design is complete, what will make it successful? What experience do you want users to have?</ask>
+
+<action>Listen for:
+
+- Functional goals (what it should do)
+- Experience goals (how it should feel)
+- Business goals (what outcomes matter)
+  </action>
+
+<action>Help refine vague goals into specific, actionable ones</action>
+
+<template-output>design_goals</template-output>
+</step>
+
+<step n="5" goal="Capture constraints">
+<ask>**Any constraints I should know about?**
+
+Timeline, technology, brand guidelines, existing systems to integrate with?</ask>
+
+<action>Note:
+
+- Technical constraints
+- Timeline/deadline
+- Budget considerations
+- Brand/style requirements
+- Integration requirements
+  </action>
+
+<action>It's okay if there are few constraints - note "flexible" where appropriate</action>
+
+<template-output>constraints</template-output>
+</step>
+
+<step n="6" goal="Summarize and create brief">
+<output>Here's what I captured:
+
+**Project Scope**
+{{project_scope}}
+
+**Challenge/Opportunity**
+{{challenge_opportunity}}
+
+**Design Goals**
+{{design_goals}}
+
+**Constraints**
+{{constraints}}
+</output>
+
+<ask>Does this capture the essentials? Anything to add or adjust?</ask>
+
+<action>Make any requested adjustments</action>
+
+<action>Generate simplified-brief.md from template</action>
+<action>Save to {output_folder}/A-Product-Brief/project-brief.md</action>
+
+<output>✅ **Simplified Project Brief saved!**
+
+Location: `A-Product-Brief/project-brief.md`
+
+You now have enough context to move forward. When you're ready:
+
+- **Next phase:** Check your workflow status for what's next
+- **Need more depth?** You can always expand this into a Complete brief later
+
+Happy designing! 🎨</output>
+</step>
+
+</workflow>

package/src/workflows/1-project-brief/project-brief/simplified/simplified-brief.template.md

@@ -0,0 +1,44 @@
+# Project Brief: {{project_name}}
+
+> Simplified Brief - Essential context for design work
+
+**Created:** {{date}}
+**Author:** {{user_name}}
+**Brief Type:** Simplified
+
+---
+
+## Project Scope
+
+{{project_scope}}
+
+---
+
+## Challenge / Opportunity
+
+{{challenge_opportunity}}
+
+---
+
+## Design Goals
+
+{{design_goals}}
+
+---
+
+## Constraints
+
+{{constraints}}
+
+---
+
+## Next Steps
+
+This simplified brief provides essential context for design work. The following phases can now proceed:
+
+- [ ] **Phase 4: UX Design** - Begin sketching and specifications
+- [ ] **Phase 5: Design System** - If enabled, build components alongside design
+
+---
+
+_Generated by Whiteport Design Studio_