Skip to content

Research and UX/UI Design Workflows

This document outlines the research and UX/UI design workflows for SaaS products generated by the ConnectSoft AI Software Factory. These workflows transform product visions and requirements into user-centered, accessible designs through user research, persona creation, journey mapping, UX design, wireframing, UI design, and accessibility engineering.

Research and UX/UI design workflows are orchestrated by the User Researcher Agent, UX Designer Agent, UI Designer Agent, and Accessibility Engineer Agent, working collaboratively to ensure designs are user-centered, technically feasible, and accessible.

Overview

Research and UX/UI design workflows cover the design lifecycle:

  1. User Research - Gather insights, create personas, and map user journeys
  2. UX Design - Create user flows, wireframes, and low-fidelity prototypes
  3. UI Design - Transform wireframes into high-fidelity, visually appealing interfaces
  4. Accessibility Engineering - Ensure WCAG compliance and accessibility
  5. Design System Creation - Build reusable design systems and components

Workflow Architecture

graph TB
    Research[User Research] --> Personas[Persona Creation]
    Personas --> Journeys[Journey Mapping]
    Journeys --> UXDesign[UX Design]
    UXDesign --> Wireframes[Wireframing]
    Wireframes --> UIDesign[UI Design]
    UIDesign --> Accessibility[Accessibility Engineering]
    Accessibility --> DesignSystem[Design System]

    DesignSystem -->|Ready| Architecture[Architecture Phase]

    UXDesign -->|Iterate| Research
    UIDesign -->|Iterate| UXDesign

    style Research fill:#e3f2fd
    style Personas fill:#e8f5e9
    style Journeys fill:#fff3e0
    style UXDesign fill:#f3e5f5
    style Wireframes fill:#ffebee
    style UIDesign fill:#e1bee7
    style Accessibility fill:#c8e6c9
    style DesignSystem fill:#fce4ec
Hold "Alt" / "Option" to enable pan & zoom

1. User Research Workflow

Purpose

Gather and synthesize user insights to understand user needs, behaviors, pain points, and goals, creating personas and journey maps that inform design decisions.

Workflow Steps

sequenceDiagram
    participant Planning as Vision & Planning Agents
    participant Researcher as User Researcher Agent
    participant Memory as Semantic Memory
    participant UX as UX Designer Agent

    Planning->>Researcher: Product Vision, User Requirements
    Researcher->>Memory: Search Similar Personas
    Memory->>Researcher: Related Personas & Patterns
    Researcher->>Researcher: Conduct User Research
    Researcher->>Researcher: Analyze User Data
    Researcher->>Researcher: Create Personas
    Researcher->>Researcher: Map User Journeys
    Researcher->>UX: Emit UserInsightsReady
Hold "Alt" / "Option" to enable pan & zoom

Key Activities

  1. Research Planning

    • Define research objectives
    • Identify research methods
    • Plan user interviews and surveys
    • Set up usability testing

  2. Data Collection

    • Conduct user interviews
    • Deploy surveys and questionnaires
    • Analyze existing user data
    • Perform competitive analysis
    • Review market research

  3. Data Analysis

    • Synthesize user feedback
    • Identify patterns and themes
    • Extract pain points and opportunities
    • Analyze user behaviors

  4. Persona Creation

    • Define primary and secondary personas
    • Document demographics and psychographics
    • Identify goals, motivations, and frustrations
    • Create persona narratives

  5. Journey Mapping

    • Map user journeys across touchpoints
    • Identify pain points and opportunities
    • Document emotions and experiences
    • Define moments of truth

Agent Responsibilities

User Researcher Agent:

  • Orchestrates user research workflow
  • Conducts research activities
  • Creates personas and journey maps
  • Synthesizes insights into actionable recommendations

Vision & Planning Agents:

  • Provide product vision and requirements
  • Validate research alignment with goals

UX Designer Agent:

  • Consumes research insights
  • Validates design decisions against research

Success Metrics

  • Persona Completeness: All key personas defined
  • Journey Map Coverage: All key journeys mapped
  • Research Quality: Insights actionable and validated
  • Stakeholder Alignment: Research approved by stakeholders

Artifacts Produced

  • User Personas (personas.md)
  • Journey Maps (journey-maps.md)
  • User Research Report (user-research-report.md)
  • Competitive Analysis (competitive-analysis.md)
  • Usability Test Reports (usability-reports.md)

2. UX Design Workflow

Purpose

Create user flows, wireframes, and low-fidelity prototypes based on user research insights, ensuring designs are user-centered and technically feasible.

Workflow Steps

flowchart TD
    Start[User Insights Received] --> Analyze[Analyze User Needs]
    Analyze --> CreateFlows[Create User Flows]
    CreateFlows --> CreateWireframes[Create Wireframes]
    CreateWireframes --> CreatePrototypes[Create Low-Fidelity Prototypes]
    CreatePrototypes --> Test[Usability Testing]
    Test -->|Issues Found| Iterate[Iterate Design]
    Iterate --> CreateWireframes
    Test -->|Validated| Validate[Validate with Architecture]
    Validate -->|Ready| Emit[Emit DesignWireframesReady]
    Validate -->|Changes Needed| Iterate
