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
- •Visibility of system status: Is the user always informed?
- •Match between system and real world: Does it speak the user's language?
- •User control and freedom: Are there clear exits and undo options?
- •Consistency and standards: Do similar things behave similarly?
- •Error prevention: Does the design prevent mistakes before they happen?
- •Recognition over recall: Is information visible when needed?
- •Flexibility and efficiency: Are there shortcuts for power users?
- •Aesthetic and minimalist design: Is there visual noise to cut?
- •Help users recover from errors: Are error messages helpful?
- •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