E-Mail-Webseite-Marketing/SHAPE_BRIEF.md

Impeccable Shape Brief: Bay Area Email Services Landing Page

Visual Probe

1. Feature Summary

This is a dedicated marketing landing page for Bay Area Email Services, a managed business email hosting offer for small businesses in Corpus Christi and the Coastal Bend.

The page must sell professional domain email by making the infrastructure visible, the local support credible, and the price easy to understand. It should feel like a local managed email platform operated by serious IT people, not a generic SaaS landing page.

2. Primary User Action

The primary action is to book a 20-minute email assessment.

The secondary action is to call (361) 765-8400. Pricing, DNS, migration, and infrastructure content should all support one decision: "This team can assess and fix our business email setup."

3. Design Direction

Color strategy: Committed.

The page is mostly carried by a dark operational navy environment, with electric-but-restrained blue for action and connection lines, green for operational status, and off-white for copy. This color system is load-bearing and should not be softened into a generic light SaaS page.

Theme scene sentence: A small business owner or office manager reviews email risk and pricing on a desktop during work hours while a local IT team monitors the mail platform in the background, so the interface should feel like a readable operations console rather than a decorative marketing page.

Anchor references:

• AWS architecture diagrams, for serious mail-flow explanation.
• Stripe-style product clarity, for pricing and conversion discipline.
• Linear-style operational polish, for dark UI precision and status feedback.

Winning visual probe: selected dark infrastructure-led direction. The final brief carries forward the large architecture panel, system status strip, compact lower modules, and local support proof band.

4. Scope

Fidelity: production-ready visual plan.

Breadth: full landing page, with extra emphasis on the first viewport and first scroll.

Interactivity: static marketing page with interactive-feeling components. Accordions, hover states, CTA feedback, table hover states, and status/tooltips can be implemented later, but the core experience should not depend on heavy interactivity.

Time intent: polish until it can be built as the first real version of the page.

5. Layout Strategy

The first viewport should be a dense dashboard-like marketing composition:

• Top nav with logo, core anchors, phone CTA, and assessment CTA.
• Left hero column with H1, short subcopy, trust bullets, CTA, and phone.
• Right hero column dominated by a mail-flow architecture panel.
• Status strip inside the architecture panel to make reliability legible.
• First-scroll module row: DNS Authentication, Migration Process, Pricing, Compare Plans.
• Local support proof strip below those modules.

The rest of the page should open up slightly after the dense hero:

1. Problem and buyer pain: free Gmail/Yahoo, spam-folder issues, shared-hosting mail, support queues.
2. What is included: 25 GB mailboxes, domain email, Outlook, iPhone/iPad setup, migration, aliases, forwards, shared inboxes, auto-replies.
3. Deliverability section: SPF, DKIM, DMARC explained in plain English.
4. Reliability section: AWS, Amazon S3 buffering, Amazon SES outbound, standby failover.
5. Migration section: assessment, DNS plan, mailbox creation, migration window, device setup, go-live check.
6. Pricing and caveats: $5 per inbox per month, 25 GB included, setup/migration/support terms clearly scoped.
7. Comparison: Google Workspace, Microsoft 365, shared hosting, Bay Area Email Services by fit.
8. Local trust: Corpus Christi, Coastal Bend, 30+ years IT experience, 30+ local businesses if confirmed.
9. FAQ and final CTA.

6. Key States

Default: The page loads into the full dark infrastructure hero. User immediately sees service, location, CTA, price, phone, and operational proof.

Mobile: Hero copy appears first, CTAs become full-width or stacked, architecture diagram converts into vertical flow cards, comparison table becomes horizontally scrollable or turns into grouped rows.

Loading: Avoid skeleton noise. If implemented as a static landing page, load primary copy and CTA first, then animate diagram lines/status labels with reduced-motion fallback.

Error: Contact form errors should be inline and plain-English. Do not use modals. Phone CTA remains available if form submission fails.

Success: After assessment request, show a concise confirmation inline: "Thanks. We’ll review your mailbox count and current provider before we reply." Keep phone CTA visible.

Reduced motion: Disable animated connector-line tracing and section reveal motion. Keep status and flow readable without animation.

Long content: FAQ, pricing caveats, and comparison copy must wrap cleanly without overflowing cards or buttons.

7. Interaction Model

Primary CTA buttons scroll or route to the assessment/contact form.

Phone CTAs use tel:+13617658400.

Navigation anchors scroll to Infrastructure, Pricing, Migration, FAQ, and Contact sections.

Architecture panel can have subtle hover tooltips or captions for Amazon S3 buffering, Amazon SES outbound, SPF, DKIM, DMARC, and standby failover. These explanations must also exist as visible text elsewhere for accessibility.

FAQ uses inline accordions. Only one answer may open at a time on mobile to preserve page length.

Comparison table should be readable without interaction on desktop. On mobile, use stacked comparison rows rather than a cramped table if needed.

8. Content Requirements

Hero:

• H1: "Business Email Hosting in Corpus Christi"
• Subcopy: "Infrastructure and support from a local team that understands how business gets done."
• Bullets:
  • "AWS-built architecture"
  • "Configured to improve deliverability"
  • "Real people. Local support."
• Primary CTA: "Book a 20-minute email assessment"
• Secondary CTA: "Call (361) 765-8400"

Architecture labels:

• Inbound Email
• Buffer & Process
• Mailbox Delivery
• Outbound Email
• Standby Environment
• Amazon S3 buffering
• Amazon SES outbound
• Virus & Malware Scanning
• Policy & Content Filtering
• Message Validation
• Logging & Monitoring

Status strip:

• System Status
• All Systems Operational
• Inbound Operational
• Delivery Operational
• Outbound Operational
• View status

Module copy:

• DNS Authentication: "We configure and validate the records that help protect your domain."
• Migration Process: Discover, Plan, Migrate, Validate.
• Pricing: "$5 / inbox / month", "25 GB mailbox included."
• Compare Plans: Business email, Custom domain, AWS infrastructure, Local support, Transparent pricing.

Claim-safe language:

• Use "configured to improve deliverability."
• Use "helps reduce spam-folder risk."
• Use "designed for continuity."
• Use "standby failover."
• Use "built on AWS services including Amazon S3 and Amazon SES."

Avoid:

• "Guaranteed inbox placement"
• "Zero downtime"
• "Spam-proof"
• "Hack-proof"
• "No email ever lost"

9. Recommended References

• reference/brand.md, for the landing page register and visual ambition.
• reference/layout.md, for dense first-viewport hierarchy and responsive rhythm.
• reference/typeset.md, for strong dark-surface typography.
• reference/clarify.md, for plain-English technical copy.
• reference/adapt.md, for mobile conversion and diagram simplification.
• reference/harden.md, before shipping, for edge cases, accessibility, long text, and form states.

10. Open Questions

• Confirm whether $5 / inbox / month is final and whether minimums, taxes, setup, migration, or support fees apply.
• Confirm whether the site should use an assessment form, a booking link, a contact form, or all three.
• Confirm exact support hours before using "responsive during business hours."
• Confirm whether "30+ local businesses supported" and "30+ years IT experience" can be used on the final page.
• Confirm whether there is a real status page. If not, "View status" should either be removed or replaced with "How continuity works."
• Confirm whether the final build lives inside the existing Bay Area IT site, a subdomain, or a standalone domain.