UI/UX Design Checklist

Use User Interviews, Respondent.io, or your own customer list. Aim for 5-8 participants per persona — Nielsen's research shows diminishing returns past that. Screen out PMs and designers from competitors; their feedback skews toward features, not jobs.

Open-ended jobs-to-be-done questions, not feature surveys. Record sessions in Dovetail or Grain so you can tag transcripts later. Common gotcha: leading questions like "would you use X?" — ask about past behavior instead.

Affinity-map quotes in FigJam or Miro. Build 1-3 personas max — more than that and the team ignores them. Capture each persona's primary job-to-be-done in the format "When [situation], I want to [motivation], so I can [outcome]."

Diagram the happy path plus the three highest-frequency error states in FigJam or Whimsical. Include the empty state, loading state, and permission-denied state — the ones engineers always ask about during handoff.

Grayscale boxes only — no color, no real copy, no real icons. The point is to validate layout and information hierarchy before anyone debates button color. Use the Wireframe community kit if you want consistent placeholder shapes.

Wire the happy-path flow with Figma prototyping or ProtoPie for richer interactions. Don't prototype every dead-end click — focus on the 2-3 core tasks you'll test.

5 participants from the persona pool, moderated or via Maze/UserTesting. Score task completion, time-on-task, and SUS if you have a baseline. Common gotcha: demoing instead of letting the participant drive — bite your tongue.

Use existing color, type, spacing, and elevation tokens from the team's Figma library — don't reinvent. If a needed token doesn't exist, raise it with the design-system owner before going off-spec; one-off hex codes are how systems rot.

Cover default, hover, focus, active, disabled, loading, empty, and error for every interactive element. The mockup is incomplete without these — engineers will guess otherwise, and the guesses will be wrong.

Use Stark or Able in Figma to check color contrast (4.5:1 for body text, 3:1 for large text and UI components). Verify focus order, label-input pairing, and that no information is conveyed by color alone. EU Accessibility Act enforcement starts mid-2025 — this is no longer optional for public-sector or EU-serving products.

Specify timing curves, durations, and triggers for animations — "ease-out 200ms on hover" not "feels snappy." Note keyboard shortcuts, focus traps for modals, and ESC behavior. Engineers shouldn't have to invent these.

30-minute Zoom with the assigned engineer(s) and PM. Walk the happy path and the edge cases. Capture questions in the Linear/Jira ticket so they don't disappear into Slack DMs.

Side-by-side comparison in a browser at the same zoom level as the Figma frame. Flag spacing, type, and color drift in tickets — don't try to fix them in Slack. Common gotcha: mockup uses 14px but the implemented body inherits 16px from a parent component.

Use a single Linear/Jira parent ticket with sub-issues per defect, screenshots attached. Distinguish "design bug" (drifts from spec) from "design change" (you want to revise the spec) — engineers triage these very differently.

Pull funnel and task-completion metrics from Amplitude/Mixpanel; review session recordings in FullStory or LogRocket for the new flow. Compare against the success metric set during research — if you didn't set one, set it next time.