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 researchfrontend-builder- For implementing designsproduct-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)