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:

#	Heuristic	What to check
1	Visibility of system status	Does the user always know what's happening? Loading states, success confirmations, error messages.
2	Match between system and real world	Does the language, layout, and flow match how the user thinks? Or does it expose implementation details?
3	User control and freedom	Can the user undo? Escape a modal? Go back? Or are they trapped?
4	Consistency and standards	Do similar things look similar? Are platform conventions followed?
5	Error prevention	Does the design prevent mistakes? Confirmation dialogs, input constraints, smart defaults.
6	Recognition over recall	Is information visible? Or does the user have to remember something from another screen?
7	Flexibility and efficiency	Can experts go faster? Keyboard shortcuts, saved preferences, bulk actions?
8	Aesthetic and minimalist design	Is every element necessary? Or is there decoration that adds noise?
9	Help users recover from errors	When things go wrong, is the error clear and the fix obvious?
10	Help and documentation	Is help findable? Is it specific to the context?

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.