{
  "client": "H Grant Designs",
  "url": "https://hgrantdesigns.com",
  "generated": "2026-04-25",
  "summary": "Three concept directions for H Grant Designs. Each pairs a structurally distinct homepage wireframe with a visually distinct mockup tailored to that wireframe's narrative bet.",
  "concepts": [
    {
      "id": 1,
      "slug": "concept-1-work-led",
      "name": "Studio of One — Work-Led",
      "wireframe": {
        "structure": "Portfolio-first agency homepage. Work speaks first; services and trust-building follow.",
        "section_order": [
          "Header (logo + 4 nav + 'Start a Project' CTA)",
          "Hero — full-bleed image-first (component 2c) with featured project image up top, large display headline below",
          "Featured work gallery — 6 case study tiles in a 3-col grid with project numbering",
          "Capabilities — 4-col compact services grid with rule-line dividers",
          "Large quote / callout — single bold standalone statement",
          "About teaser — 50/50 split with text + 12-year stat + image",
          "CTA banner — 'Have a project in mind?'",
          "Footer — 4-col with studio links, services, areas served"
        ],
        "best_for": "Clients who evaluate creative output by what an agency has shipped. The work has to do the convincing."
      },
      "mockup": {
        "direction": "Editorial Modern Studio",
        "palette": "Bone cream (#f1ece2) base, near-black ink (#1a1a17), single terracotta accent (#c2410c)",
        "typography": "Fraunces serif for display (italic phrase swaps), Inter for body. Editorial magazine feel.",
        "layout_system": "Asymmetric editorial grids, rule-line section breaks, large project numbering, generous whitespace",
        "motion": "Subtle scroll reveals, cursor-tracked CTA glow, image scale-on-hover, animated 'open for projects' pulse",
        "vibe": "A trustworthy studio of one. Restrained. The kind of design that lets the work breathe."
      },
      "files": {
        "wireframe": "concept-1-work-led/wireframe.html",
        "mockup": "concept-1-work-led/mockup.html"
      }
    },
    {
      "id": 2,
      "slug": "concept-2-storybrand",
      "name": "The Plan — StoryBrand Narrative",
      "wireframe": {
        "structure": "Customer-as-hero, brand-as-guide. Donald Miller's SB7 framework: clarify the problem, raise stakes, present authority + empathy, give a 3-step plan, paint the success picture, single CTA.",
        "section_order": [
          "Header (logo + 3 nav + single 'Schedule a Call' CTA — no dropdowns)",
          "Hero — split layout, problem named directly in headline, single primary CTA",
          "Stakes — 3 bordered cards naming what's at stake if they don't fix it",
          "Authority + Empathy — 50/50 split with image + 'we've helped 100+ NJ businesses' copy + trust tags",
          "The Plan — 3 numbered steps (Audit → Build → Grow) on a connecting rail",
          "Value Prop — 3 bordered cards mirroring the stakes, painting the after-state",
          "Single testimonial — Linda Marchetti, Glen Rock bookkeeper",
          "CTA banner — 'Schedule your free 30-minute call'",
          "Footer — 4-col with phone CTA"
        ],
        "best_for": "Clients with a clear pain point who need permission and a roadmap to act. Owner-operators with messy current sites."
      },
      "mockup": {
        "direction": "Warm Forest — Trustworthy Human",
        "palette": "Warm cream (#F7F2E8) base, deep evergreen forest (#1F3A2E) primary used for big color blocks, soft clay terracotta (#C66F4D) as warm secondary accent",
        "typography": "DM Serif Display for headlines (more rounded/friendly than Fraunces, with italic pop), Inter for body. Friendly serif-sans pairing.",
        "layout_system": "Soft rounded shapes (16-24px radii), floating cards with rotation and tactile shadows, dark forest 'The Plan' section as the visual anchor, generous spacing",
        "motion": "Photo-card with floating stat + tag overlays, animated 'open for projects' pulse, hover lift on cards, button press with 6px shadow underline",
        "vibe": "Warm, human, grounded. Feels like a trusted neighborhood partner — not flashy, not corporate. Bergen County personified."
      },
      "files": {
        "wireframe": "concept-2-storybrand/wireframe.html",
        "mockup": "concept-2-storybrand/mockup.html"
      }
    },
    {
      "id": 3,
      "slug": "concept-3-conversion-funnel",
      "name": "Free Audit — Conversion Funnel",
      "wireframe": {
        "structure": "Lead-gen-first landing page. Capture intent immediately, prove credibility with stats and logos, explain what's in the offer, show pricing transparently, answer objections with FAQ, repeat the form.",
        "section_order": [
          "Minimal header (logo + phone CTA only — no nav distractions)",
          "Hero with embedded form — 'Get Your Free Audit' headline + 4-field form on the right + 4 bullet outcomes on the left",
          "Stats row — 4 metrics (12 years, 200+ sites, 98% retention, 48h turnaround)",
          "Logo bar — 5 partner / chamber logos",
          "Features grid — 4 cards detailing what's in the audit (Speed / SEO / Conversion / Security)",
          "Process steps — 4 numbered steps from form to fix",
          "Pricing tiers — 3 cards (Care $199, Grow $599 featured, Scale $1,499)",
          "Testimonials grid — 3 NJ business owner cards",
          "FAQ — 5 common questions about the free audit",
          "Final CTA with form repeat — text on left + form card on right",
          "Minimal footer — single row, contact info"
        ],
        "best_for": "Clients ready to evaluate pricing and pull the trigger. Cold traffic from paid ads, local search, and chamber referrals."
      },
      "mockup": {
        "direction": "Modern SaaS — Conversion-Optimized",
        "palette": "Pure white base, near-black text (#09090B), electric blue (#2563EB) primary CTA color with teal (#0891B2) gradient pairings, signal green (#10B981) for checkmarks, dark night sections (#0A0A0F) for testimonials",
        "typography": "Inter throughout. Tight letter-spacing on display sizes, gradient text accents on key phrases.",
        "layout_system": "Crisp grid with subtle background grid pattern in hero, glassmorphic form card with gradient border glow, featured pricing card scaled-up with brand-color border, dark testimonials section with backdrop-blur cards",
        "motion": "Form-input focus rings with brand glow, hover-lift on feature/pricing cards, dotted process rail, scroll-reveals on every section, animated phone-pill 'live' dot",
        "vibe": "Linear/Vercel/Cal.com era SaaS — credible, conversion-optimized, every section drives toward the form. The kind of page that closes leads."
      },
      "files": {
        "wireframe": "concept-3-conversion-funnel/wireframe.html",
        "mockup": "concept-3-conversion-funnel/mockup.html"
      }
    }
  ],
  "differentiation_strategy": "Concepts diverge on TWO axes simultaneously: structural (different section recipes serving different audiences) AND visual (different palettes, typefaces, and design eras). No two concepts share both a structure and a vibe — they're meant to elicit clearly different reactions from the agency owner."
}