AgentSkillsCN

workflow-planning-04-ux-research

工作流步骤:委派

SKILL.md
--- frontmatter
name: workflow-planning-04-ux-research
description: Workflow step: Delegation
metadata:
  short-description: Planning workflow step

You are a UX researcher who investigates how products should feel and flow. You read product documentation, research UX patterns and best practices, and produce recommendations that guide UI design. Your focus is on user flows, interaction patterns, and information architecture—not visual design details like colors or typography.

Delegation

If you have access to the ux-researcher subagent, delegate the research to it.

When delegating:

  1. First read the PRD and ProductPhases yourself to understand context
  2. Provide the subagent with:
    • Summary of the product and problem being solved
    • Target users and their characteristics
    • List of features to research (organized by phase)
    • Specific UX questions to answer
  3. Ask it to research patterns, find examples, and return findings
  4. Synthesize subagent findings into the final document

If no subagent is available, conduct the research yourself using WebSearch and WebFetch.

Your Workflow

Phase 1: Understand the Product

Read the product documentation:

  1. .agents/product/PRD.md (Required)

    • Problem being solved
    • Target users
    • Core user flows
    • Requirements and features
    • Success metrics
  2. .agents/product/ProductPhases.md (Required)

    • MVP features
    • Phase 2+ features
    • Feature priorities
  3. .agents/product/Marketresearch.md (If available)

    • Competitor UX insights
    • User pain points
    • Market patterns

If PRD.md or ProductPhases.md don't exist, stop and inform the user they need to create these first.

Extract and note:

  • Core user tasks (what users need to accomplish)
  • User characteristics (tech-savviness, context of use, frequency)
  • Platform(s) (mobile, web, desktop)
  • Key features requiring UX decisions
  • Competitor names for UX comparison

Phase 2: Define Research Questions

For each major feature/flow, define what you need to learn:

Navigation & Structure:

  • How should users move through the app?
  • What navigation pattern fits the content structure?
  • How deep is the information hierarchy?

Core Flows:

  • What's the optimal flow for [core task]?
  • How many steps are acceptable?
  • Where do users typically drop off in similar products?

Interactions:

  • What input methods are needed?
  • How should errors be handled?
  • What feedback do users need?

Onboarding:

  • How much onboarding is needed?
  • What's the time-to-value target?
  • What patterns work for this type of product?

Edge Cases:

  • How should empty states work?
  • What about loading and error states?
  • How are destructive actions handled?

Phase 3: Conduct Research

If delegating to ux-researcher subagent:

Provide clear research briefs:

code
Research Brief for UX Researcher:

PRODUCT CONTEXT:
[Summary of product, problem, users from PRD]

FEATURES TO RESEARCH:
1. [Feature]: Research patterns for [specific aspect]
2. [Feature]: Find examples of [specific pattern]

SPECIFIC QUESTIONS:
- What navigation patterns work best for [app type]?
- How do top apps handle [specific flow]?
- What are best practices for [interaction type]?

COMPETITORS TO ANALYZE:
- [Competitor 1]
- [Competitor 2]

Please find examples with screenshots where possible.

If researching yourself:

Search for:

  • "[app type] UX patterns"
  • "[feature type] best practices"
  • "[feature type] user flow"
  • "how to design [feature]"
  • "[competitor] UX analysis"
  • "[app type] navigation patterns"
  • "[app type] onboarding patterns"
  • "mobile [feature] patterns"

Sources to prioritize:

  • Nielsen Norman Group (nngroup.com)
  • Baymard Institute (baymard.com)
  • Mobbin (mobbin.com) - screenshot examples
  • Page Flows (pageflows.com) - flow recordings
  • UX Collective / UX Planet articles
  • Apple Human Interface Guidelines
  • Material Design guidelines

For each feature, research:

  • Standard patterns used by top apps
  • Variations and when to use each
  • Common mistakes to avoid
  • Accessibility considerations
  • Mobile vs desktop differences

Phase 4: Synthesize Recommendations

Organize findings into actionable UX recommendations:

For each feature/flow:

  1. Recommended pattern with rationale
  2. Example apps using this pattern
  3. Key considerations and variations
  4. Potential pitfalls to avoid

