Structure & Implementation

Site Architecture

The structural blueprint for getconnesso.com. From URL hierarchy and user flows to content models, component specifications, and page template breakdowns.

Part 1 · Version 1.0 · February 2026 · Internal Use Only

Context

Connesso is repositioning from "custom integrator / low-voltage contractor" to "home experience designer." The website must make this repositioning structural — embedded in URLs, navigation labels, page hierarchy, and content organization — not just cosmetic.

The site serves two audiences (homeowners and trade partners) with one goal: convert the right visitors into conversations. Every architectural decision below serves brand positioning, lead generation, or both.

Source Documents

messaging/connesso-brand-messaging-framework.md
4 brand pillars, audience messaging, service tiers

messaging/the-guild-documentary-insights.md
7 themes, language bank

competitive-analysis/
15 competitors analyzed (all Guild members + Bravas)

competitive-analysis/SUMMARY.md
Gaps and opportunities synthesis

design-system/connesso-tokens.css
Visual language tokens (v2.1.0)

design-system/connesso-superdesign-components.md
30 component specifications

Experience Categories (6)

Connesso's services consolidate into 6 experience-framed categories. These drive the /experiences/ section, not /solutions/ — the word "experience" reinforces the designer positioning; "solutions" is vendor language.

01

Light & Shade

Lighting automation, motorized shading, circadian tuning, landscape lighting
Established industry pair. Bravas uses it. No reason to reinvent.
02

Sound & Screen

Whole-home audio, home theater, media rooms, golf simulators, outdoor AV
"Screen" is broader than Bravas's "Vision" — includes golf sims, outdoor screens, media walls.
03

Comfort & Climate

HVAC integration, climate zones, air quality, radiant floor control
Direct and intuitive. Matches Bravas.
04

Safety & Security

Surveillance, access control, monitoring, smart locks, intercom
Same as Bravas. The category name is universal.
05

Control & Network

Enterprise networking, Wi-Fi design, system control, integration backbone
"Network" is more accurate than Bravas's "Connectivity" for the infrastructure work.
06

Design & Build

Pre-wire, structured cabling, rack builds, technology closets, infrastructure planning
Connesso's differentiator. Maps to Pillar 3 & 4. What trade partners care about most.

Service & Support lives as its own standalone page (not an experience category) — it's a post-install relationship, not a design offering.

Site Map

The URL structure uses /experiences/ deliberately — not /solutions/ or /services/. The taxonomy teaches visitors to think of Connesso as a design firm.

getconnesso.com/
├── / ................................ Homepage  MVP
├── /experiences/ ................... Experience hub  MVP
│   ├── /experiences/light-and-shade/
│   ├── /experiences/sound-and-screen/
│   ├── /experiences/comfort-and-climate/
│   ├── /experiences/safety-and-security/
│   ├── /experiences/control-and-network/
│   └── /experiences/design-and-build/
├── /our-work/ ...................... Project gallery hub  MVP
│   └── /our-work/{project-slug}/
├── /about/ ......................... Company story  MVP
├── /trade-partners/ ................ Builder/architect/designer  MVP
├── /locations/ ..................... Locations hub  MVP
│   ├── /locations/columbus/
│   └── /locations/raleigh/
├── /service-and-support/ ........... Support plans  MVP
├── /blog/ .......................... Blog hub  PHASE 2
│   └── /blog/{post-slug}/
├── /contact/ ....................... Contact / consultation  MVP
├── /careers/ ....................... Careers  PHASE 2
├── /privacy-policy/ ................ Legal  MVP
└── /terms/ ......................... Legal  MVP

Page Detail

Tier 1 — Primary Navigation

PageURLPurposePrimary CTASecondary CTA
Homepage/Establish brand. Route two audiences.Schedule a ConversationExplore Our Work
Experiences Hub/experiences/Overview of all 6 categories. Educate on scope.Schedule a ConversationCategory card links
Our Work Hub/our-work/Build trust through project photography.Start Your ProjectProject links
About/about/Tell the Connesso story. Show team. Process.Meet With UsView Our Work
Contact/contact/Convert interest into conversation.Form submissionPhone number

