Research and UX/UI Design Agents

This document provides a comprehensive overview of Research and UX/UI Design agents in the ConnectSoft AI Software Factory. It is written for product managers, designers, and stakeholders who need to understand how the Factory creates user-centered experiences and design systems.

Research and UX/UI Design agents operate between Vision & Planning and Architecture phases, transforming product visions into user-centered designs, wireframes, prototypes, and accessible UI components.

Note

Research and UX/UI Design agents ensure that all products are user-centered, accessible, and aligned with user needs. They bridge the gap between business requirements and user experience, creating designs that are both functional and delightful.

Agent Cluster Composition

The Research and UX/UI Design cluster consists of 4 specialized agents:

Agent	Core Function	Primary Output
User Researcher Agent	Gathers and synthesizes user insights, creates personas and journey maps	User research reports, personas, journey maps
UX Designer Agent	Creates user flows, wireframes, and low-fidelity prototypes	Wireframes, user flows, prototypes, design systems
UI Designer Agent	Transforms wireframes into high-fidelity UI designs	High-fidelity mockups, UI components, design specifications
Accessibility Engineer Agent	Ensures WCAG compliance and accessibility	Accessibility audits, enhanced UI components, compliance reports

Mission and Scope

Research and UX/UI Design agents are responsible for:

• User Research - Gathering and analyzing user insights, creating personas, mapping user journeys
• UX Design - Creating user flows, wireframes, and prototypes based on user research
• UI Design - Transforming UX designs into high-fidelity, visually appealing interfaces
• Accessibility - Ensuring all designs meet WCAG 2.1 AA standards and are usable by all users

What They Do:

• Conduct user research and create personas
• Design user experiences and user flows
• Create wireframes and prototypes
• Design high-fidelity UI components
• Ensure accessibility compliance
• Create design systems
• Generate UI component code

What They Do NOT Do:

• Make product decisions (Vision & Planning agents)
• Design system architecture (Architect agents)
• Implement backend code (Engineering agents)

Position in Factory Lifecycle

Research and UX/UI Design agents operate between Vision & Planning and Architecture:

flowchart LR
    Vision[Vision & Planning Agents] --> Research[User Researcher Agent]
    Research --> UX[UX Designer Agent]
    UX --> UI[UI Designer Agent]
    UI --> Accessibility[Accessibility Engineer Agent]
    Accessibility --> Architecture[Architect Agents]

    style Vision fill:#e1f5ff
    style Research fill:#fff4e1
    style UX fill:#e8f5e9
    style UI fill:#f3e5f5
    style Accessibility fill:#fce4ec
    style Architecture fill:#e0f2f1

Hold "Alt" / "Option" to enable pan & zoom

Agent Collaboration Flow

sequenceDiagram
    participant VP as Vision & Planning Agents
    participant UR as User Researcher Agent
    participant UX as UX Designer Agent
    participant UI as UI Designer Agent
    participant AE as Accessibility Engineer Agent
    participant Arch as Architect Agents

    VP->>UR: Product Vision, User Requirements
    UR->>UR: Conduct User Research
    UR->>UX: Emit UserInsightsReady (Personas, Journey Maps)
    UX->>UX: Create Wireframes & User Flows
    UX->>UI: Emit DesignWireframesReady
    UI->>UI: Create High-Fidelity Designs
    UI->>AE: Emit DesignReadyForHandoff
    AE->>AE: Audit & Enhance for Accessibility
    AE->>Arch: Emit AccessibleDesignReady

Hold "Alt" / "Option" to enable pan & zoom

Individual Agent Details

User Researcher Agent

Role: Gathers and synthesizes user insights, creates personas and journey maps

Responsibilities: - Conduct user behavior analysis - Perform needs assessment - Create detailed user personas - Map user journeys - Conduct usability testing - Perform competitive analysis - Synthesize user feedback into actionable insights

Inputs: - Product vision and business goals - User requirements - Market research data - Existing user feedback

Outputs: - User personas - Journey maps - Usability reports - User interview/survey analysis - Competitive analysis reports - Event: UserInsightsReady

Key Deliverables: - User Personas - Detailed representations of user types, goals, challenges, motivations - Journey Maps - Visualizations of user steps, emotions, pain points, opportunities - Usability Reports - Insights from usability testing sessions - Competitive Analysis - Reports on competitor products and innovation opportunities

See: Detailed User Researcher Agent specification in Factory Documentation

UX Designer Agent

Role: Creates user flows, wireframes, and low-fidelity prototypes

Responsibilities: - Design user flows that guide users through key tasks - Create wireframes and low-fidelity prototypes - Conduct usability testing - Validate design choices against user feedback - Create design systems - Ensure designs are technically feasible

Inputs: - User research insights - User personas and journey maps - Business requirements - Technical constraints

