## Review Checklist

### 1. Visual Design (25%)
- [ ] Color harmony and contrast
- [ ] Typography hierarchy and readability
- [ ] Layout alignment and grid usage
- [ ] Visual hierarchy effectiveness
- [ ] Polish and attention to detail

### 2. User Experience (25%)
- [ ] Clarity of purpose on each screen
- [ ] Intuitive navigation
- [ ] Clear call-to-actions
- [ ] Logical user flows
- [ ] Error prevention and handling

### 3. Consistency (15%)
- [ ] Component reuse
- [ ] Pattern consistency
- [ ] Spacing consistency
- [ ] Interaction consistency

### 4. Responsiveness (15%)
- [ ] Mobile layout quality
- [ ] Breakpoint transitions
- [ ] Touch target sizes
- [ ] Content priority on small screens

### 5. Accessibility (10%)
- [ ] Color contrast compliance
- [ ] Focus states
- [ ] Touch targets
- [ ] Screen reader considerations

### 6. Brand & Polish (10%)
- [ ] Brand alignment
- [ ] Professional appearance
- [ ] Memorable elements
- [ ] Emotional resonance

## Visual Inspection Checklist

### Overall Impression
1. Take 5 seconds to look at the design
2. Note first impression (positive/negative/neutral)
3. Identify what draws attention first
4. Assess if primary action is clear

### Element-by-Element Review

#### Typography
- [ ] Is body text readable (16px+)?
- [ ] Is heading hierarchy clear (3+ levels)?
- [ ] Is line length comfortable (60-75 chars)?
- [ ] Is line height appropriate (1.5-1.7 for body)?
- [ ] Are fonts loading correctly?

#### Color
- [ ] Does palette feel cohesive?
- [ ] Is there sufficient contrast?
- [ ] Is color used meaningfully (not decoratively)?
- [ ] Are semantic colors correct (green=success)?
- [ ] Would it work for colorblind users?

#### Layout
- [ ] Is grid usage consistent?
- [ ] Is alignment precise?
- [ ] Is whitespace intentional?
- [ ] Is visual balance achieved?
- [ ] Does layout guide the eye?

#### Components
- [ ] Are all states designed?
- [ ] Are components consistent?
- [ ] Are interactive elements clear?
- [ ] Is feedback adequate?

## UX Evaluation

### Task Completion
For each key user task:
1. Can user identify where to start?
2. Is the path to completion clear?
3. Is progress communicated?
4. Is completion confirmed?

### Cognitive Load
- Is information chunked appropriately?
- Are users overloaded with options?
- Is important info prioritized?
- Can users focus on one task?

### Wayfinding
- Is current location clear?
- Can users navigate to any section?
- Are breadcrumbs/back paths available?
- Is search available if needed?

### Error Handling
- Are potential errors prevented?
- Are error messages helpful?
- Can users recover easily?
- Is data preserved on errors?

## Design Review Report

**Project**: [Name]
**Date**: [Date]
**Reviewer**: [AI Agent/Name]
**Design Version**: [Version number]

---

### Summary

**Overall Score**: [X/10]
**Quality Level**: [Poor/Below Average/Average/Good/Excellent]
**Ready for**: [Next phase / Iteration / Development]

### Key Findings

#### Strengths (Keep These)
1. **[Strength 1]**: [Why it works well]
2. **[Strength 2]**: [Why it works well]
3. **[Strength 3]**: [Why it works well]

#### Areas for Improvement (Address These)
1. **[Issue 1]**: [Description]
   - Impact: [High/Medium/Low]
   - Fix: [Recommendation]
   
2. **[Issue 2]**: [Description]
   - Impact: [High/Medium/Low]
   - Fix: [Recommendation]

#### Critical Issues (Must Fix)
1. **[Critical Issue]**: [Description]
   - Why critical: [Reason]
   - Required fix: [Action]

---

### Detailed Scores

| Category | Score | Notes |
|----------|-------|-------|
| Visual Design | _/10 | |
| User Experience | _/10 | |
| Consistency | _/10 | |
| Responsiveness | _/10 | |
| Accessibility | _/10 | |
| Brand & Polish | _/10 | |

---

### Screen-by-Screen Notes

#### [Screen 1 Name]
- **What's working**: [Notes]
- **Issues**: [Notes]
- **Suggestions**: [Notes]

#### [Screen 2 Name]
- **What's working**: [Notes]
- **Issues**: [Notes]
- **Suggestions**: [Notes]

---

### Recommended Next Steps

1. [ ] [Priority action 1]
2. [ ] [Priority action 2]
3. [ ] [Priority action 3]

### Timeline Estimate
- Critical fixes: [X hours]
- Improvements: [X hours]
- Polish: [X hours]

**Design**: TaskFlow Dashboard v1
**Screens**: Dashboard, Project List, Task Detail
**Stage**: First draft visual design

## Design Review Report: TaskFlow Dashboard v1

**Date**: Current
**Design Version**: 1.0 (First Draft)

---

