Church Membership App

Design mockups for the NV membership management application. Mobile-first, Planning Center-inspired, built for your team.

Prepared by Technitrad March 2026 12 Screens

How to view the mockups Click any screen below to open the interactive mockup. Each screen links to the next, so you can click through the full flow. Resize your browser to see how screens adapt.

Project Overview

A mobile-first web app to manage membership workflows across all NV church sites. The app handles new member inscriptions through a 5-stage pipeline, annual renewals with escalation, and integrates with Planning Center for data sync.

Multi-site: 9+ church sites (configurable — sites can be added or removed by admins)
3 Languages: English, Français, Español
Role-based access: Admin, Site Supervisor, Pastor, Interviewer
Google sign-in: Invite-only, authenticated via Google accounts
Email reminders: .ics calendar invites, automated notifications

Proposed Tech Stack

Next.js 15 TypeScript Vercel Supabase (DB, Auth, Email) Planning Center API Fillout Forms Tailwind CSS

New Member Workflow

New Request

→

Supervisor

→

Interview

→

Day Of

→

Pastoral

Navigation

Home Dashboard

Welcome banner, module launcher, recent activity feed

Membership

Stats overview, pipeline bar, New Members & Renewal actions

New Members List

Color-coded pipeline view showing all active requests by stage

5-Stage Membership Pipeline

Stage 1: New Request

Review Fillout form data, forward to site supervisor

Green 05

Stage 2: Site Supervisor

Review applicant, assign interviewer from dropdown

Blue 06

Stage 3: Interview

Schedule date, choose Zoom/Meet/onsite, send .ics reminder

Orange 07

Stage 4: Interview Day

Interview questions, attendance check, interviewer approval

Purple 08

Stage 5: Pastoral Review

Final data review, interview result, pastoral approval

Teal

Renewal & Administration

Renewal Dashboard

Pipeline overview, progress bar, escalation tracking

Settings

Notifications, language, access level management

User Management

Invite users by email, assign roles and sites

Translations

Manage EN/FR/ES content, auto-generated with admin editing

Key Design Decisions

Mobile-first: Designed for phone use between services. Desktop dashboard features will be added long-term.
Planning Center feel: Gradient accent line, calm spacing, subtle hover states inspired by PCO's 2025 design refresh.
Bold stage colors: 5 distinct colors for the workflow pipeline — users learn the mapping once and can scan instantly.
Dark title bar: Retained from your wireframes — creates a native app feel with clear visual boundary.
Action hierarchy: Primary actions are full-width at top, secondary actions below, destructive actions as text links at bottom.
Invite-only auth: Admins invite by email, users sign in with their Google account. No open registration.

Next Steps

Review these mockups and provide feedback on layout, colors, and workflow
Confirm the tech stack (Next.js + Supabase + Vercel)
Finalize Planning Center API access and custom field mapping
Define interview questions for the Day of Interview stage
Provide site list and initial user roles for setup

Full technical specification is available in docs/app-spec.md and the renewal workflow is documented in docs/renewal-workflow-2.0.md.