Submission Wizard
The 5-step report submission flow. Guides community members through photo capture, location entry, damage classification, infrastructure details, and review. Designed for one-handed mobile use in crisis conditions.
Preview — Step 1 (Photo)
Step 1 of 5 — Photo
JPEG, PNG, WebP or HEIC — max 10 MB
Optimizing your photo...
Compressing for faster upload
Photo optimized for fast upload
Tap to try again
Your photo will be stored securely and used only for damage assessment by UNDP.
Take a photo of the damage or select from your gallery.
Enter the address or describe the location of the damage.
Review Your Report
Please review the information below before submitting.
Preview — Step 3 (Damage Classification)
Step 1 of 5 — Photo
JPEG, PNG, WebP or HEIC — max 10 MB
Optimizing your photo...
Compressing for faster upload
Photo optimized for fast upload
Tap to try again
Your photo will be stored securely and used only for damage assessment by UNDP.
Take a photo of the damage or select from your gallery.
Enter the address or describe the location of the damage.
Review Your Report
Please review the information below before submitting.
Molecules & Atoms Composed
x-atoms.progress-step— Step indicator (dots + counter variants)x-molecules.form-field-group— Label + input wrapperx-atoms.photo-upload— Camera/gallery photo capturex-molecules.damage-classification— 3-level damage selectorx-molecules.infrastructure-type— Infrastructure checkbox gridx-molecules.crisis-type— Crisis category selectorx-atoms.button— Navigation and submit actions
Accessibility
- Uses
role="form"on the wizard container. - Each step has
role="group"with descriptivearia-label. - Navigation buttons have explicit aria-labels for screen readers.
- Progress indicator uses
role="progressbar"with current/max values.
Trauma-Informed Design
- "Submit what you have" ghost link on every step allows partial submissions under stress.
- Step-by-step reduces cognitive load — only one task per screen.
- Back button always available so users never feel trapped.
- Review step gives users a sense of control before final submission.