View Earned Achievement Badges
Peer mentors accumulate badges over time as they complete milestones such as a certain number of sessions, years of service, or specialist activities. The badge shelf displays all earned badges in a visually appealing grid layout with names and earned dates. Locked or future badges can optionally be shown in a greyed-out state to encourage continued engagement. Each badge is tappable and opens a detail modal with criteria, date earned, and a motivational message.
User Story
Acceptance Criteria
- Given I am on the home screen, When I navigate to my profile or badge section, Then I see the badge shelf widget listing all earned badges with icons and names
- Given I have earned at least one badge, When the badge shelf loads, Then badges are displayed in the correct earned order with the most recent badge shown first
- Given I tap a badge card, When the detail modal opens, Then I see the badge name, description, criteria that unlocked it, and the date it was awarded
- Given I have not yet earned any badges, When I open the badge shelf, Then I see an encouraging empty state with guidance on how to earn my first badge
- Given my badge data is loading, When a network request is in progress, Then a loading skeleton is shown and screen reader announces 'Loading your badges'
Business Value
Visible recognition of volunteer effort directly addresses the finding that peer mentors feel their invisible work goes unacknowledged. Displaying earned badges motivates continued participation and reduces churn among experienced volunteers, which is critical for programme sustainability across NHF and HLF.
Components
- Badge Shelf Widget ui
- Badge Card Widget ui
- Badge Detail Modal ui
- Badge Repository data
- Badge Definition Repository data
- Badge BLoC infrastructure
- Badge Icon Asset Manager infrastructure