Design Quality Skill
Workflow from jony-creative-director: Design Critique + Accessibility Auditor
Inputs
| Parameter | Required | Description | | ------------- | ----------- | ------------------------------------------ | | Design | Yes | Description, wireframe, or uploaded design | | Platform | Recommended | Web / iOS / Android / cross-platform | | Brand context | Recommended | Brand guidelines reference |
Part A: Design Critique
1. Heuristic Evaluation (Nielsen's 10, score 1-5 each)
| # | Heuristic | Evaluate | | --- | --------------------------- | -------------------------------------- | | 1 | Visibility of system status | Loading, progress, feedback indicators | | 2 | Match system ↔ real world | Language, concepts, conventions | | 3 | User control & freedom | Undo, cancel, exit paths | | 4 | Consistency & standards | Internal + platform consistency | | 5 | Error prevention | Confirmations, constraints, defaults | | 6 | Recognition > recall | Visible options, contextual help | | 7 | Flexibility & efficiency | Shortcuts, customization, expert paths | | 8 | Aesthetic & minimalist | Signal-to-noise ratio | | 9 | Error recovery | Clear messages, actionable solutions | | 10 | Help & documentation | Searchable, task-oriented, concise |
2. Visual Hierarchy
- What does user see first? Is it correct?
- CTA hierarchy clear?
- Visual weights balanced?
- Adequate white space?
3. Typography Audit
- Font choices match brand?
- Type scale creates clear hierarchy?
- Line lengths 45-75 characters?
- Contrast sufficient for readability?
4. Color Analysis
- Palette supports brand personality?
- WCAG AA contrast (4.5:1 text, 3:1 UI)?
- Color used meaningfully, not just decoratively?
- Dark mode considerations?
5. Usability
- Cognitive load assessment
- Interaction clarity (what's clickable?)
- Touch targets minimum 44x44pt?
- Form usability (labels, validation)
6. Strategic Alignment
- Serves business goals?
- Serves user goals?
- Value proposition clear?
- Differentiates from competitors?
7. Prioritized Recommendations
| Priority | Criteria | | --------- | ---------------------- | | Critical | Must fix before launch | | Important | Fix in next iteration | | Polish | Nice to have |
8. Redesign Direction
2 alternative approaches with verbal sketches and rationale.
Part B: Accessibility Audit (WCAG 2.2 AA)
1. Perceivable
| Check | Standard | | -------------------- | ---------------------------------- | | Text alternatives | Alt text for all images | | Captions/transcripts | All multimedia | | Color independence | Color not sole information carrier | | Text contrast | Normal 4.5:1, Large 3:1 | | UI contrast | Components 3:1 | | Text resize | 200% without content loss | | No images of text | Except logos |
2. Operable
| Check | Standard | | ------------------------- | -------------------------------- | | Keyboard access | All functionality | | No keyboard traps | Escape always works | | Skip links | For repetitive content | | Page titles | Descriptive and unique | | Focus order | Logical and predictable | | Link purpose | Clear from context | | Multiple navigation paths | Search, nav, sitemap | | Focus visible | 2px outline, 3:1 contrast | | Pointer alternatives | Single-pointer for all gestures | | Motion disable | prefers-reduced-motion respected | | No auto-playing audio | User-initiated only | | Touch targets | 44x44 CSS pixels minimum |
3. Understandable
| Check | Standard | | ------------------------- | -------------------------------------- | | Page language | lang attribute set | | Parts language | lang on foreign text | | Consistent identification | Same function = same label | | Error identification | Clear error messages | | Error suggestions | How to fix | | Error prevention | Confirm/reversible for legal/financial | | Contextual help | Available where needed |
4. Robust
| Check | Standard | | --------------- | --------------------------- | | Valid markup | Proper HTML | | Name/role/value | All components programmatic | | Status messages | ARIA live regions |
5. Mobile-Specific
- Orientation not locked (responds to rotation)
- All input modalities (touch, mouse, keyboard, voice)
- Thumb zone placement considerations
6. Cognitive Accessibility
- Reading level: Flesch-Kincaid Grade 8 or below
- Consistent navigation placement
- Plain language error messages
- Time limits extendable/eliminable
- No flashing (max 3/second)
Audit Deliverables
| Deliverable | Content | | ----------------------- | ----------------------------------- | | Pass/fail checklist | Every criterion scored | | Violation report | Location, severity, description | | Remediation guide | Code/design solutions per violation | | Accessibility statement | Template for public statement | | QA testing checklist | Screen reader flow descriptions |
Related
/design-systems (component a11y specs) | /ui-design (screen-level a11y) | /brand-identity (inclusive brand)