design-journey-review

Files (2)

• SKILL.md
• visual-and-journey-criteria.md · references/

SKILL.md (first lines)

# Design & Journey Review

Combined review of visual design and user journey. Evaluates whether an interface looks coherent and purposeful (color, type, spacing, density, hierarchy) and whether it serves the user's real workflow across sessions (friction points, emotional curve, golden path optimization, information architecture for daily use).

This skill merges the "how does it serve the user?" axis: visual hierarchy, color/type coherence, density balance, workflow stages, emotional patterns, and daily-use friction.

## When to Use

- Evaluating visual hierarchy and information density for data-dense UIs
- Reviewing color system coherence (semantic colors, phase colors, theme adaptation)
- Assessing typography choices and type scale effectiveness
- Mapping the user's actual workflow and identifying friction
- Optimizing for daily-driver use cases (expert users, repeated sessions)
- Evaluating whether design choices earn their viewport space
- Finding density inversions (low-value content in high-value positions)

Do NOT use for interaction mechanics (state coverage, feedback timing, escape hatches). Use `ux-interaction-review` for those.

## Quick Reference

| Task | Load reference |
| --- | --- |
| Visual system evaluation criteria | `skills/design-journey-review/references/visual-and-journey-criteria.md` |

## Workflow

### Step 1: Identify the Aesthetic Identity

Before evaluating individual elements, name the aesthetic the interface is targeting. Common archetypes:

- Mission control / operational terminal (dark, data-dense, monospace, status colors)
- Swiss/minimal (clean, lots of white space, geometric, strict grid)
- Linear/GitHub (dark panels, subtle borders, pill chips, blue accent)
- Editorial (large type, serif headings, generous spacing, reading-focused)
- Dashboard/enterprise (card-based, neutral, data visualization heavy)

If the interface doesn't commit to an identity, that's the first finding.

### Step 2: Color System Assessment

Evaluate the color architecture:

**Layer depth:**
- How many background layers exist? (bg, surface 1, surface 2, elevated)
- Is the contrast between layers sufficient but not jarring?
- Does the depth system create clear containment?

**Semantic colors:**
- Are success/warning/error/info colors distinct from each other?
- Do they occupy different hue bands with sufficient mutual contrast?
- Are any overloaded (same color meaning different things)?

**Accent/phase colors:**
- Do identifier colors collide with semantic colors? (common failure: green phases looking like "success")
- Are phase/category colors distinguishable at small sizes?
- Do light/dark theme variants maintain the same relative relationships?

**Color-mix patterns:**
- Are tinted backgrounds (e.g., `color-mix(in srgb, var(--X) 15%, transparent)`) used consistently?
- What mix ratios are used and are they uniform?

### Step 3: Typography Assessment

**Type scale:**
- What is the range? (e.g., 10px to 22px)
- Is the range compressed (hierarchy via weight only) or expanded (hierarchy via size)?
- Is there a clear "start here" size that anchors reading?
- Are there elements too small for their importance?

**Font pairing:**
- Does the mono/sans pairing work for the domain?
- Is monospace reserved for the right things (identifiers, code, versions)?
- Are weights used meaningfully or indiscriminately?

**Minimum sizes:**
- What's the smallest text? Is it legible on standard (96dpi) displays?
- Are critical labels/identifiers large enough to scan without squinting?

### Step 4: Spacing & Density

**Spacing rhythm:**
- Is there a consistent base unit? (4px, 8px, etc.)
- Do spacing values follow a scale (geometric, linear, or ad-hoc)?
- Are there rhythm breaks where adjacent elements use incompatible spacing?

**Information density:**
- For each major section, assess: space consumed vs. value for the user's primary task
- Find density inversions (low-value content occupying prime viewport real estate)
- For expert/daily-use tools: is instructional content collapsible after first visit?

**Density table:**

| Element | Space | Value for daily use | Verdict |
|---------|-------|---------------------|---------|
| [name] | Npx | high/medium/low/near-zero | justified/overweight/collapse |

### Step 5: Visual Hierarchy

Evaluate the scan order. For data-dense interfaces:

- Where does the eye land first? Is that the right place?
- Within a repeated element (row, card), is there a clear scan order? (identifier → status → metadata → action)
- Do elements at the same hierarchy level have the same visual weight?
- Are section breaks clear without being heavy?
- Do actionable elements look sufficiently different from informational ones?

### Step 6: User Journey Mapping

Map the user's actual workflow, not the interface structure:

**Golden path** (most frequent session, ~80% of visits):
- What does the user do, in order?
- How many steps/clicks to complete?
- Where is friction? (extra clicks, scroll depth, context switches, waiting)
- What is the total time?

**Secondary paths** (less frequent but still important):
- What triggers these?
- Are they accessible without disrupting the golden path?

From NickCrew/Claude-Cortex, MIT.

More from NickCrew/Claude-Cortex