tknuth/E-Mail-Webseite-Marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Timo Knuth
2026-05-28 18:49:39 +02:00
commit 75ece13f80
30 changed files with 7357 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
DESIGN.md Normal file
View File

@@ -0,0 +1,167 @@
# 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
![Local Trust](design-mockups/01-local-trust.png)
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
![Infrastructure Credibility](design-mockups/02-infrastructure-credibility.png)
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
![Product Pricing](design-mockups/03-product-pricing.png)
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
![Migration Onboarding](design-mockups/04-migration-onboarding.png)
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.
![Selected Infrastructure Shape](design-mockups/05-selected-infrastructure-shape.png)
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"