| name | design-review |
| description | Design critique and review methodology including heuristic evaluation, consistency checking, accessibility compliance, and visual quality assessment. Use when reviewing design artifacts, evaluating UI quality, or auditing design compliance. |
Design Review & Critique Methodology
Heuristic Evaluation Framework
Nielsen's 10 Heuristics Adapted for Design Artifacts
1. Visibility of System Status
Description: Users should always know what's happening through appropriate feedback
What to check:
- Loading states for async operations
- Progress indicators for multi-step processes
- Active states for navigation and tabs
- Form validation feedback
- Success/error message placement
Common violations:
- Missing loading spinners
- No progress indication during uploads
- Unclear active navigation state
- Form errors appear after submit only
Severity weighting: Critical (3x) if affects core functionality
2. Match Between System and Real World
Description: Use familiar conventions, language, and mental models
What to check:
- Icon meanings are universally understood
- Language matches target audience vocabulary
- Information hierarchy follows expected patterns
- Interaction patterns match platform conventions
Common violations:
- Abstract icons without labels
- Technical jargon for general audiences
- Unconventional navigation patterns
- Platform-inconsistent interaction models
Severity weighting: Standard (1x) unless affects core comprehension
3. User Control and Freedom
Description: Provide easy ways to undo actions and navigate freely
What to check:
- Undo/redo functionality where appropriate
- Cancel buttons in dialogs and flows
- Back navigation always available
- Escape routes from error states
Common violations:
- No way to cancel multi-step processes
- Destructive actions without confirmation
- Dead-end pages without navigation
- Modal dialogs without close buttons
Severity weighting: Critical (3x) for destructive actions
4. Consistency and Standards
Description: Follow established conventions and maintain internal consistency
What to check:
- UI component consistency across pages
- Color usage follows semantic patterns
- Typography hierarchy is consistent
- Interaction patterns are standardized
Common violations:
- Same component styled differently
- Primary buttons using different colors
- Inconsistent spacing between sections
- Mixed interaction patterns for similar actions
Severity weighting: Standard (1x) but accumulates quickly
5. Error Prevention
Description: Design to prevent errors before they occur
What to check:
- Form validation prevents invalid input
- Dangerous actions require confirmation
- Clear constraints and limitations
- Smart defaults reduce user errors
Common violations:
- No input validation until form submit
- Destructive actions too easy to trigger
- Unclear field requirements
- Poor default values
Severity weighting: Critical (3x) if prevents task completion
6. Recognition Rather Than Recall
Description: Make objects, actions, and options visible and recognizable
What to check:
- Important information remains visible
- Navigation shows current location
- Previous inputs are remembered
- Clear labels and descriptions
Common violations:
- Important info hidden behind tooltips
- No breadcrumbs in deep navigation
- Forms clear all data on error
- Unlabeled icons and buttons
Severity weighting: Standard (1x) unless critical workflow
7. Flexibility and Efficiency of Use
Description: Accommodate both novice and expert users
What to check:
- Keyboard shortcuts for power users
- Customizable interfaces where beneficial
- Progressive disclosure of advanced features
- Multiple ways to accomplish tasks
Common violations:
- No keyboard navigation support
- All complexity shown at once
- Single path to accomplish goals
- No personalization options
Severity weighting: Standard (1x) for basic accessibility
8. Aesthetic and Minimalist Design
Description: Remove unnecessary elements and focus on essential content
What to check:
- Information hierarchy is clear
- Visual noise is minimized
- Every element serves a purpose
- Whitespace is used effectively
Common violations:
- Cluttered interfaces with competing elements
- Poor visual hierarchy
- Decorative elements distract from content
- Insufficient whitespace creates cramped feeling
Severity weighting: Standard (1x) unless severely impacts usability
9. Help Users Recognize, Diagnose, and Recover from Errors
Description: Error messages should be helpful and actionable
What to check:
- Error messages explain what went wrong
- Clear instructions for fixing errors
- Errors appear near the problem area
- Visual indicators help locate issues
Common violations:
- Generic "Something went wrong" messages
- Error messages at top of long forms
- No suggestions for fixing problems
- Errors in technical language users don't understand
Severity weighting: Critical (3x) if prevents error recovery
10. Help and Documentation
Description: Provide contextual help and clear documentation
What to check:
- Help content is contextual and searchable
- Documentation matches current interface
- Examples and tutorials are provided
- Contact/support options are available
Common violations:
- Help content is outdated
- No contextual help for complex features
- Examples don't match real use cases
- No clear way to get additional support
Severity weighting: Standard (1x) unless critical features lack explanation
Cognitive Walkthrough Method
A cognitive walkthrough evaluates a design by simulating a user's thought process at each step of a task. For each step, answer four questions:
The Four Questions (Per Step)
-
Will the user try to achieve the right effect?
- Does the user's goal match what this step accomplishes?
- Is the correct action obvious given the user's current goal?
-
Will the user notice that the correct action is available?
- Is the button/link/control visible and discoverable?
- Does it look interactive? Is it in the expected location?
-
Will the user associate the correct action with the desired effect?
- Does the label/icon clearly communicate what will happen?
- Is there ambiguity between this action and similar actions?
-
If the correct action is performed, will the user see progress?
- Does the system provide feedback (visual, textual, state change)?
- Can the user tell they are closer to their goal?
Running a Cognitive Walkthrough
- Define the persona: Select a user persona from the Research Brief
- Define the task: Select a key user flow from the IA Document
- Walk each step: For every screen/interaction in the flow, answer the four questions
- Log failures: Any "no" answer is a usability finding — record the step, the question that failed, the severity, and a suggested fix
- Prioritize findings: Critical (blocks task completion) > Major (causes confusion/delay) > Minor (suboptimal but task completable)
When to Use Cognitive Walkthrough
- Phase 3 (Wireframes): Walk key flows through wireframe layouts
- Phase 4 (UX Design): Walk flows including interaction states and feedback
- Phase 5 (UI Design): Walk flows with full visual context
- Phase 7 (UX Testing): Walk flows in the implemented product
Consistency Checking Methodology
Cross-Artifact Consistency
Information Architecture ↔ Wireframes:
- Navigation structure matches IA sitemap
- Content hierarchy reflects IA organization
- User flows align with planned paths
- Content types match IA specifications
Wireframes ↔ UI Design:
- Layout structure is preserved
- Content blocks maintain relative sizing
- Interactive elements are properly styled
- Navigation patterns remain consistent
UI Design ↔ Code Implementation:
- Visual design matches pixel-perfect where specified
- Interaction states are implemented
- Typography scales and spacing are accurate
- Color values match design tokens exactly
Intra-Artifact Consistency
Component-Level Consistency:
- Same component styled identically across all instances
- State variations (hover, active, disabled) consistently applied
- Interactive patterns standardized across similar components
- Icon usage follows established meanings
Pattern-Level Consistency:
- Form layouts follow same structure
- Error handling uses same visual treatment
- Success states use consistent feedback patterns
- Navigation behaves predictably across sections
Token Consistency
Color Token Usage:
- All colors come from established token system
- Semantic color usage follows defined rules (error=red, success=green)
- Brand colors used consistently for same purposes
- No hardcoded hex values outside token system
Typography Token Usage:
- Text sizes come from defined scale
- Font weights match token specifications
- Line heights follow system ratios
- Letter spacing uses token values
Spacing Token Usage:
- All padding/margin uses spacing scale
- Component internal spacing is standardized
- Section spacing follows consistent patterns
- No arbitrary pixel values outside token system
Naming Consistency
Component Naming:
- BEM methodology followed consistently
- Component names descriptive and intuitive
- Variant names follow logical patterns
- State names match interaction patterns
Asset Naming:
- File names follow established conventions
- Image assets use descriptive names
- Icon names match component references
- Export names maintain consistency
Accessibility Compliance Criteria
WCAG 2.1 AA Checklist by Category
Perceivable
1.1 Text Alternatives:
1.2 Time-based Media:
1.3 Adaptable:
1.4 Distinguishable:
Operable
2.1 Keyboard Accessible:
2.2 Enough Time:
2.3 Seizures and Physical Reactions:
2.4 Navigable:
2.5 Input Modalities:
Understandable
3.1 Readable:
3.2 Predictable:
3.3 Input Assistance:
Robust
4.1 Compatible:
Visual Quality Assessment Rubric
Scoring Criteria (Total: 100 points)
Visual Hierarchy (20 points)
Excellent (18-20 points):
- Clear information hierarchy with 3+ distinct levels
- Size, color, and spacing create obvious importance ranking
- Eye flow follows intended path naturally
- Key actions and content immediately identifiable
Good (14-17 points):
- Generally clear hierarchy with some minor issues
- Most important elements are emphasized appropriately
- Occasional competing elements for attention
- Overall flow is logical with minor disruptions
Needs Improvement (10-13 points):
- Inconsistent hierarchy treatment
- Some important elements lack emphasis
- Multiple elements competing for primary attention
- User has to work to understand importance
Poor (0-9 points):
- No clear hierarchy visible
- All elements appear equally important
- Information is difficult to scan and prioritize
- User cannot quickly identify key content/actions
Typography (15 points)
Excellent (14-15 points):
- Consistent type scale used throughout
- Perfect font pairing (if multiple fonts)
- Appropriate line heights and spacing
- Text is highly readable at all sizes
Good (11-13 points):
- Generally consistent typography
- Minor scale inconsistencies
- Mostly appropriate spacing
- Good readability with occasional issues
Needs Improvement (8-10 points):
- Inconsistent type sizes and spacing
- Poor font combinations
- Some readability issues
- No clear typographic system
Poor (0-7 points):
- No apparent type system
- Multiple inappropriate fonts mixed
- Poor readability throughout
- Inconsistent sizing and spacing
Color (15 points)
Excellent (14-15 points):
- Cohesive color palette with clear system
- Proper contrast ratios throughout
- Semantic color usage is consistent
- Colors support hierarchy and branding
Good (11-13 points):
- Generally good color choices
- Minor contrast issues
- Mostly consistent semantic usage
- Supports overall design goals
Needs Improvement (8-10 points):
- Limited color system
- Some contrast failures
- Inconsistent color meanings
- Colors don't strongly support hierarchy
Poor (0-7 points):
- No apparent color system
- Multiple contrast failures
- Confusing or inconsistent color usage
- Colors detract from usability
Spacing (15 points)
Excellent (14-15 points):
- Consistent spacing system used throughout
- Perfect optical balance and rhythm
- Appropriate density for content type
- Effective use of whitespace
Good (11-13 points):
- Generally consistent spacing
- Good overall balance
- Appropriate density with minor issues
- Effective whitespace usage
Needs Improvement (8-10 points):
- Inconsistent spacing patterns
- Some areas feel cramped or too sparse
- No clear spacing system
- Poor whitespace utilization
Poor (0-7 points):
- No spacing system apparent
- Inconsistent and awkward spacing
- Poor balance throughout
- Ineffective whitespace usage
Consistency (15 points)
Excellent (14-15 points):
- Perfect consistency across all components
- Standardized patterns throughout
- No visual or functional inconsistencies
- Clear design system adherence
Good (11-13 points):
- Generally consistent with minor variations
- Most components follow established patterns
- Few inconsistencies that don't impact usability
- Good system adherence
Needs Improvement (8-10 points):
- Some notable inconsistencies
- Components vary more than appropriate
- Patterns not always followed
- Inconsistencies affect user experience
Poor (0-7 points):
- Major inconsistencies throughout
- Components feel disconnected
- No apparent system or standards
- Inconsistencies severely impact usability
Accessibility (20 points)
Excellent (18-20 points):
- Meets or exceeds all WCAG 2.1 AA requirements
- Perfect color contrast throughout
- Full keyboard navigation support
- Excellent semantic structure
Good (14-17 points):
- Meets most WCAG 2.1 AA requirements
- Good color contrast with minor issues
- Generally good keyboard support
- Good semantic structure
Needs Improvement (10-13 points):
- Meets some accessibility requirements
- Multiple contrast issues
- Limited keyboard support
- Poor semantic structure
Poor (0-9 points):
- Fails most accessibility requirements
- Significant contrast failures
- No keyboard support
- No semantic structure consideration
Phase-Specific Review Criteria
Research Phase Review
Information Architecture Review
Wireframe Review
UX Review
UI Design Review
Frontend Implementation Review
Testing Review
Scoring Methodology
Calculation Formula
Total Criteria Count: Sum of all applicable criteria per phase
Weighted Score Calculation:
Score = (Critical Issues × 3 + Standard Issues × 1) / Total Possible Points × 100
Verdict Thresholds:
- ≥95% APPROVED: Ready to proceed to next phase
- 85-94% APPROVED WITH CONDITIONS: Proceed with minor fixes required
- 70-84% REVISION REQUIRED: Significant changes needed before proceeding
- <70% REJECTED: Major rework required, cannot proceed
Critical vs Standard Issue Weighting
Critical Issues (3x weight):
- Blocks core user tasks
- Creates accessibility barriers
- Violates fundamental usability principles
- Causes system errors or failures
- Significantly impacts business goals
Standard Issues (1x weight):
- Reduces user experience quality
- Minor consistency issues
- Visual polish improvements
- Performance optimizations
- Enhancement opportunities
Feedback Format Template
Actionable Feedback Structure
Finding ID: DR-001
Severity: Critical | Standard
Category: Visual Hierarchy | Typography | Color | Spacing | Consistency | Accessibility | Usability
Location: Specific page/component/element
What's Wrong: Clear description of the issue
Why It Matters: Impact on user experience or business goals
Expected Behavior: What should happen instead
Suggestion: Specific, actionable recommendation for fixing the issue
Example Feedback Entry
Finding ID: DR-023
Severity: Critical
Category: Accessibility
Location: Contact form on /contact page
What's Wrong: Form error messages appear only at the top of the form when individual fields have validation errors
Why It Matters: Users with screen readers or cognitive disabilities cannot easily associate errors with specific fields, blocking form completion
Expected Behavior: Error messages should appear inline next to each problematic field AND be programmatically associated with the field
Suggestion: Add aria-describedby attributes linking fields to their error messages, and position error text immediately after each field label
Feedback Summary Template
Review Summary: [Phase] Review for [Project Name]
Overall Score: [X/100] - [VERDICT]
Total Issues Found: [X Critical, X Standard]
Must Fix Before Proceeding: [List critical issues]
Recommended Improvements: [List standard issues]
Estimated Fix Time: [Hours/days based on issue complexity]
Next Steps: [Specific actions required before re-review or phase progression]
