--- target: azcomputerguru.com homepage (Astro prototype) total_score: 33 p0_count: 0 p1_count: 0 p2_count: 2 timestamp: 2026-05-22T17-03-45Z slug: azcomputerguru-com --- ## Design Health Score | # | Heuristic | Score | Key Issue | |---|-----------|-------|-----------| | 1 | Visibility of System Status | 3 | Sticky header; hover states present; form submit has no JS feedback (static HTML) | | 2 | Match Between System and Real World | 4 | "What's going on?" and "we'll follow up within the hour" are natural phrasing; plain language throughout | | 3 | User Control and Freedom | 3 | Sticky nav; form is abandon-safe; skip link present | | 4 | Consistency and Standards | 4 | Display/body font roles consistent; orange applied uniformly; button variants consistent; form labels match section-label pattern | | 5 | Error Prevention | 3 | Name + contact fields are required; form method=GET allows browser autofill; no inline JS error states (static) | | 6 | Recognition Rather Than Recall | 4 | Catalog grouped into Management / Security / Support — scan path is clear; phone in 5 locations; testimonials add concrete social proof | | 7 | Flexibility and Efficiency of Use | 3 | Inline form removes off-page redirect for async-preference visitors; phone visible in 5 locations; two conversion modes (call / form) now both on-page | | 8 | Aesthetic and Minimalist Design | 4 | Equal-weight hero CTAs remove hierarchy pollution; two-column CTA band (text + dark form panel) is purposeful contrast; catalog groups resolve the "feature dump" feel; testimonials use accent-top cards (not icon+heading pattern); page has no decorative noise | | 9 | Help Users Recognize, Diagnose, and Recover from Errors | 2 | Static page, no error surfaces; inherently limited; tel: links verified; 0 broken images | | 10 | Help and Documentation | 3 | Phone in 5 locations; inline form has copy "we'll follow up within the hour" setting expectations; no chat or FAQ | | **Total** | | **33/40** | **Good** | ## Anti-Patterns Verdict **Does this look AI-generated?** No. **Assessment:** Design continues to read as a specific, owned brand expression. Equal-weight hero CTAs remove the "safe button + secondary link" template. The two-column CTA band — headline + phone left, dark form panel right — is an uncommon structural choice that earns its contrast. Testimonials use a restrained card variant (accent top border, no icon, no arrow affordance) that avoids the identical-card-grid ban. Catalog groups (Management / Security / Support) give the service list architecture rather than the previous flat dump. **Changes from previous pass (31/40):** - H7 +1: Inline form eliminates the off-page form-link dead end - H8 +1: Hero CTA hierarchy fixed (equal weight); catalog grouped; CTA band two-column; no new decorative elements ## What's Working **1. Two-column CTA band.** The split is functional: left side handles identity (headline + phone — the fast path), right side handles the async path (form panel). The dark form panel on orange creates deliberate contrast without decoration. This removes the single-CTA-band cliche entirely. **2. Catalog groups.** Management / Security / Support as category labels transforms 12 undifferentiated items into a scannable 3-column architecture. The orange group labels tie back to the brand accent. A visitor can now locate their need in one scan rather than reading all 12 items. **3. Social proof.** Three testimonials land specific claims: zero outages, ransomware recovery, expert communication. These are the objections an evaluating office manager needs addressed before recommending. The middle card (ransomware) is the crisis-visitor proof point; the first (zero outages) is the management proof point; the third (easy to communicate with) is the delegator's concern. **4. Hero CTA parity.** Phone and consultation button are now visually equal at 52px height. A crisis visitor scanning the hero sees two immediate options at the same weight — not one dominant path and a secondary footnote. ## Priority Issues **[P2] Form has no client-side error feedback** The inline form uses `required` attributes and browser-native validation, but has no styled error states. On submit with missing fields, the browser default tooltip appears (styled inconsistently across browsers, sometimes invisible on orange background). *Fix:* Add minimal JS to set `.cta-form-input--error` class on invalid submit, with a visible border-color change (red/error token). No library needed — ~15 lines. *Scope:* CSS token + 15 lines of inline `