design-review

# 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)

1. **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?

2. **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?

3. **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?

4. **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

1. **Define the persona**: Select a user persona from the Research Brief
2. **Define the task**: Select a key user flow from the IA Document
3. **Walk each step**: For every screen/interaction in the flow, answer the four questions
4. **Log failures**: Any "no" answer is a usability finding — record the step, the question that failed, the severity, and a suggested fix
5. **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**:
- [ ] All images have descriptive alt text
- [ ] Decorative images have empty alt attributes
- [ ] Icons have accessible labels
- [ ] Charts/graphs have text descriptions

**1.2 Time-based Media**:
- [ ] Videos have captions
- [ ] Audio content has transcripts
- [ ] Auto-playing media can be paused

**1.3 Adaptable**:
- [ ] Content structure uses semantic HTML
- [ ] Information doesn't rely solely on visual characteristics
- [ ] Reading order is logical without CSS
- [ ] Form labels are properly associated

**1.4 Distinguishable**:
- [ ] Color contrast meets 4.5:1 for normal text, 3:1 for large text
- [ ] Information isn't conveyed by color alone
- [ ] Text can be resized to 200% without horizontal scrolling
- [ ] Focus indicators are clearly visible

#### Operable

**2.1 Keyboard Accessible**:
- [ ] All functionality available via keyboard
- [ ] No keyboard traps
- [ ] Focus order is logical
- [ ] Keyboard shortcuts don't conflict

**2.2 Enough Time**:
- [ ] Time limits can be extended/disabled
- [ ] Auto-updating content can be paused
- [ ] Session timeouts have warnings

**2.3 Seizures and Physical Reactions**:
- [ ] No content flashes more than 3 times per second
- [ ] Motion-triggered functionality can be disabled

**2.4 Navigable**:
- [ ] Skip navigation links provided
- [ ] Page titles are descriptive
- [ ] Focus order is meaningful
- [ ] Link purposes are clear from context

**2.5 Input Modalities**:
- [ ] Pointer gestures have keyboard alternatives
- [ ] Motion actuation has alternatives
- [ ] Touch targets are at least 44x44px

#### Understandable

**3.1 Readable**:
- [ ] Language of page is identified
- [ ] Language of parts is identified
- [ ] Unusual words are defined

**3.2 Predictable**:
- [ ] Navigation is consistent across pages
- [ ] Identification is consistent across pages
- [ ] Context changes only occur on user request

**3.3 Input Assistance**:
- [ ] Form errors are clearly identified
- [ ] Labels and instructions are provided
- [ ] Error suggestions are given when possible

#### Robust

**4.1 Compatible**:
- [ ] HTML is valid
- [ ] Name, role, value are programmatically determined
- [ ] Status messages are programmatically announced

## 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
- [ ] User personas are research-based, not assumed
- [ ] User journey maps identify pain points and opportunities
- [ ] Competitive analysis covers relevant competitors and features
- [ ] Research findings clearly inform design decisions
- [ ] Success metrics are defined and measurable
- [ ] User needs are prioritized based on evidence
- [ ] Business requirements align with user needs

### Information Architecture Review
- [ ] Site structure is logical and intuitive
- [ ] Navigation labels are clear and descriptive
- [ ] Content hierarchy supports user goals
- [ ] Taxonomy is consistent and scalable
- [ ] Search functionality is appropriate for content volume
- [ ] Information can be found within 3 clicks
- [ ] IA supports both browsing and searching behaviors

### Wireframe Review
- [ ] Layout supports content hierarchy effectively
- [ ] UI patterns are appropriate for functionality
- [ ] Interactive elements are clearly indicated
- [ ] Responsive behavior is considered at mobile/tablet/desktop
- [ ] Content blocks are appropriately sized
- [ ] Navigation patterns are consistent
- [ ] User flows are efficiently supported

### UX Review
- [ ] User flows are optimized for task completion
- [ ] Error states and edge cases are handled
- [ ] Micro-interactions enhance usability
- [ ] Form design follows best practices
- [ ] Progressive disclosure is used appropriately
- [ ] Accessibility considerations are integrated
- [ ] Performance implications are considered

### UI Design Review
- [ ] Visual design supports content hierarchy
- [ ] Brand guidelines are followed consistently
- [ ] Design system tokens are used correctly
- [ ] Interactive states are designed for all components
- [ ] Responsive design works across all breakpoints
- [ ] Color contrast meets accessibility standards
- [ ] Typography scale is applied consistently

### Frontend Implementation Review
- [ ] Design is implemented pixel-perfect where specified
- [ ] Interactive behaviors match design specifications
- [ ] Responsive breakpoints work smoothly
- [ ] Accessibility features are properly implemented
- [ ] Performance optimization is applied
- [ ] Code follows established conventions
- [ ] Browser compatibility is maintained

### Testing Review
- [ ] Usability testing identifies no critical issues
- [ ] Accessibility testing passes WCAG 2.1 AA
- [ ] Cross-browser testing shows consistent behavior
- [ ] Performance testing meets established benchmarks
- [ ] User feedback is incorporated appropriately
- [ ] Error scenarios are tested and handled properly
- [ ] Success metrics are being achieved

## 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]