Capture only when safely stopped.
Prompts discourage chasing or confrontation. Emergency help is a separate route, not a promise made by the reporting flow.
UI/UX design handout · Mobile app concept
Small actions.
Safer streets.
A concise guide to Roadwatch’s citizen-reporting experience and the separate reviewer workspace: the visual language, task structure, key components and safeguards behind the screens.
Safe captureClear evidenceVisible follow-up
Roadwatch · concept UI01 / Product principles
A report should have a next step.
The concept separates what a citizen submits, what a reviewer verifies and what an authority may later do. Each step needs its own plain-language status.
Context matters as much as media.
Incident type, location and time are reviewed alongside a photo. People can correct details before sharing.
Show progress without overclaiming.
Submission, review, evidence verification and authority action are distinct. A verified report does not imply enforcement.
02 / Visual foundations
Signal yellow. Quiet charcoal.
The restrained dark surfaces keep incident information legible; yellow marks the primary action, progress cue and important point of attention.
Charcoal
#111614Page canvasDeep surface
#242D27Cards and status rowsSignal yellow
#FFE052Primary actionsOff-white
#F4F6EFHigh-priority textDisplay / confident and directYour city.
Your watch.
Your watch.
Bold sans-serif headlines communicate the action quickly, even in a stressful context.
Interface / readable and specificReview your report
Short labels and explanatory copy clarify what will be shared and what happens next.
Token accuracyThese hex values and the Inter rendering on this page are presentation references sampled to match the supplied boards; confirm source-file tokens before production handoff.
03 / Typography
Direct, readable, actionable.
A bold sans-serif voice helps a report feel clear at a glance. Labels and status language do the detailed work.
Display / headingYour city. Your watch.
Body / instructionReview your report before you share it.
Metadata / statusSubmitted · Under review · Evidence verified
Font referenceInter is a presentation reference on this page. Verify the exact app font files and weights in the design source before implementation.
04 / Layout patterns
A compact system for decisive tasks.
The reporting flow repeats clear surfaces, compact controls and one dominant action. These examples describe the visual rhythm, not a production token specification.
Group, then separate.
Keep related evidence and incident details together; separate review and submission as distinct steps.
Repeat familiar shapes.
Use a small family of corners across cards, inputs and action controls rather than a new shape on each screen.
Make changes legible.
Pair every colour or status cue with words, especially for report review and authority handoff.
Reference, not final tokensSpacing bars, radii and state samples illustrate the pattern. Exact values and accessibility behaviour need source-file and device-level verification.
05 / Reusable patterns
Make the state visible.
The same compact controls recur through reporting, correction and follow-up. Labels carry meaning alongside colour.
One primary next step
Review report →Edit details
Yellow is reserved for the main action. A quieter secondary control keeps correction available without competing for attention.
Incident details
Violation type · Illegal parking
Incident location · Market Road
Fields should show the detail in plain words and allow correction before the final review.
Track the report
01 · Submitted02 · Under review03 · Evidence verified04 · Authority action pending
Step labels prevent a yellow badge or checkmark from implying more than the system knows.
06 / Information architecture
Two roles. Clear boundaries.
Citizen tasks stay separate from reviewer decisions, while report status connects both sides of the experience.
Home · My reports · Rewards · Help
Start a report, add details, review before sharing, track a submission and find safety guidance.
Queue · Evidence · Decision · Handoff
Inspect media and facts, request clarification, record the decision and leave a visible review history.
07 / Core user journey
Capture. Report. Follow.
A citizen can move from a safe capture to a traceable report. Corrections and failed submissions need routes back, not dead ends.
Stop safely→Capture evidence→Add context→Review sharing→Submit→Track status
08 / UX process
From questions to structure.
The boards document provisional themes, early layout choices and low-fidelity screen logic before the final treatment.
Evidence noteThe affinity themes are discussion-guide hypotheses, not completed interview findings. The supplied boards do not establish usability results or real-world road-safety impact.
09 / Screen inventory
One connected reporting system.
Eleven citizen screens and two reviewer views cover reporting, correction, tracking, rewards and an emergency-help entry point.
Start a report or review recent activity.
Prompt evidence collection only when stopped safely.
Add type, time and location with correction available.
Make the information being shared explicit.
Track receipt, review and later updates separately.
Inspect evidence and record a decision without implying enforcement.
10 / Visual direction
Urgency without ambiguity.
The charcoal-and-yellow direction is intentionally high contrast, but the interface should not make a submitted report look like a resolved incident.
Signal / decisive
Yellow leads the eye to the next safe action, the active step and the most important status detail.
Surface / restrained
Quiet dark surfaces keep evidence readable. Explanatory language carries uncertainty and separates verification from enforcement.
Concept directionThis visual treatment has not been validated through user testing or accessibility evaluation.
11 / Implementation & validation
Clarity is part of safety.
The next stage is task-based testing, not a claim of a launched service.
Can people share the right information safely?
Observe safe-capture comprehension, location correction and interpretation of the review-before-submit screen.
Does “verified” mean what it says?
Check whether people distinguish receipt, reviewer verification and any later authority action.
Do not promise enforcement.
Rewards, report data and street imagery in the concept are illustrative. Real deployment would require policy, operations and accessibility review.