Skip to content
Moira Documentation

UX Design

Structured UX/UI design process with mandatory accessibility verification. Ensures user-centered design with documented rationale and WCAG AA compliance.

Start

Section titled “Start”
Terminal window
mcp__moira__start({ workflowId: "ux-design" })

Process

Section titled “Process”
flowchart LR
    A[Users] --> B[Constraints]
    B --> C[Design System]
    C --> D[User Flow]
    D --> E[Microcopy]
    E --> F[Accessibility]
    F --> G[Prototype]
    G --> H[Validation]

Steps

Section titled “Steps”
StepActionOutput
1. UsersCollect target user info: personas, JTBD, pain pointsUser personas
2. ConstraintsDocument technical and business constraintsConstraint list
3. Design SystemCheck existing design system, identify reusable componentsComponent inventory
4. User FlowDesign flow with rationale for each decisionDocumented user flow
5. MicrocopyWrite UX copy with clarity checkReviewed copy
6. AccessibilityWCAG AA checklist verificationCompliance report
7. PrototypeScreen-by-screen descriptionPrototype spec
8. ValidationUser testing planTest plan

Features

Section titled “Features”

User-Centered Design

Section titled “User-Centered Design”
ElementDescription
Primary personaDefined before design begins
Decision linkingAll choices tied to user needs
Validation planningTests mapped to personas

Design Rationale

Section titled “Design Rationale”

Each design decision documents:

  • Why: Rationale for the decision
  • Alternatives: Options considered
  • Rejection reasons: Why alternatives were not chosen

WCAG AA Checklist

Section titled “WCAG AA Checklist”
CriterionRequirement
Color contrast4.5:1 minimum for text
Keyboard navigationFull keyboard accessibility
Screen readerProper ARIA labels and structure
Touch targets44x44px minimum
Focus statesVisible focus indicators
Alt textDescriptive alternative text
Form labelsAssociated labels for all inputs

Microcopy Guidelines

Section titled “Microcopy Guidelines”
PrincipleDescription
Clarity over clevernessClear beats creative
Sentence length15-20 words maximum
VoiceActive voice preferred
CTAsSpecific, action-oriented
Error messagesFriendly, solution-focused

Example Node Configuration

Section titled “Example Node Configuration”
{
  "id": "accessibility-check",
  "type": "agent-directive",
  "directive": "Verify design against WCAG AA checklist. Check color contrast, keyboard navigation, screen reader support, touch targets, focus states, alt text, and form labels.",
  "completionCondition": "All WCAG AA criteria verified with pass/fail status for each item",
  "connections": {
    "next": "create-prototype"
  }
}
Section titled “Related”