🏠 Overview › 🎯 Features ›🎯 Achievement Badges & Status Recognition

Achievement Badges & Status Recognition

Feature Detail

medium complexity extracted Gamification & Engagement Confidence: 100%
15
Components
198
Shared
7
User Stories
Yes
Analyzed

Description

A badge system that awards peer mentors visible recognition for reaching activity milestones, completing training, maintaining streaks, or achieving organisational thresholds (e.g., Blindeforbundet's 3rd and 15th assignment triggering different honorar rates). Badges are displayed on the peer mentor's profile and visible to coordinators. Beyond individual badges, the system includes named recognition tiers such as 'Årets koordinator' (Coordinator of the Year) and seasonal awards. This creates healthy social recognition without competitive ranking, acknowledging contribution quality and consistency rather than volume alone.

Analysis

Business Value

Provides low-cost, high-impact recognition that supplements or replaces physical awards. Particularly valuable for Blindeforbundet where assignment count already drives financial thresholds — surfacing these counts as badges aligns gamification with existing business rules.

Implementation Notes

Define badge taxonomy per organisation (badges are configurable, not hardcoded). Store earned badges in Supabase with earned_at timestamps. Badge criteria evaluated server-side via Supabase Edge Functions triggered on activity save. UI: badge shelf on profile screen with locked/unlocked states. Ensure badge icons meet contrast requirements and include text labels for screen reader users.

Components (213)

User Interface (5)

ui Badge Card Widget low ui Badge Detail Modal low ui Badge Earned Celebration Overlay medium ui Badge Shelf Widget medium ui Recognition Tier Banner low

Service Layer (4)

service Badge Award Service medium service Badge Configuration Service medium service Badge Evaluation Service high service Recognition Tier Service medium

Data Layer (3)

data Badge Definition Repository low data Badge Repository low data Recognition Tier Repository low

Infrastructure (3)

infrastructure Badge BLoC medium infrastructure Badge Criteria Edge Function medium infrastructure Badge Icon Asset Manager low

Shared Components

These components are reused across multiple features

User Interface (59)

ui Role Switch Widget medium Shared ui Role-Aware Bottom Navigation medium Shared ui Activity Type Selection Screen low Shared ui Speech-to-Text Field Overlay medium Shared ui Receipt Capture Widget medium Shared ui Peer Mentor Single Selector low Shared ui Proxy Audit Badge Widget low Shared ui Export Period Picker low Shared ui Contact Card Widget low Shared ui Contact Search Bar low Shared ui Peer Mentor Card Widget low Shared ui Activity History List low Shared ui Multi-Chapter Affiliation Chip Widget medium Shared ui Certification Status Badge low Shared ui Duplicate Activity Warning Dialog medium Shared ui Mentor Multi-Select Widget medium Shared ui Map Filter Panel medium Shared ui Claim Status Badge low Shared ui Export Date Range Picker low Shared ui Custom Date Range Picker low Shared ui Duplicate Activity Warning Dialog low Shared ui Proxy Activity Form medium Shared ui Proxy Peer Mentor Selector medium Shared ui Expected Return Date Picker low Shared ui Pause Activation Screen low Shared ui Pause Status Indicator low Shared ui Admin KPI Stat Widget low Shared ui Organisation Hierarchy Navigator high Shared ui Bufdir Period Selector Widget low Shared ui Export History List medium Shared ui Activity Type Donut Chart medium Shared ui Monthly Activity Bar Chart medium Shared ui Statistics Period Filter Bar low Shared ui Statistics Summary Cards low Shared ui Notification Badge Widget low Shared ui Certificate Expiry Status Indicator low Shared ui Animated Stat Card Widget medium Shared ui In-App Notification Banner low Shared ui Accessible Modal Sheet Widget high Shared ui Live Region Announcer medium Shared ui Semantics Wrapper Widget medium Shared ui Sensitive Field Warning Dialog high Shared ui Confirm Before Submit Screen medium Shared ui Inline Contextual Help Widget low Shared ui Labelled Navigation Bar low Shared ui Plain Language Error Display low Shared ui Single-Action Screen Layout medium Shared ui Wizard Progress Indicator low Shared ui Accessible Text Style System medium Shared ui Accessible Touch Target Wrapper low Shared ui Contrast-Safe Color Palette Widget medium Shared ui Accessible Bottom Navigation Bar medium Shared ui Modal Close Button low Shared ui Persistent Back Button low Shared ui Vertical Scroll Container low Shared ui Organization Card Widget low Shared ui Terminology-Aware Text Widget low Shared ui FeatureGate Widget low Shared ui Chapter Switcher medium Shared

Service Layer (52)

service Authentication Service medium Shared service Authentication Session Manager medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Permission Checker Service medium Shared service Role State Manager medium Shared service No-Access Route Guard low Shared service Activity Type Metadata Resolver low Shared service Chapter Scope Resolver medium Shared service Organisation Hierarchy Resolver medium Shared service Coordinator Notification Service medium Shared service Duplicate Activity Detection Service high Shared service Mentor Filter Service low Shared service Receipt Threshold Validator low Shared service Approval Status Notification Service medium Shared service Threshold Evaluation Service medium Shared service Declaration Encryption Service high Shared service Organization Feature Flag Service low Shared service Participant Deduplication Service high Shared service Reporting Period Service medium Shared service Activity Attribution Service low Shared service Proxy Duplicate Detection Service medium Shared service Pause Management Service medium Shared service Pause Notification Service medium Shared service Admin Export Service medium Shared service Admin Row-Level Security Guard high Shared service Organisation Hierarchy Service high Shared service User Management Service high Shared service Role Access Validator low Shared service Peer Mentor Stats Aggregator medium Shared service Push Notification Dispatcher medium Shared service Notification Preference Service low Shared service Scenario Deep-Link Router medium Shared service Scenario Notification Content Builder medium Shared service Badge Criteria Integration medium Shared service Activity Summary Aggregator low Shared service Focus Management Service medium Shared service Screen Reader Detection Service medium Shared service Sensitive Field Privacy Guard high Shared service Plain Language Content Service medium Shared service Wizard State Manager medium Shared service Tab State Manager medium Shared service Organization Route Guard medium Shared service Tenant Context Service high Shared service Label Key Resolver Service low Shared service Organization Labels Notifier medium Shared service FeatureFlagProvider (Riverpod) medium Shared service Access Scope Service high Shared service Hierarchy Aggregation Service high Shared service Hierarchy Service high Shared service Unit Assignment Service medium Shared

Data Layer (33)

data Authentication Repository low Shared data Auth Token Store low Shared data Secure Session Storage low Shared data Activity Type Cache Provider medium Shared data Receipt Storage Adapter medium Shared data Proxy Contact List Provider low Shared data Contact Repository medium Shared data Contact Detail Repository medium Shared data Peer Mentor Repository low Shared data Mentor Status Repository low Shared data Contact Chapter Repository medium Shared data Contact Cache Sync Repository low Shared data Organisation Rate Configuration Repository low Shared data Multi-Organization Data Isolator medium Shared data Bufdir Aggregation Repository low Shared data Report File Storage Client low Shared data Certification Status Repository low Shared data Peer Mentor Status Repository medium Shared data Statistics Cache Manager low Shared data In-App Notification Repository low Shared data Pause Status Record Repository low Shared data Activity Aggregation Repository medium Shared data Notification Preferences Repository low Shared data Scenario Notification Repository medium Shared data Sensitive Field Configuration low Shared data Error Message Registry low Shared data Help Content Registry low Shared data Wizard Draft Repository low Shared data Design Token Provider medium Shared data Organization Repository medium Shared data Terminology Local Cache Adapter low Shared data Organization Unit Repository high Shared data Unit Assignment Repository medium Shared

Infrastructure (54)

infrastructure Keyboard-Aware Layout Utility low Shared infrastructure Supabase Auth Client low Shared infrastructure Deep Link / OAuth Redirect Handler medium Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase Session Manager medium Shared infrastructure URL Launcher Utility low Shared infrastructure Local Storage Adapter low Shared infrastructure Supabase Activity Client low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client low Shared infrastructure Organisation Field Config Loader medium Shared infrastructure Speech-to-Text Adapter medium Shared infrastructure File Download Handler low Shared infrastructure Duplicate Reviewed Flag Middleware low Shared infrastructure Contact RLS Query Builder low Shared infrastructure Contact Form Validator low Shared infrastructure Design Token Theme low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client Provider low Shared infrastructure Search Debounce Utility low Shared infrastructure Expense Type Analytics Tracker low Shared infrastructure Receipt Image Picker Integration low Shared infrastructure CSV / JSON File Generator medium Shared infrastructure Coordinator Role Guard low Shared infrastructure Nightly Job Scheduler medium Shared infrastructure Supabase RLS Policy Configuration high Shared infrastructure Export File Storage Adapter low Shared infrastructure Supabase Storage Adapter low Shared infrastructure Peer Mentor Pause Management Service medium Shared infrastructure Push Notification Service medium Shared infrastructure fl_chart Adapter medium Shared infrastructure Push Notification Service low Shared infrastructure FCM Push Notification Sender medium Shared infrastructure FCM Notification Dispatcher medium Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Supabase Realtime Subscription Service medium Shared infrastructure Organisation Data Isolation Guard low Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Deep Link Handler medium Shared infrastructure QR Code Generator low Shared infrastructure Share Sheet Bridge low Shared infrastructure Semantics Service Facade medium Shared infrastructure Accessibility Design Token Enforcer medium Shared infrastructure Accessible Theme Builder medium Shared infrastructure Navigation Route Configuration medium Shared infrastructure Accessibility Live Region Announcer low Shared infrastructure Feature Flag Provider low Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase RLS Tenant Scope Configurator medium Shared infrastructure Label Key Registry low Shared infrastructure Terminology Riverpod Providers low Shared infrastructure WCAG Semantics Label Resolver low Shared infrastructure Feature Flag Key Constants low Shared infrastructure RLS Policy Manager high Shared

User Stories (7)

View My Current Recognition Tier and Progress to Next Tier
medium 3 pts

As a As a Peer Mentor (Likeperson)

I want to see which recognition tier I currently hold and how close I am to the next tier

So that I have a clear long-term goal to work towards and understand my standing within the peer mentor community

Acceptance Criteria
  • Given I am on my stats or profile screen, When the screen loads, Then I see a recognition tier banner displaying my current tier name and icon
  • Given I am not yet at the highest tier, When I view the tier banner, Then I see a progress indicator showing the metric required for the next tier and my current progress towards it
  • Given I have reached the highest tier, When I view the tier banner, Then I see a 'Maximum tier reached' message and the banner reflects this status
  • +2 more
View Full Story →
Receive Celebration Animation When Earning a New Badge
medium 5 pts

As a As a Peer Mentor (Likeperson)

I want to see a celebration overlay with animation the moment I earn a new badge

So that I feel an immediate sense of achievement and emotional reward for reaching a milestone

Acceptance Criteria
  • Given I have just completed an activity that crosses a badge threshold, When the app processes the activity, Then the badge-earned celebration overlay appears within 2 seconds
  • Given the celebration overlay is visible, When I tap anywhere or press the close button, Then the overlay dismisses and I return to the previous screen
  • Given I use a screen reader, When the celebration overlay appears, Then the badge name and achievement description are announced automatically via live region
  • +2 more
View Full Story →
Receive a Push Notification When a New Badge is Awarded
medium 5 pts

As a As a Peer Mentor (Likeperson)

I want to receive a push notification on my device when I earn a new achievement badge

So that I am informed of my achievement even when the app is not open, reinforcing the positive recognition in a timely way

Acceptance Criteria
  • Given I have push notifications enabled, When the system awards me a new badge, Then I receive a push notification within 5 minutes of the badge being awarded
  • Given I receive the badge push notification, When I tap it, Then the app opens directly to my badge shelf with the newly earned badge visually highlighted
  • Given I have disabled badge notifications in settings, When a badge is awarded to me, Then I do not receive a push notification but still see the badge in the app
  • +2 more
View Full Story →
View My Badge Progress Within the Annual Wrapped Summary
low 8 pts

As a As a Peer Mentor (Likeperson)

I want to see a summary of the badges I earned during the year as part of my annual wrapped summary

So that I can reflect on my year of achievement in a shareable, celebratory format that makes my contributions visible

Acceptance Criteria
  • Given I open my annual wrapped summary, When the summary screen loads, Then I see a badge section listing all badges I earned during that year with icons and names
  • Given I earned no badges in the selected year, When the badge section renders, Then it displays an encouraging message such as 'Keep going — your first badge is within reach'
  • Given the wrapped summary is displayed, When I identify the most significant badge, Then a milestone badge widget shows that badge prominently with a larger icon and descriptive text
  • +2 more
View Full Story →
Understand the Criteria Required to Earn Each Badge
high 3 pts

As a As a Peer Mentor (Likeperson)

I want to browse all available badges and read the specific criteria required to earn each one

So that I can plan my activities strategically and understand what milestones the organisation values

Acceptance Criteria
  • Given I tap on a locked badge card, When the detail modal opens, Then I see the badge name, a plain-language description of the criteria, and my current progress if measurable
  • Given I tap on an earned badge card, When the detail modal opens, Then I see the date I earned the badge and a congratulatory message alongside the criteria
  • Given a badge has multiple criteria, When the detail modal is displayed, Then all criteria are listed as individual checklist items with a checkmark indicating completion status
  • +2 more
View Full Story →
Access Badge Shelf with Full Screen Reader Support
high 3 pts

As a As a Peer Mentor (Likeperson)

I want to navigate and interact with the badge shelf and badge details using only a screen reader

So that I can benefit from the recognition system regardless of whether I have a visual impairment, ensuring the feature is fully inclusive

Acceptance Criteria
  • Given I navigate the badge shelf with VoiceOver enabled, When I focus on a badge card, Then the screen reader announces '[Badge Name], earned on [Date]' or '[Badge Name], locked — [progress description]'
  • Given I open the badge detail modal with a screen reader, When the modal appears, Then focus is automatically moved to the modal heading and the close button is reachable via a single swipe
  • Given I dismiss the badge detail modal, When the modal closes, Then focus returns to the badge card that triggered the modal open
  • +2 more
View Full Story →
View Earned Achievement Badges
high 5 pts

As a As a Peer Mentor (Likeperson)

I want to view all the achievement badges I have earned displayed on a dedicated badge shelf

So that I can see a visual summary of my accomplishments and feel recognised for my volunteer contributions

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
  • +2 more
View Full Story →