Visual & Mobile

What this page shows. A viewport-level UX review of six key Nature’s Path page types (homepage, collection, product, about, blog, recipe) captured via Playwright at 1920×1080, 768×1024, and 375×812. The output names what a user actually sees above the fold on each viewport and flags the conversion friction that pattern creates.

Visual performance drives mobile conversion. NP’s mobile-to-desktop conversion gap is 2.7× (1.03% vs. 2.73%). Above-the-fold content is the single strongest lever on that ratio — what a user sees before scrolling determines whether intent survives the first interaction. A hero that does not shop, a product image that hides the price, and a cookie banner that covers the CTA all compound the drop from impression to purchase.

How to read the findings. Start with Global Issues for the two site-wide failures, then Top Mobile Conversion Issues for the ranked page-level fixes. The Above-the-Fold Effectiveness Summary gives the full grid at a glance; the Desktop vs. Mobile comparison cards name the specific delta per page type. The checklist at the bottom converts each finding into a scheduled fix with priority.

What the data says about NP today. The cookie banner blocks above-the-fold content on every page, every viewport. On mobile it occupies ∼40–50% of the visible viewport height. Combined with a 2-line-wrapping announcement bar and nav bar, the usable above-the-fold content zone on mobile is roughly 350–400px. Homepage mobile hero shows a brand-story carousel slide (“Organic for the Planet / READ STORY”) with no shop CTA visible above the fold. Collection mobile shows zero products above the fold. Product mobile shows the image only — no price, no rating, no buy button above the fold.

What this section shows. Two site-wide UX issues that appear on every page and every viewport: the cookie consent modal and the free-shipping announcement bar.

Site-wide issues produce site-wide drag. A page-level fix improves one template; a global fix lifts every page. The cookie banner alone is the highest-priority single change on this audit because it degrades mobile above-the-fold on every URL, and it fires before the hero loads in a real session.

How to read the callouts. The critical callout names the cookie-banner blocker. The warning callout names the inconsistent and line-wrapping free-shipping message. Both are theme-level or app-level fixes rather than per-page work.

What this section shows. Six mobile-specific conversion issues ranked by impact on the 2.7× mobile-to-desktop conversion gap. Each callout names the offending page, the observed behavior above the fold, and the targeted fix.

Mobile-ranking severity sequences the build order. NP’s mobile users see less above the fold, interact with smaller touch targets, and face the full cookie banner earlier in the session than desktop users do. Fixing the top-ranked issue first (cookie banner) unlocks every other mobile fix, because the remaining five only stop mattering once the banner stops covering them.

How to read the callouts. Rank order reflects impact on conversion. Critical callouts are the blockers; warning callouts are secondary but still flagged for the six-month plan. The fix line under each issue is the direct remediation target that shows up on the Implementation Checklist.

What this section shows. A one-row-per-page grid rating above-the-fold effectiveness on desktop, tablet, and mobile, with a fourth column naming whether a primary CTA is visible on mobile.

Above-the-fold quality is where mobile-desktop conversion gaps become visible. Desktop passes on every page; mobile fails on every page except the 5-ingredient granola recipe. Tablet sits in between. The pattern is consistent enough to plan against: mobile needs a hero-height and content-order redesign, not a per-page tweak.

How to read the badges. Green GOOD / BEST badges mark working templates to copy from. Yellow WEAK / ADEQ / FAIR badges are partial wins. Red POOR badges are broken experiences where the user cannot orient themselves. The mobile-CTA column is the conversion diagnostic in one glance.

What this section shows. Six side-by-side cards pairing desktop and mobile above-the-fold observations per page type, with the delta called out in the card badge.

Page-type pairs reveal the patterns a single page cannot. Seeing homepage, collection, product, about, blog, and recipe compared at the same viewport set makes the cookie-banner timing issue, the hero-height problem, and the content-order problem show up as template-level patterns (not one-off quirks). Fixes cascade: a hero-height rule on the homepage carries over to the collection template.

How to read the cards. Each card names desktop first, mobile second. Badges flag the dominant delta per page (hero mismatch, image-only above the fold, inert content, stale content signal). The green badge on 5-ingredient granola is the one working mobile experience on the site and the template to copy when designing fixes.

What this section shows. Four mobile-only issues flagged as fails: touch target sizes, the hero carousel defaulting to a brand-story slide, no price visible above the fold, and the cookie modal’s height relative to mobile viewports.

Mobile-only issues are the ones desktop QA never catches. Touch target audits do not surface on a trackpad session; brand-story carousels look fine above the fold on a 1920px viewport. Each of these four items needs a mobile-first QA pass (real device or emulator) to verify the fix ships against the right constraint set.

How to read the list. Each fail item names the issue, the page context, and the specific constraint (48×48px minimum, first carousel slide, price visibility, viewport height math). Items map 1:1 to checklist tasks below.

All screenshots saved to naturespath-audit/screenshots/. Naming convention: {slug}-{viewport}.png.