# 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"