design-brief-generator

What this skill does

# Design Brief Generator

## Overview

Generate comprehensive, well-structured design briefs that align stakeholders and guide design projects. This skill helps designers create clear project briefs that define scope, goals, constraints, and success criteria.

**Built for:**
- UX/UI designers
- Product designers
- Design leads
- Design systems teams
- Brand designers

---

## Quick Start

### 1. Generate Design Brief

Run the interactive script:

```bash
scripts/generate_brief.sh
```

This will guide you through creating a comprehensive design brief covering:
- Project goals and objectives
- Target users and personas
- Design constraints
- Success criteria
- Timeline and deliverables

### 2. Validate Brief

Check brief completeness:

```bash
scripts/validate_brief.sh <brief_file.md>
```

Ensures all critical sections are included.

---

## Core Workflow

### When to Create a Design Brief

**Use a design brief for:**
- New product/feature design projects
- Design system initiatives
- Redesign projects
- Brand identity projects
- UX research initiatives

**Skip for:**
- Minor UI tweaks
- Bug fixes
- Small iterations on existing designs

---

## Design Brief Components

### 1. Project Overview

**What it includes:**
- Project name and description
- Background and context
- Why this project matters now
- Business objectives
- User problems being solved

**Example:**
```markdown
## Project Overview

**Project:** Mobile app redesign
**Background:** Current app has 2.8 star rating with users citing confusing navigation
**Business Goal:** Increase app retention from 15% to 40% (Day 30)
**User Problem:** Users can't find key features, leading to frustration and abandonment
```

---

### 2. Design Goals & Objectives

**Define what success looks like:**
- Primary design goal
- Secondary goals
- Success metrics
- Must-haves vs. nice-to-haves

**Example:**
```markdown
## Design Goals

**Primary Goal:** Create intuitive navigation that helps users complete core tasks in < 3 taps

**Secondary Goals:**
- Reduce visual clutter by 40%
- Improve accessibility (WCAG AA compliance)
- Establish reusable component library

**Success Metrics:**
- Task success rate: 90%+
- Time on task: -50%
- SUS score: 75+
```

---

### 3. Target Users & Personas

**Who are we designing for:**
- Primary user personas
- User needs and pain points
- User goals and motivations
- Technical proficiency
- Context of use

**Example:**
```markdown
## Target Users

**Primary Persona:** Sarah, Marketing Manager
- **Age:** 32-45
- **Tech Savvy:** Medium
- **Goals:** Create campaigns quickly, track performance
- **Pain Points:** Current tool too complex, takes too long
- **Context:** Uses on desktop during work hours, sometimes mobile
```

---

### 4. Design Principles & Direction

**Guiding principles for the project:**
- Core design principles
- Visual direction
- Interaction patterns
- Content strategy
- Accessibility requirements

**Example:**
```markdown
## Design Principles

1. **Clarity over cleverness** - Users should never wonder what to do next
2. **Progressive disclosure** - Show what's needed, hide complexity
3. **Consistent patterns** - Use established design system components
4. **Accessible by default** - WCAG AA minimum, aim for AAA
```

---

### 5. Scope & Constraints

**What's in and out of scope:**

**In Scope:**
- Screens/flows included
- Platforms (web, mobile, tablet)
- Devices and browsers
- Accessibility requirements

**Out of Scope:**
- What we're NOT designing
- Future considerations

**Constraints:**
- Technical limitations
- Timeline constraints
- Resource constraints
- Brand guidelines to follow

**Example:**
```markdown
## Scope

**In Scope:**
- Dashboard redesign (5 screens)
- Mobile responsive (iOS, Android)
- Dark mode support
- WCAG AA compliance

**Out of Scope:**
- Admin panel (separate project)
- Native mobile apps (web only)
- Marketing website

**Constraints:**
- Must use existing design system
- Launch deadline: 8 weeks
- Development team: 2 engineers
- No custom illustrations budget
```

---

### 6. User Flows & Journeys

**Key user paths to design:**
- Primary user flows
- Entry points
- Decision points
- Success states
- Error states