Outputs: - User flows - Wireframes - Low-fidelity prototypes - Usability test reports - Design system guidelines - Event: DesignWireframesReady

Key Deliverables: - User Flows - Diagrams mapping user journey from start to finish - Wireframes - Low-fidelity representations focusing on layout and functionality - Prototypes - Interactive mockups for testing and iteration - Design Systems - Consistent guidelines for building UI

See: Detailed UX Designer Agent specification in Factory Documentation

UI Designer Agent

Role: Transforms wireframes into high-fidelity UI designs

Responsibilities: - Create UI components from wireframes - Develop high-fidelity visual designs - Ensure design system consistency - Optimize for responsiveness across devices - Create design documentation - Develop clickable prototypes

Inputs: - Wireframes and user flows - Design system guidelines - Brand guidelines - Technical constraints

Outputs: - High-fidelity mockups - UI component designs - Responsive design specifications - Design documentation - Interactive prototypes - Event: DesignReadyForHandoff

Key Deliverables: - UI Components - Reusable components (buttons, inputs, cards) following design system - High-Fidelity Mockups - Detailed, high-resolution designs defining final visual layout - Responsive Designs - Designs adapting across screen sizes and devices - Design Documentation - Detailed specs and guidelines for developers

See: Detailed UI Designer Agent specification in Factory Documentation

Accessibility Engineer Agent

Role: Ensures WCAG 2.1 AA compliance and accessibility

Responsibilities: - Audit UI components for WCAG compliance - Validate contrast ratios and color accessibility - Check keyboard navigation and tab order - Verify screen reader compatibility - Inject ARIA roles and semantic markup - Enhance templates with accessibility improvements - Generate accessibility audit reports

Inputs: - UI components and designs - WCAG standards (2.1 AA) - Accessibility requirements

Outputs: - Accessibility audit reports - Enhanced UI components with accessibility markup - Compliance validation results - Accessibility recommendations - Event: AccessibleDesignReady

Dual Mode Operation: - Verifier Mode - Audits templates, flags violations, blocks merges if critical issues - Implementer Mode - Injects ARIA roles, enhances semantic structure, improves keyboard navigation

Key Deliverables: - Accessibility Audit Reports - WCAG compliance validation - Enhanced Components - UI components with accessibility improvements - Compliance Validation - Verification of accessibility standards - Accessibility Documentation - Guidelines and recommendations

See: Detailed Accessibility Engineer Agent specification in Factory Documentation

Typical Workflows

Workflow: New Product Design

1. User Researcher Agent receives product vision
2. Conduct Research - Analyze user needs, create personas, map journeys
3. UX Designer Agent receives user insights
4. Create Wireframes - Design user flows and low-fidelity prototypes
5. UI Designer Agent receives wireframes
6. Create High-Fidelity Designs - Transform wireframes into polished UI
7. Accessibility Engineer Agent audits and enhances designs
8. Hand Off to Architect - Pass designs to Architect agents for technical design

Workflow: Feature Enhancement

1. User Researcher Agent analyzes user feedback on existing feature
2. UX Designer Agent updates user flows and wireframes
3. UI Designer Agent updates UI components
4. Accessibility Engineer Agent validates accessibility of changes
5. Hand Off to Engineering - Pass updated designs for implementation

Collaboration with Other Agents

With Vision & Planning Agents

Receive: - Product vision and goals - User requirements - Business constraints

Provide: - User research insights - Design recommendations - Usability feedback

With Architect Agents

Provide: - User flows and wireframes - UI design specifications - Accessibility requirements

Receive: - Technical feasibility feedback - Architecture constraints - Integration requirements

With Engineering Agents

Provide: - High-fidelity designs - Design specifications - UI component requirements - Accessibility guidelines

Receive: - Implementation questions - Technical limitations - Feasibility concerns

Design System Integration

All agents work together to create and maintain design systems:

• User Researcher - Provides user insights that inform design system decisions
• UX Designer - Creates design system guidelines and patterns
• UI Designer - Implements design system components
• Accessibility Engineer - Ensures design system components are accessible

Accessibility-First Approach

The Accessibility Engineer Agent ensures:

• WCAG 2.1 AA Compliance - All designs meet accessibility standards
• Screen Reader Support - Components work with assistive technologies
• Keyboard Navigation - All interactions accessible via keyboard
• Color Contrast - Sufficient contrast ratios for readability
• Semantic HTML - Proper semantic structure and ARIA roles

Related Documents

• Agent System Overview - How agents work together
• Vision & Planning Agents - Upstream agents
• Architect Agents - Downstream agents
• Engineering Agents - Implementation agents
• Agent Execution Flow - Execution flow details
• Agent Collaboration Patterns - Collaboration patterns