wiki/knowledge/website/sbs-information-architecture.md · 1067 words · 2026-04-05

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: [1] | [2]


Services Dropdown

The current flat "Services" nav item will be converted to a dropdown menu listing top-level service categories. Agreed items:

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.


Homepage Modules

The homepage is the design anchor. All subpages will inherit the visual system established here.

Hero

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

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:

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

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:

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


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.

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:

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.


Sources

  1. Index
  2. 2025 11 17 Sbswi Website Redesign Kickoff
  3. Sbs Messaging Pillars
  4. Sbs Personas
  5. Sbs Seo Blog Strategy