🏠 Overview â€ș 🎯 Features â€ș🎯 Achievement Badges

Achievement Badges

Feature Detail

medium complexity extracted Achievements & Gamification Confidence: 100%
4
Components
18
Shared
0
User Stories
Yes
Analyzed

Description

Achievement Badges award peer mentors and coordinators with visual recognition for reaching defined milestones in their volunteer journey, such as logging a set number of activities or supporting a certain number of contacts. The system provides continuous recognition throughout the year, complementing the Annual Summary by celebrating incremental progress rather than waiting for a year-end review. Badge criteria are configurable per organization to match each tenant's terminology and thresholds.

Sources & reasoning

Line 76 explicitly mentions statusbadges as part of the gamification request from three organizations. The priority matrix (line 149) places gamification in Fase 3 (NICE TO HAVE), mapping to v1.1. Badges provide continuous recognition between annual summaries, complementing the Wrapped feature and supporting volunteer motivation year-round.

  • MĂ„let er Ă„ gi frivillige stolthet og motivasjon, og gjĂžre usynlig innsats synlig. OgsĂ„ nevnt: «Årets koordinator», statusbadges og halvĂ„rsoppsummeringer.
  • | Gamification / Spotify Wrapped | ✓ | ✓ | - | ✓ | ✓ | NICE TO HAVE | 3 |

Analysis

Business Value

Badges provide continuous motivational triggers between annual summaries, keeping volunteers engaged year-round. A structured badge system formally acknowledges contributions and surfaces high performers for leadership roles. Three partner organizations requested gamification mechanics, indicating strong cross-organizational demand. The feature supports coordinator-volunteer recognition conversations and reduces churn - retaining existing peer mentors is significantly cheaper than recruiting replacements, making engagement features a high-value investment for the platform.

Implementation Notes

The badge system requires a rules engine evaluating user activity data against configurable criteria stored in the achievements table. Badge definitions are per-organization to allow custom thresholds via the Organization Labels system. The user_achievements table records earned badges with timestamps. Flutter renders badge widgets using SVG or PNG assets with WCAG 2.2 AA semantic labels and screen-reader support. Badge evaluation triggers on activity save events; push notification infrastructure alerts users when a badge is earned. Depends on personal-activity-statistics for milestone data access.

Quality Assurance

Peer Mentor (primary) · Coordinator (same flow)
1
Scenarios
5
UAT Steps
16
A11y Annotations
2
Role Boundaries
Peer Mentor

Peer Mentor

Quick UAT

  1. Logg inn i appen som Likeperson. Bekreft at BadgeWidget vises pÄ hjemskjermen med tittel pÄ nÊrmeste opplÄsbare merke og fremdriftsindikator.
  2. Trykk pÄ BadgeWidget. Bekreft at du navigeres til Merker-skjermen (BadgesScreen).
  3. Se over skjermen: bekreft at opptjente merker vises tydelig (fullt synlige) og ikke opptjente merker vises nedtonet (dimmet).
  4. Trykk pÄ et opptjent merke. Bekreft at en detaljvisning Äpnes med milepÊlbeskrivelse og datoen merket ble tildelt.
  5. GÄ tilbake til merkeoversikten. Bekreft at fremdriftsindikatoren for nÊrmeste uopplÄste merke viser korrekt antall gjenstÄende aktiviteter eller kontakter.

Quick UAT — Accessibility

  1. Logg inn i appen som Likeperson. Bekreft at BadgeWidget vises pÄ hjemskjermen med tittel pÄ nÊrmeste opplÄsbare merke og fremdriftsindikator.
    • Screen reader Widgeten annonseres med rolle 'knapp' og leser opp merketnavn og fremdrift, f.eks. 'Aktivitetsmerke – 3 av 10 aktiviteter. Trykk for Ă„ se alle merker.'
    • Keyboard / focus Widget nĂ„s med Tab fra hjemskjermens fokusrekkefĂžlge; Enter aktiverer navigasjon.
    • Touch target BadgeWidget er minst 48×48 CSS-piksler som interaktivt trykkmĂ„l.
    • Contrast Fremdriftstekst og merkenavn har minst 4.5:1 kontrast mot bakgrunn.
  2. Trykk pÄ BadgeWidget. Bekreft at du navigeres til Merker-skjermen (BadgesScreen).
    • Screen reader Ny skjermoverskrift annonseres automatisk: 'Merker'. Tab-rekkefĂžlge starter pĂ„ fĂžrste merkekategori.
    • Focus visibility Fokus flyttes til toppen av BadgesScreen ved innlasting; ingen fokusfelle.
    • Live region Skjermoverskrift annonseres via live region ved innlasting.
  3. Se over skjermen: bekreft at opptjente merker vises tydelig (fullt synlige) og ikke opptjente merker vises nedtonet (dimmet).
    • Screen reader Opptjente merker annonseres med 'Opptjent' som tilleggsstatus. Nedtonede merker annonseres med 'Ikke opptjent' og er ikke markert som deaktiverte knapper – de er lesbare men ikke aktiverbare.
    • Zoom Ved 200% zoom beholder merkegrid lesbar layout; horisontalt scrollkrav unngĂ„s.
    • Contrast Statusforskjell mellom opptjent og ikke opptjent formidles ikke kun gjennom farge – et tekst- eller ikonlabel ('Opptjent' / 'LĂ„st') er synlig ved siden av hvert merke.
  4. Trykk pÄ et opptjent merke. Bekreft at en detaljvisning Äpnes med milepÊlbeskrivelse og datoen merket ble tildelt.
    • Screen reader Detaljvisning annonserer merkenavn, milepĂŠlbeskrivelse og dato som strukturert tekst. Lukke-knapp er merket 'Lukk detaljvisning'.
    • Focus visibility Fokus flyttes inn i detaljvisningen (modal eller ny skjerm) ved Ă„pning; fokusfelle aktiv mens modalen er Ă„pen.
    • Touch target Lukke-/tilbakeknapp er minst 44×44 CSS-piksler.
  5. GÄ tilbake til merkeoversikten. Bekreft at fremdriftsindikatoren for nÊrmeste uopplÄste merke viser korrekt antall gjenstÄende aktiviteter eller kontakter.
    • Screen reader Fremdriftsindikator annonseres som 'Fremdrift: X av Y' – ikke kun visuell prosentstolpe.
    • Keyboard / focus Tilbake-navigasjon fungerer med systemets tilbakeknapp og hardwaretastaturets Escape.
    • Focus visibility Fokus returnerer til det opptjente merket som ble trykket da detaljvisning lukkes.

Role Boundaries

2 role(s) must NOT access this feature
  • Global Administrator

    Global Admin ser 'ingen tilgang'-skjerm pÄ mobilappen og omdirigeres til Admin-portalen. Merker-skjermen finnes ikke i navigasjonen og deep-link returnerer 403.

  • Prospective Organization Representative

    Rollen har ingen appkonto og kan ikke logge inn pÄ mobilappen. Merker-skjermen er utilgjengelig.

Expected End State

BadgesScreen viser alle merker med korrekt opptjent/lÄst-status. Opptjente merker er fullt synlige med dato og beskrivelse tilgjengelig via detaljvisning. Fremdriftsindikatoren for nÊrmeste uopplÄste merke reflekterer brukerens faktiske aktivitets- og kontaktstatistikk fra AchievementService.

Components (22)

User Interface (2)

ui BadgeWidget medium ui BadgesScreen medium

Service Layer (1)

service AchievementService medium

Data Layer (1)

data AchievementRepository medium

Shared Components

These components are reused across multiple features

User Stories

No user stories have been generated for this feature yet.