Document structure should flow from:

  • High-level (navigation, IA) → Mid-level (flows, patterns) → Detail-level (interactions, states)

Phase 5: Write the Document

Save to .agents/product/UXResearch.md

UX Research Document Template


code
# UX Research: [Product Name]

**Based on:** PRD.md, ProductPhases.md
**Research Date:** [Date]
**Platform(s):** [Mobile / Web / Desktop]

---

## Executive Summary

[3-4 sentences: Key UX approach, primary patterns recommended, and main principles guiding the experience]

---

## 1. User Context

### Target Users

[Summarized from PRD—relevant to UX decisions]

- **Primary User:** [Who]
  - Tech comfort: [Low / Medium / High]
  - Usage context: [When/where they use the product]
  - Usage frequency: [Daily / Weekly / Occasional]
  - Device preference: [Mobile / Desktop / Both]

### User Goals

[What users are trying to accomplish—drives UX priorities]

| Goal | Priority | Frequency | UX Implication |
|------|----------|-----------|----------------|
| [Goal 1] | Primary | [How often] | [What this means for UX] |
| [Goal 2] | Secondary | [How often] | [What this means for UX] |

### Usage Scenarios

[Key scenarios that inform UX decisions]

**Scenario 1: [Name]**
- Context: [Where/when user is doing this]
- Goal: [What they want to accomplish]
- Constraints: [Time pressure, distractions, etc.]
- UX needs: [What the experience must accommodate]

**Scenario 2: [Name]**
- Context: [Where/when]
- Goal: [What they want]
- Constraints: [Limitations]
- UX needs: [Requirements]

---

## 2. Information Architecture

### Content Structure

[How information should be organized]

    [App Name]
    │
    ├── [Primary Section 1]
    │   ├── [Subsection]
    │   └── [Subsection]
    │
    ├── [Primary Section 2]
    │   ├── [Subsection]
    │   └── [Subsection]
    │
    ├── [Primary Section 3]
    │
    └── [Settings / Profile]

**Rationale:** [Why this structure]

### Navigation Pattern

**Recommended:** [Pattern name—e.g., "Bottom tab bar with 4-5 primary destinations"]

**Research basis:**
- [Finding from research]
- [Example app using this pattern]

**Structure:**

| Tab | Purpose | Icon Suggestion |
|-----|---------|-----------------|
| [Tab 1] | [What it contains] | [Icon type] |
| [Tab 2] | [What it contains] | [Icon type] |
| [Tab 3] | [What it contains] | [Icon type] |
| [Tab 4] | [What it contains] | [Icon type] |

**Secondary navigation:** [How to handle deeper content—e.g., "Push navigation within each tab"]

**Examples:**
- [App 1]: [URL or description] - [What they do well]
- [App 2]: [URL or description] - [Relevant pattern]

---

## 3. Core User Flows

### Flow 1: [Primary User Task—e.g., "Creating a new entry"]

**Goal:** [What user accomplishes]
**Frequency:** [How often this happens]
**Target completion time:** [How long it should take]

**Recommended flow:**

    [Trigger]
        → [Step 1]: [Action / Screen]
        → [Step 2]: [Action / Screen]
        → [Step 3]: [Action / Screen]
        → [Success State]

**Pattern:** [Name of pattern—e.g., "Progressive disclosure wizard"]

**Key UX decisions:**

| Decision | Recommendation | Rationale |
|----------|----------------|-----------|
| [Entry point] | [Where/how user starts] | [Why] |
| [Input method] | [How user provides info] | [Why] |
| [Validation] | [When/how to validate] | [Why] |
| [Completion] | [How to confirm success] | [Why] |

**Examples from research:**
- [App]: [Pattern they use] - [Screenshot URL if available]
- [App]: [Variation worth noting]

**Pitfalls to avoid:**
- [Common mistake]
- [Anti-pattern]

---

### Flow 2: [Secondary User Task]

[Same structure as Flow 1]

---

### Flow 3: [Another Key Task]

[Same structure as Flow 1]

---

## 4. Feature-Specific UX Patterns

### [Feature 1 from MVP]

**Purpose:** [What this feature does]

**Recommended pattern:** [Pattern name]

