gh-jamesrochabrun-skills/skills/design-brief-generator/references/design_brief_template.md

Design Brief Template

A comprehensive template for creating design project briefs.

---

Project Overview

Project Name

[Project name]

Problem Statement

[What user problem or business need are we addressing?]

Background & Context

[Why now? What led to this project?]

Project Type

• New Feature
• Redesign
• Design System
• Brand/Visual Design
• UX Research
• Other: ___________

---

Design Goals & Objectives

Primary Goal

[The main design objective - what success looks like]

Secondary Goals

1. [Goal 2]
2. [Goal 3]
3. [Goal 4]

Business Objectives

• [How does this support business goals?]
• [What business metrics will this impact?]

User Objectives

• [What user needs does this address?]
• [How will this improve the user experience?]

---

Target Users

Primary Audience

Who: [User segment or persona name] Characteristics:

• Demographics: [Age, location, role, etc.]
• Technical proficiency: [Beginner, intermediate, expert]
• Current behavior: [How they currently solve this problem]
• Pain points: [Specific frustrations]

Secondary Audience

Who: [Additional user segment] Characteristics:

• [Key characteristics]
• [Specific needs]

User Personas

Persona 1: [Name]

• Role: [Job title/role]
• Goals: [What they want to achieve]
• Frustrations: [Current pain points]
• Quote: "[A representative quote]"

Persona 2: [Name]

• Role: [Job title/role]
• Goals: [What they want to achieve]
• Frustrations: [Current pain points]
• Quote: "[A representative quote]"

---

User Research

Research Completed

• User interviews (n = [number])
• Surveys (n = [number])
• Analytics review
• Competitor analysis
• Usability testing
• Other: ___________

Key Findings

1. Finding 1: [Insight from research]

   • Evidence: [Data/quotes supporting this]

2. Finding 2: [Insight from research]

   • Evidence: [Data/quotes supporting this]

3. Finding 3: [Insight from research]

   • Evidence: [Data/quotes supporting this]

Research Gaps

