alphabeta.design

Finding: The 'Start a project' pill in the nav is set to hidden sm:inline-flex, meaning it disappears on screens under 640px. Mid-sized phones and older devices lose the primary above-the-fold CTA; the only path becomes scrolling to the closing CTA at the bottom of the page.

Recommendation: Either drop the sm: breakpoint so the pill shows on every width (the wordmark can compress or the nav can wrap), or replace it on narrow mobile with a compact arrow-icon variant that still lands as the primary action.

Finding: The featured 2x2 cards start as a fan-pile on the right at scroll=0, animating into a grid as the user scrolls. The pile is beautiful but reads as decoration on first paint. A first-time visitor may not realize the cards are individually clickable until after they have already scrolled past.

Recommendation: Add a subtle 'click any card' or 'preview' hint that fades in during the fan-pile state, then fades out as the cards land in the grid. Or animate one card slightly on hover during the pile state to signal interactivity.

Finding: The Timeline field has a 'Not sure yet' option. The Budget field does not have a 'Not sure' equivalent, forcing anyone unsure of budget to pick a specific range they may not actually mean.

Recommendation: Add 'Not sure yet' as the last option on the Budget field, or promote the existing 'Open' option to 'Not sure yet / Open.' Consistent qualifying language across selects reduces mismatched inbound.

Finding: The six-more grid cards open a preview modal on click, tap, Enter, or Space. Keyboard users get correct behavior (focus lands on the button, Enter opens the modal) but no visual 'press Enter to preview' hint on focus. Discoverability for keyboard users is lower than for mouse users.

Recommendation: On :focus-visible, reveal a small 'Press Enter to preview' text near the focus ring, or extend the existing 'Preview →' corner label to underline on focus. Small change, notable accessibility win.

Finding: The four featured cards use light pastel tints (D8E2ED slate, EBDDE0 pink, DEE0EE lavender, D9E2D6 sage) against a page background of F5F7FA neutral-100. The value contrast between card and page is about 6 to 8 percent — enough that the cards do not read as clearly delineated surfaces on the first look.

Recommendation: Push the tint saturation by roughly 5 percent on each card, or add a subtle 1px border in a slightly darker neutral. The fan-pile animation depends on the cards reading as distinct objects; more separation would strengthen the whole effect.

Finding: The care plan and no-ship-guarantee callouts on /services use --color-informational-tint at 8 percent alpha teal. On a 5K desktop display against the surface color, the tint is nearly imperceptible; the callout reads as a paragraph, not as a boxed emphasis.

Recommendation: Bump the tint alpha to 12 to 15 percent, or add a 2px teal left rule so the callout keeps its 'this is a promise, not a bullet' visual weight. Same fix applies to any other Informational-tint block on the site.

Finding: The launch-review explainer on /services describes the six tiers of the full framework as prose. A first-time reader has to hold six abstract categories in their head to follow the paragraph. No numbered badges, no icons, no labeled diagram.

Recommendation: Same fix as S1: a small six-tile grid on /services that names each tier with a one-line gloss. Buyers can then reference back to it while reading the rest of the section instead of parsing prose.

Finding: Each of the four differentiators is a heading-plus-body block with no visual anchor. Scannability is entirely on the typography. A reader skimming the section on mobile may miss individual differentiators because they read as a wall of headings.

Recommendation: Add a single visual element per differentiator: a small number, a subtle rule between them, or a low-key icon. Enough to give each block its own eye-anchor without decorating a page that thrives on restraint.

Finding: The 60+ sample-gallery shots ship as JPEG q85 at 1600px wide. Next.js Image serves optimized WebP variants automatically, but source-format upgrade to AVIF would yield 30 to 40 percent smaller payloads on Chrome, Safari 16+, and Firefox.

Recommendation: Convert the source shots to AVIF at build time (sips --format avif or sharp) and let Next.js Image negotiate WebP fallback for older browsers. Total site payload on Sandwich Shop modal drops from ~2 MB to ~1.2 MB.

Finding: On the home page the Largest Contentful Paint element is the Whittaker photo in the featured card. Source is a 5.9 MB PNG (whittaker-hotel-desktop.png) which Next.js Image serves at ~450 KB WebP. On a 3G throttled connection, LCP measured at ~1.4s. AVIF at the same visual quality would land near 300 KB.

Recommendation: Same as T1 for the featured samples: ship AVIF source. Alternately, serve a lower-resolution priority preload for the LCP image and let Next.js Image load the full variant lazily.

Finding: Every page correctly declares alternates.languages in its Next.js metadata, which Google can pick up as hreflang. The sitemap does not carry xhtml:link rel='alternate' hreflang entries, which is Google's preferred signal for language-pair discovery and reduces the chance of an English URL ranking in a Spanish search result.

Recommendation: Extend app/sitemap.ts to emit xhtml:link entries for every locale pair. Next.js's sitemap export accepts a raw XML overlay for this. Bilateral language declarations required (English page declares Spanish, Spanish page declares English).

Finding: app/sitemap.ts sets lastModified: new Date() on every route. Google treats a sitemap with all-same-date entries as low-signal; per-page real modification times let the crawler prioritize actually-updated pages.

Recommendation: Read the content file's mtime for each dynamic route (case studies, writings, samples), and use a hardcoded last-edited date for static routes. Small change, meaningful crawl-priority signal.