| name | ux-conversion |
| description | This skill should be used when the user asks to 'improve UX', 'fix mobile experience',
'optimize signup flow', 'increase conversions', 'design better CTAs', 'reduce form abandonment',
'improve form UX', 'add trust signals', 'write microcopy', 'mobile-first design',
'responsive layout', 'onboarding flow', 'reduce friction', 'improve checkout',
or needs guidance on desktop/mobile UX patterns, conversion rate optimization,
form design, CTA placement, user psychology, or high-converting user flows.
|
UX & Conversion Optimization
Build interfaces that convert. This skill covers UX patterns for desktop/mobile, conversion optimization, and user psychology.
Core Philosophy
- Every element earns its place - Remove visual noise; minimize cognitive load
- Reduce friction ruthlessly - Every click/field is a potential drop-off
- Mobile-first always - 60%+ traffic is mobile; design smallest viewport first
- Data beats assumptions - A/B test everything; use heatmaps and session recordings
- Speed is UX - 1 second improvement = 7% conversion boost
Quick Reference
High-Impact Quick Wins
- Reduce form fields to essentials only (42% lift from 15→5 fields)
- Use inline validation with helpful error messages (22% success rate increase)
- Make CTAs specific with first-person copy ("Get my report" > "Submit")
- Add progress indicators to multi-step flows
- Place trust signals near CTAs and checkout
- 44px+ touch targets on mobile with adequate spacing
- Offer guest checkout prominently (62% of sites fail this)
- Get users to value within 60 seconds of signup
- White space around CTAs can boost conversions 232%
- Personalized CTAs convert 42% better than generic
Decision Framework
When designing forms:
- Single column layout (always on mobile)
- Labels above fields (not placeholder-as-label)
- Smart defaults and autofill where possible
- Validate on blur, not on submit
- Mark optional fields, not required
- Group related fields logically
When designing CTAs:
- High contrast against background
- Action verb + benefit: "Start my free trial"
- Large enough to tap (min 44px height)
- Isolated with generous padding/white space
- Repeat at end of long content
When designing for mobile:
- Start at 320px, enhance upward
- Primary actions in bottom 1/3 (thumb zone)
- Reduce input: autofill, smart defaults, minimize typing
- Touch targets 44x44px minimum with spacing
- Compress images, lazy-load below fold
When building signup/onboarding:
- Collect only essential info at signup (name, email, password)
- Use progress indicators ("Step 2 of 3")
- Get user to first "win" ASAP
- Personalize flow based on user type/goal (2-5 options)
- Provide skip option for experienced users
- Celebrate milestones to build momentum
When adding trust signals:
- Security badges near payment/checkout
- Testimonials with real names, photos, specific results
- Social proof numbers ("10,000+ customers")
- Guarantees near CTAs to reduce hesitation
- Client logos for B2B credibility
Anti-Patterns to Avoid
- Placeholder text as the only label (accessibility fail)
- Requiring account creation before showing value
- Credit card upfront for free trials
- Desktop-only optimization
- Generic CTAs ("Submit", "Click here")
- Validating only on form submit
- Hiding guest checkout option
- Tutorial overload on first visit
- Jargon and clever-but-unclear copy
Responsive Breakpoints
.container { padding: 1rem; }
@media (min-width: 48em) {
.container { padding: 2rem; max-width: 75rem; }
}
@media (min-width: 64em) {
.container { }
}
Break when content breaks, not at arbitrary device widths.
Metrics That Matter
| Metric | Target | How to Improve |
|---|
| Conversion rate | 5-10%+ (avg is 2.35%) | Reduce friction, personalize CTAs |
| Form completion | 80%+ | Fewer fields, inline validation |
| Time to value | < 60 seconds | Streamline onboarding |
| Mobile bounce | < 40% | Speed, touch targets, thumb-zone design |
| Cart abandonment | < 70% | Guest checkout, trust signals, simplify |
For detailed patterns and examples, see the reference files in this skill.
