Rebuilding Confusion Into a Guided Flow

Designing the flow for taking photos and extracting details from them was the hardest task. Users need to take many photos per document and per incident, which raised a concern on the development side: how to create a UI that was understandable for users but manageable on the backend.

The developer didn’t want to change the backend, so we agreed to solve it on the frontend. I proposed an upload-like box that lets users tap and choose between uploading from the gallery, taking photos with the phone camera, or canceling. Gallery upload is straightforward: select photos, upload, edit, submit. The in-app camera lets users shoot as many frames as needed, then review and edit them under “My Shots” before submitting.

Reviewing photos in “My Shots” needed research and thought. Staff use the app outside, at the incident, so everything has to be fast and easy, with no confusion or cognitive load. A carousel worked best: it’s familiar from social media, so everyone knows how to slide left or right to review and edit. Each edited photo is marked with an icon, so users can check their shots quickly and submit when done.

Each added vehicle needs three documents: license, registration and insurance, each with its own upload state shown on screen. Readability was crucial. In a limited environment — no custom UI elements, brand colors only — I used Material icons, color theory and visual hierarchy to design the upload states.

Another element that improved the flow was search. I hid the search bar behind a search icon: tapping it opens the bar with a date filter underneath and a blank screen. Typing shows incident results, which can be filtered by most recent or a custom date range.