This page contains the wireframes for the Spothole Citizen App (Mobile Variant)
Wireframes have been designed using Figma
This screen represents the Google Login Screen
It contains three main components. The background image (powered by Unsplash), the Google Sign In Button and the App Logo.
Users have the option to start their report by uploading an existing image of a pothole they clicked by browsing through the file system or by clicking a fresh photo using the inbuilt camera.
Once users have decided on the method for uploading, the image under consideration is validated by the python based deep learning model placed on the backend server to verify if the image uploaded contains one or more potholes.
If the media file contains one or mpre potholes, the users are presented with an option to share more details about their report.
Assuming that the uploaded image is validated successfully, users are given the option to select a location (either current (presented after seeking permission)) or to enter a custom location
After which users are asked to use a progress indicator to specify how severe the reported pothole(s) is(are) according to them.
Finally they are asked to give more details about their report through a required input text area componenet. Once the user has successfully submitted the report, they can now view the same using the My Complaints Screen.
On signing into the app with their Google Accounts, users are presented with the My Complaints Screen.
Existing users who have at least one report created can manage the status of their report and add additional comments to it or reply on comments from authorities using this section of the App.
Users can click on any of the reports to view the detailed description for the report and monitor any notifications or to communicate with the authority through the chat section.
This screen presents the user with an option to enter the source and destination location.
After which a map is presented to the user based on the source and destination location entered by the user. A direction route is rendered on the map for the user.
It displays the route with the marked potholes on the path which were approved by the authorities. It uses Google's Maps API to build the route.
Custom markers for potholes with status approved ranging on severity are presented to the user on the route if they are close to the route.
It determines if a pothole is assocaited with a path using the 'isLocationOnEdge' library function provided by Google Maps.
A legend explaining the different attributes of the map is presented to the user.
Also, there is a street view renderer for the users.
This screen can be used by any logged in user to monitor a route and the status for the different potholes on it and plan travel accordingly.
This screen contains the basic details (avatar, name, email address of the user)
It is then followed by a counter for reports with a status of either submitted, approved or completed.
Based on the above counters the user is assigned with a badge score indicating their contribution to the community.
This score is a weighted average score based on the counters mentioned above.
This score can later be used for rewarding the user. (TBD)