App Pages Overhaul + Growth Intelligence Analytics — Design Document

Date: 2026-03-09 Approach: Design System First — define shared components, then apply to account, analytics, and consistency pass.

1. New Design System Components

Stat Card v2 (.stat-card-v2)

Anatomy: Label → Value → Delta → Sparkline (research-backed from Stripe, Linear, Plausible).

• Glass-card base with subtle hover lift
• Label: small, muted text (0.75rem)
• Value: large bold number (1.5rem+)
• Delta: green ▲ for positive, red ▼ for negative, muted for neutral. Includes percentage + “vs last {period}”
• Sparkline: SVG <polyline> (7 data points), accent color stroke, 80px wide × 24px tall
• Responsive grid: 4-col desktop, 2-col tablet, 2-col compact mobile

Section Header v2 (.section-header-v2)

Every content section gets: heading + description + optional action button, with a bottom border separator.

Status Badge (.status-badge)

Consistent pill badges with colored dot indicators:

• .status-active — green dot + “Active”
• .status-trialing — blue dot + “Trial”
• .status-past-due — orange dot + “Past Due”
• .status-canceled — red dot + “Canceled”
• .status-verified — green dot + “Verified”
• .status-pending — yellow dot + “Pending”

Action Empty State

When a section has no data: icon + heading + description + CTA buttons. Replaces dead-end “No data” text with actionable next steps.

2. Account Page Redesign

Layout: Stacked Full-Width Sections

Move from 2-column card grid to single-column stacked sections (Stripe settings pattern). Each section is a glass-card with section-header-v2.

Sections (top to bottom):

1. Subscription — Plan name, status badge, next billing date, amount, plan features checklist, Manage Billing / Change Plan buttons
2. Payment Method — Card icon + last 4 digits + expiry, Update Payment button (hidden-until-js, loaded from billing info API)
3. Billing History — Table of recent invoices with date, description, amount, paid/unpaid status badge, View link (hidden-until-js)
4. Account Balance — Current balance amount, transaction history (hidden-until-js, only if balance exists)
5. Profile — Email with verification status badge, Resend Verification button
6. API Key — Masked key with Copy button, Regenerate with warning text, link to API docs
7. Security — Change password form (current, new, confirm), Update Password button
8. Danger Zone — Red-tinted border, Log Out + Delete Account buttons

Backend Changes: None

All data already available from existing endpoints (/auth/me, /billing/info).

3. Analytics Growth Intelligence

New Backend: Expand Breakdown Endpoint

Add to handleGetBreakdown response:

• signup_by_day_hour: 7×24 array (168 values) — day-of-week × hour-of-day signup counts
• signup_by_day_of_week: 7-value array — total signups per day of week
• daily_averages: object with average, best_day_name, best_day_avg, worst_day_name, worst_day_avg, peak_hour

Implementation: ~20 additional lines in the existing pagination loop.

New Frontend Sections (added to analytics.js + analytics.html):

Section A: Signup Velocity Panel (full-width, after KPIs)

• Daily average signup rate with delta vs previous period
• Best day / worst day / peak hour callouts
• 7-day rolling average line chart (CSS bars reused from existing pattern, or SVG polyline)
• Actionable suggestion: “Schedule blasts for {best_day} evening”

Section B: Signup Activity Heatmap (full-width)

• CSS Grid: 7 rows (Mon-Sun) × 24 columns (hours)
• Cell background intensity based on signup count (4-level opacity scale)
• Tooltip on hover shows day + hour + exact count
• Legend bar showing Low → High color gradient

Section C: Geographic Distribution + Waitlist Leaderboard (two-column)

• Left: Top timezones horizontal bars (reuse buildHorizontalBarsElement())
• Right: Waitlist leaderboard — ranked list with name, total signups, delta arrow + percentage, highlight best/worst performers

Section D: Actionable Insights Card (full-width, bottom)

• Rule-based suggestions computed client-side from aggregated data:
  • Viral rate benchmark (>20% = positive, <10% = concern)
  • Mobile device percentage (>60% = “optimize for mobile”)
  • Declining waitlists = blast email CTA
  • Best day/hour = scheduling suggestion
  • Unverified rate >30% = verification reminder suggestion
• Each insight has: icon (▲/◉/▼), text, optional CTA button

4. Consistency Pass

Dashboard

• Replace 4 static summary cards with stat-card-v2 components: Total Signups (with sparkline + delta), Today’s Signups, Viral Rate, Active Waitlists
• Plan badge becomes a subtle indicator inside the Active Waitlists card
• Add mini 7-day sparklines to individual waitlist cards

Templates Page

• Add action empty state with starter template CTAs (instead of blank “No templates”)
• Add type-specific icons on template cards (email for confirmation, gift for milestone, megaphone for blast)

Domains Page

• Replace plain text verification status with .status-badge components
• Add copy buttons on DNS record values
• Add progress indicator (“2 of 3 domains verified”)

Team Page

• Add role badges with color coding (Owner = accent, Admin = blue, Viewer = muted)
• Add “(You)” label on current user’s row
• Add pending invite status with yellow badge

5. Files Impacted

6. Design Principles Applied

1. Label → Value → Delta → Sparkline card anatomy everywhere (Stripe pattern)
2. Every metric suggests a next action — no dead-end data (PostHog pattern)
3. Progressive disclosure — KPIs → charts → breakdowns → insights (Plausible pattern)
4. Grouped sections with headings + descriptions for settings (Stripe settings pattern)
5. Status badges for all state indicators — consistent visual language
6. Action empty states — CTAs instead of “no data” messages
7. CSS-only visualizations where possible — conic-gradient donuts, grid heatmaps, SVG sparklines
8. 5-7 KPIs max at the top level to prevent cognitive overload