Design Review & Critique

Run structured design reviews that produce actionable, prioritized feedback — not vague opinions. Every finding should have a location, a problem, a severity, and a fix.

The Review Framework

Step 1: Understand the Intent

Before critiquing, answer:

• What is this trying to do? (inform, convert, onboard, entertain)
• Who is it for? (specific human, not "users")
• What should success look like? (metric, behavior, feeling)

If you can't answer these, the design has no target to hit. Flag that first.

Step 2: Heuristic Evaluation (Nielsen's 10)

Score each heuristic 0–4:

Score: 0 = not present, 1 = poor, 2 = fair, 3 = good, 4 = excellent.

Step 3: Visual Hierarchy Audit

Check these in order:

1. Primary action: Is there ONE clear action per screen? Can you find it in 2 seconds?
2. Heading hierarchy: Do headings create a scannable outline? Or is everything the same size?
3. Contrast ratio: Does the most important element have the most contrast? Or is everything equally loud?
4. Whitespace: Is there breathing room around key elements? Or is everything crammed together?
5. Color usage: Does color draw attention to what matters? Or is it decorative?
6. Typography: Are there distinct levels (heading, body, caption)? Or does everything look the same?

Step 4: Accessibility Check

Run through the accessibility audit skill's checklist:

• Contrast: every text/background pair ≥ 4.5:1.
• Keyboard: every interactive element reachable via Tab.
• Focus: visible focus indicators on all interactive elements.
• ARIA: correct roles, labels, and states.
• Motion: prefers-reduced-motion respected.

Step 5: Responsive Check

• 320px: all content accessible, no horizontal scroll.
• 768px: layout reflows appropriately.
• 1440px: content doesn't stretch too wide.
• 200% zoom: content reflows, no overlapping text.

The Output Format

Every finding follows this structure:

### [Severity] Finding title

**Location**: [page/section/component]
**Problem**: [what's wrong and why it matters]
**Fix**: [specific, actionable remedy]
**Effort**: [trivial / small / medium / large]

Severity levels:

• P0 — Critical: Blocks task completion. Fix before merge.
• P1 — Major: Significantly degrades experience. Fix before release.
• P2 — Minor: Polish issue. Fix in next sprint.
• P3 — Suggestion: Nice-to-have improvement.

Example Findings

### [P0] Error message doesn't explain what went wrong

**Location**: Login form → password error
**Problem**: "Invalid credentials" doesn't tell the user if the email is wrong or the password. They can't recover.
**Fix**: Split into "No account found with this email" and "Incorrect password. Try again or reset it."
**Effort**: Trivial

### [P1] No focus indicator on navigation links

**Location**: Global navigation
**Problem**: Tab through the page — you can't see which nav link has focus. Keyboard users are lost.
**Fix**: Add `:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }` to nav links.
**Effort**: Trivial

### [P1] Three primary actions on dashboard

**Location**: Dashboard → hero section
**Problem**: "Create project", "Invite team", and "View analytics" are all styled as primary buttons. No clear priority.
**Fix**: Make "Create project" the primary button. "Invite team" becomes secondary (ghost). "View analytics" becomes a text link.
**Effort**: Small

### [P2] Inconsistent border radius

**Location**: Cards and buttons
**Problem**: Cards use `border-radius: 0.5rem`, buttons use `border-radius: 0.25rem`. The visual language is inconsistent.
**Fix**: Unify to `--radius-md: 0.5rem` for both. Or create separate `--radius-card` and `--radius-button` tokens with intentional difference.
**Effort**: Small

The Review Checklist

Before declaring a review complete, verify you've checked:

• Purpose: Does the design have a clear goal?
• Hierarchy: Can you identify the primary action in 2 seconds?
• Contrast: All text passes 4.5:1?
• Keyboard: Tab through the entire page?
• States: Default, hover, active, focus, disabled, loading, error, empty?
• Responsive: 320px, 768px, 1440px, 200% zoom?
• Motion: prefers-reduced-motion respected?
• Copy: Button labels specific? Error messages actionable?
• Consistency: Same patterns used throughout?
• Performance: No layout thrashing? Animations GPU-composited?

Anti-Patterns in Reviews

• Vague feedback: "This feels off" without specifying what or why.
• Opinion without reasoning: "I don't like blue" is not a finding. "Blue primary on blue background fails 2.1:1 contrast" is.
• Fixating on aesthetics without checking function: A beautiful interface that doesn't work is still broken.
• Reviewing without context: You can't evaluate a dashboard without knowing who uses it and what they're trying to do.
• Listing every possible improvement: Prioritize. 3 P0 findings are more useful than 20 P3 suggestions.
• Reviewing your own work without distance: Wait a day, or have someone else review. You'll see different things.

The Mandate

A review is only useful if the designer can act on it. Every finding must be:

1. Specific — point to the exact element.
2. Actionable — describe the fix, not just the problem.
3. Prioritized — P0 before P3.
4. Evidence-based — reference a heuristic, a WCAG rule, or a usability principle.