Mobile UX Audit

SKILL.md

---
name: mobile-ux-audit
description: Audit the mobile shopping experience of an ecommerce store for friction points including page load speed, thumb-reach interactions, form length, checkout flow, and pay-method breadth. Use when mobile conversion rate is lagging desktop, before a major redesign, or quarterly as a hygiene pass.
---

# Mobile UX Audit

Mobile is usually 65–80% of ecommerce traffic and ~50% of revenue. The gap between traffic share and revenue share is the audit's job: find the thumb-reach errors, the slow hero images, the checkout fields that kill the sale.

## Quick Reference

| Decision | Strong | Acceptable | Weak |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤2.0s on 4G | 2.0–2.5s | >2.5s |
| INP (Interaction to Next Paint) | ≤150ms | 150–300ms | >300ms |
| CLS (Cumulative Layout Shift) | ≤0.05 | ≤0.1 | >0.1 |
| Tap targets | ≥44×44pt with ≥8pt spacing | 40pt with tight spacing | <40pt, close together |
| Checkout fields | ≤8 fields, one-page | 10–12 fields, 2 pages | 15+ fields, 3+ pages |
| Pay methods | Apple Pay, Google Pay, card, 1 local | Card + PayPal | Card only |
| Guest checkout | Default, no account required | Account optional after checkout | Forced account creation |

## Problems this skill solves

1. **Conversion rate 40% lower on mobile than desktop** with no clear diagnosis.
2. **Cart abandonment spiking at the address-entry step** — usually a mobile-keyboard/autofill problem.
3. **PDP hero image taking 4+ seconds to load** because the team uses the same 3000px-wide asset as desktop.
4. **Checkout buttons in the top third of the screen** requiring an awkward thumb stretch.
5. **Apple Pay / Google Pay not enabled** on a store where 70% of users are on iOS or Android.
6. **Modals and popups that cover the close button** on small screens.
7. **Tap targets smaller than the thumb pad**, producing fat-finger errors on filters and quantity steppers.

## Workflow

### Step 1 — Measure Core Web Vitals in the field

