---
target: azcomputerguru.com homepage (Astro prototype)
total_score: 31
p0_count: 0
p1_count: 1
p2_count: 3
timestamp: 2026-05-22T15-53-21Z
slug: azcomputerguru-com
---
## Design Health Score

| # | Heuristic | Score | Key Issue |
|---|-----------|-------|-----------|
| 1 | Visibility of System Status | 3 | Sticky header shadow on scroll; hover states on all elements; minor gap: aria-current not set in prototype |
| 2 | Match Between System and Real World | 4 | Plain language throughout; service names recognizable; "Or call directly" is natural phrasing |
| 3 | User Control and Freedom | 3 | Sticky nav provides constant escape; skip link present; no form traps on this page |
| 4 | Consistency and Standards | 4 | Barlow Condensed display type consistent; Lexend body consistent; orange applied to same role throughout; button variants uniform |
| 5 | Error Prevention | 3 | Tel: links verified; no destructive actions; clear labels; prototype has expected dead links at /contact etc. |
| 6 | Recognition Rather Than Recall | 4 | All 12 services listed with descriptions; phone appears 3x; coverage cities explicit; service descriptions accompany names |
| 7 | Flexibility and Efficiency of Use | 2 | Two conversion paths (consultation + call); skip link; no keyboard shortcuts (appropriate for marketing page) |
| 8 | Aesthetic and Minimalist Design | 3 | Clean hierarchy; purposeful orange; no decorative clutter; catalog 12-item list handled well but edges toward inventory; hero whitespace at large viewports |
| 9 | Help Users Recognize, Diagnose, and Recover from Errors | 2 | Static page, no error surfaces; phone numbers properly linked; inherently limited |
| 10 | Help and Documentation | 3 | Phone in utility bar (always visible), hero, and CTA band; "Talk to us" link in catalog; for an MSP, calling IS the primary help channel |
| **Total** | | **31/40** | **Good** |

## Anti-Patterns Verdict

**Does this look AI-generated?** No.

**LLM assessment:** The design reads as a committed, distinctive brand expression. 800-weight Barlow Condensed at ~92px for the hero headline is a specific editorial decision, not a safe AI default. The color strategy is calibrated: orange at ~15% of surface area as a committed accent, not the default agency orange saturation. The trust band is a compact horizontal dark strip — not a four-stat card widget. The featured services uses an asymmetric 1.2fr/1fr split layout with stacked bordered items on the right, avoiding the identical card grid entirely. Zero stock photos, zero circuit board motifs, zero rotating hero sliders.

Category-reflex check passes both tiers: "MSP site" doesn't predict this palette or structure; "trustworthy local MSP avoiding corporate blue" doesn't predict editorial typographic treatment either. The design reads closer to a confident skilled-trades or professional services brand — specific and owned.

**Deterministic scan:** CLI detector unavailable (bundled detect-antipatterns.mjs not found). No scan output.

**Browser visual inspection (manual Assessment B):** Verified all 7 sections across multiple zoom captures. Confirmed: no border-left/right side-stripe accents, no gradient text, no glassmorphism, no identical card grids. The catalog list uses uniform `<li>` items without cards — just names and descriptions on a bordered grid. Section backgrounds alternate correctly (off-white → dark → white → off-white → orange → dark). No horizontal overflow (body scrollWidth 1692 vs viewport 1707).

## Overall Impression

The old site scored 21/40 and read as generic MSP template — circuit board stock, card grid, rotating slider. This prototype is a different object entirely. The headline "Any system. Any problem. Solved." lands with authority. The type system, the orange discipline, and the structural restraint all read as intentional. The design earns trust by looking competent, not by shouting.

The one thing holding it back from a higher score: there's no social proof beyond stats. 20+ years is a number; a single sentence from a real Tucson business owner would be a fact.

## What's Working

**1. Hero type system.** Barlow Condensed 800 at ~92px with line-height 1.0 delivers maximum impact with minimum real estate. Three short declarative sentences, each on its own line, build to the orange "Solved." The visual rhythm is earned — the condensed letterforms let the headline breathe on the left half while the arc SVG occupies the right without crowding.

**2. Discipline with orange.** The color is doing exactly one job: signal the brand and mark conversion moments. Utility bar, headline accent, section labels, primary CTAs. Orange never appears decoratively, only functionally. This is the difference between "brand color as personality" and "brand color as orange everywhere."

**3. Trust band execution.** 152px. Dark background. Four stats in a row with vertical dividers. No icon-per-stat, no individual cards, no padding theater. It punches above its height because it's restrained. Most designs would give each stat a card and a drop shadow; this strips it down to the number and a two-word label.

## Priority Issues

