View and Explore Earned Milestone Badges
Within the annual summary experience, a badge shelf displays all badges the peer mentor has earned — both during the current year and historically. Each badge has an icon, a title, and a short explanation of the criteria that triggered it. Tapping a badge opens a detail modal with the award date, the specific achievement (e.g., '50 sessions completed', 'First activity with a new contact', '1-year anniversary'), and a recognition tier banner (Bronze, Silver, Gold, Platinum) based on cumulative activity. New badges earned since the last app open are highlighted with a celebration overlay animation. Badge criteria are configured per organization so that each organization can define what achievements matter most to their peer mentor community.
User Story
Acceptance Criteria
- Given I have earned badges, when I view the annual summary, then a badge shelf shows all my earned badges with icons and titles
- Given I tap on any badge, when the detail modal opens, then I can see the badge name, award date, the specific achievement criteria that triggered it, and my current recognition tier
- Given I have earned a new badge since my last app session, when I open the summary or badge shelf, then a celebration animation plays for the newly earned badge
- Given my organization has configured custom badge criteria, when my activity triggers those criteria, then the correct organization-specific badge is awarded and displayed
- Given I have not yet earned a specific badge, when I view the badge shelf, then locked badges are shown in a muted state with a hint about what is needed to unlock them
- Given I use a screen reader, when I navigate the badge shelf, then each badge has a descriptive semantic label including name, earned status, and award date
Business Value
Gamification through badge systems has been proven to increase engagement and retention in volunteer platforms. NHF and HLF both explicitly requested status badges and recognition mechanics as part of the Wrapped feature. By providing tangible, organization-configured milestones (e.g., HLF's certification tiers, NHF's multi-year contributors), the badge system creates a progression framework that encourages consistent activity logging and sustained participation. Recognition tiers also provide coordinators with an objective way to identify and celebrate their most active peer mentors.
Components
- Badge Shelf Widget ui
- Badge Card Widget ui
- Badge Detail Modal ui
- Recognition Tier Banner ui
- Badge Earned Celebration Overlay ui
- Badge Evaluation Service service
- Badge Award Service service
- Badge Configuration Service service
- Recognition Tier Service service
- Badge Repository data
- Badge Definition Repository data
- Recognition Tier Repository data
- Badge Criteria Edge Function infrastructure
- Badge Icon Asset Manager infrastructure
- Badge BLoC infrastructure
- Summary Accessibility Provider infrastructure