Overview

UX Design orchestrates end-to-end product UX from PRD-driven research to developer handoff. It delivers user flows, journey maps, information architecture, wireframes, interaction patterns, and a cohesive design system, all while enforcing WCAG accessibility and responsive breakpoints.

How This Skill Works

The process starts by synthesizing user research from PRD personas, then creates primary user flows and information architecture. It proceeds with wireframes for key screens, defines interaction patterns, and establishes design system foundations, followed by accessibility notes and a developer handoff bundle guided by the bmad-orchestrator.js workflow.

When to Use It

• When starting a new product with a PRD and defined personas
• When redesigning an existing app to improve flows and IA
• When establishing or evolving a design system (typography, colors, spacing, components)
• When ensuring accessibility per WCAG and inclusive design
• When preparing assets for developer handoff with specs

Quick Start

1. Step 1: Gather projectName, prd, complexity, and PRD personas
2. Step 2: Synthesize user research and draft primary user journeys
3. Step 3: Create IA, wireframes for key screens, and establish design system foundations

Best Practices

• Ground decisions in synthesized PRD personas and user research
• Map primary user journeys before sketching wireframes
• Define clear information architecture and navigation to support flow
• Document design tokens and interaction patterns in the design system
• Include accessibility notes and responsive breakpoints early

Example Use Cases

• Wireframes for onboarding flow
• Journey maps for checkout flow
• Typography and color system integrated into a design system
• Library of interaction patterns and micro-interactions
• Developer handoff package with specs and assets

Frequently Asked Questions