​

Design Quality Rubric & Principles

​

Mission

• Prevents “feature-complete but ugly” outcomes
• Ensures consistent user experience across all Factory apps
• Makes design review objective, not subjective
• Applies to all surfaces: viewer journeys, creator dashboards, operator flows, admin interfaces

​

Design Principles (Foundational)

​

1. User Clarity Over Visual Cleverness

• Clear primary action button (CTA) — label clearly states outcome (“Subscribe for $5/month”, not “Next”)
• Hierarchy: Headline → Context → CTA → Secondary options
• Microcopy removes ambiguity (e.g., “Unlock video” vs “Buy”, “Reconnect your Stripe account” vs “Settings”)

• Icon-only buttons without tooltip
• Headline buried below fold
• Multiple primary CTAs (user doesn’t know what to do)
• Form labels that are vague (“Details” instead of “Creator Name”)

​

2. Accessibility is Built In, Not Bolted On

• Color: Never use color alone to convey meaning. Red error + ❌ icon. Status chips use color + icon + text.
• Contrast: WCAG 2.2 AA minimum (4.5:1 for body text, 3:1 for large text)
• Focus: Keyboard navigation visible (focus indicator at least 3px, not removed with outline: none)
• Motion: No auto-play animations > 5 seconds; respect prefers-reduced-motion
• Form Labels: All inputs have <label> or aria-label; error messages linked to inputs
• Images: All images have descriptive alt text (or marked decorative)

• Status only shown by color (“green means ready”)
• Text color < 4.5:1 contrast on background
• Focus indicator invisible or removed
• Videos auto-play sound
• Form input without associated label

​

3. Consistency Reduces Cognitive Load

• Buttons: All primary actions use same button style (color, size, corner radius)
• Status states: All modals have close button (top-right X); all forms have cancel button
• Spacing: Use defined spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px)
• Typography: 3–4 font sizes max (headline, subheading, body, small); consistent line-height
• Icons: All icons from same set (Feather, Heroicons, etc.); sized consistently (16px, 20px, 24px)

• Different button styles for same action in different flows
• Some forms have cancel buttons, others don’t
• Arbitrary spacing (15px here, 14px there)
• 5+ different font sizes in same page
• Mixed icon sets (Material Design + Font Awesome)

​

4. Fast is a Feature

• Page load: Initial meaningful paint < 2s (measured on 4G mobile)
• Navigation: Route transitions < 300ms (no loading spinner visible)
• Interactions: Button press → visual feedback within 100ms (ripple, color change, icon animation)
• Search: Search results appear as user types (auto-complete, no Enter required)
• Video playback: Stream starts within 2s; quality adapts to bandwidth

• Page load > 3s
• Click button → 500ms delay before anything happens
• Forms refresh entire page instead of inline validation
• Search requires manual submit
• Video takes > 5s to start

​

5. Trust Through Transparency

• Confirmations: Destructive actions require explicit confirmation (“Delete” button → modal with “Are you sure?” + “Delete” + “Cancel”)
• Progress: Long operations show progress bar or spinner with estimated time
• Errors: Error messages are specific (“Email already used by another account” not “Error”)
• Success: Success state visible for 2–3 seconds after action (green checkmark, toast notification)
• Loading states: Skeletons, spinners, or placeholders when content loading; never blank

• Clicking “delete” immediately deletes without warning
• Long process with no indication of progress
• “Something went wrong” with no explanation
• Success state disappears instantly
• Blank page while content loads

​

6. Mobile-First Design

• Breakpoints: Design at 375px (mobile), 768px (tablet), 1440px (desktop)
• Touch targets: All interactive elements ≥48px × 48px
• Scrolling: Content tall but not > 5 viewport heights; above-the-fold has primary CTA
• Responsive: Text scales to fit screen; images don’t crop on mobile; no horizontal scroll
• Gestures: Swipe, tap, double-tap work as expected

• Button < 44px (too small to tap)
• Text forces horizontal scroll on mobile
• Images crop or distort on smaller screens
• Desktop design scaled down for mobile (text too small)

​

Design Quality Rubric (Measurable)

​

Component-Level Checks

​

Design Review Checklist

​

Visual Design

• Comp matches reference app (VideoKing, not a new style)
• Color palette (primary, secondary, accent, neutral) uses defined tokens
• Typography sizes, weights, line-heights follow design system
• Spacing on 8px grid (all margins/padding = 8, 16, 24, etc.)
• Icons from unified icon set; sized consistently (16px, 20px, 24px)
• States designed (hover, active, disabled, error, success)

​

Clarity & UX

• Primary action clear and prominent
• Form labels clear; required fields marked
• Error states explain what went wrong (“Email is required” not “Invalid input”)
• Success states confirm action (“Payment processed” with amount)
• Loading states prevent assumption that nothing happened (skeleton, spinner, toast)
• Empty states explain what to do next (“No videos yet. Upload your first video”)

​

Accessibility

• Axe scan exported; 0 violations shown
• Keyboard-only navigation tested (Tab, Enter, Arrow keys work)
• Color not sole indicator (status uses icon + text + color)
• Contrast verified (4.5:1 for body text, 3:1 for large text)
• Form labels linked to inputs (not placeholder-only)
• Alt text written for all images

