E-Mail-Webseite-Marketing/DESIGN.md

Bay Area Email Services Design Mockups

Purpose: visual direction probes for a dedicated marketing landing page for Bay Area Email Services, based on the current project brief, landing page plan, and research handovers.

Direction 1: Local Trust

Positioning: bright, local, service-led, and human. This direction should make the visitor feel that a real Corpus Christi IT team will handle email setup, migration, and support.

Carry forward:

• Light interface with deep navy, muted coastal blue, and small green status accents.
• Strong hero with service, location, price, and assessment CTA visible immediately.
• Local service area and phone number as trust elements, not footer afterthoughts.
• A simple dashboard-style email panel instead of generic SaaS illustration.

Direction 2: Infrastructure Credibility

Positioning: serious, technical, and resilient. This direction is strongest if the page should emphasize AWS, Amazon S3 buffering, Amazon SES, DNS authentication, and failover.

Carry forward:

• Dark hero for operational credibility, paired with lighter lower sections for readability.
• Mail-flow diagram as the main visual object: inbound, S3 buffer, mailbox delivery, outbound SES, standby failover.
• Status labels for SPF, DKIM, DMARC, and continuity.
• Careful claims like "designed for continuity" and "helps reduce spam-folder risk."

Direction 3: Product Pricing

Positioning: productized, transparent, and easy to compare. This direction makes the $5 per inbox offer the main conversion hook.

Carry forward:

• Strict grid and pricing-forward hero.
• Inclusion table instead of repeated feature cards.
• Fit-based comparison against Google Workspace, Microsoft 365, shared hosting, and Bay Area Email Services.
• Transparent caveat area for setup, migration, support scope, minimums, taxes, and add-ons.

Direction 4: Migration Onboarding

Positioning: reduces switching anxiety. This direction is best if the buyer is worried about moving email, downtime, DNS access, and device setup.

Carry forward:

• Four-step onboarding flow: assess, configure DNS, migrate mail, set up devices.
• Device visuals for Outlook, iPhone, and iPad.
• DNS audit checklist and migration checklist as conversion tools.
• CTA framed around a low-risk 20-minute assessment.

Selected Direction

The preferred direction is closest to Direction 2: Infrastructure Credibility.

Use a dark, operational, infrastructure-led landing page with a large mail-flow diagram as the main first-viewport visual. The page should feel like a local managed email platform, not a generic SaaS template.

Carry forward from the selected mockup:

• Dark navy page shell with crisp blue linework and green operational status accents.
• Large left-aligned hero: "Business Email Hosting in Corpus Christi."
• Primary CTA and phone CTA visible above the fold.
• Large technical architecture panel: inbound email, S3 buffering, mailbox delivery, outbound SES, standby failover.
• Compact lower modules for DNS authentication, migration process, pricing, and plan comparison.
• Local support proof strip at the bottom of the first landing-page section.
• Status-bar component showing inbound, delivery, and outbound as operational.

The resulting site should feel technically credible first, local and human second, and product-priced third:

• Above the fold: "Business Email Hosting in Corpus Christi", "$5 / inbox / month", "25 GB mailbox included", local phone, and assessment CTA.
• First scroll: concrete included services and migration/onboarding path.
• Middle: DNS deliverability and AWS-backed continuity explained in plain English.
• Later: pricing caveats, comparison, service area, FAQ, and final CTA.

Stitch Prompt

Create a high-fidelity responsive landing page mockup for "Bay Area Email Services", a local business email hosting service by Bay Area IT in Corpus Christi, Texas.

Design direction: Dark infrastructure-led marketing page. The page should look like a serious managed email platform operated by a local IT team. It should feel precise, technical, trustworthy, and buildable. Avoid generic SaaS gradients, glassmorphism, decorative blobs, cartoon illustrations, and over-rounded icon cards.

Visual style:

• Background: deep navy / near-black blue, not pure black.
• Surfaces: slightly lighter navy panels with thin blue-gray borders.
• Accents: electric-but-restrained blue for CTAs and connection lines, green for operational checks/status, off-white text.
• Typography: confident modern sans-serif, strong H1, compact technical labels, excellent hierarchy.
• Layout: asymmetric hero, left copy column and right large architecture diagram.
• Components should be dense, crisp, and operational, like a premium infrastructure/status dashboard.

Hero content:

• Logo: Bay Area Email Services, with a simple outlined envelope mark.
• Navigation: Services, Infrastructure, Pricing, Migration, About, Resources, Support.
• Header phone CTA: "Call (361) 765-8400".
• Header button: "Book a 20-minute email assessment".
• 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 phone CTA: "Call (361) 765-8400".

Main hero visual: Create a large architecture panel showing the email flow:

1. Inbound Email: Internet, remote mail server, other providers.
2. Buffer & Process: Amazon S3 buffering, virus and malware scanning, policy and content filtering, message validation, logging and monitoring.
3. Mailbox Delivery: mailbox delivery with laptop and phone icons.
4. Outbound Email: Amazon SES outbound to internet.
5. Standby: AWS standby environment / hot standby.

Include a bottom status strip inside the panel: "System Status", "All Systems Operational", "Inbound Operational", "Delivery Operational", "Outbound Operational", "View status".

Below hero: Create four compact modules in one row on desktop:

1. DNS Authentication: "We configure and validate the records that help protect your domain." Checklist: SPF, DKIM, DMARC.
2. Migration Process: Four steps: Discover, Plan, Migrate, Validate.
3. Pricing: "$5 / inbox / month" Includes: Business email on your domain, AWS-backed infrastructure, web/mobile/desktop access, local support from real people. Button: "Book a 20-minute email assessment".
4. Compare Plans: Table columns: Feature, BES Basic, BES Pro, Other Providers. Rows: Business email, Custom domain, AWS infrastructure, Local support, Transparent pricing.

Local support strip: Title: "Local Support. Real People." Use compact proof items:

• Local team in Corpus Christi
• U.S.-based support
• Responsive during business hours
• Small business focused
• Part of the Bay Area IT Services family

Claim safety: Do not use "guaranteed inbox placement", "zero downtime", "spam-proof", "hack-proof", or "no email ever lost". Use careful phrases like "configured to improve deliverability", "helps reduce spam-folder risk", "designed for continuity", "standby failover", and "AWS-backed infrastructure".

Responsive behavior: Desktop: dense dashboard-style hero and modules. Tablet: architecture diagram stacks below hero copy. Mobile: hero copy first, CTA buttons full width, architecture diagram simplified into vertical flow cards, lower modules stacked.

Make the output look like a polished real website mockup, not a wireframe.

Claim Rules

Use:

• "Configured to improve deliverability"
• "Helps reduce spam-folder risk"
• "Designed for continuity"
• "Standby failover"
• "Built on AWS services including Amazon S3 and Amazon SES"

Avoid:

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