Tier 2 — Secondary Navigation

PageURLPurposePrimary CTAPhase
Trade Partners/trade-partners/Builder/architect/designer growth engine.Partner With UsMVP
Locations Hub/locations/Show market presence. Route to local pages.Location linksMVP
Service & Support/service-and-support/Present support tiers. Retain clients.Choose Your PlanMVP
Blog Hub/blog/Thought leadership. SEO.SubscribePhase 2
Careers/careers/Recruit. Reinforce craft culture.View PositionsPhase 2

Tier 3 — Template-Driven

PageURL PatternPurposePhase
Experience Category (x6)/experiences/{category-slug}/Deep dive on one experience category. SEO landing.MVP
Individual Project (xN)/our-work/{project-slug}/Detailed project showcase. Trust-building.MVP
Individual Location (x2+)/locations/{city-slug}/Local presence, team, projects. Local SEO.MVP
Individual Blog Post (xN)/blog/{post-slug}/Article. SEO content.Phase 2

URL Pattern Notes

  • Scalability: /locations/{city-slug}/ scales to new markets without restructuring.
  • SEO: /experiences/light-and-shade/ targets "lighting automation [city]" search intent.
  • No /solutions/ or /services/: Deliberate. Reinforces designer positioning.
  • Blog slugs: Flat /blog/{slug}/ — no date-based URLs. Evergreen content shouldn't signal age.
  • Trailing slashes: Canonical URLs without trailing slash; redirect trailing slash to canonical.

User Flows

Three primary journeys from entry to conversion. Each designed around the visitor's emotional state and information needs.

A

Homeowner (Referred by Builder)

Entry: Direct link from builder or types URL • Warm but cautious • 3-4 clicks max

Step 1: Homepage (5-15s)

Sees: Hero with lifestyle imagery, "The Home That Knows You"
Feels: "This looks premium. This feels like my home."
Action: Scrolls to experience category cards

Step 2: Experience Overview (15-30s)

Sees: 6 experience category cards
Feels: "OK, this is comprehensive."
Action: Clicks "Explore Our Work" or scrolls to featured project

Step 3: Our Work (30-60s)

Sees: Beautiful project photography, similar home
Feels: "This is the quality level I want."
Action: Clicks "Schedule a Conversation" CTA

Step 4: Contact (60-120s) → Conversion

Sees: Simple form, phone number, scheduling option
Action: Submits form or calls — Lead captured
Key insight: Short path. The builder already did the selling. Homepage → Our Work → Contact should be frictionless. Hero CTA must be visible without scrolling on mobile and desktop.
B

Homeowner (Organic Search)

Entry: Google search • Cold, researching • Needs education then credibility

Step 1: Experience Category Page

Sees: Hero image, clear explanation of what this automation IS
Action: Scrolls to project examples

Step 2: Individual Project Page

Sees: Full photography, builder partner named, scope
Action: Notices location tag, clicks to location page or CTA

Step 3: Location Page

Sees: Local team, local projects, builder partners
Action: Clicks "Schedule a Conversation"

Step 4: About Page (optional, cautious buyers)

Sees: 4-step process (Discover → Design → Install → Support)
Action: Clicks "Schedule a Conversation"

Step 5: Contact → Conversion

Action: Submits form — Lead captured
SEO priority pages: Experience category pages + location pages. These are the organic landing pages. Blog posts (Phase 2) will feed into these.
C

Trade Partner (Builder / Architect / Designer)

Entry: Referral, trade event, or search • Evaluative • Comparing to other integrators

Step 1: Homepage (5-10s scan)

Sees: Premium design, professional presentation
Feels: "This is a company I could put in front of my clients."
Action: Looks for "Trade Partners" link in nav

Step 2: Trade Partners Page

Sees: Builder-specific messaging, timeline protection, process
Feels: "They understand my world."
Action: Clicks to "Our Work" for builder projects

Step 3: Our Work — Project Detail

Sees: Photography, builder named, scope of work
Action: Clicks "Partner With Us" CTA

