1. Purpose
To provide a comprehensive, auditable record of every UI screen’s progress from draft → validation → approval → handoff, ensuring no gaps in design-to-dev delivery.
2. Workflow Integration
- Step 1 – Designer Self-Check → Logs screen with ID + marks initial readiness.
- Step 2 – Peer Review → Peer checks visual consistency, tokens, states.
- Step 3 – Design Lead Approval → Validates against system + business goals.
- Step 4 – Pre-Handoff QA → Confirms responsiveness + accessibility.
- Step 5 – Final Approval & Lock → Marked “Ready for Dev” → linked to JIRA/ClickUp task.
3. Audit Criteria (per column)
| Audit Category | What to Check | Fails If… |
| State Variants | Default, Hover, Active, Disabled, Error, Success included | Any missing or undocumented |
| Responsiveness | Desktop, Tablet, Mobile covered with proper reflow | Mobile = “shrunk desktop” only |
| Consistency Review | Tokens, spacing, typography, grid alignment verified | Manual overrides, random hex codes, inconsistent padding |
| Accessibility | Color contrast, tap sizes, focus states represented | Contrast < AA, no keyboard states |
| Peer Feedback | Peer feedback cycle completed + documented | Skipped or unresolved comments |
| Final Approval | Design Lead reviewed + approved | Lead skipped / no sign-off record |
4. Table – UI Screen Audit
| Screen ID | Screen Name | Platform | State Variants | Responsiveness | Consistency Review | Accessibility | Peer Feedback | Lead Approval | QA Status | Dev Handoff Link | Notes |
| UI-01 | Landing Page | Web | ✅ Default, Hover, Error | ✅ Desktop/Mobile | ✅ Tokens + Spacing | ✅ Contrast AA | ✅ Done | ✅ Approved | ✅ Passed | JIRA-123 / [Figma Link] | CTA alignment corrected |
| UI-02 | Signup Form | Web + App | ✅ All states | ✅ All devices | ✅ Tokens OK | ⚠ Needs keyboard focus state | ✅ Peer Check | Pending | Pending | JIRA-124 | Missing focus state |
| UI-03 | Dashboard Home | Dashboard | ✅ Empty, Loading, Success, Error, Permission | ✅ Desktop/Tablet/Mobile | ✅ Grid + spacing validated | ✅ Passed | ✅ Peer Check | Pending | QA in-progress | JIRA-125 | Needs performance consideration for 1000+ records |
5. Failure Handling
- If any audit item fails, screen moves back to Designer Self-Check stage.
- Designer must resolve within 1 sprint → otherwise flagged as delivery risk.
- Audit log tracks history → no silent “fix and move on.”
6. Usage Notes
- Sheet updated in real time during design → audit process.
- Final column must always link to JIRA/ClickUp task + Figma frame.
- Weekly Design QA meeting → review all pending screens.
- Monthly audit → % of screens passing first attempt vs needing rework.
Outcome: This sheet is no longer “tick-box” — it becomes a living audit + accountability tracker, integrated with sprint boards and dev handoff.