460 lines
9.7 KiB
Markdown
460 lines
9.7 KiB
Markdown
# 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:**
|
|
- [Metric 1]: [Target] (e.g., Task completion rate > 90%)
|
|
- [Metric 2]: [Target] (e.g., Time on task < 2 minutes)
|
|
|
|
**Secondary Metrics:**
|
|
- [Metric 3]: [Target] (e.g., Error rate < 5%)
|
|
- [Metric 4]: [Target] (e.g., User satisfaction score > 4/5)
|
|
|
|
**Business Metrics:**
|
|
- [Metric 5]: [Target] (e.g., Conversion rate increase by 15%)
|
|
|
|
### 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:** ___________
|