Surface 01
The App Shell
The main layout every logged-in user sees. Navy sidebar for navigation, canvas background for content, and the brand gradient rule at the top of every page header.
gracechurch.wethr.app/dashboard
Full-width dashboard screenshot — desktop
Show the complete authenticated shell: navy sidebar on the left with the Wethr logo, church name, and all nav items (Order of Service, Directory, Teams, Scheduling, etc.). Main content area shows the dashboard with upcoming service summary cards and a "next service" highlight. The brand gradient rule (navy → cerulean → sunrise) visible at the top of the page header.
1280 × 800 · Desktop
The Wethr dashboard. Your Sunday at a glance, with everything one click away.
1
Sidebar navigation: navy, full-height. Logo at top, nav items with icons, active state highlighted with cerulean accent and left border. Church name and user avatar at the bottom.
2
Brand gradient rule: the 4px navy-to-cerulean-to-sunrise stripe at the top of every page header. A consistent visual anchor across every surface.
3
Dashboard cards: next upcoming service with date, status badge (Draft / Confirmed), and filled role count. Quick-action buttons to open the service or schedule view.
— sidebar (expanded)
Sidebar close-up — all nav items visible
Crop the sidebar to fill the frame. Show all 8 nav items: Order of Service (active, highlighted), Family Directory, Ministry Teams, Scheduling, Small Groups (future — dimmed), Communications (future — dimmed), Files & Notes (future — dimmed), Reporting (future — dimmed). Badge showing unread count on Scheduling if applicable.
Cropped · Sidebar only
Sidebar with active state on "Order of Service"
— page header anatomy
Page header close-up — brand rule + title
A cropped screenshot of just the page header area. Shows the 4px brand gradient rule at the very top, the Lora serif page title (e.g. "Family Directory"), a subtitle or breadcrumb, and primary action button (e.g. "Add Person") in Sunrise orange on the right side.
Cropped · Header region
Consistent page header pattern. Every surface looks like this.
Surface 02
Family Directory
The foundation of Wethr. Every person and family record lives here, searchable, filterable, and always in sync with team memberships and scheduling history.
Who sees this: Admins and Staff see full records. Ministry Leaders see directory members on their team. Volunteers and Members see a limited self-service view of their own profile.
gracechurch.wethr.app/directory
Directory list view — full page, populated with real-looking data
Show the directory table/list with 8–10 rows of people. Each row: avatar with gradient initials, full name (Lora serif), member status badge (Member in meadow green, Visitor in amber, Inactive in gray), email, phone, and team membership tags. Search bar at the top with placeholder text. Filter chips for "All · Members · Visitors · Inactive". "Add Person" button in Sunrise orange top-right.
1280 × 780 · Desktop
The directory. 247 people, searchable in milliseconds.
gracechurch.wethr.app/directory → panel open
Directory list with person detail panel open on the right
The directory list is visible but slightly dimmed on the left. A side panel slides in from the right showing a specific person's full record: large avatar, name + status badge at top, tabs for "Profile / Teams / Schedule History". Profile tab shows: contact info fields (email, phone, address), birthdate, member since date, household link (spouse + children listed below), notes field, and tags. An "Edit" button in the panel header.
1280 × 800 · Panel open
gracechurch.wethr.app/directory → Add Person
"Add Person" modal — partially filled, showing form validation
Full-screen modal over a dimmed directory background. Form fields: First Name, Last Name (both filled), Email (filled, valid — green checkmark), Phone (empty, optional — shown in muted state), Member Status dropdown (showing "Member" selected), Household — "Link to existing household" option. One field showing an inline error state (e.g., malformed phone number) in crimson. "Save Person" button (Sunrise, active) and "Cancel" (ghost) in the footer.
Modal · 560px wide
Surface 03
Ministry Teams
Every team in the church, structured. Leaders, roles, and members, always connected to the directory and the scheduling engine.
gracechurch.wethr.app/teams
Teams index — card grid of all ministry teams
A grid of team cards (2–3 columns). Each card: navy header with the brand gradient rule stripe at top, team name in Lora serif, team leader name + avatar, member count, role count, and a "View Team →" link. Teams shown: Worship Team, Nursery, Youth Group, Hospitality, Tech & AV, Parking & Grounds. "New Team" button top-right in Sunrise orange.
1280 × 700 · Desktop
Teams index. Every ministry at a glance.
gracechurch.wethr.app/teams/worship
Individual team page — Worship Team roster and roles
Team detail page for "Worship Team." Header with team name, leader info, and member count. Two-panel layout: left side shows the Roles list (Vocalist Lead, Vocalist BG, Guitarist, Keys, Drums, Bass, Sound Tech — each with member count and an "Edit role" icon). Right side shows the full member roster as a list — each member with their avatar, name, role tags (e.g., "Vocalist · Keys"), and availability status chip. "Add Member" button.
1280 × 800 · Team detail
Worship Team. Roles defined, roster populated.
1
Role definitions are set here and flow directly into the Order of Service builder. When you add a Worship Set block to a service, Wethr knows which roles need to be filled.
2
Multi-role members: a person can hold multiple roles on a team (e.g., "Vocalist + Keys"). The scheduler uses all their eligible roles when assigning them to services.
Surface 04
Order of Service Builder
The most detailed surface in Wethr, and the one leaders use most. A drag-and-drop service builder where every block connects to a person, a role, and a time.
The Order of Service is the center of everything. Teams, scheduling, people: they all connect back here. If a leader only ever uses one screen, it's this one.
gracechurch.wethr.app/services/mar-16
Order of Service builder — full page, service in progress
The full service builder for "Sunday March 16 — Morning Worship." Status bar at top showing "Confirmed" badge in meadow green, date/time, and action buttons ("Print Run-of-Show", "Duplicate Service"). Below: a vertical list of 6–7 service blocks rendered as cards. Each block shows: drag handle on the left, colored dot for block type, block name (Lora serif), assigned person(s) with their avatar and role, time/duration estimate on the right, and a "···" overflow menu. A "+" insert block button visible between cards. The blocks: Welcome & Announcements (Pastor David Kim), Worship Set (3 avatars for Maria, James, Elena), Scripture Reading (Elena Marsh), Message — "Steadfast" (Pastor David Kim), Offering (Tony Rivera), Closing Worship (Worship Team). One block should be in an "expanded/editing" state showing its inline edit panel.
1280 × 860 · Full builder
The Order of Service for Sunday March 16. Confirmed, 6 blocks, all roles filled.
— Worship Set block expanded
The Worship Set block in expanded/edit mode
The Worship Set block card is expanded, taller than the others, with a soft highlight/border. Inside the expanded panel: a song list with 4 songs (draggable, each with title + key + a remove "×" button). An "Add song" input below the list. Below that, a "Role Assignments" section: a mini-roster showing each Worship Team role (Vocalist Lead, Guitarist, Keys, Drums) with a combobox dropdown for each — one shows "Maria Chen" selected (green Available badge), another shows "Sam Rivera" selected (red Blackout badge with a warning tooltip "Mar 16 blackout"). "Save block" button at the bottom of the panel.
Cropped · Block expanded
— Add block picker
Block type picker — small popover
A compact popover/dropdown that appears when clicking "+" between blocks. Shows a grid of block type options, each with a colored icon and label: 🎵 Worship Set (cerulean), 📖 Scripture Reading (meadow), 🎤 Message / Sermon (navy), 🙏 Prayer (soft purple), 💰 Offering (amber), 🍞 Communion (warm brown), 👋 Welcome / Announcements (cerulean), ✦ Custom Block (neutral). Hovering one shows a subtle highlight. A "Custom" text input at the bottom for naming a freeform block.
Popover · 280px wide
gracechurch.wethr.app/services/mar-16/print
Print / run-of-show view — clean, white background
A clean, print-optimized layout on a white background. Wethr logo + church name + service date at the top. A timeline-style table: Time column (9:00, 9:08, 9:32…), Block column (Welcome, Worship Set, Scripture…), Person column (Pastor David, Maria Chen + 3 others, Elena Marsh…), Duration column (8 min, 24 min…), Notes column (internal notes visible to staff only, shown in a lighter shade). All blocks present. Footer shows "Generated by Wethr · gracechurch.wethr.app".
Print view · A4 / Letter
Surface 05
Scheduling
The scheduling surface is where leaders assign the right volunteer to each role, with full visibility into availability, blackout dates, and frequency caps before making an assignment.
gracechurch.wethr.app/schedule
Schedule grid — roles as rows, service dates as columns
A grid view filtered to "Worship Team." Columns = next 4 service dates (Mar 9, Mar 16, Mar 23, Mar 30). Rows = roles (Vocalist Lead, Vocalist BG, Guitarist, Keys, Drummer, Sound Tech). Each cell: assigned person's name + small avatar + an RSVP status chip (Accepted in meadow, Pending in amber, Declined in crimson). Some cells show "Unassigned" in gray dashed state. A filter bar above the grid: "Team: Worship Team" chip + "Date range" picker + "Show conflicts" toggle (on). At least 2 cells should show a conflict indicator (orange warning icon).
1280 × 640 · Desktop grid
Four weeks of Worship Team scheduling. Conflicts surfaced before they become problems.
— Assign role: Guitarist · Mar 16
Volunteer picker for "Guitarist — March 16" assignment
A side panel or popover. Header: "Assign Guitarist — March 16." Below: a list of 4–5 eligible Guitarists from the Worship Team roster, each with: avatar + name, availability status chip (Available in cerulean, Blackout in crimson, At Frequency Cap in amber), serving frequency note ("Served 2× this month · cap: 2"), and last served date. Sam Rivera shows a prominent "Blackout — Mar 16" warning. James Park shows "Available" and is highlighted as the recommended pick. A "Confirm Assignment" button activates when a person is selected.
Panel · Role assignment
gracechurch.wethr.app/directory/maria-chen → Schedule tab
Person profile — Schedule tab showing scheduling preferences
Maria Chen's profile, Schedule tab open. Three sections: 1) "Available days" — a day-of-week toggle strip (Sun, Mon, Tue, Wed, Thu, Fri, Sat) with Sunday and Wednesday checked in cerulean. 2) "Frequency cap" — a number input showing "2 times per month" with a note "Currently scheduled 2× in March — at cap." 3) "Blackout dates" — a list of specific blocked dates with a calendar picker to add new ones. One date shown: "April 6 — Easter weekend." A save button at the bottom of the section.
Profile · Schedule tab
Surface 06
Person Profile
The full record for a person in the directory. Profile, household, team memberships, scheduling history, and notes, all in one view.
gracechurch.wethr.app/directory/maria-chen
Full person profile page — Maria Chen
Full-page profile for Maria Chen. Profile header: large avatar (gradient initials "MC"), name in 28px Lora serif, "Member" badge in meadow green, "Worship Team" tag. Row of quick-info: email address, phone, member since date. Tab bar below header: Profile · Teams · Schedule History · Notes. Profile tab shown: contact details card (address, birthday, anniversary), Household card (linked to "Chen Family" — shows husband David Chen and two children). No photo — show the gradient avatar placeholder prominently. Edit button top-right.
1280 × 800 · Profile page
Maria Chen's full profile. Contact info, household, and team context at a glance.
— Teams tab
Profile → Teams tab
Shows Maria's team memberships: "Worship Team" card with her roles listed (Vocalist Lead, Keys), her leader (James Park), and a "View team →" link. If she's on a second team, show that too. "Add to team" button at the bottom.
Teams tab
Teams tab: all memberships and roles
— Schedule History tab
Profile → Schedule History tab
A list of Maria's past and upcoming service assignments: each row shows the service date, block name, role, and RSVP status. Past services show "Served" in gray. Upcoming shows the RSVP status chip. A "Serving 2× this month · cap: 2" stat chip at the top of the section in amber.
Schedule History tab
Schedule History tab: full serving timeline
— Notes tab
Profile → Notes + Tags tab
Notes tab with: a rich-text note area showing a short note ("Interested in leading a small group — follow up in April. Has background in music education."), and a Tags section below with chips: "Leadership Pipeline", "Small Group Interest", "Music". An "Add tag" input inline. Tags are used for filtering in the main directory.
Notes tab
Notes + Tags: the pastoral layer
Surface 07
Mobile & PWA
Wethr is a full PWA, installable on any iOS or Android home screen. Volunteers never need to log in through a browser. The app opens and their schedule is there.
No App Store required. Wethr installs as a PWA directly from the browser. Push notifications work on iOS 16.4+ and all modern Android devices. The volunteer experience works offline too.
iPhone home screen — Wethr PWA installed
iPhone home screen screenshot showing the Wethr icon (navy square, rounded, with the logo mark) alongside other apps. The icon should look native — no browser chrome visible. Ideally iOS 17 home screen with standard app grid.
iPhone · Home Screen
Installed on the home screen. Feels native, no App Store needed.
Volunteer schedule view — mobile, upcoming assignments
The volunteer's schedule view on mobile. Full-screen app (no browser chrome — PWA standalone mode). Shows upcoming assignments as cards: "Sunday March 16 · Vocals Lead" with the service name, time, and two large buttons — "Accept ✓" (meadow green) and "Decline ✗" (ghost/outline). An accepted assignment above it shows "Accepted" badge. The Wethr sidebar replaced by a bottom tab bar on mobile: Home, Schedule, Notifications, Profile.
iPhone · Schedule view
The volunteer view. Upcoming assignments with one-tap RSVP.
iOS push notification — new schedule assignment
iPhone lock screen or notification banner showing a Wethr push notification. Notification content: Wethr app icon on the left, "Wethr" as the app name, title: "You've been scheduled for March 16", body: "Maria, you're down for Vocals Lead · Sunday March 16 at 9:00 AM. Tap to respond." Time shown as "Just now." The lock screen background is a blurred version of the app — shows the notification as it would appear overlaid on the phone.
iPhone · Push notification
Push notification on iOS. Delivered without an App Store app.
Order of Service — mobile read view (volunteer)
The Order of Service as seen by a volunteer on their phone (read-only, no editing). Shows the service timeline as a scrollable vertical list: each block as a compact card with time, block type dot (colored), block name, and their own name highlighted if they're in it (e.g., "Vocals Lead — You" with a subtle meadow green highlight). Offline badge at the top: "Offline · Last synced 2h ago" in amber — showing the offline capability.
iPhone · Service view · Offline
The service plan on a volunteer's phone. Readable offline on Sunday morning when the wifi is unreliable.