design-critiquer

What this skill does

# Design Critiquer

## Overview
This skill provides structured, actionable design critiques grounded in UX principles, visual design fundamentals, and usability heuristics. A good design critique is not a list of personal preferences—it connects observations to user impact and business outcomes. This skill helps you evaluate designs across key dimensions: usability, hierarchy, accessibility, consistency, and clarity. Whether you are reviewing a lo-fi wireframe or a polished high-fidelity mockup, the output is prioritized, constructive feedback that the designer can act on immediately.

## When to Use
- Reviewing wireframes, mockups, or prototypes before development
- Running a design critique session or design review meeting
- Evaluating a redesign against the existing product for regression
- Auditing a live UI for usability and accessibility improvements
- Peer-reviewing a teammate's design work
- Self-critiquing your own design before presenting it

## When NOT to Use
- Writing or implementing code (use `frontend-design` skill instead)
- Creating marketing materials or campaign assets — different discipline
- Evaluating brand identity at a strategic level (brand strategy is a separate domain)
- Legal or compliance review of design assets
- Performance profiling or technical evaluation of a front-end implementation

## Quick Reference
| Task | Approach |
|------|----------|
| First pass | Evaluate from the user's perspective before looking at individual elements |
| Hierarchy | Check: can you read the page in 5 seconds and know what to do? |
| Accessibility | Contrast ratios (4.5:1 text, 3:1 UI), touch targets (44×44px min), focus order |
| Consistency | Same element, same style everywhere — spot deviations from the design system |
| Usability heuristics | Apply Nielsen's 10: visibility, feedback, control, standards, error prevention, etc. |
| Prioritization | Sev 1 (blocks users) → Sev 2 (frustrates users) → Sev 3 (polish/preference) |
| Tone | Critique the design, not the designer; lead with impact, not judgment |
| Positive feedback | Name what works and why — it's as actionable as what doesn't |

## Instructions

1. **Understand the context before critiquing.** Identify: What is this screen trying to accomplish? Who is the user? What stage of the design is this (wireframe vs. polished mockup)? Calibrate the depth of your critique to the fidelity—pixel-perfect feedback on a wireframe wastes everyone's time.

2. **Do a five-second first impression.** Look at the design for five seconds, then look away and answer: What is this page for? What is the primary action? What did my eye go to first? If these are unclear, the hierarchy needs work—this is your most important finding.

3. **Evaluate visual hierarchy and layout.** Check whether size, color, weight, and whitespace guide the eye through the intended reading order. The primary action should be visually dominant. Group related elements. Ensure spacing is consistent and intentional, not random.

4. **Apply Nielsen's usability heuristics.** Systematically check the top relevant heuristics: (1) Visibility of system status, (2) Match between system and real world, (3) User control and freedom, (4) Consistency and standards, (5) Error prevention, (6) Recognition over recall, (7) Flexibility and efficiency, (8) Aesthetic and minimalist design, (9) Error recovery, (10) Help and documentation.

5. **Check accessibility fundamentals.** Verify text contrast meets WCAG AA (4.5:1 for normal text, 3:1 for large text). Confirm interactive elements are at least 44×44px for touch. Check that the design communicates information through more than color alone. Identify any content that depends on hover states with no keyboard equivalent.

6. **Assess consistency with the design system.** Identify any components, spacing, typography, or color values that deviate from established patterns. Inconsistencies erode trust and make the product feel unpolished—even when users can't articulate why.

7. **Prioritize feedback by severity.** Classify every finding: Severity 1 = blocks task completion or causes errors, Severity 2 = creates confusion or frustration, Severity 3 = polish and preference. Lead with Sev 1 findings. Clearly separate preference from principle.

8. **Frame feedback constructively.** Use the format: **Observation → Impact → Suggestion.** "The primary button and secondary button have the same visual weight [observation], which makes it unclear which action to take [impact]. Consider making the primary action visually dominant with a filled style and reserving the outline style for secondary actions [suggestion]."

## Examples

### Example 1: E-Commerce Checkout Screen Critique

**Input:** "Critique this checkout screen. It has: a large product image on the left, a form on the right with fields for name/email/address/card number, a 'Place order' button at the bottom, and a small security badge in the footer. Users are abandoning at this step."

**Output:**

#### Five-Second Test Result
The layout is clear — it reads as a checkout form. However, the primary action ("Place order") is buried at the bottom, requiring a scroll most mobile users won't complete.

#### Severity 1 — Blocks Completion

**Button placement and visibility**
The "Place order" CTA is below the fold on mobile. Users who don't scroll never see it. Move the button directly below the last form field, or add a sticky CTA at the bottom of the viewport on mobile.

**Form field order**
Asking for card details before confirming the order summary creates anxiety. Show an order summary (items, total, shipping cost) before payment fields. Users need to confirm what they're paying before they trust you with payment details.

#### Severity 2 — Frustrates Users

**Security badge placement**
The security badge is in the footer, after the payment form — where users least expect it. Place trust signals (SSL lock icon, accepted card logos, "Secure checkout" language) directly adjacent to the card number field, where purchase anxiety peaks.

**No inline validation**
Card number and email errors appear only after submit. Add real-time validation (confirm email format, format card numbers with spaces as users type). Errors at submit feel punishing; errors in the moment feel helpful.

**Field labels vs. placeholders**
If labels disappear when typing begins (placeholder-only pattern), users lose context mid-form. Use persistent floating labels or label-above-field patterns.

#### Severity 3 — Polish

**Product image size**
The large product image on the left takes significant real estate. At checkout, the user has already decided to buy — a smaller image or order summary card serves them better. Consider converting this space to a concise order summary instead.

#### What Works Well
- Single-column form on the right provides a clear linear path
- "Place order" button label is specific and clear — better than "Submit" or "Continue"

---

### Example 2: Dashboard Wireframe Critique

**Input:** "Review this dashboard wireframe for a SaaS analytics tool. It shows: a left sidebar with 12 nav items, a top bar with username and settings icon, a main area with 8 metric cards in a 4x2 grid, and a large line chart below. Users say it feels overwhelming."

**Output:**

#### First Impression
The layout signals "analytics tool" immediately, which is good. But 12 sidebar items and 8 metric cards compete equally for attention — there is no clear starting point. Users feeling overwhelmed is a direct symptom of missing hierarchy.

#### Severity 1 — Blocks Effective Use

**Navigation overload**
12 top-level nav items exceeds the cognitive limit for scannable menus (~7 items). Group related items under collapsible sections or move secondary items into a settings area. Consider which 5–7 items represent 80% of user journeys and elevate those.

**No primary metric**
All 8 metric cards are the same size and weight. Users don't know which number matters most. Identify the 1–2 KPIs