Step 4: Trade Partner Form → Conversion

Action: Submits partnership inquiry — Trade partner lead captured
Key insight: Trade Partners page is the single most important growth page. Every builder partnership produces multiple homeowner projects. Must be in primary navigation — Bravas doesn't have this page at all.

Content Model

8 content types power the entire site. = required   = optional

JSON schemas available in content-models/ for CMS configuration.

Project MVP

Showcase completed work. Build trust. Support SEO.
  • titlestring
  • hero_imageimage
  • galleryimage[] 6-20 photos
  • descriptionrichtext
  • location_cityref → Location
  • experience_categoriesref[] → Experience
  • builder_partnerstring
  • architectstring
  • designerstring
  • square_footagenumber
  • testimonialref → Testimonial
  • featuredboolean
  • completion_yearnumber

Location MVP

Local SEO. Establish market presence.
  • namestring
  • hero_imageimage
  • descriptionrichtext
  • addressstructured
  • phonestring
  • office_hoursstring
  • emailstring
  • team_membersref[] → Team
  • local_projectsref[] → Project
  • builder_partnersstring[]
  • google_maps_embedurl

Experience MVP

6 experience categories. Power experiences section.
  • namestring
  • taglinestring
  • hero_imageimage
  • overviewrichtext
  • features{icon, title, desc}[]
  • sort_ordernumber 1-6
  • related_projectsref[] → Project
  • related_postsref[] → Post
  • faqref[] → FAQ
  • cta_headingstring

Blog Post Phase 2

Articles for SEO and thought leadership.
  • titlestring
  • hero_imageimage
  • bodyrichtext
  • excerptstring
  • authorref → Team
  • categoryenum Insights | Projects | Technology | Living
  • publish_datedate
  • tagsstring[]
  • related_experiencesref[] → Experience
  • related_projectsref[] → Project

Team Member MVP

Staff profiles for About and location pages.
  • namestring
  • rolestring
  • biorichtext
  • photoimage
  • locationref → Location
  • leadershipboolean
  • sort_ordernumber

Testimonial MVP

Client and trade partner quotes, used everywhere.
  • quotestring
  • attribution_namestring
  • typeenum homeowner | trade_partner
  • attribution_titlestring
  • attribution_companystring
  • linked_projectref → Project
  • featuredboolean

Partner Logo MVP

Technology, builder, and association logos.
  • namestring
  • logoimage SVG preferred
  • typeenum technology | builder | association
  • sort_ordernumber
  • urlurl

FAQ MVP

Questions with JSON-LD structured data output.
  • questionstring
  • answerrichtext
  • page_associationenum[]
  • sort_ordernumber
  • schema_eligibleboolean
  • experience_categoryref → Experience

Component Inventory

38 components across 6 categories. Each card shows pages used, behavior, and responsive notes.

Navigation (4)
1

Primary Nav Bar

All pages
Sticky on scroll. CTA always visible. Logo links home. Active page underlined.
Desktop: horizontal + CTA. Mobile: hamburger.
2

Mobile Nav

All (mobile)
Slide-in panel from right. Full links + CTA. Overlay behind.
Mobile only.
3

Footer

All pages
Logo, nav links, locations, contact. Newsletter. Social.
Desktop: 4 columns. Mobile: accordion.
4

Breadcrumb

All except Homepage
Chevron separators. Current page non-linked.
Desktop: full trail. Mobile: parent + back arrow.
Hero / Header (3)
5

Homepage Hero

Homepage
Full-viewport. Video/image + gradient overlay. Two CTAs. Scroll indicator.
Desktop: 85vh. Mobile: 70vh min 500px.
6

Page Hero

All inner pages
40-50vh. Background image + overlay. Title + subtitle. Breadcrumb.
Desktop: 40vh. Mobile: 30vh min 280px.
7

Hub Hero

Hub pages
30vh. Title + description. Optional filter bar.
Desktop: 30vh. Mobile: auto-height.
Content Blocks (14)
8

Experience Category Card

