Welcome to week 7 of my capstone project at OSU. Let’s recap on our progress in building the UI for the Citizen Science app. We have talked about 6 screens for the mobile app, which means I have 3 more screens to blog about. In week 4, I blogged about the Registration screen and Login screen. Week 5’s blog talked about the Landing screen and the Join Project screen. Last week (6) was about the Project Explanation and Manage Observations Screen. Let’s finish up with the last 3 UIs for our mobile app.
Since we are not limiting the number of observation questions that the teacher would like their students to submit on the mobile app, our team decided to add the DisplayLabelsScreen to focus on displaying the questions and data type of the current project. This updated design made the Project Explanation screen cleaner as the UI focused on displaying the project’s image, project name, project description, “Read Project Requirements” button, and “Manage Observations” button. Clicking on the Read Project Requirements button routes user to the project questions screen. This screen consists of an app bar, a scrollable linear array of the List Tile widget as the primary content of the scaffold, and a floating action button. The app bar has the icon button with the back arrow that pops the user back to the Project Explanation screen when pressed. We used the ListTile to display each of the current project’s questions as the primary content of the list tile (title), and the question type as additional content (subtitle). We added padding on all sides and used the material design divider between the list tiles to visually differentiate each of the questions and their associate question types. We added the “Manage Observations” floating button to make it easier for the user to start working on their observations. Without this button on this screen, the user would need to go back to the Project Explanation screen and click on the “Manage Observations” button there.
The user can access the Add Observation screen by clicking on the Add Observation button on the Manage Observations screen. The focus of the Add Observation screen is to prompt the user to enter and submit their observations for the project. In other words, the screen displays the question and provides an appropriate input field to capture the user’s entry, and a submit button. We used the Form class to group multiple form field widgets [1]. We used the SingleChildScrollView so that the form can be scrolled vertically so that we can make sure all of the questions and input fields are being displayed in single-column format. We designed the UI to look like a card with the rounded upper left and upper right corners. We simplified the screen without the app bar and placed the close icon that allows the user to close the Add Observation screen if they want to exit out or discard their inputs. We set the screen’s background to our theme’s background color (turquoise) so we can emphasize the white-colored card. Our minimum viable product did not include a save button. The Add Observation card displays the text “Add Observation” and the eyes emoji at the top of our container. We show the current project’s name so that the user doesn’t have to remember which project they are working on. The Submit Fuschia-colored button is located at the bottom of the form. Clicking the submit button writes the user’s input data to our project’s Firestore data collection named ‘observations’. Upon successful completion, we pop the Add Observation screen off the navigator, which routes the user back to the Mange Observation screen. So that the user can easily add another observation, edit, or delete their existing observations on the project.
When the user clicks on the blue-colored edit icon on n the observation tile displayed on the Manage Observations screen, it routes the user to the Observation Details screen. The observation details screen has the same layout as the Add Observation screen. We bolded the text “Update My Observation” with a sparkle emoji to inform the user that they are about to Update their observation. The Submit button is now the “Submit Update” Fuschia-colored button located at the bottom of the screen. When the user clicks on the “Submit Update” button, we use the update() method to merge the data from the updated fields with the existing document data [2].
We now have a functional MVP that meets the requirements for a cross-platform mobile app that enables students to collect observations for a Citizen Science project. We kept our UI simple for all of our project’s required screens. There is still some more work to polish the UI, but we are ahead of schedule. Our team is working on one of our stretch goals for the app to support students in taking pictures and uploading pictures with their observations.
- Resources:
