UX Designer

What this skill does

# UX Designer

Design intuitive, accessible user experiences grounded in research.

## Core Principle

**Design for users, not yourself.** Base design decisions on user research and usability testing, not personal preference.

## 5-Phase UX Design Process

### Phase 1: Information Architecture

**Goal**: Organize content and functionality logically

**Activities**:

- Card sorting: Let users organize content into categories
- Site mapping: Create hierarchy of pages and features
- Navigation design: Primary, secondary, utility navigation
- Labeling: Clear, user-friendly terminology

**Validation**:

- [ ] IA tested with 5+ users (tree testing)
- [ ] Navigation paths clear and logical
- [ ] Labels match user mental models

---

### Phase 2: User Flows

**Goal**: Map paths users take to complete tasks

**Key Flows to Design**:

- Onboarding: First-time user experience
- Core tasks: Primary use cases (80% of usage)
- Error states: Recovery from mistakes
- Edge cases: Less common but important scenarios

**Flow Diagram Elements**:

```
[Entry Point] → [Decision] → [Action] → [Outcome]
                    ↓
               [Alternative Path]
```

**Validation**:

- [ ] Happy path documented
- [ ] Error states designed
- [ ] Exit points identified
- [ ] Flows match user research

---

### Phase 3: Wireframing

**Goal**: Create low-fidelity layouts focusing on structure

**Fidelity Levels**:

- **Low-fi**: Sketches, boxes, placeholder text (fastest)
- **Mid-fi**: Grayscale, realistic content, basic interactions
- **High-fi**: Styled, branded, detailed interactions

**Key Screens to Wireframe**:

- Homepage/Dashboard
- Core task screens (CRUD operations)
- Navigation (header, sidebar, footer)
- Forms and input validation
- Empty states, loading states, error states

**Wireframe Checklist**:

- [ ] Clear visual hierarchy
- [ ] Consistent layout patterns
- [ ] Accessible contrast and sizing
- [ ] Touch targets ≥44x44px (mobile)
- [ ] Forms grouped logically

---

### Phase 4: Prototyping & Testing

**Goal**: Create interactive prototypes for usability testing

**Prototyping Tools**:

- Figma (recommended): Collaborative, browser-based
- Adobe XD: Design system friendly
- Framer: Code-based prototyping
- InVision: Simple click-through prototypes

**Usability Testing**:

```
Script:
1. Welcome (5 min): Explain process, get consent
2. Context (5 min): Ask about current solutions
3. Tasks (20 min): "Try to [complete task]"
4. Think-aloud: "What are you thinking?"
5. Debrief (5 min): Overall impressions

Metrics:
- Task completion rate (target: >70%)
- Time on task
- Error rate
- Satisfaction (1-5 scale)
```

**Validation**:

- [ ] Prototype covers main user flows
- [ ] 5+ users tested
- [ ] Task completion >70%
- [ ] Critical issues documented and fixed

---

### Phase 5: UI Design & Handoff

**Goal**: Create high-fidelity, production-ready designs

**Design System Elements**:

- Colors: Primary, secondary, neutrals, semantic (error, success)
- Typography: Scale (h1-h6, body, small), weights
- Spacing: 4pt or 8pt grid system
- Components: Buttons, inputs, cards, modals, etc.
- Icons: Consistent set (Heroicons, Lucide, Font Awesome)

**Accessibility (WCAG 2.1 AA)**:

- Color contrast: 4.5:1 for text, 3:1 for large text/UI
- Keyboard navigation: Tab order logical
- Screen readers: Semantic HTML, ARIA labels
- Focus states: Visible focus indicators
- Alt text: Descriptive image alternatives

**Developer Handoff**:

- Design specs: Spacing, colors, fonts (inspect mode)
- Component states: Default, hover, active, disabled, error
- Responsive breakpoints: Mobile, tablet, desktop
- Interactions: Animations, transitions, micro-interactions
- Assets: Icons, images, logos (exported)

**Validation**:

- [ ] Designs match brand guidelines
- [ ] Accessibility checked (Contrast, keyboard nav)
- [ ] Responsive layouts for all breakpoints
- [ ] Component library documented
- [ ] Handoff reviewed with developers

---

## Key UX Principles

### 1. Consistency

Use familiar patterns. Don't reinvent standard UI elements.

### 2. Feedback

Confirm user actions (success messages, loading states).

### 3. Error Prevention

Design to prevent errors, not just handle them.

### 4. Recognition Over Recall

Show options rather than requiring memory.

### 5. Flexibility

Support both novice and expert users (shortcuts, defaults).

---

## Design Patterns

**Form Design**:

- Label above field (not placeholder)
- Inline validation (real-time feedback)
- Clear error messages ("Email must include @")
- One column layout (faster completion)
- Group related fields

**Navigation**:

- Current page highlighted
- Breadcrumbs for deep hierarchies
- Search for large sites
- Max 7 items in top nav (Miller's Law)

**Empty States**:

- Explain why it's empty
- Provide clear next action
- Use illustration or icon
- Example: "No tasks yet. Create your first task to get started."

**Loading States**:

- Skeleton screens (better than spinners)
- Progress indicators for long operations
- Optimistic UI (show result before confirmed)

---

## Accessibility Checklist

- [ ] Color contrast ≥4.5:1 for text
- [ ] Keyboard navigation works (Tab, Enter, Esc)
- [ ] Focus indicators visible
- [ ] Alt text for images
- [ ] Form labels associated with inputs
- [ ] Semantic HTML (headings, nav, main, etc.)
- [ ] ARIA labels for icon buttons
- [ ] Screen reader tested
- [ ] Zoom to 200% works (responsive)
- [ ] No flashing content (seizure risk)

---

## Tools & Resources

**Design Tools**:

- Figma: Collaborative design
- Tailwind CSS: Utility-first CSS framework
- shadcn/ui: Component library
- Heroicons/Lucide: Icon sets

**Prototyping**:

- Figma: Built-in prototyping
- Framer: Advanced interactions
- ProtoPie: Complex micro-interactions

**Testing**:

- Maze: Remote usability testing
- UserTesting: Moderated and unmoderated tests
- Hotjar: Session recordings and heatmaps

**Accessibility**:

- WAVE: Accessibility checker
- axe DevTools: Browser extension
- Lighthouse: Automated audits

---

## Related Resources

**Related Skills**:

- `user-researcher` - For grounding design in research
- `frontend-builder` - For implementing designs
- `product-strategist` - For validating design direction

**Related Patterns**:

- `STANDARDS/design-systems/component-library.md` - Component standards (when created)
- `STANDARDS/best-practices/accessibility.md` - Accessibility guidelines (when created)

**Related Playbooks**:

- `PLAYBOOKS/conduct-usability-test.md` - Testing procedure (when created)
- `PLAYBOOKS/design-handoff.md` - Developer handoff process (when created)