ui-ux-gtmlisted

# UI/UX for GTM ## Overview GTM tools live or die on usability. A landing page with beautiful design that converts at 1% loses to an ugly page converting at 4%. This skill covers UI/UX patterns for GTM surfaces: landing pages, forms, signup flows, and dashboards — with a focus on conversion and accessibility. ## When to Use - "Design a landing page UI" - "Audit our form UX" - "Improve signup flow conversion" - "Design a GTM dashboard" - "Make our pages accessible" ## Step-by-Step Process ### Phase 1: Conversion-First Design - Hero communicates value in <3 seconds - Single primary CTA per view - Progressive disclosure (ask for less upfront) - Social proof visible without scrolling - Trust signals near CTAs ### Phase 2: Form Optimization - Fewest fields possible (every field reduces conversion) - Inline validation (validate as user types) - Clear error messages (what went wrong + how to fix) - Mobile-optimized inputs (appropriate keyboard type) ### Phase 3: Dashboard Design - Most important metric first (top-left, largest) - Trend indicators (up/down arrows, not just numbers) - Filters that persist across views - Export capability (CSV, PDF) ### Phase 4: Accessibility (WCAG 2.1 AA) - Color contrast ratios (4.5:1 minimum) - Keyboard navigation for all interactive elements - Screen reader support (alt text, ARIA labels) - Focus indicators visible ## Output Format UI/UX audit or design spec with screens, components, interaction patterns, and accessibility checklist. ## Com