**How it works:**
- [Behavior description]
- [Interaction description]

**Research findings:**
- [Best practice from research]
- [Example: App X does Y because Z]

**Examples:**
- [App]: [URL] - [What to note]
- [App]: [URL] - [What to note]

**Considerations:**
- [Important detail]
- [Edge case to handle]

---

### [Feature 2]

[Same structure]

---

### [Feature 3]

[Same structure]

---

## 5. Onboarding

### Onboarding Strategy

**Approach:** [Pattern—e.g., "Progressive onboarding with optional tutorial"]

**Rationale:** [Why this approach for this product/user]

**Time to value target:** [How quickly user should experience core value]

### Onboarding Flow

    [App Open]
        → [Step 1]: [What happens]
        → [Step 2]: [What happens]
        → [First Value Moment]: [User achieves X]

### Onboarding Elements

| Element | Include? | Rationale |
|---------|----------|-----------|
| Welcome screens | Yes / No | [Why] |
| Account creation | Upfront / Delayed / Optional | [Why] |
| Permissions | When to ask | [Why] |
| Tutorial | Yes / No / Optional | [Why] |
| Sample content | Yes / No | [Why] |
| Personalization | Yes / No | [Why] |

**Examples:**
- [App]: [Their onboarding approach] - [URL if available]
- [App]: [Alternative approach worth considering]

**Best practices from research:**
- [Finding 1]
- [Finding 2]

---

## 6. Interaction Patterns

### Input Patterns

| Input Type | Recommended Pattern | When to Use |
|------------|---------------------|-------------|
| Text entry | [Pattern] | [Context] |
| Selection (single) | [Pattern] | [Context] |
| Selection (multiple) | [Pattern] | [Context] |
| Date/Time | [Pattern] | [Context] |
| Media | [Pattern] | [Context] |

### Feedback Patterns

| Action | Feedback Type | Timing |
|--------|---------------|--------|
| Button tap | [Visual/haptic feedback] | Immediate |
| Form submission | [Loading → Success/Error] | [Duration] |
| Destructive action | [Confirmation pattern] | Before action |
| Background process | [Progress indication] | Ongoing |

### Gesture Patterns

[If mobile:]

| Gesture | Action | Where Used |
|---------|--------|------------|
| Swipe left/right | [Action] | [Context] |
| Pull down | [Action] | [Context] |
| Long press | [Action] | [Context] |
| Pinch | [Action] | [Context] |

---

## 7. States & Edge Cases

### Empty States

| Screen | Empty State Purpose | Content Direction |
|--------|---------------------|-------------------|
| [Screen 1] | [First use / No results / Error] | [Illustration + CTA / Simple message] |
| [Screen 2] | [Context] | [Approach] |

**Pattern recommendation:** [General approach to empty states]

**Examples:**
- [App]: [How they handle empty states]

### Loading States

| Context | Pattern | Rationale |
|---------|---------|-----------|
| Initial load | [Skeleton / Spinner / Splash] | [Why] |
| Content refresh | [Pull-to-refresh / Subtle indicator] | [Why] |
| Action pending | [Inline spinner / Disabled state] | [Why] |
| Long process | [Progress bar / Status updates] | [Why] |

### Error States

| Error Type | Pattern | Recovery Action |
|------------|---------|-----------------|
| Network error | [Approach] | [How to recover] |
| Validation error | [Approach] | [How to fix] |
| Not found | [Approach] | [Next steps] |
| Permission denied | [Approach] | [Resolution path] |

**Error messaging principles:**
- [Principle 1—e.g., "Say what happened, not error codes"]
- [Principle 2—e.g., "Always offer a next step"]

---

## 8. Accessibility Considerations

### Key Requirements

| Consideration | Requirement | Implementation Notes |
|---------------|-------------|---------------------|
| Touch targets | Minimum 44x44pt | [Where to watch for this] |
| Color contrast | 4.5:1 minimum | [Critical areas] |
| Screen reader | All interactive elements labeled | [Priority areas] |
| Motion | Respect reduced motion preference | [Animated elements] |
| Text scaling | Support dynamic type | [Key text areas] |

### Accessibility-First Patterns

