alumni_lookup

Sub-Phase 1.9: Pre-Beta Polish

Champion Portal Development Sub-Phase 1.9

Estimated Effort: 2–3 weeks
Focus: Settings, Help/FAQ, Visual Refresh, Language Audit

Prerequisites: Phase 1.8 complete

Related Documents:

• ../../JOBS-TO-BE-DONE.md — Job C9: Feel Like I Belong
• ../../BACKLOG.md — Deferred items incorporated here

---

Table of Contents

1. Overview
2. Why This Sub-Phase Exists
3. Internal Sub-Phases
4. Jobs to Be Done Alignment
5. Scope
6. Definition of Success
7. Tests to Create
8. Documentation Updates

---

1. Overview

Phase 1.9 is the final polish before moving to Phase 2 (Contributions). This phase addresses settings, help resources, visual refinements, and ensures consistent, welcoming language throughout the portal.

Goal: Make the Champion Portal feel like a warm, inviting community space — not a sterile administrative tool.

After Phase 1.9, Champions will experience:

• A dedicated Settings page for account management
• Clear help resources and FAQ
• Visually refreshed profile and dashboard pages
• Consistent, accurate marketing language throughout

---

2. Why This Sub-Phase Exists

The “Basics Complete” Milestone

Before Phase 2 adds Events, Stories, and other contribution features, the foundation must feel complete and polished. Users should:

• Know how to manage their account
• Find help when confused
• Feel welcomed by the design and language
• Trust the platform enough to invest more time

From JOBS-TO-BE-DONE.md:

Job C9: Feel Like I Belong

“When I’m far from Nashville or years past graduation, I want to feel part of something bigger, so I can maintain my Belmont identity as part of who I am.”

Importance: 🔥 Critical

A sterile, confusing, or impersonal interface undermines belonging. This phase addresses that.

---

3. Internal Sub-Phases

Sub-Phase	Name	Est. Time
1.9.1	Champion Settings Page	2–3 days
1.9.2	Help & FAQ	1–2 days
1.9.3	Profile Visual Refresh	2–3 days
1.9.4	Dashboard Visual Refresh	2–3 days
1.9.5	Language & Messaging Audit	1–2 days

Deferred: Facebook OAuth and SMS/phone verification moved to future phases. See BACKLOG.md.

---

Sub-Phase 1.9.1: Champion Settings Page

Goal: Give Champions a dedicated place to manage account settings separate from profile.

Current State:

• No Settings page exists
• Privacy settings are in profile edit (appropriate)
• Email change, connected accounts, notifications have no home

Deliverables:

• Champion Portal settings route (/settings on the champions subdomain)
• Settings page with sidebar navigation
• Account Section:
  • Email address change flow (with verification)
  • Password change (for email auth users)
  • Delete account request (contact support, sets all privacy to hidden)
  • Admin hard delete from Lookup Portal Champion Admin
• Connected Accounts Section:
  • Show Google connection status (connected / not connected)
  • Connect/disconnect functionality
  • Placeholder for future SSO options (Facebook, Apple — see BACKLOG)
• Notifications Section:
  • Email notification preferences
  • Message notification frequency (immediate, daily digest, off)
  • Event/announcement notifications (for Phase 2+)

What Was Implemented:

• Champion Portal settings page with section navigation (account, connected_accounts, notifications)
• Email change flow with reconfirmation handling and CRM change logging on confirm
• Google connect/disconnect management with activity tracking
• Notification preference storage + activity tracking (daily digest deferred)
• Account deletion request that hides all privacy fields and directs to support
• Admin hard delete action for Champions in the Lookup Portal

Spec Deviation: Daily digest notifications are deferred (captured in BACKLOG).

Email Change Flow:

┌─────────────────────────────────────────────────────────────────────────┐
│ Change Email Address                                                    │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│ Current email: jane.doe@example.com                                     │
│                                                                         │
│ New email: [_________________________]                                  │
│                                                                         │
│ [Update Email]                                                          │
│                                                                         │
│ ⚠️ You'll receive a confirmation email at your new address.             │
│ Your email won't change until you confirm.                              │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Implementation Notes:

• Use Devise’s reconfirmable feature for email changes
• Track email change in crm_data_changes for CRM export after reconfirmation
• If Champion has SSO, email is for contact only (SSO uses UID)
• Daily digest notifications are deferred (see BACKLOG)

Connected Accounts UI:

┌─────────────────────────────────────────────────────────────────────────┐
│ Connected Accounts                                                      │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 🔵 Google                                                           │ │
│ │ Connected                                       [Disconnect]        │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│                                                                         │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ More login options coming soon                                      │ │
│ │ Facebook, Apple Sign-In, and more                                   │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│                                                                         │
│ 💡 Connect multiple accounts for flexible sign-in options.              │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Note: Additional OAuth providers (Facebook, Apple) deferred to future phase. Google SSO covers the primary use case for beta.