**[P1] No on-page conversion form**
Both primary CTAs ("Schedule a Free Consultation" in the hero and CTA band) link to /contact. If that page underperforms or doesn't exist, the main conversion channel is severed. A significant percentage of visitors won't call — they'll fill a form. The page currently funnels all form-based leads off-page.
*Why it matters:* Visitors who prefer async contact over a phone call have no path. The brand positioning emphasizes ease and competence; requiring a page hop to schedule contradicts that.
*Fix:* Add an inline 3-field form (name, phone/email, brief message) to the CTA band, or add a dedicated consultation section above the footer with the form inline.
*Command:* `/impeccable craft contact-form`

**[P2] Mobile catalog: 12 undifferentiated items**
The catalog section lists 12 services in a 3-column desktop grid, which becomes a 12-item single-column stack on mobile. No grouping, no visual hierarchy, no "show more" affordance. On mobile this reads as a menu dump.
*Why it matters:* Mobile visitors searching for local IT support see a wall of service names before they can assess fit. The page loses them before the CTA band.
*Fix:* Group items into 3 categories (e.g., Protection, Management, Support) with category labels as visual breaks. On mobile, consider showing 6 with an expand toggle.
*Command:* `/impeccable layout catalog`

**[P2] No customer testimonials or social proof**
The trust band delivers stats (20+, Statewide, 24/7, Any system), but no voice from a real client. The copy is strong but unverified. The "Delegating Office Manager" persona needs to justify the choice to their boss — a stat is abstract; a sentence from a Tucson business is concrete.
*Why it matters:* MSP selection is high-trust. Competitors have reviews on Google and Yelp. A site with zero testimonials signals either a new company or lack of confidence.
*Fix:* Add a 2-3 slot testimonial section between the catalog and service-area sections. Barlow Condensed pull-quote styling with client name and company.
*Command:* `/impeccable craft testimonials`

**[P2] Phone CTA hierarchy in hero**
The hero's two CTAs are: (1) orange "Schedule a Free Consultation" button, (2) bordered phone link "Or call directly / 520.304.8300". The orange button is visually dominant. For "Overwhelmed Owner" visitors in crisis mode, the phone is the faster path — but the visual hierarchy pushes consultation first.
*Why it matters:* For emergency IT situations (the highest-urgency leads), the phone number gets visually deprioritized behind a scheduling CTA.
*Fix:* Elevate the phone CTA — larger phone number text, remove the "Or call directly" label (it already reads as secondary), or swap the order to phone first, consultation second at this specific section. Alternatively, make the phone element visually equal weight to the button.
*Command:* `/impeccable layout hero-cta`

## Persona Red Flags

**The Overwhelmed Owner** (immediate crisis, wants to talk to a human now):
- Phone number in utility bar is immediately visible — this is right ✓
- "For immediate assistance" is exactly the right hook ✓
- RED FLAG: Hero CTA order puts "Schedule a Free Consultation" (orange, dominant) before "Or call directly" (bordered, secondary). In a crisis, they need the phone number as a primary action, not a secondary option.
- RED FLAG: The phone number in the hero button is relatively small. At panic-mode scanning speed, the large orange button reads as the primary action even if it's the slower path.

**The Delegating Office Manager** (evaluation mode, building a shortlist):
- 20 years + statewide coverage establishes scale ✓
- Service catalog shows full scope ✓
- RED FLAG: Zero customer testimonials. The office manager needs to justify the recommendation. "They said they've been around 20 years" is weaker than "Tucson manufacturing company Y has used them for 8 years."
- RED FLAG: No pricing signals at all. Not even "pricing starting from" or "flat monthly rates." MSP buyers expect a ballpark before calling. The lack of any pricing signal may filter out price-sensitive leads before they reach out.

## Minor Observations

- Footer copyright is hardcoded `© 2026` — production build should compute the year dynamically or update annually.
- "Web Design" appears in footer Services links but not in the main catalog section — a small inconsistency that a careful visitor would notice.
- The `any system, any problem, solved.` italic tagline in the utility bar has a nice contrast with the bold phone number on the same bar — this detail is subtle and works.
- The trust-label "Tucson · Phoenix · Flagstaff · Prescott" on the "Statewide" stat could wrap at 640-768px where the trust band centers — test at that specific breakpoint.
- `aria-current="page"` is not set on any nav item for the homepage in the prototype; set it on the logo link or suppress the issue with a comment in production WP.
- OG meta tags and canonical link were added during the harden pass — these are now present.

## Questions to Consider

- The site opens with "Schedule a Free Consultation" as the first CTA. Should it open with the phone number instead, given that this MSP's primary conversion is a call?
- Would a short testimonial slot between the catalog and service area sections feel native to the brand, or would it interrupt the authority tone the design has established?
- The catalog lists every service. Is that the right information architecture, or would grouping into 4-5 practice areas (Security, Monitoring, Support, Compliance, Infrastructure) make the scope feel more managed and less like a feature list?
