---
target: portfolios home redesign mockup (calm)
total_score: 27
p0_count: 0
p1_count: 3
timestamp: 2026-07-07T13-05-05Z
slug: portfolios-mock-html
---
# Critique: Portfolios home redesign mockup (Calm direction)

Method: dual-agent (A: design review · B: detector/mechanical evidence). Target: scratchpad/portfolios-mock.html (artifact 76ff144a). Browser visualization skipped: no browser automation in session.

## Design Health Score: 27/40 — Acceptable, near Good

| # | Heuristic | Score | Key Issue |
|---|-----------|-------|-----------|
| 1 | Visibility of System Status | 3 | Collapsed folders hide all state; a folded folder with 2 at-risk portfolios looks identical to a healthy one |
| 2 | Match System / Real World | 3 | Mixed metaphor: star icon + "Pin" labels + "favourite" in notes — pick one word |
| 3 | User Control and Freedom | 2 | No folder create/reorder/rename/delete anywhere; users can't control the page's primary organising structure |
| 4 | Consistency and Standards | 3 | Card hover-lift implies whole-card clickability but only the name is a link; Pinned isn't collapsible while folders are |
| 5 | Error Prevention | 3 | Low-stakes page; kebab actions undesigned so unassessable |
| 6 | Recognition Rather Than Recall | 3 | Folders only discoverable via hidden kebab menu |
| 7 | Flexibility and Efficiency | 2 | No "/" search shortcut, no bulk select/move, no collapse-all, no status sort |
| 8 | Aesthetic and Minimalist Design | 3 | Pinned-card duplication; status pill outranks the name in reading order |
| 9 | Error Recovery | 3 | No-results state names query + one-click clear (good); real page needs fetch-failure states |
| 10 | Help and Documentation | 2 | One teaching empty state (pinning); nothing teaches folders |

## Anti-Patterns Verdict

Passes the product slop test (design review): no banned patterns, schema-honest fields, restrained navy palette, earned familiarity. Deterministic detector: exit 0, zero findings — but its clean bill covers only its own rule set; mechanical checks beyond it found the non-text contrast failures below.

## Priority Issues

- **[P1] Sectioned-folders IA collapses at ~15 folders × 60 portfolios.** All folders open by default, no rollup, no jump nav → endless undifferentiated scroll; collapsing destroys at-a-glance state. Fix: collapsed-by-default with persisted open state; folder-header rollups (count, Σ properties, worst-status chips like "2 at risk"); sticky folder index above ~6 folders; or move folders to a left filter rail entirely.
- **[P1] Folder lifecycle undesigned.** No create, reorder (user's own question — order is hardcoded array), rename, delete. Fix: "New folder" affordance; folder-header kebab with Rename/Reorder/Remove; default alphabetical with per-user manual override (position column).
- **[P1] Pin interaction breaks keyboard/SR users.** innerHTML re-render destroys the focused star (focus drops to body); no aria-live announcements for pin/search-count changes. Fix in real build: targeted DOM updates or focus restoration by data-id + polite live region.
- **[P2] Non-text contrast failures (computed).** Idle star/kebab #9aa2b1 on white = 2.57:1; pinned gold star #f1bb06 on white = 1.77:1 (state nearly invisible to low-vision users); card border 1.24:1. Text pairs all pass 4.5:1 (lowest 5.59:1).
- **[P2] Search is name-only, no keyboard path.** Doesn't match status/goal/folder; no "/" focus; header count stays global while filtering (should read "Showing X of Y").

## Persona Red Flags

**Alex (power user):** no keyboard route to search; only name text clickable despite whole-card hover-lift; organising 60 portfolios = 60 kebab round-trips (no bulk move); no collapse-all; no status sort; pinned duplication doubles scan work.

**Sam (accessibility):** focus wiped on pin toggle; pinned state fails 3:1 non-text contrast; no announcements for dynamic changes; h2-in-summary risks odd NVDA announcements. Keeping: native details/summary, focus ring token, aria-pressed, reduced-motion handling.

## Minor Observations

- Empty folder renders a blank dashed box (empty string default) — needs teaching copy.
- Overspend (cost > budget) clamps the bar silently and stays blue — a red state would serve "trustworthy numbers".
- Status pill above the name makes colour the first read; name should lead on a dispatch page.
- Dead CSS (.updated-inline); list view <900px drops all data columns.
- "Hit the star" too casual for institutional register; unify Pinned/Starred/Favourites naming.
- Nothing signals folders are per-user, not shared with teammates.
- Mock file is a fragment (no doctype/lang/viewport) — supplied by the Artifact wrapper at publish, but the real page needs them natively; summary contains flow content (non-conforming, works in practice).
- Real page needs skeleton sections, not spinners.

## Strengths

- Schema-honest cards ("No budget set" shown, £-of-£ bar only when both fields exist) — Design Principle 1 executed.
- Trustworthy-numbers craft: tabular-nums, consistent £M/£k, honest >100% percentages.
- 10-value status enum compressed to 8 clean pills, text + colour, never colour alone.

## Questions to Consider

- What if folders were a left filter rail instead of page sections? Solves order, scale, and jump-nav in one move.
- What is a collapsed folder for, if collapsing hides all status? The header rollup is the reconciliation, not a nice-to-have.
- Is pin-as-duplicate right, or should pinning float items within their folder?