### Summary

**Overall Score**: 6.5/10
**Quality Level**: Average to Good
**Ready for**: Iteration (1-2 more rounds recommended)

The design shows good foundational work with a clear structure and appropriate color palette. However, it needs work on visual hierarchy, consistency, and some UX improvements before reaching production quality.

---

### Key Findings

#### Strengths (Keep These) ✅

1. **Color palette is well-chosen**
   - Violet primary feels modern and premium
   - Good differentiation from competitors
   - Accessible contrast ratios

2. **Navigation structure is clear**
   - Sidebar organization makes sense
   - User can find main sections easily
   - Icons support labels well

3. **Card-based layout works well**
   - Information is chunked appropriately
   - Visual hierarchy within cards is good
   - Consistent card treatment throughout

---

#### Areas for Improvement (Address These) ⚠️

1. **Typography hierarchy needs work**
   - Issue: H2 and H3 look too similar
   - Impact: Medium - reduces scanability
   - Fix: Increase size difference (H2: 28px, H3: 22px) or add weight contrast

2. **Inconsistent spacing**
   - Issue: Card padding varies (16px, 20px, 24px)
   - Impact: Medium - looks unpolished
   - Fix: Standardize to 20px for all cards

3. **Stat cards lack visual hierarchy**
   - Issue: Number and label are similar weight
   - Impact: Low - data is readable but could be clearer
   - Fix: Make numbers bolder (700) and larger (32px)

4. **Project cards missing status indicator**
   - Issue: Can't quickly see project health
   - Impact: Medium - key information missing
   - Fix: Add colored dot or badge for status

5. **Search bar too subtle**
   - Issue: Low contrast, hard to notice
   - Impact: Low - discoverable but not prominent
   - Fix: Add subtle border or darker background

---

#### Critical Issues (Must Fix) 🚨

1. **No loading states designed**
   - Why critical: Users won't know if system is working
   - Fix: Design skeleton loaders for dashboard, task list
   - Estimate: 2 hours

2. **Mobile navigation not resolved**
   - Why critical: Tab bar items undefined, overflow not handled
   - Fix: Design complete mobile nav with all states
   - Estimate: 3 hours

---

### Detailed Scores

| Category | Score | Notes |
|----------|-------|-------|
| Visual Design | 7/10 | Good colors, needs hierarchy work |
| User Experience | 6/10 | Clear but missing states |
| Consistency | 5/10 | Spacing inconsistencies |
| Responsiveness | 5/10 | Mobile incomplete |
| Accessibility | 7/10 | Good contrast, needs focus states |
| Brand & Polish | 6/10 | Solid foundation, needs refinement |

**Weighted Total: 6.5/10**

---

### Screen-by-Screen Notes

#### Dashboard
**Working**: Layout structure, stat cards concept, color usage
**Issues**: 
- Stat cards need stronger number emphasis
- "Welcome" message feels generic
- No time context ("Today is Monday")
**Suggestions**:
- Add personalization to welcome (time-based greeting)
- Consider showing "quick actions" section

#### Project List
**Working**: Card layout, filtering concept
**Issues**:
- Cards look identical - hard to scan
- No visual indicator of project priority
- Grid spacing uneven
**Suggestions**:
- Add color-coded priority/status
- Consider list view as alternative
- Add project thumbnail/color stripe

#### Task Detail (Modal)
**Working**: Information organization
**Issues**:
- Close button too small
- No clear primary action
- Comments section undefined
**Suggestions**:
- Add "Mark Complete" as primary CTA
- Design empty state for no comments
- Add activity log

---

### Recommended Next Steps

**Iteration 1 (Critical)** - Target: 7.5/10
1. [ ] Design loading/skeleton states
2. [ ] Complete mobile navigation design
3. [ ] Add focus states to all interactive elements

**Iteration 2 (Important)** - Target: 8.5/10
1. [ ] Refine typography hierarchy
2. [ ] Standardize spacing to 8px scale
3. [ ] Add project status indicators
4. [ ] Design empty states

**Iteration 3 (Polish)** - Target: 9/10
1. [ ] Micro-interaction specifications
2. [ ] Edge cases (error states, long content)
3. [ ] Final accessibility audit

---

### Timeline Estimate

| Phase | Hours | Priority |
|-------|-------|----------|
| Critical fixes | 5h | High |
| Important improvements | 6h | Medium |
| Polish | 4h | Low |
| **Total** | **15h** | |

Provide a rapid design review of [DESIGN/SCREEN]:

1. First impression (1-10)
2. Top 3 strengths
3. Top 3 issues
4. Most critical fix needed
5. Estimated quality level

Review [DESIGN] specifically for [ASPECT]:
- Typography / Color / Layout / UX / Accessibility

Provide:
1. Current state assessment
2. Specific issues found
3. Recommended fixes
4. Priority level

Compare [DESIGN A] vs [DESIGN B]:

1. Which is stronger overall?
2. What does A do better?
3. What does B do better?
4. Recommended elements to combine