[What don't we know yet? What assumptions need validation?]

---

Scope

In Scope

Features/Experiences:

• [Feature/flow 1]
• [Feature/flow 2]
• [Feature/flow 3]

Platforms:

• Web (Desktop)
• Web (Mobile)
• iOS Native
• Android Native
• Other: ___________

Deliverables:

• [Wireframes]
• [High-fidelity mockups]
• [Prototypes]
• [Design system components]

Out of Scope

[What we are explicitly NOT doing in this phase]

• [Excluded feature 1]
• [Excluded feature 2]
• [Future consideration 1]

Constraints

Technical:

• [Technical limitations or requirements]

Business:

• [Budget, timeline, resource constraints]

Design:

• [Brand guidelines, existing patterns to maintain]

---

User Flows & Journeys

Primary User Flow

Goal: [What the user wants to accomplish]

Steps:

1. [Entry point]
2. [Step 2]
3. [Step 3]
4. [Success state]

Alternative paths:

• [Edge case or alternative flow]

Secondary Flows

Flow 2: [Brief description]

1. [Key steps]

Flow 3: [Brief description]

1. [Key steps]

Critical Interactions

• Interaction 1: [Description of key interaction]

  • Current experience: [How it works now]
  • Desired experience: [How it should work]

• Interaction 2: [Description]

  • Current experience: [How it works now]
  • Desired experience: [How it should work]

---

Design Principles

Project-Specific Principles

1. [Principle 1]: [Description]

   • Example: [How this applies]

2. [Principle 2]: [Description]

   • Example: [How this applies]

3. [Principle 3]: [Description]

   • Example: [How this applies]

Brand Principles (if applicable)

• [Existing brand principle that applies]
• [Existing brand principle that applies]

---

Visual Direction

Design Style

• Follow existing design system
• Extend design system
• New visual direction

Visual References

• [Link to inspiration/reference 1]
• [Link to inspiration/reference 2]
• [Link to competitor examples]

Key Visual Elements

• Color palette: [Specific colors or guidance]
• Typography: [Typefaces and hierarchy]
• Imagery style: [Photography, illustration, icons]
• Motion: [Animation principles if applicable]

---

Accessibility Requirements

WCAG Level Target

• WCAG 2.1 Level A
• WCAG 2.1 Level AA (recommended)
• WCAG 2.1 Level AAA

Specific Requirements

• Keyboard navigation
• Screen reader support
• Color contrast (4.5:1 minimum)
• Focus indicators
• Alternative text for images
• Captions for video/audio
• Responsive text sizing
• Reduced motion support

Accessibility Considerations

[Any specific accessibility challenges or requirements for this project]

---

Success Criteria

Qualitative Metrics

• Users can complete [primary task] without assistance
• Users express positive sentiment about [feature]
• Design passes usability testing with < 3 critical issues
• Stakeholders approve design direction
• Design is consistent with brand guidelines

Quantitative Metrics

Primary Metrics:

Secondary Metrics:

Business Metrics:

Measurement Plan

• How: [How will we measure success?]
• When: [Timeline for measuring]
• Baseline: [Current metrics if available]

---

Deliverables

Design Artifacts

• User flow diagrams
• Wireframes (low-fidelity)
• Wireframes (high-fidelity)
• Visual design mockups
• Interactive prototype
• Design specifications
• Component documentation
• Design system updates
• Accessibility documentation
• Animation specifications

Documentation

• Design rationale
• User research summary
• Usability test report
• Developer handoff notes
• Content guidelines

Review Artifacts

• Presentation deck
• Design review recordings
• Feedback synthesis

---

Timeline & Milestones

Phase 1: Discovery & Research

Duration: [Timeframe]

• User research
• Competitive analysis
• Design audit (if applicable)
• Milestone: Research insights presented

Phase 2: Concept & Exploration

Duration: [Timeframe]

• Initial concepts (3+ directions)
• Stakeholder review
• Concept refinement
• Milestone: Design direction approved

Phase 3: Detailed Design

Duration: [Timeframe]

• Wireframes
• High-fidelity mockups
• Design system components
• Milestone: Design specs complete

Phase 4: Prototype & Validation

Duration: [Timeframe]

• Interactive prototype
• Usability testing
• Iterate based on feedback
• Milestone: Design validated

Phase 5: Handoff & Support

Duration: [Timeframe]

• Developer handoff
• Design QA
• Launch support
• Milestone: Design shipped

Key Dates

• Project kickoff: [Date]
• Design review 1: [Date]
• Design review 2: [Date]
• Final handoff: [Date]
• Launch: [Date]

---

Stakeholders & Collaboration

Core Team

• Design lead: [Name] - [Role/responsibility]
• Product manager: [Name]
• Engineering lead: [Name]
• Researcher: [Name]
• Content designer: [Name]

Reviewers & Approvers

• [Name, Title] - [What they approve]
• [Name, Title] - [What they approve]

Communication Plan

Design reviews:

• Weekly sync: [Day/time]
• Major milestones: [When]

Feedback channels:

• [Slack channel]
• [Figma comments]
• [Email for formal approvals]

Decision-making:

• Design decisions: [Who decides]
• Scope changes: [Who approves]

---

Design Tools & Resources

Tools

• Design: [Figma, Sketch, Adobe XD]
• Prototyping: [Figma, Framer, ProtoPie]
• User testing: [Lookback, UserTesting, Maze]
• Documentation: [Notion, Confluence]

Resources

• Design system: [Link]
• Brand guidelines: [Link]
• Component library: [Link]
• Research repository: [Link]

---

Risks & Mitigation

Potential Risks

1. Risk: [Description of risk]

   • Impact: [High/Medium/Low]
   • Mitigation: [How to address]

2. Risk: [Description of risk]

   • Impact: [High/Medium/Low]
   • Mitigation: [How to address]

3. Risk: [Description of risk]

   • Impact: [High/Medium/Low]
   • Mitigation: [How to address]

Dependencies

• [Dependency on other team/project]
• [Technical dependency]
• [Resource dependency]

---

Post-Launch

Success Review

• When: [Timeline for measuring success]
• Metrics to review: [List metrics from success criteria]
• Learning goals: [What do we want to learn?]

Iteration Plan

• [Planned improvements for v2]
• [Features deferred to future phases]

Documentation

• Case study
• Design learnings
• Pattern documentation
• Retrospective notes

---

Appendix

Research Links

• [Link to research findings]
• [Link to user interviews]
• [Link to analytics dashboard]

Design Files

• [Link to Figma file]
• [Link to prototype]
• [Link to design specs]

References

• [Competitor analysis]
• [Industry best practices]
• [Related projects]

---

Version History

Version	Date	Author	Changes
0.1	[Date]	[Name]	Initial draft
0.2	[Date]	[Name]	[Changes]
1.0	[Date]	[Name]	Final approved version

---

Approval

• Design lead approved
• Product manager approved
• Engineering lead approved
• Stakeholder(s) approved

Date approved: ___________