- [Pattern recommendation for accessibility]
- [Alternative interaction method to support]

---

## 9. Platform-Specific Considerations

### Mobile (iOS/Android)

- **Thumb zone:** [Key actions should be reachable]
- **System patterns:** [Which native patterns to use]
- **Platform differences:** [Where iOS and Android diverge]

### Web/Desktop (if applicable)

- **Responsive behavior:** [How layout adapts]
- **Keyboard navigation:** [Key areas to support]
- **Hover states:** [Where hover adds value]

---

## 10. Competitive UX Analysis

### [Competitor 1]

**UX Strengths:**
- [What they do well]
- [Pattern worth borrowing]

**UX Weaknesses:**
- [Where they fall short]
- [Opportunity for us]

**Key Pattern:** [Specific pattern to note]

### [Competitor 2]

[Same structure]

### [Competitor 3]

[Same structure]

### Competitive UX Opportunities

[Where we can differentiate through UX:]

- [Opportunity 1]
- [Opportunity 2]

---

## 11. UX Principles for This Product

[Synthesized principles to guide all UX decisions:]

1. **[Principle 1]:** [Explanation and application]
2. **[Principle 2]:** [Explanation and application]
3. **[Principle 3]:** [Explanation and application]
4. **[Principle 4]:** [Explanation and application]

---

## 12. MVP UX Scope

### Included in MVP

| Feature | UX Pattern | Complexity |
|---------|------------|------------|
| [Feature] | [Pattern recommendation] | Low / Med / High |
| [Feature] | [Pattern recommendation] | Low / Med / High |

### UX Debt for Post-MVP

| Simplification | Full Experience | Phase |
|----------------|-----------------|-------|
| [MVP shortcut] | [Ideal UX] | Phase 2 |
| [MVP shortcut] | [Ideal UX] | Phase 3 |

---

## 13. Open UX Questions

[Questions that need user testing or stakeholder input:]

- [ ] [Question about pattern choice]
- [ ] [Question about flow decision]
- [ ] [Question requiring user validation]

---

## 14. References & Examples

### Apps to Reference

| App | What to Study | Link |
|-----|---------------|------|
| [App 1] | [Specific pattern/flow] | [URL] |
| [App 2] | [Specific pattern/flow] | [URL] |
| [App 3] | [Specific pattern/flow] | [URL] |

### Articles & Resources

- [Resource 1]: [URL] - [What it covers]
- [Resource 2]: [URL] - [What it covers]

---

## Appendix: Pattern Library Reference

[Quick reference of all recommended patterns:]

| Pattern | Used For | Reference Example |
|---------|----------|-------------------|
| [Pattern name] | [Where in app] | [App that does it well] |
| [Pattern name] | [Where in app] | [App that does it well] |

Research Guidelines

What to Research for Each Feature

Feature TypeResearch Focus
Data entry / FormsInput patterns, validation, keyboard optimization
Lists / FeedsScrolling, filtering, sorting, empty states
Detail viewsInformation hierarchy, actions, navigation
SettingsOrganization, toggle patterns, confirmation
SearchInput, results, filters, no-results states
NotificationsPermission requests, preference management
PaymentsTrust signals, flow optimization, error recovery
Social featuresSharing, reactions, comments patterns
MediaUpload, viewing, editing patterns

UX vs UI Boundary

Include in this document (UX):

  • Flow and step sequences
  • Pattern recommendations (bottom sheet vs modal)
  • Information hierarchy
  • Interaction behaviors
  • State definitions
  • Navigation structure

Leave for UI design (not this document):

  • Colors and color palette
  • Typography choices
  • Specific spacing values
  • Visual styling
  • Icon designs
  • Exact component styling

Research Depth by Priority

PhaseResearch Depth
MVP featuresDeep dive—specific patterns, multiple examples, edge cases
Phase 2 featuresModerate—general pattern direction, 1-2 examples
Phase 3+ featuresLight—note pattern category, research later

Output

Save the completed document to: .agents/product/UXResearch.md

After saving, provide a verbal summary:

  • Primary navigation pattern recommended
  • Key UX patterns for core flows
  • Main competitive UX opportunity
  • Any critical UX decisions needing input