Pull the last 28 days of real-user metrics from PageSpeed Insights (CrUX), Google Search Console, or your RUM tool (Datadog, New Relic, Sentry, or Shopify's built-in). Record p75 LCP, INP, CLS for mobile. Compare to the Quick Reference table. Lab-test tools (Lighthouse) give consistent scores but do not reflect real users — always lead with field data.

### Step 2 — Walk the funnel on a real device

Not an emulator, not Chrome DevTools device mode. Use an actual iPhone and an actual mid-range Android (Pixel 6a or similar — not the latest flagship). Walk: home → category → PDP → add to cart → cart → checkout → payment. Note every friction: slow load, mis-sized tap target, layout shift, confusing state, keyboard-covers-field moment.

### Step 3 — Audit thumb reach

The comfortable thumb zone on a 6-inch phone is the bottom two-thirds of the screen. Anything in the top third (headers, close buttons, primary CTAs) requires a reach or a hand shift. Map every primary CTA on the funnel and flag anything above the middle.

### Step 4 — Audit form fields

List every field in the checkout. Score each: required or optional, keyboard type (email, tel, numeric), autocomplete attribute, inline validation. Target ≤8 required fields total. Common kill-fields: "confirm password," "phone number for delivery updates," "how did you hear about us."

### Step 5 — Audit the payment step

List enabled pay methods. For every market the store serves:

- Apple Pay enabled with domain verification? Required for iOS conversion.
- Google Pay enabled? Required for Android conversion.
- One local method per region (iDEAL in NL, Bancontact in BE, Klarna / Afterpay for installments, SEPA in EU, Pix in BR, UPI in IN).
- Card fields with proper keyboard (numeric, cardtype icons, CVV as numeric).
- 3DS flow is not full-page redirect (use inline 3DS).

### Step 6 — Image and asset audit

- Hero images: served as WebP or AVIF, responsive srcset, ≤200KB at mobile breakpoint.
- Below-fold images: lazy-loaded.
- Fonts: WOFF2, subset to used characters, preloaded for critical text.
- No layout shift from image or ad loads (`width` and `height` attributes or aspect-ratio boxes).
- Video: don't autoplay. If used, poster image first, lazy-load the `<video>` element.

### Step 7 — Document findings with priority

Produce a ranked list: P0 (blocks checkout), P1 (measurably hurts conversion), P2 (polish). Each item gets the friction described, the screen(s) affected, and a concrete fix.

## Example 1 — Shopify store, 62% mobile traffic, 28% mobile conversion rate vs. desktop

Findings from a 2-hour audit:

- **P0**: Apple Pay not enabled despite 58% of mobile users on iOS. Domain unverified in Apple Pay portal. Estimated impact: +8–12% mobile checkout completion.
- **P0**: Checkout has 14 fields including optional company name, phone "for delivery," and a captcha that fails 30% of the time on mobile. Impact: +5–8% checkout completion from field reduction.
- **P1**: Hero image is a 4000px JPEG at 1.2MB. Re-export at 1200px WebP (~120KB). LCP drops from 3.8s to 1.9s.
- **P1**: Add-to-cart button top-right of PDP on mobile, requiring thumb reach. Move to sticky-bottom.
- **P1**: Filter modal on category page covers the close-X behind the OS status bar on iPhone. Add 44pt top padding.
- **P2**: "Suggested for you" section loads below the hero with a 300ms layout shift (CLS 0.18). Reserve space.
- **P2**: Login prompt appears after 15 seconds on every page. Reduce to once-per-session.

Estimated combined lift: 20–30% on mobile conversion over 4–6 weeks after deployment.

## Example 2 — Headless store (Next.js + commerce API), strong desktop, poor mobile INP

The team already optimizes LCP and CLS and has green Core Web Vitals on desktop. Mobile INP is 420ms — users tap and nothing happens for nearly half a second.

- **P0**: Main-thread blocked by an analytics bundle firing synchronously on every route change. Move to a web worker or defer 2 seconds after route settle. Expected INP drop: 420ms → 180ms.
- **P0**: The "add to cart" handler calls three tracking scripts synchronously before showing the cart drawer. Fire tracking async, show drawer immediately. Expected: drawer opens in <100ms instead of 600ms.
- **P1**: Image carousel on PDP uses a heavy library (40KB) that blocks interaction. Swap for CSS-scroll-snap approach, 2KB, same UX.
- **P1**: Variant selector re-renders the entire PDP on each change. Memoize properly or split into a sibling component.
- **P2**: Service worker caches stale HTML for 24h, so bug fixes don't reach users fast. Reduce TTL to 1h and add a "fresh version available" toast.

Strong teams still have mobile-INP debt. The fix is usually "less JavaScript on tap," not "smaller hero image."

## Common mistakes

1. **Auditing only on the latest iPhone.** A mid-range Android at 4G is the real median user.
2. **Using Lighthouse as the only signal.** Lab scores miss cold-start jank and main-thread contention.
3. **Treating mobile as "desktop minus width."** The thumb pattern, keyboard behavior, and attention span are fundamentally different.
4. **Fixing LCP with a CDN and declaring victory.** LCP is three factors: server response, render-blocking resources, and hero-asset size. The CDN only touches one.
5. **Forcing account creation before checkout.** This is a 20%+ conversion hit on cold traffic.
6. **Modals with no visible close button on 4-inch screens.** Test on a small device; buttons crop out.
7. **Infinite-scroll product listing without pagination cues.** Users feel lost and leave.
8. **Autoplay video on mobile.** Eats data, battery, and autoplay policies often block it anyway.
9. **Sticky headers that eat 20% of vertical real estate.** On a phone, every pixel counts.
10. **Not testing with JavaScript disabled.** Many mobile users have flaky JS loading; a site that only works with full JS is broken for them.

## Resources

- `references/output-template.md` — Audit report template with P0/P1/P2 structure.
- `references/core-web-vitals.md` — How to measure and interpret LCP, INP, CLS in the field.
- `references/checkout-checklist.md` — Mobile checkout audit checklist with field-by-field notes.
- `references/thumb-zones.md` — Thumb-reach diagrams and interaction patterns.
- `assets/mobile-audit-checklist.md` — Full pre-publish audit checklist.