Case Study — AI Product Design

Turn a Conversation
Into a Personalized Proposal.
In 3 Minutes.

How Evan's List built a zero-backend AI Readiness Scorecard and dynamic proposal engine — 21 questions, an industry-benchmarked score, and a fully customized proposal. No server. No database. 100% client-side.

21
Questions
13
Dept. Roles
100
Point Score
0
Backend Servers

Before & After

Writing AI proposals manually is slow, inconsistent, and doesn't scale.

Before

  • Hours spent writing each proposal manually
  • Generic decks that don't match the prospect's role or situation
  • No way to benchmark readiness against peer companies
  • Pricing recalculated by hand every engagement
  • No shareable link — proposals die in email attachments
  • Follow-up required to deliver proposal after the call
  • Compliance and on-prem requirements often missed

After Evan's List

  • Prospect completes intake in under 3 minutes
  • Score + proposal generated instantly, role and industry-specific
  • AI Readiness Score benchmarked against 13 industries
  • Pricing calculated automatically with compliance multipliers
  • Shareable URL — each proposal is a unique, bookmarkable link
  • Email delivered automatically via EmailJS at form completion
  • Hardware sizing, on-prem GPU tiers, and compliance flags built in

AI Readiness Scorecard

Prospects receive a benchmarked 0–100 score before seeing any proposal — making the tool value-first.

68
/ 100
⚡ Getting There
Industry benchmark: Tech avg. 62  ·  Your score is above average
🧠 AI Experience
18 / 25
🏗️ Infrastructure
17 / 25
🏢 Org Readiness
15 / 25
🎯 Use Case Clarity
18 / 25

Zero-Backend, Full Dynamic

The entire system runs client-side. URL parameters carry state. PII never touches a URL.

Intake Form 21 Adaptive Qs
🧠
Scoring Engine 4 Categories
📊
Scorecard 0–100 + Bench
📋
Proposal URL URL Params Only
🏗️
Proposal Engine JSON + JS Class
✉️
Auto Email EmailJS

4 Interconnected Systems

Every component is live, deployed to Cloudflare Pages, and production-hardened.

Adaptive Intake Questionnaire

21-question guided flow with conditional branching. Q6 (sub-industry) only appears when drill-down data exists. Q15 (cloud provider) only when cloud-specific data location is selected. Every question's text adapts to previous answers — company name, team size, department all flow through.

21Questions
3Conditional Branches
8Departments
📊

AI Readiness Scoring Engine

Animated 0–100 score displayed before any proposal. Four weighted categories: AI Experience, Infrastructure Readiness, Org Readiness, and Use Case Clarity. Industry benchmarks for 13 verticals. Score flows into the proposal as a URL parameter, displayed as a badge with tier label and color.

4Categories
13Industry Benchmarks
4Score Tiers
🏗️

Dynamic Proposal Generator

ProposalGenerator JS class populates every section from 13 role-specific JSON files. ROI calculator projects hours saved × team size × hourly rate. Compliance multipliers (1.3× single, 1.5× multi-framework). Timeline premiums (1.5× ASAP). Volume-tiered infrastructure pricing with GPU hardware sizing for on-prem deployments.

13Role JSON Files
$150/hrPricing Engine
3GPU Tiers
✉️

Automated Email Delivery

At form completion, EmailJS fires two emails simultaneously: a branded AI Readiness insight email to the prospect (no identity parroting — score insight and gap analysis only), and a full context brief to Evan with identity, score, role, budget, timeline, and decision authority. PDF and email preview pages included.

2Auto Emails
0Manual Steps
PII-safeURL Design
🔒

Security Architecture

OWASP-aligned implementation: PII stored in sessionStorage (same-origin, tab-scoped, never in URLs). Cloudflare Pages _headers enforce CSP, X-Frame-Options DENY, X-XSS-Protection, nosniff, and strict Referrer-Policy. Tailwind CDN pinned to exact version. No console logging in production. Camera, mic, and geolocation disabled via Permissions-Policy.

0PII in URLs
OWASPAligned
CSPEnforced
🎨

Pilot Pricing & Share Flow

For teams >5, a Phase 1 (5-user pilot) vs Phase 2 (full rollout) pricing comparison is shown side-by-side. Share button adapts to the prospect's existing tools — Gmail, Outlook+Teams, Slack, or generic copy-link. Budget mismatch notice warns when the selected budget won't cover the estimate.

2-PhasePilot Pricing
4Share Modes
LiveBudget Check

System Scale

