back
loading skill details...
Audit the mobile shopping experience of an ecommerce store for friction points including page load speed, thumb-reach interactions, form length, checkout flo...
--- 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.
don't have the plugin yet? install it then click "run inline in claude" again.
restructured into implexa's 6-component format (intent, inputs, procedure, decision_points, output_contract, outcome_signal), added explicit decision branches for data sources and common failure modes, documented required device types and platform access, added edge cases around 3ds flow, image sizes, and field counts, kept original author attribution and all 7 workflow steps intact, converted quick reference table to procedure step 1, added output formats and file location guidance.
mobile is 65-80% of ecommerce traffic but only ~50% of revenue. the gap between traffic share and revenue share is where this skill lives. run it when mobile conversion rate lags desktop, before a major redesign, or quarterly as a hygiene pass. the skill finds thumb-reach errors, slow hero images, checkout fields that kill the sale, and payment friction that users abandon carts to avoid.
field data sources (pick one or more)
test devices required
ecommerce platform access
audit prerequisites
step 1: pull field core web vitals data
inputs: CrUX data source (PageSpeed Insights, Search Console, or RUM tool), 28-day window, mobile segment only
output: recorded p75 LCP, p75 INP, p75 CLS for mobile
record the three core web vitals from the last 28 days of real-user data. use field data (CrUX) as primary source, never Lighthouse alone. compare p75 values against the reference table below. note whether each metric is green (strong), yellow (acceptable), or red (weak).
step 2: walk the funnel on real devices
inputs: two physical devices (iPhone and mid-range Android), live store URL, network throttled to 4G LTE
output: friction log with device, screen name, friction type, description, severity flag
do not use emulator or Chrome DevTools device mode. use actual hardware on real 4G. walk the complete path: home page, category page (filter interaction), product detail page, add to cart, cart review, checkout page (all steps), payment selection, confirmation. on each screen, document every friction: slow load (count seconds), mis-sized tap target, layout shift, confusing state label, keyboard covering a required field, modal without visible close button. flag which device exhibits the friction.
step 3: audit thumb-reach zones
inputs: friction log from step 2, screenshots of each screen in the funnel
output: thumb-zone map with flagged elements
mark the bottom two-thirds of the 6-inch screen as comfortable reach. mark the top third as awkward. identify every primary call-to-action (add to cart, checkout, apply filter, submit form). flag any primary CTA in the top third or outside the left-right thumb zone (beyond 85% of screen width). note any element whose close button is cropped or off-screen on a 4-inch device.
step 4: audit form fields in checkout
inputs: checkout page HTML, list of required vs. optional fields, current field count
output: field audit table with name, type, keyboard, autocomplete attribute, validation, required/optional status, removal recommendation
list every field in the checkout flow in order. for each field, document: field name, input type (text, email, tel, number, date), keyboard type presented to user, autocomplete attribute present (yes/no/value), inline validation (real-time or submit-only), whether required or optional. score total required fields. identify candidates for removal (phone for delivery updates, confirm password, how did you hear about us, optional company name). target 8 or fewer required fields total.
step 5: audit payment methods and 3ds flow
inputs: payment provider dashboard (Stripe, Shopify Payments, etc.), list of geographic markets served, checkout flow HTML
output: payment method matrix by region and 3DS flow diagram
for each geographic market the store serves, confirm: Apple Pay enabled and domain verified in Apple Pay portal (iOS users will abandon carts without it). Google Pay enabled and merchant ID verified in Google Pay console (Android users will abandon). one local payment method per major region (iDEAL in Netherlands, Bancontact in Belgium, Klarna/Afterpay for installments, SEPA in EU, Pix in Brazil, UPI in India). card fields using correct keyboard (numeric), card-type icons displayed, CVV as numeric-only input. 3DS authentication flow does not use a full-page redirect; use inline 3DS (iframe or modal) so the user stays in the checkout context.
step 6: image and asset audit
inputs: network waterfall from DevTools (throttled to 4G), HTML head and body markup for images and fonts, hero image assets, below-fold images
output: asset checklist with format, size, loading strategy, layout-shift risk
for hero images: confirm served as WebP or AVIF, responsive srcset for mobile breakpoint (typically 400-800px), total size under 200KB at mobile. for below-fold images: confirm lazy-loaded via loading="lazy" or Intersection Observer. for fonts: WOFF2 format, subset to used characters, critical text preloaded. for all images: confirm width and height attributes set or aspect-ratio CSS box reserved to prevent layout shift on load. for video: confirm no autoplay on mobile, poster image provided, <video> element itself lazy-loaded if below fold. note any asset contributing to CLS >0.1.
step 7: document findings in priority order
inputs: all friction logs, measurements, and audit outputs from steps 1-6
output: ranked findings list (P0, P1, P2) with friction description, affected screen(s), root cause, concrete fix, estimated impact
create a list ranked by impact. P0: blocks checkout, directly causes cart abandonment or prevents payment method selection. P1: measurably hurts conversion rate (>2% estimated lift from fix). P2: polish, nice-to-have, low friction. for each finding, include: the friction observed, which screen(s) and device(s) affected, root cause, specific fix (not "improve performance" but "re-export hero.jpg as 1200px WebP"), estimated conversion impact if known.
if field data (CrUX) is unavailable (new store, low traffic, region not covered by CrUX) then: use Lighthouse lab data on 4G throttle as secondary signal, but note it does not reflect real-user cold-start jank or main-thread contention. validate findings by walking the funnel on real devices.
if LCP is >2.5s and INP is <200ms then: the problem is asset size or server latency, not JavaScript. prioritize image re-export, responsive srcsets, and CDN configuration. JavaScript optimization will not fix this.
if LCP is <2.0s and INP is >300ms then: the problem is JavaScript main-thread blocking. prioritize deferring non-critical analytics, moving heavy libraries to web workers, and async tracking calls. image optimization will not fix this.
if Apple Pay domain verification fails then: the store loses all iOS users who expect Apple Pay. this is P0. verify domain in Apple Pay portal (https://developer.apple.com/apple-pay/), add the verification file to .well-known/, and test again before deployment.
if checkout has >12 required fields then: field reduction is P0. every field after 8 required fields measurably increases cart abandonment (5-10% per field added). prioritize removing optional fields and moving optional questions to post-purchase.
if any primary CTA (add to cart, checkout, submit payment) is above the middle of the screen then: move it to a sticky footer or bottom-sheet on mobile (not desktop). thumb stretch is P1 on mobile, worth 2-5% conversion lift.
if 3DS flow uses a full-page redirect then: users lose context, browsers may block the redirect as a popup, conversion suffers. switch to inline 3DS (iframe or modal) within the checkout context. this is P1.
if hero image is >500KB or >3000px wide then: re-export as WebP at 1200px or smaller, test at mobile breakpoint. large images are often the single biggest LCP contributor.
if CLS is >0.1 and images lack width/height attributes
then: add width and height to all images or use aspect-ratio CSS boxes to reserve layout space before load. this is often a quick P1 win.
if field has no autocomplete attribute
then: add autocomplete="given-name" (or email, postal-code, etc.) to let the OS and password manager fill the field. no autocomplete is a mobile-keyboard friction hit.
if pagination or infinite-scroll shows no progress indicator then: users feel lost on mobile (small viewport hides context). add breadcrumb, page number, or "X of Y loaded" indicator.
if modals or popups cannot be closed on a 4-inch screen then: the close button is cropped or off-screen. add 44pt safe area padding or a swipe-down gesture to close. this is P1 friction.
audit report format
produce a markdown document with the following sections:
file location: /audits/mobile-ux-audit-[store-name]-[date].md
the skill worked when: