ChurchWiseAI Admin — Redesign Proposal
30,000 ft verdict
The admin is built for power users. Pastors pay $19.95/mo for a website and land in a 9-tab command center. Two parallel investigations — an internal audit (25 concrete pain points) and a benchmark of 13 top-tier admin dashboards — converged on the same three root causes:
- Too many top-level tabs (9 today, best-in-class is 3-5). A pastor can't tell which tab holds "edit my colors."
- Wizard chains silently across tabs. Save on Theology → panel closes → user is on Training tab with no context. User thinks they broke something.
- Every text form auto-saves on blur with no visible Save button. Older users don't trust what they can't confirm. Autosave without an explicit "Saved 10:43am" timestamp creates anxiety.
The fix isn't small tweaks — it's a structural reshuffle + a shorter wizard + an explicit save discipline.
Core decisions (proposal)
Decision 1 — Collapse 9 tabs into 3 top-level sections + 1 CTA
Current (9): Overview · Calls · Requests · Care · Training · Social · Website · Settings · Upgrade
Proposed:
┌─────────────────────────────────────────────────────────────────────────┐
│ ChurchWiseAI Home Inbox Website [Upgrade] │
│ ──── │
└─────────────────────────────────────────────────────────────────────────┘
- Home = setup checklist rail + activity summary + share links (merged: today's Overview)
- Inbox = calls + prayer requests + visitor contacts + callbacks + safety flags, one unified stream (merged: today's Calls + Requests + Care)
- Website = content editor + public preview (today's WebsiteTabEditor, promoted to first-class nav for Pro Website plans)
- Upgrade = header-level button, not a tab (post-launch CTA doesn't belong in primary nav)
- Settings = gear icon in header → opens a slide-over panel (account, team, notifications, theology lens, integrations) — not a tab
- Training = retired as a top-level concept. Its sub-tabs (FAQs, staff knowledge, agent personality) fold into Website (content) and Settings (agent config) where they logically belong.
Why: Twilio, Vercel, Stripe Express, OpenPhone all compressed to 3-4 top-level items. Research: users 50+ freeze at ≥7-tab rows. SaaS navigation UX and Merge.rocks flag this as the #1 cognitive-overload vector for mature-user SaaS.
Role-gating: Inbox filters content by the viewer's role (Prayer Team sees only prayer requests; Treasurer sees nothing from Inbox). Keeps one nav shape for everyone; privileged data is invisible rather than gated behind tab-not-rendered logic.
Decision 2 — Onboarding: 3 questions → generated dashboard, not a wizard
Current: 7-10 step sequential wizard with mixed slide-overs and tab-jumps. Pastor Ruth sees "Step 5 of 10" and quits at step 3.
Proposed — the Wix ADI pattern:
Welcome to ChurchWiseAI, Pastor Ruth.
1. What tradition is your church? [Baptist ▼]
2. How should your AI greet visitors? ○ Warm ● Professional ○ Casual
3. What matters most for your first month? ○ Prayer support
● First-time visitors
○ Staying in touch
[Get started →]
- 3 questions. Nothing else required to land in a working dashboard.
- AI pre-fills everything else: denomination → theological lens (per
DENOMINATION_TO_LENS) + hero video + default templates + starter FAQ set. - Defaults are visible and editable once in the dashboard. We're not hiding config — we're shortening the "before I see anything useful" path from 15 minutes to 60 seconds.
- Everything-else moves to the checklist rail on Home — optional polish, not blockers.
Why: Wix ADI found 5-question users convert ~2x higher than long-wizard users. Squarespace Blueprint is 5 steps. Strikingly is 1 step (template). Our 10-step wizard is far outside the norm.
Decision 3 — Checklist rail instead of full-page wizard
Once the pastor is in the dashboard, setup items move from a gold-card wizard page to a persistent right-side rail on Home:
┌──────────────────────────────┬────────────────────────────────────────┐
│ │ GET YOUR CHURCH ONLINE │
│ HOME │ 3 of 7 done · 43% │
│ │ ━━━━━━━━━━━━━━━━━━━━━━ │
│ [share my website] │ │
│ [get share link] │ ✓ Church name │
│ │ ✓ Pastor tone │
│ 📊 This week │ ✓ Theology tradition │
│ • 0 calls │ ○ Upload a hero photo → │
│ • 0 prayer requests │ ○ Add service times → │
│ • 0 new visitors │ ○ Write 3 FAQs → │
│ │ ○ Send the share link → │
│ "Your agents are ready. │ │
│ Start sharing your link │ [Skip all for now] │
│ to see activity here." │ │
│ │ │
└──────────────────────────────┴────────────────────────────────────────┘
- Each checklist row deep-links to the right form (most slide-over). Completing a form checks the item off + advances progress %.
- No auto-chain. After saving, the slide-over closes. User returns to the checklist, picks next deliberately. Fixes the "clicked Theology → ended up on Staff" bug permanently.
- Dismissible. Once setup's done, pastor clicks "Hide this checklist" → rail collapses to a thin "Setup 100%" badge. Can be re-opened from Home header.
- Percent + steps-remaining together. Userpilot research: percent alone is too abstract. "3 of 7 (43%)" is concrete.
Why: ActiveCampaign, Userpilot, Loom, Notion all show a persistent checklist as the single highest-impact onboarding pattern. Userpilot calls it "the single biggest driver of time-to-value in SaaS onboarding."
Decision 4 — Save patterns: mixed, visible, honest
| Input type | Pattern | Example |
|---|---|---|
| Radio / toggle / dropdown | Auto-save + toast: "Saved" (3-second) | Tone (Warm/Professional/Casual), agent on/off, theology lens |
| Text field / textarea | Explicit Save button + "Unsaved change" amber indicator when dirty | FAQ answer, church description, pastor bio |
| Nested editors (staff, ministries) | Row-level save on each item + sticky "You have unsaved changes — Save all" banner at bottom | Staff list, ministries list, beliefs |
| Hero video / logo upload | Auto-save on successful upload + inline thumbnail preview | Hero picker, logo picker |
| Schedule / office hours | Explicit Save button after any change | Office hours grid |
Critical rule: auto-saves must show an explicit "Saved 10:43am" timestamp inline, not just a disappearing toast. Research from NN/g + Codeminer42: older users distrust silent saves.
Also: Publish ≠ Save for the Website editor. Edits persist as draft until user clicks Publish. Prevents pastor anxiety about half-finished public pages (Strikingly pattern).
Decision 5 — Empty state = learn-by-doing, not blank
Today, a fresh dashboard shows "0 calls, 0 prayers, 0 visitors" with blank charts. That screams "this doesn't work yet." Fix:
Home — Your first week
0 real calls so far.
┌─────────────────────────────────────────────────────┐
│ Example conversation · from demo │
│ ────────────────────────────────────── │
│ "What time is Sunday service?" │
│ → Agent: "Sunday 10:00am. We'd love to see │
│ you — here's what to expect your first time..." │
│ │
│ [Remove example when you go live] (x) │
└─────────────────────────────────────────────────────┘
Ready to get real activity here? [Copy share link →]
Pre-loaded with ONE demo conversation, ONE sample prayer request, ONE visitor contact — all tagged Example — remove when you go live. Pastor sees the dashboard actually working before they've done anything.
Why: Notion, Linear, Vercel, Breeze — all four use pre-loaded samples on fresh accounts. Smashing Magazine calls this the single highest-impact empty-state pattern.
Decision 6 — Mobile: radical simplification, not responsive shrink
Today, mobile shows 9 tiny icons with no labels. That's unusable. With the new IA:
╔═════════════════════════╗ ╔═════════════════════════╗
║ ChurchWiseAI ⚙️ 🔔 ║ ║ < Home ║
║ ║ ║ ║
║ 3 of 7 setup steps ║ ║ 📋 Setup ║
║ ━━━━━━━━━━━━━━━━━━━━ ║ ║ 3 of 7 done · 43% ║
║ ║ ║ ║
║ [continue setup →] ║ ║ ✓ Church name ║
║ ║ ║ ✓ Pastor tone ║
║ This week: ║ ║ ○ Upload a hero photo > ║
║ 0 calls · 0 prayers ║ ║ ○ Add service times > ║
║ ║ ║ ○ Write 3 FAQs > ║
║ [share my website] ║ ║ ║
║ ║ ║ [Skip for now] ║
║ [view inbox] ║ ║ ║
║ ║ ╚═════════════════════════╝
║ ║
║ ───────────────── ║
║ 🏠 📬 🌐 ║ bottom nav: Home / Inbox / Website
╚═════════════════════════╝ tap gear in header for Settings
- Bottom tab bar with 3 items only (iOS + Android standard).
- Settings as slide-up from header gear icon (not a 4th tab).
- Upgrade CTA surfaced contextually when relevant (e.g., "Unlock voice agent" on Home if on chat-only plan), not persistent nav.
Concrete mockup: new Admin Home (desktop)
┌──────────────────────────────────────────────────────────────────────────────┐
│ 🪶 ChurchWiseAI Home Inbox Website ⚙️ 🔔 [Upgrade] │
│ ──── │
└──────────────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────┬─────────────────────────────────────┐
│ │ │
│ Welcome back, Pastor Ruth. │ GET YOUR CHURCH ONLINE │
│ Buchanan Baptist Church │ 3 of 7 done · 43% │
│ │ ━━━━━━━━━━━━━━━━━━━━━ │
│ ┌────────────────────────────────┐ │ │
│ │ 📎 Share your church website │ │ ✓ Church name │
│ │ │ │ ✓ Pastor tone │
│ │ buchanan-baptist.john316.church│ │ ✓ Theology tradition │
│ │ │ │ │
│ │ [Copy link] [Send to list] │ │ ○ Upload a hero photo → │
│ └────────────────────────────────┘ │ ○ Add service times → │
│ │ ○ Write 3 FAQs → │
│ 📊 This week │ ○ Send the share link → │
│ ───────────── │ │
│ 0 real calls │ [Hide this checklist] │
│ 0 prayer requests │ │
│ 0 visitor contacts │ │
│ │ │
│ "Your AI agents are live. │ │
│ Your dashboard updates the moment │ │
│ someone interacts with your site." │ │
│ │ │
│ [View live preview] │ │
│ │ │
│ ┌─ Example from demo church ─────┐ │ │
│ │ 🙏 Sample prayer request │ │ │
│ │ "Please pray for my mother..." │ │ │
│ │ [Remove when ready] (x) │ │ │
│ └───────────────────────────────┘ │ │
│ │ │
└────────────────────────────────────────┴─────────────────────────────────────┘
Concrete mockup: new Website editor (desktop)
Modeled on Strikingly's section-based left panel.
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🪶 ChurchWiseAI Home Inbox Website [Preview] [Publish] │
│ ─────── │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────┬────────────────────────────────────────────────────────────┐
│ SECTIONS +│ │
│ │ │
│ 🎬 Hero ⚙️ ✕│ [ Live preview of your website ] │
│ 👋 About ⚙️ ✕│ │
│ ⛪ Services ⚙️ ✕│ │
│ 🙋 Staff ⚙️ ✕│ │
│ 📅 Events ⚙️ ✕│ │
│ 💰 Give ⚙️ ✕│ │
│ 📞 Contact ⚙️ ✕│ │
│ │ │
│ + Add Section │ │
│ │ │
│ ───────────── │ │
│ 🎨 Design │ │
│ Template │ │
│ Colors │ │
│ Videos │ │
│ │ │
│ ───────────── │ │
│ Last saved │ │
│ 2 min ago │ │
│ [Save now] │ │
│ │ │
│ Draft — not │ │
│ yet published │ │
│ │ │
└─────────────────┴────────────────────────────────────────────────────────────┘
- Section list with ⚙️ (edit) + ✕ (remove) per row.
- + Add Section at top.
- Design section at bottom has template/colors/videos (three settings).
- Autosave with visible "Last saved 2 min ago" — trust-but-verify.
- Publish button separate from save — prevents accidental public changes.
Implementation plan
P0 — Pre-lockdown (ships this week)
Small, high-leverage changes. No structural refactor.
| # | Change | File(s) | Est |
|---|---|---|---|
| 1 | Stop wizard auto-navigating to NAVIGATE-type next step | SetupGuide.tsx (handleStepSaved) | ✅ already done in my branch |
| 2 | Explicit Save button on TheologySettings (no auto-save on dropdown pick) | TheologySettings.tsx | ✅ already done |
| 3 | Auto-default theology lens from denomination at signup | src/app/api/stripe/webhook/route.ts (provisionNewChurch) | 30 min |
| 4 | Explicit Save button on every SaveForm-based form with visible "Saved HH:MMam" timestamp | src/components/admin/SaveForm.tsx | 1 hour |
| 5 | Rename "Premium Listing" tooltip → "Your Pro Website" for Pro Website customers | AdminDashboard.tsx:149 | 15 min |
| 6 | Reorder tabs for Pro Website plan: Overview / Website / Inbox / Settings (hide Training, Care, Social from default order) | AdminDashboard.tsx:100-170 | 1 hour |
| 7 | Remove step auto-renumbering on skip (steps keep their slot, show as "skipped") | SetupGuide.tsx:289-294 | 1 hour |
| 8 | "Back to Setup" link inside every slide-over form | SetupSlideOver.tsx or form-level | 30 min |
| 9 | One-liner tab descriptions ("Home: your dashboard + checklist") | AdminDashboard.tsx tab meta | 20 min |
P0 total: ~5 hours. Ship as one PR before code lockdown.
P1 — Post-test, pre-lockdown polish (next 2-3 days)
Structural moves that touch more files. Still pre-launch.
| # | Change | Est |
|---|---|---|
| 10 | Collapse Calls, Requests, Care into one Inbox tab with filter chips | 4-6 hours |
| 11 | Move Settings to header gear → slide-over panel (4 sub-tabs: Account / Team / Notifications / Integrations) | 3-4 hours |
| 12 | Pre-loaded demo data on fresh accounts (1 sample conversation, 1 sample prayer request, both tagged "Example — remove when ready") | 3 hours |
| 13 | Shrink onboarding to 3 questions → auto-generated defaults + checklist rail | 6-8 hours |
| 14 | Persistent right-side setup-checklist rail on Home (dismissible, resumes on return) | 4 hours |
| 15 | Mobile: bottom tab bar (3 items: Home / Inbox / Website) + slide-up Settings | 3 hours |
P1 total: ~25-30 hours. One-week scoped sprint.
P2 — Post-lockdown (deliberate, with test coverage)
Bigger moves requiring Playwright test scaffolding + founder interview validation.
| # | Change | Est |
|---|---|---|
| 16 | Website editor redesign: Strikingly-style section-based left panel + explicit Publish | 2-3 days |
| 17 | Role-gated Inbox filters (Prayer Team sees prayer only, Treasurer sees nothing) | 1-2 days |
| 18 | Self-serve custom domain (FA-### filed from earlier) | 1-2 days |
| 19 | Dismissible checklist rail persistence across devices (server-side, not just localStorage) | 1 day |
What I need from you
-
Green-light this proposal at the decision level. Specifically: 3-section IA (Home / Inbox / Website + header Settings)? 3-question onboarding? Explicit Save discipline? Yes/no on each; we can diverge.
-
P0 prioritization: ship #1–#9 pre-lockdown as one "dashboard hardening" PR (current wizard-sync fix becomes part of it). Sound good?
-
P1 sequencing: want me to draft an implementation order for the 5-day sprint OR is this the start of post-lockdown backlog?
-
Mockup fidelity: these are ASCII for review speed. Want me to invoke the
designskill to produce Tailwind component mockups (actual.tsxscaffolding, not pixel-perfect) for any of the concepts above? Useful if you want to PR a "design exploration" branch.
Citations (source research)
- Internal audit: see agent report (this session, Explore agent, 800-word output). Files cited throughout.
- Competitive benchmark: see agent report (this session, general-purpose agent).
- Cross-cutting: Userpilot, Smashing Mag, Primer, NN/g, Twilio Console changelog, Vercel redesign blog, Wix ADI case study, Strikingly help docs. Full URLs in agent report.