21
Intake Questions
With adaptive branching
📁
13
Role JSON Configs
Executive to Legal
🏭
13
Industry Benchmarks
Tech: 62 · Construction: 25
🧮
~1,350
Lines — Proposal JS
ProposalGenerator class
🖥️
0
Backend Servers
100% client-side + Cloudflare
📄
6
HTML Entry Points
Intake, proposal, PDF, email, dept, demo
🔒
0
PII in URLs
sessionStorage only
<3 min
Intake to Proposal
No manual follow-up needed

Build Timeline

Click any item for details.

Phase 1 — Intake & Scoring

21-Question Adaptive Questionnaire

Built the full intake flow with conditional branching, adaptive text, progress bar animations, and a complete scoring rubric across 4 categories.

Vanilla JS Tailwind CSS Scoring Logic
Click for details
Key decisions:
  • Zero framework dependency — pure vanilla JS for speed and zero build step
  • Intake question data externalized to intake-config.js — swappable without touching UI logic
  • Adaptive question text pulls in company name, team size, and department dynamically
  • painPointOverrides allow industry + sub-industry to override default department pain points
  • Score formula documented and testable — each category has max 25 points with defined inputs
  • Animated score counter (easeOutExpo curve) displays before redirect — creates moment of value
Phase 2 — Proposal Engine

🏗️ ProposalGenerator Class + 13 Role Configs

Built the full proposal.js ProposalGenerator class that hydrates every section of proposal.html from URL params and role JSON files — with pricing, ROI, hardware, and pilot calculations.

JavaScript Class JSON Data Layer Pricing Engine
Click for details
Architecture decisions:
  • All pricing logic centralized in pricing.js IIFE — single source of truth consumed by 3 pages
  • URL param guard on proposal.html — redirects to / if required params are missing
  • departmentMap keys are consistent across all 13 role JSON files — no runtime surprises
  • Volume tiering (1–50 users: 100%, 51–200: 50%, 201+: 25%) prevents linear cost explosion
  • Hardware sizing calculated from concurrent users = max(2, ceil(team × 0.3))
  • Infrastructure configs (AWS/Azure/GCP/on-prem) stored in infrastructure.json — not hardcoded
Phase 3 — Security & Delivery

🔒 Security Hardening + Email Automation

Implemented OWASP-aligned PII handling, Cloudflare security headers, EmailJS dual-email flow, and PDF/email preview pages.

OWASP Cloudflare Headers EmailJS
Click for details
Security decisions:
  • Contact data (name, email, phone) stored in sessionStorage — same-origin, tab-scoped, cleared on close
  • URL params carry only non-PII state — company name and role details only, no contact info
  • Cloudflare _headers: CSP, X-Frame-Options DENY, X-Content-Type-Options nosniff, Permissions-Policy
  • Tailwind pinned to cdn.tailwindcss.com/3.4.17 — no unpinned "latest" reference
  • No console.log/warn/error in production code — prevents data leakage
  • Prospect email shows readiness insight only — no "here's what you told us" parroting that exposes PII
Phase 4 — Deployment

☁️ Cloudflare Pages + Custom Domain

Deployed to Cloudflare Pages with custom domain, wrangler CLI, and zero build step — static files served at the edge globally.

Cloudflare Pages Custom Domain Edge CDN
Click for details
Deployment details:
  • Live at: aiscorecard.evanslist.tech
  • wrangler pages deploy — zero build command, output directory is /
  • All security headers applied globally via _headers file (no per-page config needed)
  • Google Calendar scheduling link embedded in CTA — direct booking, no intermediary form
  • flow-demo.html provides a full walkthrough of all proposal variants for demos

Tech Stack

🌐 Vanilla JavaScript (ES6+) 🎨 Tailwind CSS (CDN pinned) 📄 HTML5 / CSS3 📁 JSON Data Layer (13 role files) ✉️ EmailJS ☁️ Cloudflare Pages 🔐 sessionStorage (PII isolation) 🔒 Cloudflare _headers (CSP / OWASP) ⚙️ Wrangler CLI 📊 URL Parameter State Management 🧠 GitHub Copilot (Claude Sonnet 4.6) 💻 VS Code

The scorecard inverts the traditional sales dynamic — instead of asking a prospect to sit through a pitch, you hand them something valuable first. A benchmarked score with a gap analysis earns the right to show a proposal.

— The Evan's List Approach

Want this for your consulting practice?

Evan's List builds AI tools that work in production — scored, shareable, and secure.