Website Experience

The current A-Grade Contracting website uses a bold, cinematic visual system for an interior-renewal company. This page describes the visitor experience and the interface behavior we will preserve as the marketing content changes.

Positioning, launch proof, and search priorities live in the Marketing Overview and Site Launch State.

Global Experience

Every page shares the same fixed top navigation and full-height footer. The navigation has three states:

• Full desktop state: brand, route links, and an ellipsis menu button.
• Scrolled desktop state: the middle route links collapse away, leaving the brand and menu button.
• Overlay menu state: a dark full-screen menu with route links, contact lines, and social labels.

The visual direction is bold and minimal: dark surfaces, bright white typography, sharp rectangular navigation pieces, large spacing, and restrained blue accent text. The site should continue to feel cinematic rather than like a generic contractor template.

Homepage Flow

The homepage starts with a sticky full-screen video hero, then the content scrolls over that hero into supporting sections. The project-carousel layout is available, but the launch state hides it until real A-Grade project proof exists.

The visitor journey is:

1. Land on the video hero and understand the offer, buyer fit, and service area.
2. Review the coordinated unit-renewal offer or residential cabinet/tile path.
3. Scan the six service categories and practical process.
4. See verified trust information and real proof when it becomes available.
5. Reach a clear call, email, or inquiry action.

This keeps the visual impact while bringing service fit and contact earlier in the decision.

Content Pages

The secondary routes all use the same dark editorial layout. That consistency helps the prototype feel coherent.

About

The About page should explain why A-Grade exists, the standards it follows, and the people responsible for the work. It should not rely on inherited counters or an unverified company history.

Keep:

• The page hierarchy is clear.
• The values section gives the brand a service philosophy.

Next:

• Use only approved A-Grade history and team experience.
• Link the values to concrete operating standards.
• Add real images or omit the image-dependent proof modules.

Services

The Services page lists six service categories:

• Tile & Stone Installation
• Cabinet Refacing
• Design and Finish Coordination
• Deep Cleaning
• Punch List Support
• Property Turnovers

The overview structure is useful. Dedicated service pages will add buyer fit, scope, exclusions, process, geography, proof, and a specific CTA.

Team

The Team page names Gina Linze, CEO / Founder, and Gary Jon Linze, Vice President. The layout supports a people-forward company story.

Keep the approved names, roles, and real portraits. Expand bios only with experience and credentials the company has confirmed for public use.

Contact

The Contact page has a strong two-column desktop layout with the published NAP and a compact inquiry form. The form's final delivery path still needs verification.

The conversion pass needs:

• Verified delivery to [email protected].
• A required phone field and buyer-type routing.
• Required-field validation.
• Success and error states.
• Spam protection.
• Accessible labels and a privacy notice.
• Measurement for completed calls and successful forms.

Conversion Experience

The launch site should give property managers, homeowners, and GCs a different next step without building three separate websites. Buyer type can route the same form to a more useful response, while phone and email remain available on every route.

The first screen should not depend on a visitor interpreting the visual style. It should say what A-Grade does, name the Greater Chicago geography, and make the PM-first offer visible in plain language.

Preserve

Preserve these parts of the prototype unless the design direction changes intentionally:

• Sticky video hero behavior.
• Scrolled nav collapse.
• Dark editorial secondary pages.
• Big type and restrained color.
• Project carousel behavior for the established state, after real proof exists.
• Full-screen overlay menu concept.
• Large footer brand lockup.

Related Work

• Site Launch State defines launch versus established content.
• Proof & Creative covers imagery, claims, and form standards.
• UI Review records screenshot-backed navigation, contrast, and responsive findings.