Homepage, Experiences hub
Icon/image, name, tagline, arrow. Hover: lift + shadow.
Desktop: 3-col. Mobile: 2-col or scroll.
9

Project Card

Our Work, Experience, Location
16:10 photo-dominant. Title, location, badges. Image scales on hover.
Desktop: 3-col. Tablet: 2. Mobile: 1.
10

Testimonial Card

Homepage, About, Trade, Experience
Serif italic quote. Attribution. Gradient left border. No photos.
Desktop: 8 cols. Mobile: full-width.
11

Stats Bar

Homepage, About
3-4 stats, Night bg. Serif numbers count up on scroll.
Desktop: flex row. Mobile: 2x2.
12

Process Steps

About, Trade Partners
4-step vertical timeline. Numbered circles + line. Gradient active.
Desktop: alternating. Mobile: single col.
13

Comparison Block

Trade Partners
"Typical" vs "Connesso." Alternating rows. Gradient border on Connesso col.
Desktop: side-by-side. Mobile: stacked.
14

Feature Grid

Experience category pages
Icon + title + description blocks. CMS-driven.
Desktop: 3-col. Mobile: single col.
15

Content Section

About, Trade, Experience, S&S
50/50 text + image split. Alternates direction.
Desktop: 50/50. Mobile: image top, text below.
16

Service Tier Cards

Service & Support
3 tiers: Essentials, Elevated, Complete. Elevated promoted.
Desktop: 3-col. Mobile: stacked.
17

Team Grid

About, Location pages
Photo + name + role. Optional hover bio.
Desktop: 4-col. Mobile: 2-col.
18

Location Card

Locations hub
City image, name, address, phone, visit link.
Desktop: 2-col. Mobile: full-width.
19

Blog Post Card

Blog hub, Experience (related)
Image, badge, title, excerpt, date, link.
Desktop: 3-col. Mobile: full-width.
20

Builder Benefits Grid

Trade Partners
4 blocks: timeline, satisfaction, revenue, partnership.
Desktop: 2x2. Mobile: single col.
21

CTA Banner

Multiple pages
Full-width, Night/gradient-dark bg. Headline + button.
Desktop: centered. Mobile: stacked.
Media (3)
22

Image Gallery

Project pages
Clickable grid. Lightbox modal. Masonry or uniform.
Desktop: 3-col. Mobile: 2-col.
23

Video Player

Homepage, About
Custom play button. 16:9. Poster frame.
Scales proportionally.
24

Partner Logo Strip

Homepage, Trade, About
Grayscale 60%, full color on hover.
Desktop: row. Mobile: 2-row or scroll.
Social Proof (2)
25

Testimonial Carousel

Homepage
Auto-advance 6s. Dots/arrows. Pause on hover.
Desktop: centered. Mobile: swipeable.
26

Award / Cert Badges

About, Footer
Row of certification logos (Guild, CEDIA, HTA).
Desktop: row. Mobile: wrapped grid.
Forms & CTAs (4)
27

Consultation Form

Contact
Name, Email, Phone, Project Type, Market, Timeline, Message. Toast on submit.
Desktop: beside info. Mobile: stacked.
28

Trade Partner Form

Trade Partners
Name, Company, Role, Email, Phone, Market, Message. Shorter.
Desktop: 2-col fields. Mobile: single.
29

Newsletter Signup

Footer, Blog hub
Compact inline: email + subscribe button.
Desktop: inline. Mobile: stacked.
30

Sticky CTA Button

All pages (mobile)
Fixed bottom bar. Appears after hero. Dismissible.
Mobile only.
Utility (8)
31

Accordion (FAQ)

Experience, S&S, Contact
Expand/collapse. Chevron rotates. One open. JSON-LD output.
Same all breakpoints.
32

Tab Group

S&S, Experience
Horizontal tabs + panels. Arrow key nav.
Desktop: tabs. Mobile: scroll or dropdown.
33

Badge / Tag

Project cards, Blog posts
Pill-shaped label. Category name.
Same all breakpoints.
34

Toast Notification

