Role: Product designer (Contract)
Scope: Mobile App (React),User Flows, Information Architecture, UI
Project Status: Shipped
Constraints: Material UI Components Library Only
The Problem
A mobile app used by staff to document car-wreck incidents involving vehicle damage. Users could upload vehicle registration and insurance documents, then submit evidence packages to insurance companies. The app was already built but proved difficult to use. The user flow followed the database, not the human usage logic, which was: create an incident, enter details, upload a license, and take photos of the incident.
Buttons were grouped inconsistently, with no clear order, and screens offered no guidance on where to tap and what came next. Staff used the app on scene, from phone or tablet. I joined to fix the UI, making it usable without tampering with the backend or component library.
Slide the button to see how the screens improved after the redesigning.
My Role
My role was to propose design solutions, which the developer would then approve. I was brought in to improve the UI and user flow of an existing app. I had full creative control to design, test, and present my solutions to the project manager and developer for discussion.
The Multi-Photo Capture Loop
Designing the flow for taking photos and extracting details from them was the most challenging task. Users need to take many photos per document and per incident. All these created a concern on the development side about how to create a visual UI that was understandable for the user but manageable on the backend development.
The developer didn't want to interfere with the backend, instead, we both agreed to bring a solution from the frontend side. So to fix the problem, I proposed an upload-like box that allowed users to tap and choose between uploading from the gallery, taking photos with the phone camera, or canceling. The upload from the gallery was straightforward: you open the gallery, select the photos, and upload them. Then, edit them and submit. The in-app camera allowed users shoot as many frames as needed. They reviewed and edited taken photos under "My Shots," then pressed submit.
Reviewing photos in "My Shots" was another challenge that required research and thought. The app is used by staff, outside in the incident place. Everything should work fast and easy, without avoiding any confusion or cognitive loading. A carousel proved a good choice, working well to review and edit photos. A carousel is a popular feature found a lot through social media. That means everyone knows how it works. It is intuitive; you slide left or right to review and edit photos. Each edited photo was marked with an icon to tell the user it was already edited. The user could check them quickly sliding left or right and then press submit when they were done.
The logic design flow of the multi-photo capture
Working Inside the System
The added vehicles required three documents to be uploaded: License, Registration, and Insurance. Each of these documents had its own uploading state that was visually displayed on the screen. Readability was the crucial attribute while designing the documents' uploading states. To achieve that in a limited environment, it was required to avoid any customized UI elements and everything had to stay within their brand colors. I used material icons, color theory, and visual hierarchy to design the uploading states.
Another UI design element that enriched the overall flow was the search bar. I proposed a simple concept, yet practical for users. I hid the search bar behind a search icon. Tapping the search icon opened the search bar with the date filter underneath it and a blank screen. Typing the search bar showed incident results. You could filter the results based on what was added recently, or set custom date ranges.
Where It Stands
The product is shipped and already developed. Because it is for internal use, I am not able to download the app and test the app. However, the client shared a good review:
"You did a great job and we are very greateful for it. Your concept for license photo capture and submission saved to us a good developing time while maintaining a functional easy to follow user flow!"
Screens of the photo capture flow
Left the "Incident Summaries" empty state - Center the calendar for picking the date range to apply to the search filter - On the "Incident Details" in empty state