Navigation & Layout Concept

Principles

• Member-first: designed for the 25-year-old opening the app on Sunday morning
• Mobile = native app = mobile web — identical layout and behavior
• Desktop/tablet — sidebar replaces bottom tabs, content area uses extra width
• 4 tabs now, 5th reserved for Chat (Phase 2)
• Events and Community are two views on the same data — events belong to groups, groups have events

Mobile Layout

┌─────────────────────────────────────────────┐
│  [Org Logo/Name]                  [Avatar]  │  ← Header
├─────────────────────────────────────────────┤
│                                             │
│              Screen Content                 │
│                                             │
├─────────────────────────────────────────────┤
│  🏠 Home   📅 Events  👥 Community  ⋯ More  │  ← Bottom tabs
└─────────────────────────────────────────────┘

Header Bar

• Left: Org logo or name (tappable → org info)
• Right: User avatar (tappable → profile screen)
• Title changes per tab/screen as you navigate deeper

Profile (top-right avatar)

• Tap → profile screen (not a tab, pushed onto navigation stack)
• Edit profile, photo, privacy settings
• Notification preferences
• Logout

Tab 1: Home

Icon: House Purpose: Smart landing page — “What did I miss? What’s coming up?”

Content (scrollable, pull-to-refresh):

1. Service hero card (contextual)

   • Appears prominently when the next service is approaching (configurable: e.g., Saturday evening through Sunday afternoon)
   • Shows: sermon title, speaker, time, location
   • Quick actions: livestream link, sermon notes, worship playlist, giving
   • After service: recording, notes, recap
   • Hidden or minimized on other days

2. Pinned announcements

   • From org leaders (News module)
   • Rich content: text, images, video
   • Dismissable but re-accessible

3. Upcoming events

   • Next 2–3 events you’re registered for or that are highlighted
   • Tappable → Event detail (same screen as Events tab)

4. Group activity

   • Recent posts/updates from your groups
   • “3 new posts in Youth Group”
   • Tappable → Group detail (same screen as Community tab)

5. Quick actions row

   • Contextual shortcuts: “Check in” (Sunday), “Give”, “Prayer request”
   • Configurable per tenant/org

What Home is NOT

• Not an infinite social feed (churches don’t produce enough content for that)
• Not a dashboard with metrics (that’s admin)
• It’s a curated, contextual overview that surfaces what matters right now

Tab 2: Events

Icon: Calendar Purpose: “What’s happening?” — time-centric view across all groups and the org

Views

• List view (default): chronological, grouped by day/week
• Calendar view: month grid with dots, tap a day to see events

Content

• All published events for the user’s organization(s)
• Filters: upcoming (default), my registrations, by type, by group
• Featured/highlighted events pinned to top of list
• Recurring events show as next occurrence (expandable to see series)

Event Detail Screen (shared)

• Title, date/time, location (with map link)
• Description, speaker/host
• Organized by [Group Name] → tappable, navigates to group detail
• RSVP / Register button
• Attendee count (if public)
• Add to calendar
• Share

Relationship to Community

• Every event can belong to a group (optional — org-level events exist too)
• “Organized by” links back to the group
• The same event detail screen is reachable from both Events and Community tabs

Tab 3: Community

Icon: People/Users Purpose: “Who am I connected with?” — relationship-centric view

Sections

1. My Groups (primary)

   • List of groups the user belongs to
   • Unread activity indicators (new posts, new events)
   • Quick access to group chat (when Phase 2 ships)
   • Sorted by recent activity

2. Discover (secondary)

   • Browse/search open and request-to-join groups in the org
   • Filter by type (community, team, class, etc.)
   • Join / Request to join directly from list

Group Detail Screen

• Group info: name, description, type, leader(s), member count
• Tabs within group detail:
  • Feed/Posts: group announcements, discussions, prayer requests
  • Events: upcoming events organized by this group (same event detail screen)
  • Members: group member list with roles
  • Chat (Phase 2): group conversation
• Actions: leave group, invite, share, mute notifications

Relationship to Events

• Group detail shows the group’s events inline
• Tapping an event opens the shared event detail screen
• Creating an event from group context pre-fills the group association

Tab 4: More

Icon: Grid (or three-dot menu / hamburger) Purpose: Everything that doesn’t need a dedicated tab

Items

• People directory — search members (privacy-respecting, shows only what users opted to share)
• Giving (Phase 2, or external link)
• Locations — org locations/sites with addresses and maps
• About — org info, leadership, contact, links
• Switch organization (for multi-site users with multiple org memberships)
• Settings — notifications, language, appearance (dark mode), privacy
• Help / Feedback

Phase 2: Chat as Tab 5

When Chat module ships, the navigation expands:

🏠 Home   📅 Events   👥 Community   💬 Chat   ⋯ More

• Chat earns the tab position because messaging requires frequent, quick access
• Group chat is accessible both from Community (group detail) and the Chat tab
• 1:1 messaging also lives in Chat tab
• No navigation rearrangement — Chat slots in at position 4, More moves to 5

Desktop / Tablet Layout

┌──────────────────────────────────────────────────────┐
│  [Logo]  [Org Name]   🔍 Search        🔔  [Avatar] │
├───────────┬──────────────────────────────────────────┤
│           │                                          │
│  🏠 Home   │         Main Content Area                │
│  📅 Events │                                          │
│  👥 Community│       - Wider cards                     │
│  ⋯ More    │       - Multi-column layouts             │
│           │       - Side panels for detail views     │
│           │                                          │
│           │                                          │
│           │                                          │
│           │                                          │
│           │                                          │
└───────────┴──────────────────────────────────────────┘

Differences from mobile

• Left sidebar replaces bottom tabs (same items, same order)
• Collapsible: icon-only on narrow widths, full labels on wide
• Search bar in header (mobile: search is per-tab or in More)
• Notifications bell in header
• Split view: list on left, detail on right (e.g., event list → event detail)
• Multi-column grids: events and groups displayed as card grids instead of lists

Shared with mobile

• Same navigation items, same hierarchy
• Same screens and data — responsive layout, not different pages
• Profile via avatar click (dropdown or panel instead of bottom sheet)

Data Model: Events ↔ Groups Relationship

Events and Community are deliberately two views on the same data:

Organization
├── Group A (community)
│   ├── Event: "Small Group Wednesday"
│   └── Event: "Group Outing Saturday"
├── Group B (team)
│   └── Event: "Worship Practice Thursday"
└── Event: "Sunday Service" (org-level, no group)

How it flows

Shared screens

• EventDetailScreen — reachable from Home, Events, Community
• GroupDetailScreen — reachable from Home, Community, event’s “organized by”
• Deep links work regardless of entry point

Navigation Patterns

Deep linking

Every screen has a URL path for deep links and web:

• / → Home
• /events → Events list
• /events/:id → Event detail
• /community → My groups
• /community/:id → Group detail
• /community/:id/events → Group’s events
• /more/people → People directory
• /profile → User profile

Transitions

• Tab switches: no animation (instant)
• Push to detail: slide from right (iOS) / material motion (Android)
• Modals: bottom sheet slide up
• Back: slide back / swipe gesture

Badge indicators

• Home: dot for new announcements
• Events: count of upcoming events today
• Community: dot for unread group activity
• More: dot if action needed (e.g., pending group request)