Track Progress Toward Next Badge Milestone
Each Badge Widget renders a circular progress ring around the badge illustration indicating the user's current progress as a fraction of the threshold required to unlock the badge (e.g. 7 of 15 completed assignments, or 4 of 6 consecutive months active). The progress value is calculated by the Achievement Service after each activity save and stored against the user's badge record in the Badge Repository. The progress ring animates smoothly when updated. For Blindeforbundet users the progress ring is particularly important as the 3rd and 15th assignment thresholds determine honorarium eligibility, making transparent progress tracking a practical as well as motivational feature.
User Story
Acceptance Criteria
- Given a user views a locked badge, when the Badge Widget renders, then a circular progress ring shows current progress as a percentage toward the unlock threshold
- Given a user completes an activity that advances their progress, when they return to the Achievements screen, then the progress ring reflects the updated value
- Given a Blindeforbundet user is at 14 completed assignments, when they view the assignment-count badge, then the progress ring shows 14/15 and the threshold label is visible
- Given a badge is earned, when the Achievement Service updates the record, then the progress ring transitions to 100% and the badge animates to the unlocked state
- Given a badge has no numeric threshold (e.g. a one-time special award), when it is displayed, then no progress ring is shown and only the locked/unlocked state is indicated
Business Value
Showing progress toward the next milestone creates a feedback loop that drives continued engagement. For Blindeforbundet specifically, transparent assignment-count tracking reduces coordinator workload by allowing peer mentors to self-monitor their honorarium eligibility, preventing disputes and support requests around threshold calculations.
Components
- Achievements Screen ui
- Badge Widget ui
- Achievement Service service
- Badge Repository data