UX Audit Hero Mockup
The /services/ux-audit hero's picture of the deliverable: a page under review with numbered severity pins, the findings panel they map to, and a projected score (Zipline pins, Webflow's audit panel, Maze's score card). Drawn in CSS, decorative, aria-hidden with one sr-only sentence. Rendered on a light ground (the root carries surface-paper surface-white) so it stands out against the navy hero; the status colours switch to their deep twins (--red-deep, --orange-deep, --green-deep) and the chip/number tints drop to 10%, keeping every label above 4.5:1 on white. Load sequence: the frame rises, the page skeleton builds row by row under an accent scan that sweeps down once, the pins pop top-to-bottom as it passes them, the score card arrives and fills to today's score (62), then climbs to the projected 84 once the findings are in and the +22 pill lands; after that the findings auto-cycle their highlight (row and pin) until the visitor points at one. Reduced motion: everything static and final.
Live Preview
Example audit: a landing page with four numbered issues, from a call to action below the fold to failing text contrast, each ranked by severity and effort.
View Full Version
Structure
1. Severity — data-severity → --sev
critical = --red, major = --orange, minor = --accent. Pins, finding numbers and chips all colour from that one attribute; a chip without it is a neutral effort tag.
2. Page under review — .audit-mockup
Browser frame, a small-business page in flat pieces, and a dashed fold line the CTA has fallen below. Each .audit-pin anchors to the top-right corner of what it marks; hovering a pin or a row highlights its partner.
3. Motion
One mount sequence on springs: frame rises, score card lands, pins pop in order, rows stagger, score counts 62 → 84. Reduced motion jumps the score to its end and the site-wide MotionConfig drops the travel.
4. Audit sizes further down — AuditTiers
Three tier cards; the name (heading-h3) leads and the scope is its quieter subtitle. The Standard audit is featured: the one light card in the row (.tier-featured) on the CTA banner's live aqua silk (MeshCardBackdrop tone="aqua" lazy), framed in a 2px mid-navy edge (--surface-lift) with a full-width navy “Most popular” strip across its top, and the CTA banner's button (CTAButton); the other two stay dark with the white primary. On desktop the strip stands above the row and the other two cards drop by its height, so the bodies line up. Each footer shows its guide price from src/lib/pricing.ts (“From $X” over “AUD ex GST · guide price”) beside the CTA; a note under the row carries the guide-price line, the audit → retainer credit and a free-call link.
5. Is a UX audit right for you? — AuditFitCards (on the shared FitCards)
On the page's white band: heading and intro sticky on the left, four situations as tall white cards (icon chip, short title, what the audit gives you pinned to the foot) in a 2×2 grid on the right; one column on phones.
6. Shared parts — AuditMockupParts
AuditPin, AuditScoreCard and theuseFindingCycle highlight hook, used by this mockup and the home banner below, so the two can't drift. Each takes a play flag: the hero passes it from mount, the banner when it scrolls into view; reduced motion shows the finished state either way.
Home promo banner — AuditPromoBanner
The home page's way into the UX audit, straight after the testimonials, on a lighter navy that fades in from the testimonials' tint and out to the band below (.section-ground-bridge). The CTA banner's live aqua silk (MeshCardBackdrop tone="aqua" lazy, host classes as on CTACard), an eyebrow, a short headline, one line and CTAButton to /services/ux-audit. The picture is this mockup cut down to its payoffs (.audit-promo): three pins numbered 1–3 on a page cropped by the card's bottom edge (Deel on Mobbin), and the score card on its lower right, clear of the pins. Phones show the page uncropped with the score hanging off its foot. Plays once on view, then the pins take turns lighting up.
UX audit
From $750Find what's costing you users
A prioritised fix list for your website or app — back in 1–2 weeks.