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]."

Screenshot competitor onboarding, key flows, and empty states using Mobbin or Page Flows. Note the conventions you'll inherit (cmd+K palette, left-nav patterns) versus where you have license to deviate.

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.

Triggered when usability testing shows the flow needs rework. Address the failures from the prior round before promoting to high-fidelity — fixing layout problems in mockups is 5x the effort of fixing them in wireframes.

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.

Mock the design at 360px (mobile), 768px (tablet), and 1280px (desktop) at minimum. Note any reflow rules — when does the side nav collapse, when does the table become cards. Document touch targets at 44x44px minimum for mobile.

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.

Lock the published frames so engineers don't see WIP variants. Confirm the Figma link is attached to the engineering ticket. If you're using Storybook or Zeroheight, link the relevant component pages too.

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.

Triggered when the launch did not fully hit its success metric. Open a follow-up ticket with the failing metric, the suspected cause, and the next experiment. Don't close the loop quietly — surface the miss in the team retro so the team learns.