Contact, Newsletter
Auto-dismiss 5s. Success/error variants.
Desktop: bottom-center. Mobile: top-center.
35

Skeleton Loader

All CMS content
Shimmer animation. Respects prefers-reduced-motion.
Matches component.
36

Gradient Line

Multiple
3px, Active → Connect, 80px, centered.
Same all breakpoints.
37

Dark Mode Toggle

Nav bar
System pref respected. Manual override. localStorage.
Same all breakpoints.
38

Scroll-to-Top

All pages
Appears after 2 viewports. Smooth scroll.
Bottom-right corner.

Page Templates

13 templates (A–M) organized into 4 patterns:

Story Page Hub Page Detail Page Conversion Page

A. Homepage

Story
/
  1. 1
    Primary Nav Bar #1
  2. 2
    Homepage Hero #5 — Full-viewport, video/image, gradient overlay, two CTAs
  3. 3
    Brand Promise Centered text block, max-width 720px, Pillar 1 narrative
  4. 4
    Experience Category Cards #8 — "Experiences We Design", 3x2 grid
  5. 5
    Featured Project #9 expanded — Full-width image + overlay
  6. 6
    Stats Bar #11 — Years, homes, partners, satisfaction
  7. 7
    Testimonial Carousel #25 — 3 rotating, surface-3 bg
  8. 8
    Partner Logo Strip #24 — Technology partners
  9. 9
    CTA Banner #21 — "Ready to design how your home feels?"
  10. 10
    Footer #3
CTA ladder: Low (explore) → Medium (view work) → High (schedule)

B. Experiences Hub

Hub
/experiences/
  1. 1
    Primary Nav Bar
  2. 2
    Hub Hero #7 — "Experiences We Design"
  3. 3
    Experience Category Grid #8 — 6 cards, larger format, hero images
  4. 4
    "How We Work" Teaser #15 — Text + image, links to About
  5. 5
    CTA Banner #21
  6. 6
    Footer
Shared pattern with Locations Hub, Our Work Hub

C. Experience Category

Detail
/experiences/{category-slug}/
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero #6 — Category image, name, tagline, breadcrumb
  3. 3
    Overview Section #15 — Homeowner perspective, text + image
  4. 4
    Feature Grid #14 — 6-8 features, icon + title + desc
  5. 5
    Related Projects #9 — 3 cards filtered by category
  6. 6
    FAQ Accordion #31 — 4-6 Qs, JSON-LD schema
  7. 7
    CTA Banner #21 — "Imagine this in your home."
  8. 8
    Footer
SEO: Title = "Light & Shade | Luxury Lighting Automation | Connesso"

D. Our Work Hub

Hub
/our-work/
  1. 1
    Primary Nav Bar
  2. 2
    Hub Hero #7 — "Homes designed to be felt, not just seen."
  3. 3
    Filter Bar Pill tabs: All + 6 categories + location filter
  4. 4
    Project Grid #9 — 3-col, filterable, load more / infinite scroll
  5. 5
    CTA Banner #21
  6. 6
    Footer
Shared pattern with Experiences Hub, Locations Hub

E. Individual Project

Detail
/our-work/{project-slug}/
  1. 1
    Primary Nav Bar
  2. 2
    Project Hero Full-width image, title + location overlay
  3. 3
    Project Meta Bar Location, builder, architect, sq ft, badges
  4. 4
    Project Description 2-4 paragraph narrative (experience, not tech)
  5. 5
    Image Gallery #22 — Masonry grid, lightbox
  6. 6
    Featured Experiences Callouts linking to category pages
  7. 7
    Testimonial #10
  8. 8
    Related Projects #9 — 3 cards: "More of Our Work"
  9. 9
    CTA Banner #21
  10. 10
    Footer
Unique template. Emphasis on experience created, not technology installed.

F. About

Story
/about/
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero #6 — "Designed to Disappear. Built to Last."
  3. 3
    Brand Story #15 — Who we are, what we believe
  4. 4
    Process Steps #12 — Discover, Design, Build, Support
  5. 5
    Team Grid #17 — Leadership first, then full team
  6. 6
    Stats Bar #11
  7. 7
    Award / Cert Badges #26
  8. 8
    CTA Banner #21
  9. 9
    Footer