**Example:**
```markdown
## Key User Flows

**Flow 1: Create Campaign**
1. Land on dashboard
2. Click "New Campaign"
3. Choose template
4. Customize content
5. Preview
6. Publish
7. Success confirmation

**Flow 2: View Analytics**
[Define the flow]
```

---

### 7. Deliverables & Timeline

**What will be delivered:**

**Design Deliverables:**
- User research (if needed)
- Wireframes
- High-fidelity mockups
- Interactive prototype
- Design specifications
- Component documentation
- Accessibility annotations

**Timeline:**
- Week 1-2: Research & wireframes
- Week 3-4: High-fidelity designs
- Week 5-6: Prototype & testing
- Week 7-8: Refinement & handoff

---

### 8. Success Criteria

**How we'll measure success:**

**Qualitative:**
- User testing feedback
- Stakeholder approval
- Designer review
- Accessibility audit pass

**Quantitative:**
- Task success rate
- Time on task
- Error rate
- SUS score
- NPS

**Example:**
```markdown
## Success Criteria

**Usability Testing:**
- 8/10 users complete primary task without help
- Average SUS score: 75+
- Zero critical accessibility issues

**Business Metrics (post-launch):**
- 40% Day 30 retention (up from 15%)
- 90% task completion rate
- < 5% error rate
```

---

## Design Project Types

### 1. New Feature Design

**Focus areas:**
- User needs validation
- Integration with existing product
- Interaction patterns
- Edge cases

**Brief template:** Standard brief with emphasis on user flows

---

### 2. Redesign Project

**Focus areas:**
- Current state analysis
- What's working/not working
- Migration considerations
- Before/after comparisons

**Additional sections:**
- Current pain points
- Competitive analysis
- Design audit findings

---

### 3. Design System

**Focus areas:**
- Component inventory
- Design principles
- Usage guidelines
- Governance

**Additional sections:**
- Adoption strategy
- Documentation plan
- Maintenance plan

---

### 4. Brand/Visual Design

**Focus areas:**
- Brand attributes
- Visual language
- Mood boards
- Design explorations

**Additional sections:**
- Brand guidelines
- Application examples
- Asset deliverables

---

## Stakeholder Alignment

### Discovery Questions

**Ask before starting:**
1. What problem are we solving?
2. Who are the users?
3. What are the business goals?
4. What's the timeline?
5. What are the constraints?
6. How will we measure success?
7. Who needs to approve?

### Stakeholder Review Process

**Brief review checklist:**
- [ ] Product Manager reviewed
- [ ] Engineering lead reviewed (feasibility)
- [ ] Design lead approved
- [ ] Key stakeholders aligned
- [ ] Success metrics agreed upon
- [ ] Timeline confirmed
- [ ] Resources allocated

---

## Design Brief Best Practices

### DO:
- ✅ **Start with "why"** - Clearly state the problem
- ✅ **Define success** - Specific, measurable criteria
- ✅ **Include constraints** - Technical, time, resource
- ✅ **Show examples** - Inspiration, references
- ✅ **Get buy-in early** - Review draft with stakeholders
- ✅ **Keep it concise** - 2-3 pages maximum
- ✅ **Make it visual** - Include diagrams, mockups, references

### DON'T:
- ❌ **Jump to solutions** - Focus on problem first
- ❌ **Be vague** - "Make it better" isn't helpful
- ❌ **Ignore constraints** - They shape the solution
- ❌ **Work in isolation** - Involve PM, Engineering early
- ❌ **Skip research** - Base decisions on data
- ❌ **Forget accessibility** - Consider from the start

---

## Accessibility in Design Briefs

### Minimum Requirements

**Every design brief should include:**

**WCAG Compliance:**
- [ ] Target level (A, AA, AAA)
- [ ] Color contrast requirements (4.5:1 for text)
- [ ] Keyboard navigation support
- [ ] Screen reader compatibility
- [ ] Touch target sizes (44x44px minimum)

**Testing Plan:**
- [ ] Screen reader te