Hold "Alt" / "Option" to enable pan & zoom

Key Activities

  1. User Flow Design

    • Map user flows for key tasks
    • Define entry and exit points
    • Identify decision points
    • Document user interactions

  2. Information Architecture

    • Organize content and features
    • Define navigation structure
    • Create site maps
    • Establish content hierarchy

  3. Wireframing

    • Create low-fidelity wireframes
    • Define layout and structure
    • Place key elements and components
    • Document interactions and states

  4. Prototyping

    • Create interactive prototypes
    • Link wireframes into flows
    • Add basic interactions
    • Prepare for usability testing

  5. Usability Testing

    • Test prototypes with users
    • Gather feedback and observations
    • Identify usability issues
    • Iterate based on findings

  6. Design System Foundation

    • Define design principles
    • Establish component patterns
    • Create style guidelines
    • Document interaction patterns

Agent Responsibilities

UX Designer Agent:

  • Orchestrates UX design workflow
  • Creates user flows and wireframes
  • Builds prototypes for testing
  • Validates designs with users

User Researcher Agent:

  • Provides research insights
  • Validates design decisions
  • Assists with usability testing

Architect Agents:

  • Validates technical feasibility
  • Provides architecture constraints
  • Reviews design for implementation

Success Metrics

  • User Flow Completeness: All key flows designed
  • Wireframe Coverage: All screens wireframed
  • Usability Score: > 80% task completion rate
  • Technical Feasibility: Designs validated by architects

Artifacts Produced

  • User Flows (user-flows.md)
  • Wireframes (wireframes.md)
  • Low-Fidelity Prototypes (prototypes/)
  • Usability Test Reports (usability-tests.md)
  • Design System Guidelines (design-system-guidelines.md)

3. UI Design Workflow

Purpose

Transform wireframes and UX designs into high-fidelity, visually appealing UI designs with complete visual specifications, responsive layouts, and design documentation.

Workflow Steps

sequenceDiagram
    participant UX as UX Designer Agent
    participant UI as UI Designer Agent
    participant Accessibility as Accessibility Engineer Agent
    participant Architecture as Architect Agents

    UX->>UI: Wireframes & User Flows
    UI->>UI: Create High-Fidelity Designs
    UI->>UI: Design UI Components
    UI->>UI: Create Responsive Layouts
    UI->>UI: Generate Design Specifications
    UI->>Accessibility: Emit DesignReadyForHandoff
    Accessibility->>UI: Accessibility Feedback
    UI->>UI: Incorporate Accessibility
    UI->>Architecture: Emit AccessibleDesignReady
Hold "Alt" / "Option" to enable pan & zoom

Key Activities

  1. Visual Design

    • Apply brand guidelines
    • Define color palette and typography
    • Create visual hierarchy
    • Design icons and illustrations

  2. Component Design

    • Design reusable UI components
    • Create component variations
    • Define component states
    • Document component usage

  3. Responsive Design

    • Design for multiple screen sizes
    • Create breakpoint specifications
    • Optimize for mobile and tablet
    • Ensure touch-friendly interactions

  4. Design Specifications

    • Document spacing and sizing
    • Define typography scales
    • Specify color values and usage
    • Create interaction specifications

  5. Design Documentation

    • Create design handoff documentation
    • Document design decisions
    • Provide implementation guidelines
    • Create asset libraries

  6. Prototype Enhancement

    • Enhance prototypes with visuals
    • Add micro-interactions
    • Create high-fidelity prototypes
    • Prepare for stakeholder review

Agent Responsibilities

UI Designer Agent:

  • Orchestrates UI design workflow
  • Creates high-fidelity designs
  • Designs UI components
  • Generates design specifications

UX Designer Agent:

  • Provides wireframes and flows
  • Validates visual design alignment
  • Reviews design for UX consistency

Accessibility Engineer Agent:

  • Reviews designs for accessibility
  • Provides accessibility feedback
  • Validates WCAG compliance

Success Metrics

  • Design Completeness: All screens designed
  • Component Coverage: All components designed
  • Responsive Coverage: All breakpoints covered
  • Specification Quality: Complete design specs

Artifacts Produced

  • High-Fidelity Mockups (mockups/)
  • UI Component Library (components/)
  • Design Specifications (design-specs.md)
  • Responsive Design Guidelines (responsive-guidelines.md)
  • Design Handoff Documentation (handoff-docs/)

4. Accessibility Engineering Workflow

Purpose

Ensure all designs meet WCAG 2.1 AA standards and are usable by all users, including those with disabilities.

Workflow Steps