Unique template. Multiple narrative sections.

G. Trade Partners

Conversion
/trade-partners/ — GROWTH-CRITICAL
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero #6 — "At the Table From Day One"
  3. 3
    Value Proposition #15 — Builder pain points & answers
  4. 4
    Builder Benefits Grid #20 — Timeline, Experience, Revenue, Partnership
  5. 5
    Comparison Block #13 — Typical vs Connesso Approach
  6. 6
    Partner Process Steps #12 — 5-step partner process
  7. 7
    Trade Testimonials #10 — Builder & architect quotes
  8. 8
    Featured Builder Projects #9 — 3 cards
  9. 9
    Partner Logo Strip #24 — Builder logos
  10. 10
    Trade Partner Form #28 — Inline, "Start a Partnership"
  11. 11
    Footer
Most important growth page. Every builder partnership = multiple homeowner projects.

H. Locations Hub

Hub
/locations/
  1. 1
    Primary Nav Bar
  2. 2
    Hub Hero #7 — "Where We Work"
  3. 3
    Location Cards #18 — One per market
  4. 4
    CTA Banner #21
  5. 5
    Footer
Shared pattern with Experiences Hub, Our Work Hub

I. Individual Location

Detail
/locations/{city-slug}/
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero #6 — City image, address, phone, hours
  3. 3
    Local Market Description Neighborhoods, communities, builder relationships
  4. 4
    Local Team #17
  5. 5
    Local Projects #9 — Tagged to location
  6. 6
    Builder Partners Text or logo strip
  7. 7
    Service Area Map Google Map embed or static
  8. 8
    Contact Info + CTA
  9. 9
    Footer
Critical for local SEO. Local business schema markup.

J. Service & Support

Conversion
/service-and-support/
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero #6 — "Partner, Not Installer"
  3. 3
    Support Philosophy #15 — Ongoing relationship, not transactional
  4. 4
    Service Tier Cards #16 — Essentials, Elevated (promoted), Complete
  5. 5
    FAQ Accordion #31
  6. 6
    CTA Banner #21
  7. 7
    Footer
Unique template. Three tiers from messaging framework.

K. Contact / Consultation

Conversion
/contact/
  1. 1
    Primary Nav Bar
  2. 2
    Page Hero (short) #6 — "Let's Start a Conversation"
  3. 3
    Two-Column: Form + Info #27 left, contact info right
  4. 4
    FAQ Accordion #31 — "What does a consultation cost?" etc.
  5. 5
    Footer
Highest-intent page. Form + first field above fold on mobile.

L. Blog Hub

Phase 2
/blog/
  1. 1
    Nav → Hub Hero → Category Filters → Post Grid → Newsletter → Footer
Phase 2. Hub pattern with featured post spanning 2 columns.

M. Individual Blog Post

Phase 2
/blog/{post-slug}/
  1. 1
    Nav → Post Header → Hero Image → Body (720px) → Related → Author Bio → CTA → Footer
Phase 2. Max-width 720px body for readability.

Phase Plan

MVP
Phase 2
Scale
23-25
MVP Pages
38
Components
8
Content Types
13
Templates

MVP

  • Homepage
  • 6 Experience pages + hub
  • Our Work hub + 3-5 projects
  • About
  • Trade Partners
  • 2 Location pages + hub
  • Service & Support
  • Contact
  • Privacy, Terms

Goal: Launch. Establish brand. Capture leads.

Phase 2

  • Blog hub
  • 6-8 initial blog posts
  • Careers page

Goal: SEO engine. Thought leadership. Recruiting.

Scale

  • Additional locations
  • Additional projects
  • Curated experience packages

Goal: Market expansion. No architecture changes.

Awaiting Part 2

This document covers site map, user flows, content model, component inventory, and page templates. Part 2 will cover: framework selection, hosting, CMS, build tooling, performance targets, SEO implementation, analytics, and deployment pipeline.