UX Optimization Roadmap

Phased improvement plan for UX compliance violations. Prioritizes fixes by impact and effort, with design recommendations and implementation timelines.

Scope Context

Downstream remediation skill fed by ux-compliance-audit.

Fixes must be re-verified by running ux-compliance-audit again under the same score mode.

Purpose

Fix UX issues and create compliant, user-friendly experience:

• Clear navigation and site structure
• Appropriate content-to-ad ratio
• Readable typography and layout
• Accessibility (WCAG AA) compliance
• Mobile optimization

Prioritized Implementation Phases

Phase 1: Critical Fixes (Week 1-2) — Do First

Remove Intrusive Interstitials (UX03)

• Full-screen popups on load: Remove or make easily dismissible
• Modal windows: Add visible close button (actual X, not fake)
• Overlay ads: Move below fold or delay appearance
• Impact: Automatic rejection if intrusive

Fix Content-to-Ad Ratio (UX02)

• Measure: Ads should occupy <30% of viewport
• Action: Remove/relocate ads if excessive
• Before: 50% ads visible → After: 25% ads visible
• Timeline: 2-4 hours
• Impact: Blocks approval

Fix Deceptive UI (UX06)

• Remove fake close buttons
• Remove fake download buttons
• Fix misleading CTAs
• Timeline: 1-2 hours
• Impact: High rejection risk

Phase 2: Accessibility (Week 2-3) — Do Next

Color Contrast (UX11)

• Audit: All text colors with contrast checker
• Target: ≥4.5:1 normal, ≥3:1 large text
• Fix: Adjust colors or backgrounds
• Timeline: 2-4 hours
• Tools: WAVE, WebAIM Contrast Checker
• Priority: HIGH

Image Alt Text (UX12)

• Add descriptions to informative images
• Decorative images: use alt=""
• Timeline: 2-6 hours depending on image count
• Example: alt="Apple pie cooling on windowsill"

Keyboard Navigation

• Test: Tab through page with keyboard only
• Fix: Add focus indicators, make interactive elements accessible
• Timeline: 4-8 hours

Phase 3: Typography & Readability (Week 3-4) — Important

Font Size (UX04)

• Body text: Increase to ≥14px (16px ideal)
• Headings: Scale appropriately
• Before: 12px → After: 16px
• Benefit: 20-30% improvement in readability
• Timeline: 1-2 hours for whole site

Line Height & Spacing

• Line-height: 1.4-1.8 (1.6 recommended)
• Paragraph spacing: 1-1.5em between paragraphs
• Letter spacing: 0.02-0.05em for headings
• Before: cramped → After: spacious, readable
• Timeline: 1-2 hours

Font Choice

• Body: Sans-serif (Open Sans, Inter, Roboto)
• Headings: Bolder serif or sans-serif
• Avoid: Decorative fonts for body text, excessive thin fonts
• Timeline: 30 min - 1 hour

Phase 4: Navigation & Structure (Week 4-5) — Ongoing

Navigation Menu (UX01)

• Visible on all pages
• Includes main categories
• Mobile menu functional (hamburger)
• Sticky or easy-access
• Timeline: 2-4 hours to redesign

Internal Linking (UX05)

• Every page within 3 clicks of homepage
• No orphan pages
• Breadcrumbs helpful
• Related content links
• Timeline: 1-2 hours for whole site

Search Functionality (UX10)

• If >30 pages: Add search box
• Results relevant and complete
• Timeline: 4-8 hours to implement

Phase 5: Mobile Optimization (Week 5-6) — Essential

Responsive Design (UX14)

• Viewport meta tag: <meta name="viewport" content="width=device-width">
• Test at 320px, 768px, 1024px, 1440px
• Touch targets: ≥48×48px
• Timeline: 4-12 hours depending on site

Mobile Menu

• Hamburger menu functional
• Easy to open/close
• Full navigation accessible
• Timeline: 2-4 hours

Mobile Typography

• Text readable without zooming
• Proper spacing on mobile
• Tap targets not too close
• Timeline: 1-2 hours

Mobile Ads

• Not covering content when tapped
• Easy to close
• Appropriate ad density for mobile
• Timeline: 2-4 hours

Phase 6: Browser Compatibility (Week 6+) — Final

Test Across Browsers

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Timeline: 1-2 hours testing, then fixes as needed

Test Across Devices

• Desktop (1920px, 1440px)
• Tablet (768px)
• Mobile (375px, 414px)
• Timeline: 1-2 hours testing

Design Recommendations

Navigation Layout

Option A: Horizontal Menu

┌─────────────────────────────────────┐
│ Logo │ Home │ About │ Services │ Contact │
└─────────────────────────────────────┘

When: Fewer than 5 main categories

Option B: Sticky Header

Navigation stays visible when scrolling
(Better for user reference)

Option C: Mobile Hamburger

For mobile: ☰ → Menu drops down on click
Must be easily closeable

Ad Placement Best Practices

Recommended: Above fold, sidebar, after content Avoid: Between paragraphs (intrusive), before navigation Max Density: 3 units per page (excluding auto-ads) Ad Label: "Advertisement" clearly visible

Accessibility Checklist

• All images have alt text
• Color contrast ≥4.5:1
• Keyboard navigation works
• Screen reader compatible
• Focus indicators visible
• Form labels associated with inputs
• Error messages clear and helpful
• Links descriptive (not "click here")
• ARIA labels where needed
• Heading hierarchy correct

Mobile-First CSS Pattern

/* Mobile first (base styles) */
body { font-size: 16px; }
.container { width: 100%; padding: 1rem; }
.nav { display: none; } /* Hidden by default */

/* Tablet and up */
@media (min-width: 768px) {
    .container { width: 750px; margin: 0 auto; }
    .nav { display: block; }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container { width: 960px; }
}

Implementation Timeline

Quick (1-2 weeks): Critical + Accessibility Medium (3-4 weeks): + Typography + Navigation Comprehensive (6-8 weeks): + Mobile + Browser testing

Testing Checklist

• Mobile-Friendly Test (Google)
• Lighthouse Audit (Chrome)
• WAVE Accessibility Scan
• Color Contrast Check (all text)
• Keyboard Navigation (full site)
• Cross-browser test (Chrome, Firefox, Safari)
• Cross-device test (mobile, tablet, desktop)
• Ad placement review
• Navigation walkthrough
• Link integrity check

Related Skills:

• Audit results → ux-compliance-audit
• Verify fixes → resubmission-readiness-check