--- name: critique description: UX design review — evaluates visual hierarchy, emotional journey, cognitive load, and overall quality using Nielsen's heuristics (scored 0-40). Adapted from impeccable (Apache 2.0). user-invocable: true argument-hint: "[component or area to critique]" --- Conduct a holistic UX design critique. Think like a design director giving feedback — evaluate whether the interface actually works as a designed experience, not just technically. **Target:** $ARGUMENTS ## Preparation 1. Read `docs/design-system.md` for FA design context and brand guidelines 2. Read `docs/memory/decisions-log.md` for design rationale 3. Read the target component/area source and stories 4. Reference `docs/reference/impeccable/cognitive-load.md` for the 8-item checklist 5. Reference `docs/reference/impeccable/heuristics-scoring.md` for scoring criteria **FA context reminder**: Funeral Arranger serves families often in grief or distress. The design must feel warm, trustworthy, transparent, and calm. Clarity over cleverness. Accessibility is critical — users may be elderly, emotional, or unfamiliar with technology. ## Phase 1: Design Critique Evaluate across these dimensions: ### 1. Visual Hierarchy - Does the eye flow to the most important element first? - Is there a clear primary action visible within 2 seconds? - Do size, colour, and position communicate importance correctly? - Is there visual competition between elements of different weights? ### 2. Information Architecture & Cognitive Load - Is the structure intuitive for a first-time user? - Is related content grouped logically? - Are there too many choices at once? (>4 at a decision point = flag it) - **Run the 8-item cognitive load checklist** from `docs/reference/impeccable/cognitive-load.md` - Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical ### 3. Emotional Journey - Does the interface feel warm and trustworthy (appropriate for FA)? - Would a grieving family member feel "this is for me"? - Are there design interventions at anxiety-prone moments (pricing, commitment, forms)? - Does the experience end well (confirmation, clear next step)? ### 4. Discoverability & Affordance - Are interactive elements obviously interactive? - Would a user know what to do without instructions? - Are hover/focus states providing useful feedback? ### 5. Composition & Balance - Does the layout feel balanced? - Is whitespace used intentionally? - Is there visual rhythm in spacing and repetition? ### 6. Typography as Communication - Does the type hierarchy signal what to read first, second, third? - Is body text comfortable to read? (line length 45-75ch, adequate size) - Do font choices reinforce FA's warm, professional tone? ### 7. Colour with Purpose - Is colour used to communicate, not just decorate? - Does the warm gold/copper brand palette feel cohesive? - Are accent colours drawing attention to the right things? - Does it work for colourblind users? ### 8. States & Edge Cases - Empty states: Do they guide users toward action? - Loading states: Do they reduce perceived wait time? - Error states: Are they helpful and non-blaming? (critical for FA — no aggressive red labels) - Success states: Do they confirm and guide next steps? ### 9. Microcopy & Voice - Is the writing clear and concise? - Does it sound warm and professional (FA's tone)? - Are labels and buttons unambiguous? - Does error copy help users fix the problem without distress? ## Phase 2: Present Findings ### Design Health Score Score each of Nielsen's 10 heuristics 0-4 (consult `docs/reference/impeccable/heuristics-scoring.md`): | # | Heuristic | Score | Key Issue | |---|-----------|-------|-----------| | 1 | Visibility of System Status | ? | | | 2 | Match System / Real World | ? | | | 3 | User Control and Freedom | ? | | | 4 | Consistency and Standards | ? | | | 5 | Error Prevention | ? | | | 6 | Recognition Rather Than Recall | ? | | | 7 | Flexibility and Efficiency | ? | | | 8 | Aesthetic and Minimalist Design | ? | | | 9 | Error Recovery | ? | | | 10 | Help and Documentation | ? | | | **Total** | | **??/40** | **[Rating]** | **Ratings**: 36-40 Excellent, 28-35 Good, 20-27 Acceptable, 12-19 Poor, 0-11 Critical ### Overall Impression Brief gut reaction — what works, what doesn't, the single biggest opportunity. ### What's Working 2-3 things done well. Be specific about why they work. ### Priority Issues 3-5 most impactful design problems, ordered by importance. For each issue, tag **P0-P3**: - **[P?] What**: Name the problem - **Why it matters**: How it hurts users (especially in FA's sensitive context) - **Fix**: Concrete recommendation ### FA Audience Check Walk through the primary user flow as: 1. **Bereaved family member** (60+, first time, emotional, possibly on mobile) 2. **Arrangement planner** (30-50, comparing options, price-sensitive, wants transparency) For each persona, list specific pain points found. ### Minor Observations Quick notes on smaller issues worth addressing. **Remember**: Be direct and specific. Say what's wrong AND why it matters. Prioritise ruthlessly. Don't soften criticism — honest feedback ships better design.