flowchart TD
    Start[Design Received] --> Audit[Accessibility Audit]
    Audit --> CheckWCAG{WCAG 2.1 AA Compliant?}
    CheckWCAG -->|No| Identify[Identify Issues]
    Identify --> Fix[Fix Accessibility Issues]
    Fix --> Reaudit[Re-audit]
    Reaudit --> CheckWCAG
    CheckWCAG -->|Yes| Test[Accessibility Testing]
    Test --> Validate[Validate with Assistive Tech]
    Validate -->|Issues| Fix
    Validate -->|Compliant| Document[Document Compliance]
    Document --> Emit[Emit AccessibleDesignReady]
Hold "Alt" / "Option" to enable pan & zoom

Key Activities

  1. Accessibility Audit

    • Review designs for WCAG compliance
    • Check color contrast ratios
    • Verify keyboard navigation
    • Validate semantic structure

  2. Issue Identification

    • Identify accessibility violations
    • Document issues and severity
    • Prioritize fixes
    • Create remediation plan

  3. Design Enhancement

    • Fix color contrast issues
    • Add ARIA labels and roles
    • Ensure keyboard accessibility
    • Improve focus indicators

  4. Accessibility Testing

    • Test with screen readers
    • Validate keyboard navigation
    • Test with assistive technologies
    • Verify focus management

  5. Compliance Documentation

    • Document WCAG compliance
    • Create accessibility reports
    • Provide implementation guidelines
    • Document testing results

Agent Responsibilities

Accessibility Engineer Agent:

  • Orchestrates accessibility workflow
  • Conducts accessibility audits
  • Identifies and fixes issues
  • Validates compliance

UI Designer Agent:

  • Incorporates accessibility fixes
  • Implements accessibility guidelines
  • Validates design changes

UX Designer Agent:

  • Reviews accessibility impact on UX
  • Ensures accessible user flows
  • Validates accessibility patterns

Success Metrics

  • WCAG Compliance: 100% WCAG 2.1 AA compliance
  • Issue Resolution: All critical issues fixed
  • Testing Coverage: All key flows tested
  • Documentation: Complete compliance documentation

Artifacts Produced

  • Accessibility Audit Report (accessibility-audit.md)
  • WCAG Compliance Report (wcag-compliance.md)
  • Accessibility Guidelines (accessibility-guidelines.md)
  • Testing Results (accessibility-testing.md)

5. Design System Creation Workflow

Purpose

Create and maintain reusable design systems and component libraries that ensure consistency across products and enable efficient development.

Workflow Steps

sequenceDiagram
    participant UX as UX Designer Agent
    participant UI as UI Designer Agent
    participant Accessibility as Accessibility Engineer Agent
    participant System as Design System

    UX->>System: Design Principles
    UI->>System: UI Components
    Accessibility->>System: Accessibility Guidelines
    System->>System: Create Design System
    System->>System: Document Components
    System->>System: Generate Component Code
    System->>System: Publish Design System
Hold "Alt" / "Option" to enable pan & zoom

Key Activities

  1. Design System Foundation

    • Define design principles
    • Establish design tokens
    • Create component architecture
    • Define naming conventions

  2. Component Library Creation

    • Design reusable components
    • Create component variations
    • Document component APIs
    • Define component usage patterns

  3. Design Token System

    • Define color tokens
    • Create typography scales
    • Establish spacing system
    • Define animation tokens

  4. Documentation

    • Document design system
    • Create component documentation
    • Provide usage guidelines
    • Create implementation guides

  5. Code Generation

    • Generate component code
    • Create design system packages
    • Publish to component libraries
    • Enable developer consumption

Agent Responsibilities

UX Designer Agent:

  • Defines design principles
  • Establishes interaction patterns
  • Validates design system usability

UI Designer Agent:

  • Creates component designs
  • Designs design tokens
  • Generates component code

Accessibility Engineer Agent:

  • Ensures accessibility in design system
  • Validates component accessibility
  • Provides accessibility guidelines

Success Metrics

  • Component Coverage: All common components included
  • Documentation Quality: Complete and clear documentation
  • Code Quality: Production-ready component code
  • Adoption Rate: High usage across projects

Artifacts Produced

  • Design System Documentation (design-system.md)
  • Component Library (components/)
  • Design Tokens (design-tokens.json)
  • Component Code (component-code/)
  • Usage Guidelines (usage-guidelines.md)

Workflow Integration

Research and UX/UI design workflows integrate with other workflows:

  • Vision and Product Planning Workflows: Receive product vision and requirements
  • Architecture Workflows: Provide design specifications for technical design
  • Engineering Workflows: Provide design assets and specifications for implementation
  • Testing Workflows: Provide accessibility requirements and usability criteria

Best Practices

  1. User-Centered Design: Always start with user research and validate with users
  2. Iterative Design: Allow multiple iterations to refine designs
  3. Accessibility First: Consider accessibility from the beginning
  4. Design System Usage: Leverage design systems for consistency
  5. Collaboration: Foster collaboration between research, UX, UI, and accessibility agents
  6. Validation: Validate designs with users, stakeholders, and architects
  7. Documentation: Maintain comprehensive design documentation