Notification Preferences:

┌─────────────────────────────────────────────────────────────────────────┐
│ Notification Preferences                                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│ Messages                                                                │
│ ○ Immediate — Email me when I receive a new message                     │
│ ○ Daily digest — One email per day with all messages                    │
│ ○ Off — Only show in portal (I'll check regularly)                      │
│                                                                         │
│ Community Updates                                                       │
│ ☑ New Champions in my district                                          │
│ ☑ Events in my region (when available)                                  │
│ ☐ Weekly community digest                                               │
│                                                                         │
│ [Save Preferences]                                                      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

---

Sub-Phase 1.9.2: Help & FAQ

Goal: Provide self-service help resources so Champions can find answers without contacting support.

Deliverables:

• /help route with FAQ page
• Organized by category (6 categories: Getting Started, Your Profile, Finding Alumni, Messaging, Account & Settings, Community Guidelines)
• Expandable accordion UI (Stimulus controller)
• “Still need help?” contact link (alumni@belmont.edu)
• FAQ search functionality (filters categories and questions in real-time)
• Onboarding tooltips — FULLY IMPLEMENTED

What Was Implemented:

• Created config/faq.yml with comprehensive FAQ content across 6 categories
• Built Cp::HelpController that loads FAQ data from YAML
• Designed warm, accessible Help page following Design Guidelines
• Created reusable accordion_controller.js for expand/collapse behavior
• Added faq_search_controller.js for instant search filtering
• Added comprehensive controller tests (7 tests, all passing)

Onboarding Tooltips Implementation (December 2025):

• Added seen_tooltips JSONB column to cp_champions table for tracking dismissed tooltips
• Implemented Champion model methods: tooltip_seen?, mark_tooltip_seen!, pending_tooltips, tooltip_for
• Created onboarding_tooltip_controller.js Stimulus controller with:
  • Auto-display after delay (500ms)
  • Position support (top/bottom/left/right)
  • Smooth fade-in/out animations
  • AJAX dismiss with server persistence
  • Action button navigation
• Added Cp::TooltipsController with dismiss endpoint (POST /tooltips/:key/dismiss)
• Created Cp::TooltipsHelper for easy view integration
• Added tooltip_dismissed activity event type for analytics tracking
• Integrated tooltips into 4 key views:
  • Dashboard: profile_completion tooltip on “Complete Your Profile” button
  • Directory: first_search tooltip on search/filters section
  • Profile Edit: privacy_settings tooltip on main content area
  • Messages: messaging_intro tooltip on “Messages” heading
• Created comprehensive tests (22 tests, all passing):
  • Model tests: test/models/cp/champion_tooltip_test.rb
  • Controller tests: test/controllers/cp/tooltips_controller_test.rb

FAQ Categories:

1. Getting Started
   • What is a Champion?
   • How do I get verified?
   • What’s the difference between “Email Verified” and “Champion Verified”?
   • How long does verification take?
2. Your Profile
   • How do I update my profile?
   • Who can see my information?
   • How do privacy settings work?
   • How do I upload a photo?
3. Finding Alumni
   • How do I search the directory?
   • Why can’t I see certain information?
   • How do I filter by city/college/affinity?
4. Messaging
   • How do I send a message?
   • How do I know if someone read my message?
   • How do notifications work?
   • How do I mute a conversation?
5. Account & Settings
   • How do I change my email?
   • How do I connect Google/Facebook?
   • How do I change my password?
   • How do I delete my account?
6. Community Guidelines
   • What are the rules?
   • How do I report inappropriate content?
   • What happens if I violate guidelines?

FAQ Page UI:

┌─────────────────────────────────────────────────────────────────────────┐
│ Help & FAQ                                                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│ 🔍 [Search help articles...]                                            │
│                                                                         │
│ ─────────────────────────────────────────────────────────────────────   │
│                                                                         │
│ 🚀 Getting Started                                                      │
│ ├─ ▶ What is a Champion?                                                │
│ ├─ ▶ How do I get verified?                                             │
│ └─ ▶ How long does verification take?                                   │
│                                                                         │
│ 👤 Your Profile                                                         │
│ ├─ ▶ How do I update my profile?                                        │
│ ├─ ▼ Who can see my information?                                        │
│ │   ┌───────────────────────────────────────────────────────────────┐   │
│ │   │ Your profile visibility depends on your privacy settings:     │   │
│ │   │                                                               │   │
│ │   │ • Public fields (name, photo, city) are visible to all       │   │
│ │   │   verified Champions                                          │   │
│ │   │ • Contact info (email, phone) uses your privacy settings     │   │
│ │   │ • You control what others see via Profile → Privacy          │   │
│ │   └───────────────────────────────────────────────────────────────┘   │
│ └─ ▶ How do privacy settings work?                                      │
│                                                                         │
│ ─────────────────────────────────────────────────────────────────────   │
│                                                                         │
│ Still need help?                                                        │
│ Contact us at champions@belmont.edu                                     │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Implementation:

• Store FAQ content in a YAML file or database
• Accordion component (Stimulus controller)
• Optional: Simple search filtering
• Link to support email for complex issues

---

Sub-Phase 1.9.3: Profile Visual Refresh

Goal: Make profile pages feel warm, scannable, and visually engaging.

From BACKLOG.md §2.6:

Issue: The profile show/edit pages feel “clunky and full of words” with similar styling across sections. Hard to scan.

Problems to Address:

• Dense text without visual hierarchy
• All sections look the same (headers same color as values)
• No icons or visual landmarks
• Lack of “personality”
• Wasted space in hero section (big gradient with small photo)

Design Decisions (from Interview Dec 2025)

Decision	Choice	Rationale
Hero treatment	Photo overlapping gradient (half in/half out)	Creates visual interest, reduces wasted space
Mobile photo	Left-aligned with info beside (if space permits)	Avoid side-by-side that breaks with long words
Education placement	Pull into hero (“Jane Doe • Class of 2015 • Music Business”)	Education is a primary connector for alumni
Professional display	Title + Employer on one line; Industry as pill/tag	More scannable, Industry less prominent
Empty sections (own profile)	Helpful prompts to complete	Encourage profile completion
Empty sections (others)	Hide or redesign layout around available data	No shaming for missing info
Section headers	Muted color + icon landmark	Headers shouldn’t compete with values
Card treatment	Minimal boxing, Airbnb-like subtle shadows	Avoid “everything boxed” feel

Visual Refresh Principles

1. Mobile-first — Design for phone screens first, ensure nothing breaks with long words
2. Warmth over sterility — Airbnb-like clean with subtle shadows, not LinkedIn boxes
3. Scannable hierarchy — Muted headers, prominent values, icon landmarks
4. Visual flow — Sections feel connected, not isolated boxes
5. Belmont identity — Campus imagery where possible, brand colors as anchors

Profile Show Page Refresh (Mobile)

┌─────────────────────────────────────────┐
│ ╭─────────────────────────────────────╮ │
│ │      [gradient background]          │ │
│ ├────────────────────────────────────┬┘ │
│ │  ┌──────┐                          │  │
│ │  │PHOTO │  Jane Doe                │  │
│ │  │ (overlaps                       │  │
│ │  │  gradient)                      │  │
│ │  └──────┘                          │  │
│ │           🤝 Connection Advisor    │  │
│ │           Nashville • Class of '15 │  │
│ │           BS Music Business        │  │
│ │                                    │  │
│ │  [Say Hello]  [Share]              │  │
│ ├────────────────────────────────────┤  │
│ │                                    │  │
│ │  💼 Marketing Director at          │  │
│ │     Capitol Records Nashville      │  │
│ │     ┌──────────────┐               │  │
│ │     │ Music Industry│ (pill)       │  │
│ │     └──────────────┘               │  │
│ │                                    │  │
│ │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─    │  │
│ │                                    │  │
│ │  📍 Nashville, TN                  │  │
│ │     Southeast Region               │  │
│ │                                    │  │
│ │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─    │  │
│ │                                    │  │
│ │  📝 About                          │  │
│ │  "Passionate about connecting      │  │
│ │   alumni and building community."  │  │
│ │                                    │  │
│ │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─    │  │
│ │                                    │  │
│ │  🎓 Education                      │  │
│ │  BS Music Business, 2015           │  │
│ │  College of Entertainment & Music  │  │
│ │  MBA, 2018                         │  │
│ │  Massey College of Business        │  │
│ │                                    │  │
│ │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─    │  │
│ │                                    │  │
│ │  🏷️ Groups & Organizations         │  │
│ │  [Phi Mu] [SAAC] [Towering Trad.]  │  │
│ │                                    │  │
│ │  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─    │  │
│ │                                    │  │
│ │  💬 Contact                        │  │
│ │  ✉️ jane.doe@example.com           │  │
│ │  📱 (615) 555-1234                 │  │
│ │                                    │  │
└─┴────────────────────────────────────┴──┘

Profile Show Page Refresh (Desktop)

┌─────────────────────────────────────────────────────────────────────────┐
│ ╭───────────────────────────────────────────────────────────────────╮   │
│ │                    [gradient background]                          │   │
│ ├──────────────────────────────────────────────────────────────────┬┘   │
│ │                                                                  │    │
│ │  ┌────────┐  Jane Doe                                            │    │
│ │  │ PHOTO  │  🤝 Connection Advisor                               │    │
│ │  │(overlaps│  Nashville, TN • Class of 2015 • BS Music Business  │    │
│ │  │gradient)│                                                     │    │
│ │  └────────┘  [Say Hello]  [Share Profile]                        │    │
│ │                                                                  │    │
│ ├──────────────────────────────────────────────────────────────────┤    │
│ │                                                                  │    │
│ │  ┌─────────────────────────────┐  ┌─────────────────────────────┐│    │
│ │  │ 💼 Professional             │  │ 📍 Location                 ││    │
│ │  │                             │  │                             ││    │
│ │  │ Marketing Director at       │  │ Nashville, TN               ││    │
│ │  │ Capitol Records Nashville   │  │ Southeast Region            ││    │
│ │  │ ┌──────────────┐            │  │                             ││    │
│ │  │ │Music Industry│            │  │                             ││    │
│ │  │ └──────────────┘            │  │                             ││    │
│ │  └─────────────────────────────┘  └─────────────────────────────┘│    │
│ │                                                                  │    │
│ │  ┌───────────────────────────────────────────────────────────────┐    │
│ │  │ 📝 About                                                      │    │
│ │  │ "Passionate about connecting alumni and building community.   │    │
│ │  │  Love meeting fellow Bruins wherever I travel!"               │    │
│ │  └───────────────────────────────────────────────────────────────┘    │
│ │                                                                  │    │
│ │  ┌─────────────────────────────┐  ┌─────────────────────────────┐│    │
│ │  │ 🎓 Education                │  │ 💬 Contact                  ││    │
│ │  │                             │  │                             ││    │
│ │  │ BS Music Business, 2015     │  │ ✉️ jane.doe@example.com     ││    │
│ │  │ College of Entertainment    │  │ 📱 (615) 555-1234           ││    │
│ │  │ MBA, 2018                   │  │                             ││    │
│ │  │ Massey College of Business  │  │                             ││    │
│ │  └─────────────────────────────┘  └─────────────────────────────┘│    │
│ │                                                                  │    │
│ │  ┌───────────────────────────────────────────────────────────────┐    │
│ │  │ 🏷️ Groups & Organizations                                     │    │
│ │  │ [Phi Mu] [SAAC] [Towering Traditions] [Bruin Buddies]         │    │
│ │  └───────────────────────────────────────────────────────────────┘    │
│ │                                                                  │    │
└─┴──────────────────────────────────────────────────────────────────┴────┘

Design Elements

• Hero: Gradient background with photo overlapping (half in/half out)
• Key info in hero: Name, role badge, location, grad year, primary degree
• Section dividers: Subtle lines (not boxed cards) on mobile; light cards on desktop
• Icons: Small, muted color, serve as visual landmarks (not decoration)
• Affinities: Prominent pills but not overwhelming — show first 4-5, “+X more”
• Industry: Displayed as a pill/tag under professional info
• Shadows: Subtle, Airbnb-style (not harsh borders)

Scope: Files to Update

File	Update
app/views/cp/profile/show.html.erb	Full visual refresh
app/views/cp/profile/edit.html.erb	Match show page style
app/views/cp/directory/_champion_card.html.erb	Fix wasted space, match hero style
app/views/cp/champions/show.html.erb (public)	Match internal profile style

Empty State Handling

Context	Treatment
Own profile, missing bio	“Add a bio to help others get to know you →”
Own profile, missing photo	Photo placeholder with “Add photo” overlay
Own profile, missing location	“Add your location to connect with nearby alumni →”
Others’ profile, missing section	Hide section entirely OR redesign layout around available data

Deliverables

• Hero section with overlapping photo treatment
• Education info pulled into hero (grad year, primary degree)
• Professional: Title + Employer on one line, Industry as pill
• Muted section headers with icon landmarks
• Subtle dividers/shadows (not boxed cards everywhere)
• Smart empty state handling (prompts for self, hide for others)
• Directory card refresh (match profile hero, reduce wasted space)
• Profile edit page visual consistency
• Public profile page visual consistency
• Responsive: single column mobile, 2-column desktop where appropriate
• Minimal animations (hover states, smooth transitions)

What Was Implemented (1.9.3 - Jan 2026):

• Simplified directory cards with Belmont Blue accent bar, large photo, name/role focus
• Education display: [college icon] degree_code Major (YYYY) format with truncation
• College SVG icons from DirectoryHelper#college_icon_svg method
• Contact info moved from profiles to Settings page (privacy by design)
• Profile header shows champion name (not “My Profile”)
• Synced profile views (My Profile and Public Profile) with same education format
• Removed industry/role filters from directory (simplified filtering)
• Mobile-first responsive card layout

---

Sub-Phase 1.9.4: Dashboard Visual Refresh

Goal: Make the dashboard feel like a “home” — welcoming, personal, and alive with content worth returning for.

Current Issues:

• Feels like an admin panel, not a community space
• Generic card styling — everything has same visual weight
• No sense of “life” or activity
• No content that encourages return visits
• Welcome message is functional but not warm
• Multiple prompt banners (profile completion, verification) feel disconnected

Design Decisions (from Interview Dec 2025)

Decision	Choice	Rationale
Next steps prompts	Consolidate into one clear block	Profile completion + verification + other prompts together
Time-of-day greeting	Include (3/5 priority)	Nice warmth touch, simple to implement
Rotating quotes	Defer	Not a priority for engagement
News/posts section	Design placeholder, implement in Phase 1.10	Critical for return visits
Visual hierarchy	Much stronger differentiation	Current cards all look the same weight
Quick actions	Reduce prominence	Not the primary focus of dashboard

Key Insight: Content for Return Visits

The dashboard currently lacks “freshness” — nothing new to see on return visits. A News/Posts section is critical for engagement:

Post Type	Description	Source
Belmont Stories	Abstract + photo + link to belmont.edu/stories	Manual or RSS
Instagram-like	Photo + caption (community highlights)	Manual upload or API
Announcements	Portal news, new features, events	Staff entry

Decision: Design the news section placeholder now; implement content management in Phase 1.10.

Dashboard Visual Refresh (Mobile)

┌─────────────────────────────────────────┐
│ ╭─────────────────────────────────────╮ │
│ │  Good morning, Jane! 👋             │ │
│ │                                     │ │
│ │  You're part of a community of      │ │
│ │  127 Champions in 7 regions.        │ │
│ ╰─────────────────────────────────────╯ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ ✅ Next Steps                       │ │
│ │                                     │ │
│ │ □ Complete your profile (85%)       │ │
│ │   Add bio, photo, location →        │ │
│ │                                     │ │
│ │ ⏳ Verification in progress         │ │
│ │   You'll get directory access soon  │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ 🏙️ Your Nashville Community         │ │
│ │                                     │ │
│ │ [Photo][Photo][Photo] +28 more      │ │
│ │                                     │ │
│ │ Browse Directory →                  │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ 📰 From the Belmont Community       │ │
│ │                                     │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ [IMAGE]                         │ │ │
│ │ │ Alumni Spotlight: Sarah Chen    │ │ │
│ │ │ '18 grad launches startup...    │ │ │
│ │ │ Read more →                     │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │                                     │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ [IMAGE]                         │ │ │
│ │ │ Nashville Meetup Recap          │ │ │
│ │ │ 15 Champions gathered at...     │ │ │
│ │ │ View photos →                   │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │                                     │ │
│ │ IMAGE NEEDED: Belmont Stories       │ │
│ │ placeholder for Phase 3.3           │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ 💬 Messages                         │ │
│ │ 2 unread conversations              │ │
│ │ View Messages →                     │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ Quick Actions                           │
│ [Find Alumni] [Edit Profile]            │
│ [Invite] [Help]                         │
└─────────────────────────────────────────┘

Dashboard Visual Refresh (Desktop)

┌─────────────────────────────────────────────────────────────────────────┐
│ ╭───────────────────────────────────────────────────────────────────╮   │
│ │  Good afternoon, Jane! 👋                                         │   │
│ │                                                                   │   │
│ │  You're part of a community of 127 Champions in 7 regions.        │   │
│ ╰───────────────────────────────────────────────────────────────────╯   │
│                                                                         │
│ ┌───────────────────────────────────────┐ ┌───────────────────────────┐ │
│ │ ✅ Next Steps                         │ │ 🏙️ Your Nashville          │ │
│ │                                       │ │    Community               │ │
│ │ □ Complete your profile (85%)         │ │                           │ │
│ │   Add bio →                           │ │ [Img][Img][Img] +28 more  │ │
│ │                                       │ │                           │ │
│ │ ⏳ Verification in progress           │ │ Browse Directory →        │ │
│ │   Directory access coming soon        │ │                           │ │
│ └───────────────────────────────────────┘ └───────────────────────────┘ │
│                                                                         │
│ ┌───────────────────────────────────────────────────────────────────────┐
│ │ 📰 From the Belmont Community                                        │
│ │                                                                       │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐           │
│ │ │ [IMAGE]         │ │ [IMAGE]         │ │ [IMAGE]         │           │
│ │ │ Alumni Spotlight│ │ Nashville Meetup│ │ Campus News     │           │
│ │ │ Sarah Chen '18  │ │ 15 Champions... │ │ Bell Tower...   │           │
│ │ │ Read more →     │ │ View photos →   │ │ Read more →     │           │
│ │ └─────────────────┘ └─────────────────┘ └─────────────────┘           │
│ │                                                                       │
│ │ IMAGE NEEDED: Placeholder cards for Phase 1.10 news/posts feature    │
│ └───────────────────────────────────────────────────────────────────────┘
│                                                                         │
│ ┌───────────────────┐ ┌───────────────────┐                             │
│ │ 💬 Messages       │ │ 👤 Your Profile   │                             │
│ │ 2 unread          │ │ 85% complete      │                             │
│ │ View Messages →   │ │ [━━━━━━━━░░]      │                             │
│ │                   │ │ Continue →        │                             │
│ └───────────────────┘ └───────────────────┘                             │
│                                                                         │
│ ─ ─ ─ ─ ─ ─ Quick Actions ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │
│ [🔍 Find Alumni]  [✏️ Edit Profile]  [📨 Invite]  [❓ Help]              │
└─────────────────────────────────────────────────────────────────────────┘

Visual Hierarchy Priority

Section	Priority	Visual Treatment
Welcome greeting	High	Subtle gradient background, personal
Next Steps	High (if applicable)	Prominent card, action-oriented
Community/District	Medium-High	Photo cluster, connection focus
News/Posts	Medium-High	Fresh content, visual interest
Messages	Medium	Compact, shows unread count
Quick Actions	Low	Subtle row, not prominent cards

Time-of-Day Greetings

Time Range	Greeting
5am - 11:59am	“Good morning, [Name]! 👋”
12pm - 4:59pm	“Good afternoon, [Name]! 👋”
5pm - 4:59am	“Good evening, [Name]! 👋”

News/Posts Section (Placeholder for Phase 1.10)

Design now, implement later. The section should show:

• 3 cards on desktop (horizontal scroll or grid)
• Stacked cards on mobile
• Each card: Image + headline + short abstract + “Read more →”
• Mix of content types (stories, photos, announcements)

Phase 1.10 will add:

• Admin interface for creating posts
• Manual entry for Belmont Stories (no RSS available)
• Instagram API or manual photo uploads
• Post scheduling and management

Deliverables

• Personalized hero with time-of-day greeting
• Consolidated “Next Steps” block (profile + verification + prompts)
• Community stats framed as belonging
• District preview with photo cluster
• News/Posts section placeholder (designed for Phase 1.10)
• Messages card (compact, shows unread)
• Quick actions demoted to subtle row
• Clear visual hierarchy (not all same weight)
• Minimal animations (hover states, smooth transitions)
• Mobile-first responsive design

What Was Implemented (1.9.4 - Jan 2026):

• Created app/helpers/cp/dashboard_helper.rb with time-of-day greeting (morning/afternoon/evening based on hour), show_demo_content?, sample_news_posts, news_post_icon, and next_step_classes methods
• Updated app/controllers/cp/dashboard_controller.rb with load_messages_summary and load_next_steps methods
• Completely redesigned app/views/cp/dashboard/show.html.erb:
  • New Champion welcome hero (first 7 days) with gradient background and decorative pattern
  • Returning Champion greeting with time-of-day personalization
  • Consolidated “Next Steps” card with profile completion, verification status, and location prompts
  • Community Snapshot card with district-aware states (no ZIP, not verified, first in district, has neighbors)
  • Messages card with unread badge and recent thread previews
  • News/Posts section with demo content in development, “Coming Soon” placeholder in staging/production
  • Quick Actions demoted to subtle ghost-style buttons at bottom
• Updated docs/planning/champion-portal/development/DESIGN-GUIDELINES.md with new §6 Dashboard Patterns (time-of-day greetings, widget hierarchy, consolidated prompts, news cards, quick actions pattern)
• Added comprehensive tests: test/helpers/cp/dashboard_helper_test.rb (18 tests), updated test/controllers/cp/dashboard_controller_test.rb (6 tests)
• All tests pass: 24 dashboard-related tests

---

Sub-Phase 1.9.5: Language & Messaging Audit

Goal: Ensure all copy throughout the portal is accurate, consistent, warm, and on-brand.

Problem Identified:

“I’ve seen ‘prospective students’ in a couple places which really is inaccurate. This is to help Alumni and maybe graduating seniors (Almost Alumni) — but really it’s to serve other alumni primarily.”

Audit Scope:

1. User-facing copy:
   • Dashboard text
   • Profile wizard instructions
   • Directory search UI
   • Messaging UI
   • Email templates (all mailers)
   • Flash messages
   • Error messages
   • Empty states
2. Marketing/identity language:
   • What is a “Champion”?
   • What is the “Champion Portal”?
   • Value proposition consistency
   • Tone and voice
3. Technical/legal text:
   • Privacy policy references
   • Terms of service references
   • Data usage explanations

Language Principles:

Principle	Example
Warm, not corporate	“Welcome back, Jane!” not “User authenticated successfully”
Inclusive	“alumni” not “prospective students” unless specifically relevant
Active voice	“Update your profile” not “Your profile can be updated”
Clear over clever	Simple language over jargon
Encouraging	“Almost there!” not “Profile incomplete”
Belmont identity	“Bruins” “Champions” — use established terms

Known Issues to Fix:

Location	Issue	Fix
TBD (need to search)	“prospective students”	Change to “alumni” or “fellow Bruins”
Various	Generic welcome messages	Personalize with name and context
Error messages	Technical language	User-friendly explanations

Audit Process:

1. Search codebase for common problematic terms
2. Review all user-facing views
3. Review all mailer templates
4. Create style guide for future development
5. Update copy to match guidelines

Deliverables:

• Full audit of user-facing copy
• Fix “prospective students” references
• Create language style guide
• Update dashboard/wizard/directory copy
• Update email templates for warmth
• Consistent Champion/Bruin terminology

What Was Implemented (1.9.5 - Jan 2026):

• Created comprehensive docs/planning/champion-portal/development/LANGUAGE_STYLE_GUIDE.md based on Alumni Champions Verbal Style Guide
• Fixed “prospective students” in 4 mailer templates (message notification, champion invite)
• Updated directory empty state: “No Champions match your search” with encouraging CTA
• Improved flash messages in settings controller for warmer tone
• Fixed wizard completion redirect to go to profile view instead of edit page (bug from TODO_BUGS.md)
• Style guide includes: thesis statement, tone pillars (invitational, illustrative, empowering, invested, informative, inspiring), messaging pillars (belonging, action, accessibility, celebration), key terms, context-specific guidelines

Style Guide Outline:

# Champion Portal Voice & Tone Guide

## Our Voice
- Warm and welcoming
- Personal and human
- Encouraging, never demanding
- Proud of Belmont heritage

## Key Terms
- "Champion" — A verified member of the Alumni Champions community
- "Bruin" — Any Belmont alum (informal, friendly)
- "Alumni Champions" — The program/community name
- "Champion Portal" — The website/platform

## Who We Serve
PRIMARY: Belmont alumni who want to stay connected and give back
SECONDARY: Graduating seniors transitioning to alumni status
NOT: Prospective students (that's Admissions)

## Tone by Context
- Success messages: Celebratory! 🎉
- Error messages: Helpful, not blaming
- Empty states: Encouraging, suggest action
- Onboarding: Friendly guide, not bureaucrat

---

4. Jobs to Be Done Alignment

This phase addresses several jobs from JOBS-TO-BE-DONE.md:

Job	How 1.9 Addresses It
C9: Feel Like I Belong	Visual warmth, personal language, welcoming design
C2: Be Found by Others	Profile refresh makes profiles more engaging
C5: Stay in the Loop	Dashboard refresh shows community activity
E4: Reduce Repetitive Work	Help/FAQ reduces support requests

Additional JTBD Considerations

Job C10: Feel Recognized for Contributing

• Recognition features are in 1.8, but 1.9’s visual refresh can enhance how recognition is displayed
• Consider: How do we celebrate Champions’ contributions visually?

Job E1: Verify Champions Quickly

• Settings page helps Champions self-serve, reducing staff workload
• Email change flow prevents duplicate account issues

---

5. Scope

In Scope

• Champion Settings page (account, connected accounts, notifications)
• Email address change flow with verification
• Help & FAQ page with accordion UI
• Profile visual refresh (hero, cards, icons)
• Dashboard visual refresh (warmth, personalization)
• Language audit and fixes
• Style guide creation

Out of Scope (Future)

• Additional SSO providers (Facebook, Apple) — See BACKLOG
• SMS/Phone platform (Twilio) — See BACKLOG for future potential:
  • Phone verification for stronger identity confirmation
  • SMS message notifications (more reliable than email)
  • Account recovery via phone
  • Event reminders and alerts
• Real-time notifications (Phase 4)
• Advanced help (chatbot, search)
• Full rebrand/design system
• Accessibility audit (important, but separate initiative)

---

6. Definition of Success

Functional Acceptance Criteria

• Champions can access /settings page
• Champions can change email with verification
• Champions can view/disconnect Google account
• Champions can set notification preferences
• Help page displays FAQ with working accordion
• FAQ search filters categories in real-time
• Onboarding tooltips guide new Champions through key features
• Profile pages use new visual design
• Dashboard uses new warm design
• No instances of “prospective students” in alumni-facing copy
• Language style guide created and documented

User Experience

• Dashboard feels welcoming on first visit
• Profile pages are easy to scan
• Help answers common questions
• Settings are discoverable and intuitive
• Overall experience feels “warm” not “sterile”

Qualitative

• User feedback indicates improved perception
• Reduced support questions about basic features (via Help & FAQ)
• Team agrees copy is consistent and accurate

---

7. Tests to Create

Controller Tests

• Settings page requires authentication
• Notification preferences record activity event
• Google disconnect clears UID
• Email change sends confirmation
• Facebook OAuth callback works
• Help page renders FAQ content (7 tests passing)
• Tooltips controller dismiss endpoint (7 tests passing)

Model Tests

• Email change validation
• Notification preferences saved correctly
• Tooltip seen/unseen tracking (15 tests passing)
• mark_tooltip_seen! persists to database
• pending_tooltips excludes dismissed tooltips
• tooltip_for returns nil for seen tooltips

View Tests / Visual Regression

• Profile page renders hero section
• Dashboard renders warm greeting
• FAQ accordion expands/collapses

Integration Tests

• Full email change flow
• Google disconnect flow (with password requirement)

Tooltip Tests (COMPLETE)

• Controller tests: test/controllers/cp/tooltips_controller_test.rb (7 tests)
• Model tests: test/models/cp/champion_tooltip_test.rb (15 tests)

---

8. Documentation Updates

After completing Phase 1.9:

• Create docs/planning/champion-portal/development/LANGUAGE_STYLE_GUIDE.md
• Update ../../BACKLOG.md — remove completed items
• Update app/controllers/champions/roadmap_controller.rb with 1.9 sub-phase
• Update CHANGELOG.md
• Document FAQ content source (YAML file or database)

---

Questions to Resolve

Question	Status	Notes
FAQ storage	✅ Resolved	YAML file: config/faq.yml
Email change grace period	TBD	How long until unconfirmed change expires? (7 days?)
Design assets	✅ Resolved	See DESIGN-GUIDELINES.md
Accessibility	TBD	Should this phase include accessibility fixes?

---

Files to Create

New Files

• app/controllers/cp/settings_controller.rb ✅
• app/views/cp/settings/index.html.erb ✅
• app/views/cp/settings/_account.html.erb ✅
• app/views/cp/settings/_connected_accounts.html.erb ✅
• app/views/cp/settings/_notifications.html.erb ✅
• app/controllers/cp/help_controller.rb ✅
• app/views/cp/help/index.html.erb ✅
• app/helpers/cp/help_helper.rb ✅
• app/javascript/controllers/accordion_controller.js ✅
• app/javascript/controllers/faq_search_controller.js ✅
• config/faq.yml ✅
• docs/planning/champion-portal/development/LANGUAGE_STYLE_GUIDE.md
• test/controllers/cp/settings_controller_test.rb ✅

Onboarding Tooltips Files (December 2025)

• db/migrate/20251225172229_add_seen_tooltips_to_cp_champions.rb ✅
• app/javascript/controllers/onboarding_tooltip_controller.js ✅
• app/controllers/cp/tooltips_controller.rb ✅
• app/helpers/cp/tooltips_helper.rb ✅
• test/controllers/cp/tooltips_controller_test.rb ✅
• test/models/cp/champion_tooltip_test.rb ✅
• test/controllers/cp/help_controller_test.rb ✅

Files to Modify

• app/views/cp/profile/show.html.erb — Visual refresh (1.9.3)
• app/views/cp/dashboard/show.html.erb — Visual refresh (1.9.4)
• config/routes.rb — Add settings and help routes ✅
• Various views — Language fixes from audit (1.9.5)

---

Appendix: Visual Inspiration

Consider these references for visual refresh:

• LinkedIn profiles — Card-based layout, clear sections
• Airbnb host profiles — Warm, personal, photo-forward
• Notion dashboards — Clean, organized, pleasant
• Slack onboarding — Friendly, encouraging, step-by-step
• GitHub profile README — Personal expression within structure

The goal is to make Alumni Champions feel more like a community space and less like an enterprise application.