​

Responsive Design

• Tested at 375px, 768px, 1440px
• Touch targets ≥ 48px on all screens
• No horizontal scroll on mobile
• Images don’t distort or crop on smaller screens
• Text readable without pinch-zoom

​

Performance

• Lighthouse score ≥ 85 (desktop + mobile)
• LCP (Largest Contentful Paint) < 2s (4G throttle)
• No layout shift (CLS score < 0.1)
• Images optimized (WebP, lazy-loaded if below fold)

​

Code Quality

• Component uses design system tokens (not hardcoded colors/sizes)
• CSS follows BEM or component CSS conventions
• No magic numbers (all sizes/spacings justified)
• Animations performant (GPU-accelerated, transform/opacity only)

​

Design System Reference (VideoKing Baseline)

​

Color Palette

​

Typography

​

Spacing Scale

4px   (gap between inline elements)
8px   (small margin, padding)
12px  (standard margin between elements)
16px  (standard padding, spacing)
24px  (larger spacing between sections)
32px  (extra-large spacing between major sections)
48px  (hero section margin)

​

Components (Design System Inventory)

​

Design-to-Code Handoff

​

Before Engineers Start

1. Design spec exported (Figma → Zeplin or similar)
   • Component library linked
   • Spacing/colors/fonts documented
   • Interactions + animations described
2. Accessibility audit completed
   • Axe scan passed
   • Color contrast verified
   • ARIA labels planned
3. Responsive breakpoints defined
   • 375px, 768px, 1440px comps provided
   • Touch/click targets verified ≥ 48px
4. Design review approved
   • Design lead: “Ready to build”
   • PM: “Matches product intent”
   • Engineering lead: “Technically feasible”

​

During Implementation

• Engineers use Figma (read-only) to measure spacing, colors, sizes
• Design tokens (colors, fonts, spacing) injected via CSS variables
• Components tested in browser during dev; design lead spot-checks
• Accessibility testing runs in CI (Axe + Lighthouse)

​

Post-Implementation

• Design lead reviews built component in staging
• A/B testing (if product decision needed)
• Performance testing (Lighthouse CI gate)

​

Common Design Mistakes (Anti-Patterns)

​

Design Review Gates (CI/CD Integration)

​

Pre-Code-Review (Designer Gate)

• Figma link present + approval noted
• Axe scan 0 violations (exportable proof)
• Lighthouse score ≥ 85 (target: staging deploy)
• Responsive design tested 375px, 768px, 1440px

• Figma not approved
• Axe scan shows violations
• Lighthouse < 85
• Mobile design missing

​

Post-Code-Review (Automated Gate)

• CSS lint (no undefined colors/sizes; all use design tokens)
• Axe scan in built component (0 violations)
• Lighthouse CI gate (≥ 85; no regression)
• No console warnings (accessibility, performance)

• Hardcoded colors (not using CSS variables)
• Axe violations in component
• Lighthouse regression > 10 points
• Console warnings detected

​

Design Review Meeting Format

1. New designs in review (15 min)
   • Designer presents comp + rationale
   • Team checks against rubric
   • Approve or request changes
2. Built components in staging (10 min)
   • Review against Figma
   • Test accessibility + responsiveness
   • Sign off or request tweaks
3. Meta (5 min)
   • Blockers? Process working?
   • Design system gaps?
   • Next week’s work preview

​

T1.1 Exit Criteria (by May 22, 2026)

• Design principles documented (6 principles)
• Quality rubric with measurable criteria (15 checks per component)
• Design review checklist published and adopted
• Design system inventory documented (VideoKing baseline)
• CI gates configured (Axe + Lighthouse)
• Team trained on rubric + process (1 design review session)
• Rubric used in ≥3 code reviews (proven adoption)

​

Appendix: Example Design Review Pass/Fail

​

✅ PASS: Creator Subscribe Button

• Red button (#FF006B)
• Label: “Subscribe for $5/month”
• Size: 48px × 48px (within mobile touch target)
• Hover state: Slightly darker red (#E60060)

• Clarity: CTA clear; label explains outcome
• Accessibility: Axe scan 0 issues; contrast 7:1 (AA)
• Consistency: Primary button style; uses design tokens
• Performance: No animation; instant click feedback
• Trust: Next screen shows confirmation (“Confirm subscription”)
• Mobile: 48×48px touch target; responsive

​

❌ FAIL: Video Status Indicator

• Only a colored dot (green = processing, red = failed)
• No label

• Clarity: User must hover to understand
• ❌ Accessibility: Color-only meaning; colorblind users can’t distinguish
• ❌ Accessibility: No tooltip or aria-label; hidden meaning
• Consistency: Others use icon + text
• Performance: Unclear (might have animation)
• Trust: User can’t verify state without guessing
• ❌ Mobile: No touch target for tooltip; unclear on small screens

• Replace with colored badge: colored background + icon + text (“Processing” or “Failed”)
• Add tooltip on hover: “Videos are being transcoded”
• Testing: Passes Axe; colorblind test passes

​

Version History