UX Design Skill
Expert in user experience design, creating intuitive, accessible, and user-centered digital experiences.
When to Use This Skill
Use this skill when:
- Conducting user research and creating personas
- Designing information architecture and user flows
- Creating wireframes and prototypes
- Planning usability tests
- Ensuring accessibility compliance (WCAG 2.1 AA/AAA)
- Developing design systems and component libraries
- Analyzing user feedback and iterating on designs
Core UX Design Process
1. Discover & Research
User Research
- Conduct user interviews and surveys
- Analyze user pain points and goals
- Create data-driven user personas
- Map user journeys and scenarios
- Perform competitive analysis
- Identify accessibility requirements
Deliverables:
- User personas with demographics, goals, pain points, behaviors
- Journey maps showing touchpoints and emotions
- Competitive analysis reports
- Research insights summary
2. Define & Strategize
Information Architecture
- Define content hierarchy
- Create site maps and navigation structures
- Organize information logically
- Plan user flows and task flows
- Identify key user paths
Deliverables:
- Site maps and IA diagrams
- User flow diagrams
- Task flow documentation
- Navigation structures
3. Design & Prototype
Wireframing
- Start with low-fidelity sketches
- Create mid-fidelity wireframes
- Progress to high-fidelity mockups
- Focus on layout, hierarchy, and content placement
- Ensure responsive design across breakpoints (mobile, tablet, desktop)
Prototyping
- Create interactive prototypes for testing
- Design meaningful microinteractions
- Plan transitions and animations
- Consider loading states and error handling
Deliverables:
- Low-fidelity wireframes
- High-fidelity mockups
- Interactive prototypes
- Responsive design specifications
4. Validate & Test
Usability Testing
- Create test protocols and scenarios
- Define success metrics
- Conduct moderated/unmoderated tests
- Gather qualitative and quantitative feedback
- Identify usability issues
Accessibility Audits
- Test with screen readers
- Verify keyboard navigation
- Check color contrast ratios
- Validate ARIA labels and semantic HTML
- Ensure WCAG 2.1 AA/AAA compliance
Deliverables:
- Usability test protocols
- Test results and insights
- Accessibility audit reports
- Recommended improvements
5. Iterate & Refine
Design Iteration
- Analyze test results
- Prioritize issues by severity
- Implement improvements
- Retest critical flows
- Document design decisions
Design Principles
User-Centered Design
- Empathy First: Always design for the user, not for yourself
- Accessibility is Non-Negotiable: WCAG 2.1 AA minimum, AAA when possible
- Progressive Disclosure: Show only what users need, when they need it
- Clear Feedback: Provide immediate, clear feedback for all actions
- Error Prevention: Design to prevent errors before they happen
Visual Hierarchy
- Use size, color, contrast, and spacing to guide attention
- Most important elements should be most prominent
- Group related elements together (proximity)
- Use consistent patterns for similar elements
Cognitive Load
- Minimize user memory burden
- Use recognition over recall
- Provide clear labels and instructions
- Break complex tasks into simple steps
- Use familiar patterns and conventions
Accessibility Guidelines (WCAG 2.1)
Perceivable
- Text Alternatives: Alt text for images, labels for icons
- Color Contrast: Minimum 4.5:1 for normal text, 3:1 for large text
- Resizable Text: Support up to 200% zoom
- Non-Text Contrast: 3:1 for UI components and graphics
Operable
- Keyboard Navigation: All functionality accessible via keyboard
- Focus Indicators: Clear, visible focus states
- No Keyboard Traps: Users can navigate away from all elements
- Skip Links: Allow skipping repetitive content
- Timing: Provide controls for time-based content
Understandable
- Clear Language: Use simple, concise language
- Predictable Navigation: Consistent patterns across pages
- Error Identification: Clearly identify and describe errors
- Input Assistance: Provide labels, instructions, and validation
Robust
- Valid HTML: Use semantic, valid markup
- ARIA Attributes: Use ARIA when native HTML isn't sufficient
- Screen Reader Compatible: Test with NVDA, JAWS, VoiceOver
- Cross-Browser: Work across modern browsers
Design System Components
Design Tokens
- Colors (primary, secondary, accent, semantic)
- Typography (font families, sizes, weights, line heights)
- Spacing (margins, padding, gaps)
- Shadows and elevation
- Border radius and borders
- Breakpoints (mobile, tablet, desktop, wide)
Component Library
- Buttons (primary, secondary, tertiary, danger)
- Forms (inputs, selects, checkboxes, radio buttons)
- Navigation (headers, footers, menus, breadcrumbs)
- Feedback (alerts, toasts, modals, tooltips)
- Data display (tables, lists, cards, badges)
- Loading states (spinners, skeletons, progress bars)
Patterns
- Authentication flows (login, signup, password reset)
- CRUD operations (create, read, update, delete)
- Search and filtering
- Pagination and infinite scroll
- Empty states and error states
Integration with Project
When using this skill in the st44-home project:
With Frontend Skill
- UX Design defines the structure, flows, and interactions
- Frontend implements using Angular 21+ patterns
- Frontend Design applies aesthetic polish
With Database Skill
- Design data models based on user needs
- Plan for user-friendly data display
- Consider performance for user experience
Workflow Integration
- Research Phase: Use this skill to understand users
- Design Phase: Create wireframes and flows
- Implementation: Hand off to
frontend skill with specs
- Polish: Apply
frontend-design for aesthetics
- Validate: Return here for usability testing
Deliverable Templates
User Persona Template
## Persona Name
**Demographics:**
- Age, location, occupation, tech proficiency
**Goals:**
- What they want to achieve
- Why they use the product
**Pain Points:**
- Current frustrations
- Barriers to success
**Behaviors:**
- How they currently solve problems
- Preferred platforms and devices
**Quote:**
"A representative quote that captures their mindset"
User Flow Template
## User Flow: [Task Name]
**Entry Point:** Where the user starts
**Goal:** What the user wants to accomplish
**Success Criteria:** How we know they succeeded
**Steps:**
1. Action → System Response
2. Action → System Response
3. [Continue...]
**Alternative Paths:**
- Error scenarios
- Edge cases
**Exit Points:**
- Success state
- Abandon points
Wireframe Specifications
## Page/Component: [Name]
**Purpose:** Brief description
**User Need:** What problem this solves
**Layout:**
- Header: [Elements]
- Main Content: [Sections]
- Sidebar: [Components]
- Footer: [Elements]
**Key Elements:**
- Element 1: Purpose, behavior, states
- Element 2: Purpose, behavior, states
**Interactions:**
- Hover states
- Click actions
- Form validation
- Loading states
**Responsive Behavior:**
- Mobile: [Changes]
- Tablet: [Changes]
- Desktop: [Default]
Success Criteria
Before marking UX design work complete:
Tools & Testing
Recommended Testing Approach
# Accessibility testing tools
# - AXE DevTools (browser extension)
# - Lighthouse (Chrome DevTools)
# - WAVE (browser extension)
# Screen readers
# - NVDA (Windows) - free
# - JAWS (Windows) - commercial
# - VoiceOver (macOS/iOS) - built-in
# Keyboard navigation testing
# - Test all functionality with Tab, Enter, Escape, Arrow keys
# - Verify focus order is logical
# - Ensure no keyboard traps
Philosophy
Great UX design is invisible. Users should accomplish their goals effortlessly, without thinking about the interface. Design with empathy, test with real users, and iterate based on evidence, not assumptions.
Resources
Key Principles
- Don't Make Me Think (Steve Krug): Minimize cognitive load
- Fitts's Law: Larger, closer targets are faster to acquire
- Hick's Law: More choices = longer decision time
- Miller's Law: People remember 7±2 items
- Jakob's Law: Users expect your site to work like others
Accessibility Resources
