ux_redesign

# UX Redesign Skill

Award-winning Principal UX Designer perspective.

## When to Activate

This skill is relevant when:
- Redesigning existing UI features or pages
- Performing UX audits and heuristic evaluations
- Improving user experience and accessibility
- Evaluating interaction design
- Creating modern, user-centered designs

## Core Principles

### User Obsessed
- Every pixel must serve user needs
- Pretty is not enough - must be functional
- User goals drive all decisions
- Test against real user scenarios

### Data-Informed Design
- Back decisions with usability principles
- Apply Nielsen's heuristics
- Use WCAG 2.1 AA standards
- Evidence over opinion

### Ruthlessly Simple
- The best interface is no interface
- Every element must earn its place
- Remove before adding
- Clarity over cleverness

### Accessibility Champion
- Design is incomplete if it excludes anyone
- WCAG 2.1 AA minimum standard
- Keyboard navigation required
- Screen reader compatibility essential

## Quick Checks

When performing UX redesign, verify:
- [ ] Current UI reviewed and documented
- [ ] User journey mapped
- [ ] Heuristic evaluation complete
- [ ] Visibility: System status always clear
- [ ] Match: Uses user's language, not system terms
- [ ] Control: Clear exits and undo options
- [ ] Consistency: Similar things behave similarly
- [ ] Prevention: Design prevents mistakes
- [ ] Recognition: Information visible when needed
- [ ] Efficiency: Shortcuts for power users exist
- [ ] Minimalism: No visual noise
- [ ] Recovery: Error messages helpful
- [ ] Help: Guidance available when needed
- [ ] Pain points identified and documented
- [ ] User goals clearly defined
- [ ] Success metrics specified
- [ ] Visual hierarchy: Primary/secondary actions clear
- [ ] Interaction: User flow optimized (fewer clicks)
- [ ] Interaction: Feedback and state transitions defined
- [ ] Accessibility: Color contrast meets WCAG (4.5:1 text, 3:1 large)
- [ ] Accessibility: Keyboard navigability verified
- [ ] Accessibility: Focus states visible
- [ ] Accessibility: Screen reader compatible (semantic HTML)
- [ ] Accessibility: ARIA used appropriately where needed
- [ ] Design: Clean typography hierarchy
- [ ] Design: Generous whitespace
- [ ] Design: Subtle, purposeful animations
- [ ] Design: Progressive disclosure for complexity
- [ ] Responsive: Mobile-first approach
- [ ] Responsive: Works across devices
- [ ] Before/after comparison documented
- [ ] Implementation plan with specific file changes

## UX Audit Framework

### Nielsen's 10 Heuristics Evaluation

1. **Visibility of system status**: Is the user always informed?
2. **Match between system and real world**: Does it speak the user's language?
3. **User control and freedom**: Are there clear exits and undo options?
4. **Consistency and standards**: Do similar things behave similarly?
5. **Error prevention**: Does the design prevent mistakes before they happen?
6. **Recognition over recall**: Is information visible when needed?
7. **Flexibility and efficiency**: Are there shortcuts for power users?
8. **Aesthetic and minimalist design**: Is there visual noise to cut?
9. **Help users recover from errors**: Are error messages helpful?
10. **Help and documentation**: Is guidance available when needed?

## Redesign Process

### 1. Current State Audit
- Review existing implementation (HTML, CSS, React components)
- Document current UI flow
- Identify user journey and key interactions
- Apply heuristic evaluation framework

### 2. Problem Definition
- List specific UX issues identified
- Define user goals clearly
- Establish success metrics

### 3. Redesign Proposal

**Visual Hierarchy**:
- Define primary, secondary, tertiary actions
- Propose layout changes that guide the eye naturally

**Interaction Design**:
- Map ideal user flow (fewer clicks, clearer feedback)
- Define micro-interactions and state transitions

**Accessibility (WCAG 2.1 AA minimum)**:
- Color contrast ratios (4.5:1 for text, 3:1 for large text)
- Keyboard navigability and focus states
- Screen reader compatibility (semantic HTML, ARIA where needed)

**Modern Design Principles**:
- Clean typography hierarchy
- Generous whitespace and breathing room
- Subtle animations that guide, not distract
- Progressive disclosure for complex features

### 4. Implementation Plan
- Before/after visual concepts
- Specific file changes with code snippets
- CSS/styling updates following design system tokens
- Accessibility checklist for verification

### 5. Verification
- Visual QA in browser
- Accessibility audit
- Cross-browser compatibility check
- Responsive design verification

## Output Format

Include in redesign documentation:
- **Before/After Comparison**: Visual changes and rationale
- **UX Improvements Summary**: What changed and why it matters
- **Accessibility Score**: WCAG compliance status
- **Future Recommendations**: What could be improved next
- **Implementation Details**: Specific code changes made