Checklists prevent the most common UX mistakes from shipping. Use them at each project phase, not as a replacement for design thinking, but as a safety net to catch what you missed.
Pre-Design Checklist
Complete before opening Figma or writing any code:
| Check | Done? | Notes |
|---|
| User research conducted | ☐ | Minimum: 5 user interviews or survey data |
| User personas defined | ☐ | Based on research, not assumptions. 2-4 personas. |
| User journeys mapped | ☐ | Key flows from entry to goal completion |
| Jobs-to-be-done identified | ☐ | "When [situation], I want to [action], so I can [outcome]" |
| Competitor analysis complete | ☐ | 3-5 competitors analyzed for patterns and gaps |
| Technical constraints understood | ☐ | API limits, browser support, device requirements |
| Content strategy defined | ☐ | What content exists? What needs to be created? Who owns it? |
| Accessibility requirements defined | ☐ | WCAG AA minimum. Any additional legal requirements? |
| Success metrics established | ☐ | How will you measure if this works? (Task success rate, conversion, NPS) |
| Stakeholder alignment | ☐ | All stakeholders agree on goals, scope, and timeline |
| Design system/tokens available | ☐ | If not, create basic tokens before designing components |
| Information architecture validated | ☐ | Card sort or tree test completed for new navigation |
Pre-Design: Questions to Answer
Before designing, make sure you can answer:
| Question | If You Can't Answer |
|---|
| Who is this for? | Do more user research |
| What problem does this solve? | Validate the problem exists |
| How will we know it worked? | Define metrics before building |
| What existing patterns solve this? | Research conventions and competitors |
| What are the constraints? | Talk to engineering and stakeholders |
Design Review Checklist
Use for every design before handoff to development:
Visual Design
| Check | Criteria | Priority |
|---|
| ☐ Visual hierarchy | Clear #1 element on every screen. Squint test passes. | Critical |
| ☐ Consistent with design system | Uses established tokens, components, and patterns | Critical |
| ☐ Adequate contrast | All text meets WCAG AA (4.5:1 for body, 3:1 for large) | Critical |
| ☐ Appropriate use of color | 60-30-10 rule followed. Color not sole indicator of meaning. | High |
| ☐ Consistent spacing | 8px grid followed. Space within groups < space between groups. | High |
| ☐ Readable typography | Body ≥ 16px, line-height 1.5-1.6, line length ≤ 75ch | High |
| ☐ Alignment | Every element aligns with at least one other element | Medium |
| ☐ Balance | Visual weight evenly distributed | Medium |
Interaction Design
| Check | Criteria | Priority |
|---|
| ☐ Clear affordances | Buttons look clickable. Links look like links. | Critical |
| ☐ Feedback for all actions | Every click/tap produces visible response within 100ms | Critical |
| ☐ Error states designed | Every input, form, and action has an error state | Critical |
| ☐ Loading states designed | Skeleton screens or spinners for async operations | High |
| ☐ Empty states designed | Helpful message + CTA when there's no data | High |
| ☐ Success states designed | Confirmation when actions complete | High |
| ☐ Animations purposeful | Each animation serves a purpose. Duration ≤ 300ms for functional. | Medium |
| ☐ Reduced motion supported | Animations disabled/reduced when prefers-reduced-motion is set | High |
Usability
| Check | Criteria | Priority |
|---|
| ☐ Clear navigation | User always knows where they are and how to get back | Critical |
| ☐ Logical information architecture | Content organized by user mental model, not internal structure | Critical |
| ☐ Minimal cognitive load | One primary action per screen. Progressive disclosure used. | High |
| ☐ Progressive disclosure | Complex features revealed gradually, not all at once | High |
| ☐ Forms optimized | Single column, labels above, inline validation, autocomplete | High |
| ☐ Error prevention | Constraints, smart defaults, and confirmations prevent mistakes | High |
| ☐ Undo/back available | Users can reverse actions and navigate backward | High |
| ☐ Search available | For content-heavy products with 10+ pages | Medium |
Accessibility
| Check | Criteria | Priority |
|---|
| ☐ Keyboard navigable | All functionality reachable via Tab, Enter, Space, Arrow keys | Critical |
| ☐ Screen reader friendly | Proper headings, ARIA labels, semantic HTML planned | Critical |
| ☐ Color not sole indicator | Icons, text, or patterns accompany color meaning | Critical |
| ☐ Text scalable | Content works at 200% zoom without horizontal scroll | High |
| ☐ Touch targets adequate | ≥ 44×44px for primary, ≥ 24×24px minimum | High |
| ☐ Focus indicators visible | 2px+ focus ring on all interactive elements | High |
| ☐ Alt text planned | All meaningful images have alt text descriptions | High |
| ☐ Focus management | Modals trap focus. Errors receive focus on submit. | High |
| ☐ Skip link | "Skip to main content" as first Tab stop | Medium |
Responsive Design
| Check | Criteria | Priority |
|---|
| ☐ Mobile-first approach | Designed for small screens first, enhanced for larger | High |
| ☐ Tested at all breakpoints | 375px, 768px, 1024px, 1280px minimum | Critical |
| ☐ Touch-friendly on mobile | Bottom tab bar or easy-reach navigation. No hover-dependent interactions. | High |
| ☐ Content prioritized for mobile | Most important content first, secondary content hidden or deprioritized | High |
| ☐ Images responsive | srcset and sizes attributes planned | Medium |
| ☐ Tables handled | Data tables have mobile strategy (scroll, stack, or priority columns) | Medium |
| ☐ Safe areas | Notch and home indicator padding accounted for | Medium |
Content
| Check | Criteria | Priority |
|---|
| ☐ Real content used in designs | No "Lorem ipsum" in final designs | High |
| ☐ Edge cases handled | Very long text, empty text, special characters | High |
| ☐ Labels are descriptive | "Save Changes" not "Submit". "Delete Account" not "Remove". | High |
| ☐ Error messages are helpful | What's wrong + how to fix it + example if needed | Critical |
| ☐ Microcopy is human | Plain language, no jargon, conversational where appropriate | Medium |
| ☐ Truncation handled | Long titles, names, and descriptions truncate gracefully | Medium |
Component Checklist
Every UI component should have all of these documented before being added to the design system:
States
| State | Required? | Design Notes |
|---|
| ☐ Default | Always | Base appearance |
| ☐ Hover | Always (desktop) | Slight visual change, cursor: pointer |
| ☐ Focus | Always | Visible focus ring, 2px+ |
| ☐ Active/Pressed | Always | Darker shade, slight scale if appropriate |
| ☐ Disabled | Always | 50% opacity, cursor: not-allowed |
| ☐ Loading | If async | Spinner, disabled interaction |
| ☐ Error | If data input | Red border, error icon, inline message |
| ☐ Success | If data input | Green check, success message |
| ☐ Selected | If selectable | Highlighted background, check indicator |
| ☐ Empty | If data display | Helpful message + CTA |
| ☐ Dragging | If draggable | Elevated, ghost outline at origin |
Variants
| Check | Question |
|---|
| ☐ Sizes | Does it need small, medium, large variants? |
| ☐ Visual weight | Does it need primary, secondary, tertiary, destructive variants? |
| ☐ With/without icon | Does it work with a leading/trailing icon? |
| ☐ Full-width | Does it need a full-width option for mobile? |
| ☐ Responsive behavior | How does it adapt at different breakpoints? |
Documentation
| Check | Content |
|---|
| ☐ Description | One sentence explaining what this component is |
| ☐ When to use | Specific scenarios for using this component |
| ☐ When NOT to use | What to use instead in wrong-fit scenarios |
| ☐ Props/API | All configuration options with types and defaults |
| ☐ Accessibility | ARIA attributes, keyboard behavior, screen reader behavior |
| ☐ Do/Don't examples | Visual examples of correct and incorrect usage |
| ☐ Code example | Copy-paste implementation code |
Launch Checklist
Before going live with any new feature or product:
Functionality
| Check | Test Method | Priority |
|---|
| ☐ All user flows work end-to-end | Manual walkthrough of every flow | Critical |
| ☐ Edge cases handled | Test with long text, empty data, special characters | Critical |
| ☐ Error handling works | Trigger every possible error (network, validation, auth) | Critical |
| ☐ Data persistence works | Refresh page, close browser, return. Data should persist | Critical |
| ☐ Loading states show correctly | Throttle network in DevTools and verify | High |
| Check | Test Method | Priority |
|---|
| ☐ Chrome tested | Latest version | Critical |
| ☐ Firefox tested | Latest version | Critical |
| ☐ Safari tested | Latest version (both Mac and iOS) | Critical |
| ☐ Edge tested | Latest version | High |
| ☐ Mobile Safari tested | On actual iPhone | Critical |
| ☐ Mobile Chrome tested | On actual Android device | Critical |
| ☐ Tablet tested | iPad or equivalent | High |
| Check | Target | Tool |
|---|
| ☐ LCP < 2.5s | < 2.5 seconds | Lighthouse, PageSpeed Insights |
| ☐ INP < 200ms | < 200 milliseconds | Web Vitals extension, CrUX |
| ☐ CLS < 0.1 | < 0.1 | Lighthouse |
| ☐ Total page weight < 3MB | < 3 MB (< 1.5 MB ideal) | DevTools Network tab |
| ☐ Images optimized | WebP/AVIF, responsive sizes, lazy loading | Manual audit |
| ☐ No render-blocking resources | Critical CSS inlined, JS deferred | Lighthouse |
Accessibility
| Check | Test Method | Priority |
|---|
| ☐ Automated audit passes | axe DevTools, Lighthouse ≥ 90 | Critical |
| ☐ Keyboard navigation works | Tab through entire page without mouse | Critical |
| ☐ Screen reader test | Navigate with VoiceOver or NVDA | Critical |
| ☐ Zoom to 200% works | Browser zoom, no horizontal scroll | High |
| ☐ Color contrast passes | WebAIM checker on all text/background combos | Critical |
| ☐ Reduced motion tested | Enable prefers-reduced-motion, verify | High |
Monitoring
| Check | Tool | Priority |
|---|
| ☐ Error tracking implemented | Sentry, Datadog, LogRocket | Critical |
| ☐ Analytics tracking implemented | GA4, Mixpanel, PostHog, Amplitude | High |
| ☐ Core Web Vitals monitored | web-vitals library, CrUX | High |
| ☐ User feedback mechanism in place | In-app feedback widget, support channel | High |
| ☐ Alerting configured | PagerDuty, OpsGenie, or equivalent for critical errors | High |
Post-Launch Checklist
Within 1-2 weeks after launch:
| Check | What to Look At |
|---|
| ☐ Review error logs | Any new errors or error spikes? |
| ☐ Check Core Web Vitals | Has performance changed for real users? |
| ☐ Review user feedback | Support tickets, feedback widget, app store reviews |
| ☐ Analyze key metrics | Did conversion, task success, or engagement change? |
| ☐ Conduct usability test | Watch 3-5 users interact with the new feature |
| ☐ Identify top issues | Prioritize fixes for the next sprint |
| ☐ Document learnings | What worked? What would you do differently? |
Quick Reference Cards
Spacing Scale (8pt Grid)
Token Pixels Usage
─────────────────────────────────────────────
space-1 4px Icon internal padding, micro gaps
space-2 8px Tight gaps, inline element spacing
space-3 12px Input padding, icon-to-label gap
space-4 16px Default element spacing
space-5 20px Between form fields
space-6 24px Card content spacing
space-8 32px Between content groups
space-12 48px Section padding (mobile)
space-16 64px Section padding (desktop)
space-24 96px Major page sections
Typography Scale
Size Usage Line Height
────────────────────────────────────────────
12px Legal, timestamps 1.4-1.5
14px Captions, labels 1.4-1.5
16px Body text 1.5-1.6
18px Large body / H4 1.4-1.5
20px H3 / Subheading 1.3
24px H2 1.25
32px H1 1.2
48px Display 1.1
Touch Targets
Size Standard Usage
────────────────────────────────────────────
24×24px WCAG 2.2 minimum Absolute minimum for any target
44×44px Apple HIG / WCAG rec Standard for all touch targets
48×48px Google Material Optimal, generous sizing
8px Between targets Minimum spacing between targets
Contrast Ratios
Ratio Requirement Check
────────────────────────────────────────────────────────
3:1 Large text (18pt+), UI components #949494 on #FFF
4.5:1 Normal text, body text (AA) #767676 on #FFF
7:1 Normal text, enhanced (AAA) #595959 on #FFF
Animation Timing
Duration Usage Easing
────────────────────────────────────────────────────────
100ms Micro (hover, color change) ease-out
200ms Standard (dropdown, toggle) ease-out
300ms Medium (modal, sidebar) ease-in-out
400ms Large (page transition) ease-in-out
500ms max Complex (onboarding) ease-in-out
Breakpoints
Width Device Layout Changes
────────────────────────────────────────────────────────
< 576px Phones (portrait) Single column, full-width
576px Phones (landscape) Minor adjustments
768px Tablets (portrait) Two columns possible
1024px Laptops / tablets Full multi-column layouts
1280px Desktops Max-width container applies
1536px Large monitors Extra whitespace, wider sidebar
Data HTML Autocomplete
────────────────────────────────────────────────────────
Email type="email" autocomplete="email"
Phone type="tel" autocomplete="tel"
Card number inputmode="numeric" autocomplete="cc-number"
Card expiry inputmode="numeric" autocomplete="cc-exp"
Card CVC inputmode="numeric" autocomplete="cc-csc"
One-time code inputmode="numeric" autocomplete="one-time-code"
Amount/price inputmode="decimal" —
URL type="url" autocomplete="url"
Search type="search" —
Date type="date" —
Password (new) type="password" autocomplete="new-password"
Password (login) type="password" autocomplete="current-password"
Severity Classification
Level Definition Action
────────────────────────────────────────────────────────────
Critical Prevents task completion Fix before launch
Major Significant difficulty or frustration Fix next sprint
Minor Slight hesitation, user recovers Fix when convenient
Cosmetic Noticed but no functional impact Backlog
Response Time Thresholds
Duration Perception Feedback Needed
────────────────────────────────────────────────────────
< 100ms Instant None
100-300ms Slight delay Button state change
300ms-1s Noticeable Spinner or skeleton
1-3s Waiting Progress indicator
3-10s Frustrating Progress bar + estimate
> 10s Abandonment risk Background processing
Using These Checklists
Don't try to use all checklists on every project. Pick the relevant ones:
| Project Type | Checklists to Use |
|---|
| New feature | Pre-Design → Design Review → Component → Launch |
| Bug fix | Design Review (relevant sections) → Launch (testing sections) |
| Design system component | Component → Accessibility sections |
| Full product launch | All checklists |
| Quick iteration | Design Review → Launch (testing sections) |
Process tip: Print the Design Review checklist and physically check items during design reviews. The act of checking forces attention to each item.