--- title: SBS Website Information Architecture & UX type: article created: '2026-04-05' updated: '2026-04-05' source_docs: - raw/2025-11-17-in-person-sbswi-at-asymmetric-102149412.md tags: - sbswi - information-architecture - ux - website - wordpress - lead-gen - case-studies - seo layer: 2 client_source: null industry_context: null transferable: true --- # SBS Website Information Architecture & UX Decisions and design direction from the SBSWI website redesign kickoff. This article captures the agreed information architecture, page structure, UX patterns, and content modules for the rebuilt WordPress site targeting a mid-February launch. See also: [[clients/sbswi/_index]] | [[meetings/2025-11-17-sbswi-website-redesign-kickoff]] --- ## Navigation Structure ### Services Dropdown The current flat "Services" nav item will be converted to a **dropdown menu** listing top-level service categories. Agreed items: - Commercial Roofing - Roof Inspection *(free — surface this prominently)* - Roof Repair - Maintenance - Roof Restoration / Coatings - Metal Roofing **Rationale:** The existing nav buries services behind a single click to a flat page. A dropdown surfaces options immediately and supports SEO by creating clear topical hierarchy. ### Footer Cleanup - Move **Terms & Conditions** from primary nav to footer - Add **Privacy Policy** and any additional legal pages to footer as needed - Retain/expand legal content — do not remove --- ## Homepage Modules The homepage is the design anchor. All subpages will inherit the visual system established here. ### Hero - **Video hero** — drone footage, optimized loop (not autoplay full video) - Primary value proposition headline foregrounding the restoration-first philosophy - **Primary CTA:** Form (see Contact section below) - **Secondary CTA:** Phone call ### Value Proposition Block Lead with the restoration-first message: SBSWI's first inclination is to extend roof life — repair, coat, restore — rather than default to tear-off. This is the core differentiator vs. large commercial competitors. Supporting proof points to weave in: - Manufacturer-backed labor warranties (IKO and others inspect and warrant SBSWI's labor + materials — not just contractor self-warranty) - NRCA membership - Decade in business ### Services Overview Thumbnail/card grid linking to individual service pages. Mirrors the dropdown structure. ### Social Proof - **Manufacturer/affiliation badge strip:** NRCA logo (provided), IKO, IAAP, Progressive, others — gather full set with linkbacks for mutual SEO benefit - **Reviews:** Surface prominently on desktop *and* mobile (current floating icon treatment needs replacement — see Mobile section) ### Sustainability Counter An animated counter showing **cumulative square feet of roofing material saved from landfill** across all projects. This metric should also appear per-case-study. Reinforces the restoration-first brand story with a tangible, shareable number. ### St. Jude / Values Block Brief callout to charitable giving (St. Jude) and company values. Currently absent or buried — should appear on homepage and About page. --- ## Case Studies ### Problem Existing case studies are inconsistent: some have imagery and iconography, others are text-only. This undermines credibility and makes the portfolio feel unfinished. ### Normalized Template Every case study should include a standardized set of fields: | Field | Notes | |---|---| | Project title | | | Location | City/region | | Roof system type | e.g., Single-ply, Metal, Coating | | Challenge / condition | What was wrong | | Solution | What SBSWI did | | Outcome metrics | Including **sq ft saved from landfill** where applicable | | Date completed | | | Photography | Consistent before/after or hero image | | Icons | Consistent iconography set across all entries | ### Filtering Add filter controls to the case study index by category: - Agriculture - Metal - Restoration - Single-ply - Sustainability - *(expand as needed)* ### Seeding Launch with **top 20 case studies** selected by SBSWI (Brandon). Expand post-launch. SBSWI to deliver titles, summaries, metrics, dates, location, system type, and photos by the Dec 8 review meeting. --- ## Contact & Lead Capture ### Consolidation **Merge the separate "Contact" and "Request Estimate" pages into a single destination.** Reduces friction and eliminates confusion about which form to use. ### Form Design - **Route to:** `info@sbswi.com` (team-wide visibility) - Internal CC list to be confirmed by Brandon - Fields: name, company, property address, service interest, message - Keep fields minimal — lower friction = higher conversion ### Appointment Request Module Rather than live calendar booking (which requires rigorous calendar hygiene the team doesn't currently maintain), implement a **lightweight appointment request widget**: - Customer selects **3 preferred dates** - Customer selects **AM or PM** window for each - Submission routes to `info@sbswi.com` — team confirms manually This was explicitly preferred over real-time scheduling tools. Decision to be confirmed by Brandon before build. > **Open decision:** AM/PM window widget vs. live calendar integration. Brandon to decide before build begins. --- ## Mobile UX - Reviews must remain prominent on mobile — current floating icon treatment is inadequate - Asymmetric to audit current mobile layout and propose replacement pattern - Form and appointment widget must be fully functional on mobile - Fast load is a hard requirement (conversion-readiness depends on it) --- ## URL Structure & Redirects ### Preserve Existing URLs SBSWI uses **QR codes in the field** (on job sites, materials, etc.) that point to specific URLs. These must not break at launch. - Inventory all QR code endpoints before migration - Map all existing URLs to new equivalents - Implement 301 redirects for any changed slugs - Preserve URL structure wherever possible to protect both QR codes and existing SEO equity ### DNS & Email Deliverability Current DNS is at SiteGround (registrar stays there). Post-migration, Asymmetric manages DNS. Known issue: CenterPoint Connect email links/deliverability are broken due to missing DNS records. Resolve at cutover: - SPF - DKIM - DMARC - Required CNAMEs Asymmetric to prepare full DNS/email deliverability plan before cutover. SiteGround credentials to come from Megan. --- ## Content & Assets Checklist | Asset | Owner | Status | |---|---|---| | Brand guidelines (colors, fonts) | Brandon | Needed by Dec 1 | | NRCA logo | Brandon | ✅ Provided | | IKO, IAAP, Progressive, other affiliation logos | Brandon | Needed by Dec 1 | | Drone video footage | Brandon | Needed by Dec 1 (Drive or WeTransfer) | | Project photography | Brandon | Needed by Dec 1 | | Top 20 case studies (full data) | Brandon | Needed by Dec 8 | | QR code URL inventory | Brandon | Needed before build | | SiteGround login | Megan | Needed by Dec 1 | | Hibu admin access | Brandon | Needed by Dec 1 | Stock photography will be used as placeholders during design/build. A targeted photoshoot (staged OK) is planned post-launch or during build as schedule allows. --- ## Related - [[clients/sbswi/_index]] - [[meetings/2025-11-17-sbswi-website-redesign-kickoff]] - [[knowledge/website/sbs-messaging-pillars]] - [[knowledge/website/sbs-personas]] - [[knowledge/website/sbs-seo-blog-strategy]]