espennilsen UI Review
Systematic UI/UX review methodology for designs (in Penpot) and implementations (in code).
Process
- Understand context — what product, who are the users, what's the goal of this screen?
- Gather materials — pull the Penpot designs and/or the live implementation
- Run the checklist — score each category
- Report — use the structured output format
Review Checklist
1. Accessibility (WCAG 2.1 AA)
Color & Contrast
- Text contrast ≥ 4.5:1 against background (normal text)
- Text contrast ≥ 3:1 against background (large text ≥ 24px or 18.67px bold, equivalent to WCAG 18pt/14pt)
- UI component contrast ≥ 3:1 against adjacent colors (borders, icons, controls)
- Information not conveyed by color alone (use icons, patterns, labels too)
- Tested with color blindness simulation (protanopia, deuteranopia, tritanopia)
Keyboard Navigation
- All interactive elements reachable via Tab key
- Logical tab order (left-to-right, top-to-bottom, follows visual flow)
- Visible focus indicator on all focusable elements (no outline:none without replacement)
- Escape closes modals/dropdowns
- Enter/Space activates buttons and links
- Arrow keys navigate within composite widgets (tabs, menus, radio groups)
Screen Reader
- All images have meaningful alt text (or aria-hidden if decorative)
- Form inputs have associated labels (not just placeholder text)
- ARIA landmarks used (main, nav, aside, footer)
- Dynamic content changes announced (aria-live regions for toasts, errors)
- Headings follow a logical hierarchy (h1 → h2 → h3, no skipping)
Motion & Interaction
- Animations respect
prefers-reduced-motion - No content that flashes more than 3 times per second
- Touch targets ≥ 44x44px on mobile (WCAG 2.1 AAA — optional but recommended)
- Adequate time for timed interactions (or ability to extend)
2. Design System Compliance
- All colors from the token palette (no hex codes outside the system)
- Typography uses defined scale (no arbitrary font sizes)
- Spacing uses the 4px grid (no magic numbers)
- Components match design system variants (no custom one-offs)
- Icons from the approved set (Lucide)
- Border radius from token scale
- Shadows from token scale
3. Layout & Responsiveness
- Works at all breakpoints: 375px, 768px, 1280px, 1536px
- No horizontal scroll on mobile
- Text remains readable at all sizes (no text smaller than 12px)
- Touch-friendly spacing on mobile (no cramped click targets)
- Images and media scale properly
- Content hierarchy maintained across breakpoints
4. Interaction Design
- Clear affordances (buttons look clickable, links look linkable)
- Hover states on all interactive elements (desktop)
- Loading states for async operations (skeleton screens or spinners)
- Empty states designed (no blank pages — always guide the user)
- Error states with clear recovery actions
- Success feedback for completed actions
- Confirmation for destructive actions (delete, discard)
- Undo available where possible
5. Visual Quality
- Consistent alignment (nothing looks "off" by a pixel)
- Visual hierarchy clear (primary action stands out, secondary is quieter)
- Whitespace used effectively (not cramped, not wastefully sparse)
- Typography hierarchy clear (heading → subheading → body → caption)
- Icon sizes consistent and proportional to surrounding text
- No orphaned words in headings (line breaks make sense)
6. Content & Copy
- Labels are clear and concise (no jargon)
- Error messages explain what went wrong AND how to fix it
- Button text describes the action ("Save changes" not "Submit")
- Placeholder text is a hint, not a label
- Consistent terminology throughout (don't mix "delete"/"remove"/"trash")
Output Format
## UI Review — [Screen/Component Name]
**Reviewed:** [date]
**Context:** [product, screen, purpose]
**Overall:** 🟢 Good | 🟡 Needs Work | 🔴 Significant Issues
### Accessibility
Score: X/10
[Specific findings with severity]
### Design System Compliance
Score: X/10
[Specific findings]
### Layout & Responsiveness
Score: X/10
[Specific findings]
### Interaction Design
Score: X/10
[Specific findings]
### Visual Quality
Score: X/10
[Specific findings]
### Content & Copy
Score: X/10
[Specific findings]
### 🔴 Must Fix
1. [Critical issues — accessibility violations, broken layouts]
### 🟡 Should Fix
1. [Important issues — inconsistencies, missing states]
### 🔵 Nice to Have
1. [Polish items — minor alignment, copy tweaks]
### ✅ What's Working Well
1. [Call out good patterns — reinforces what to keep doing]
Quick Review (for smaller changes)
For minor changes or single components, use a shortened format:
- Accessibility — contrast OK? Keyboard accessible? Screen reader friendly?
- Consistency — matches the design system?
- States — all states present? (hover, focus, disabled, error, loading)
- Responsive — works on mobile?
- Copy — labels clear and actionable?
Report as: ✅ Pass | 🟡 Minor issues | 🔴 Blocking issues